アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦! -254ページ目

CSS 今度はメッセージぼたんです・・・

今度は・・・

メッセージぼたんをつけちゃいます


また好みの画像をダウンドードして画像フォルダにアップ

画像のURLをチェックしておきます

もちろん自分で画像を作った方がベストです


                 


                  




フリープラグインに書く場合・・・


<div id="topmsg"><a href="javascript;" onclick="window.open('http://msg.ameba.jp/popupSendMessageInput.do?toAmebaId=あなたのID','_blank','resizable=yes,scrollbars=yes,width=430,height=675');return false;" class="linkMsg" title="メッセージを送る"><img src="画像のURL" border="0" /></a></div>



フリースペースに書く場合・・・・


<div id="topmsg"><a href="http://msg.ameba.jp/popupSendMessageInput.do?toAmebaId=あなたのID" target="_blank" ><img src="画像のURL"></a></div>


フリープラグインとフリースペースに書く場合、違いがあります・・・

ボタンを押したときの新しい画面の開き方にも違いがあります・・・

タイトル下のボタンはフリープラグインの場合

ブログ右の付箋紙のようなボタンはフリースペースです

クリックして新しい画面の開き方の違いを確認ください


フリープラグインかフリースペースのどちらかに書いてください・・・両方には書かないで下さい


CSSに貼り付けてください

div#topmsg{
position:absolute;
top:0px;
right:0px;
z-index:100;
}


top:0px; right:0px; の位置の移動は

ブログパーツじゃないよ CSSだよ ペタぼたん  を参考にしてください

またペタぼたん、メニュー等をまだ設置されていない場合は

↓こちらもCSSに加えてください(すでに書かれてあれば必要ありません)


#frame {
position: relative;
}


アメーバサーチだけじゃなかった・・・・

先日・・・・

アメーバサーチって・・・・

アメーバサーチで検索してブログを見ると

記事下広告の件数が増えるって記事にしましたが・・・・




アメーバサーチだけじゃなかった


yahoo! も MSNも Google も


Google AdSenseの広告だから Google はまだわかるけど yahoo! MSNがなぜ?




goo、BIGLOBEサーチ、niftyの@search など他の検索から入った場合は普通に3件でした・・・・

不可解・・・・?

CSS スクロールバー・・3 ついでに・・・

リク記事です・・・・・

というより・・・・・

質問が多いので

毎回答えるのが面倒になっただけです・・・・






/*メッセージスクロール*/
#message{
height:100px;
overflow:auto;

}






/*コメント欄スクロール*/
#comment_module{
height:150px ;
overflow:auto ;
}





/*最近の記事スクロール*/
#recent_entries ul{
height:100px;
overflow:auto;
}





/*アーカイブスクロール*/
#archives ul{
height:80px;
overflow:auto;
}



/*このブログの読者スクロール*/
#reader ul{
height:100px;
overflow:auto;
}



/*ブログテーマ一覧スクロール*/
#theme_list ul{
height:80px;
overflow:auto;
}





/*ブックマークスクロール*/
#bookmark ul{
height:80px;
overflow:auto;
}




/*お気に入りブログスクロール*/
#favorite ul{
height:100px;
overflow:auto;
}





/*最近のコメントスクロール*/
#recent_comment ul{
height:100px;
overflow:auto;
}






/*ランキングスクロール*/
#ranking .menu_frame{
height:50px;
overflow:auto;
}





/*アメブロCMスクロール*/
#ameblo #sideTextAd{
height:100px;
overflow:auto;
}


スキンによってはこの周りに枠が付いています

枠線の色を変えるには・・・


#ameblo{
border:1px solid #ff00ff;
}


枠線を消すには・・・

#ameblo{
border:none;
}



もし・・・フリースペース全体をスクロールさせるには・・
(フリースペースの1部分だけスクロールさせるにはスクロールバー ・・1 )

#freespace{
height:100px;
overflow:auto;
}



※height:100px; の数字で表示される長さを決定します

 内容が長さより短い場合はスクロールバーはあらわれません


※スクロールバーの色等は↓を参考にして下さい(表示されるのはIEのみです)

スクロールバー ・・1
スクロールバー ・・2


※padding:10px; とか入れて内部にスキマを作ることも


padding:10px; 上下左右に10pxの余裕


padding 無しの場合


+++++++++++++++++++++++++

記入例


/*ブログテーマ一覧スクロール*/
#theme_list ul{
height:80px ;
overflow:auto ;
padding:10px;/* 内部の余裕 */
background-color:#ffccff; /* 背景色 */
scrollbar-face-color: #ffccff; /* 1 表面の色 */
scrollbar-track-color: #ffffff; /* 2 バーの背景の色 */
scrollbar-arrow-color: #ffffff; /* 3 矢印の色 */
scrollbar-highlight-color: #ffffff;/* 4 ハイライトの色 */
scrollbar-3dlight-color: #ffffff;/* 5 外側のハイライトの色 */
scrollbar-shadow-color: #ffffff;/* 6 影の色 */
scrollbar-darkshadow-color: #ffffff;/* 7 外側の影の色 */
}


+++++++++++++++++++++++++



※ついでに・・・質問が多いセンターリングとか文字の色の変更とか・・・・



それぞれセンターリングさせたいところに

text-align:center;/* 中央寄せ */

を、入れてください ・・・ それだけ ・・・・


文字の色を変えたい場合は

color:#ff0099;/* 文字色 */

って文字色を指定するだけ


後は順番は関係なく組み合わせれば出来上がり・・・・


たとえばメッセージボードの場合・・・・



/*メッセージボード中央*/
#message{
text-align:center;/* 中央寄せ */
}


/*メッセージボード*/
#message{
color:#ff0099;/* 文字色 */
}


/*メッセージボード*/
#message{
color:#ff0000;/* 文字色 */
text-align:center;/* 中央寄せ */
}


/*メッセージスクロール&中央*/
#message{
height:100px;
overflow:auto;/* スクロール */
text-align:center;/* 中央寄せ */
}


他にも・・・・

文字サイズを変えたければ・・・・ font-size:12px;/* 文字色 */

背景に色を付けたければ・・・・・ background-color:#ffcccc;/* 背景色 */

背景を画像にするのなら・・・  background:url(画像のURL);/* 背景画像 */

を、入れたりしてね・・・・・・





記事部分を忘れていました・・・m(_ _)m


日付、タイトル、テーマ、記事をまとめて指定する場合は


.entry {
/*ココにCSSの設定*/
}


たとえばスクロールでしたら

.entry {
height:250px;
overflow:auto;
}



日付だけ


.entry .date {
/*ココにCSSの設定*/
}



タイトルだけ


.entry .title {
/*ココにCSSの設定*/
}



テーマだけ


.entry .theme {
/*ココにCSSの設定*/
}



記事だけ


.entry .contents {
/*ココにCSSの設定*/
}



記事URL コメント トラバ


.entry .foot {
/*ココにCSSの設定*/
}




スクロールバー ・・1

スクロールバー ・・2