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

ブログ画像一覧を見る

このブログをフォローする

<< 前のページへ最新 | 176 | 177 | 178 | 179 | 180 | 最初次のページへ >>

本日より新しいランキングになります・・・

みなさま・・・ジャンルは設定しましたか？

まだの方は

アメブロの設定 → ランキング・ジャンルで選択してください
わたしは・・・ピッタリのがありませんでしたので
インターネット／アメブロ批評にしてみました

今日から・・・って～ことは・・・・

今日は記事をいっぱい書いて・・・　

アクセス数を稼いで・・・

先行逃げきり！　を狙ってください

アメーバピグスタッフブログサイドバー1

アメーバピグスタッフブログ

http://ameblo.jp/pigg-staff/

このブログを教科書にして勉強します・・・・？

ネタバレって～ことで・・・

まずはリクエストのありましたサイドバー・・・・

やったと思っていましたが・・・

個人的にプチメとかで説明しただけだったようで・・・

↓こんなんのにしちゃいます・・・

画像を3つ作ります・・・・・

上の画像

中の画像

下の画像

やり方はいろいろあります・・・

わたしのブログの場合は画像は2つしか使っていませんが

今回は・・参考ブログの通りに3つの画像で説明します・・・

CSSの最後に・・・

h4.menu_title{/*メニュタイトル*/
background-image:url(上画像のURL);
background-repeat:no-repeat;/*繰り返しなし*/
background-position:left top;/*表示位置　左上を基準*/
margin:0;
padding:3px 0 3px 10px;/*上3px　右0px　下3px　左10px*/
color: #ffffff;/*文字色*/
font-size:1.17em;/*文字サイズを1.17倍に*/
font-weight: normal;/*文字の太さを標準*/
text-align:left;/*左寄せ*/
letter-spacing:1px;/*文字の間隔注1*/
border:none;/*タイトル下の点線を消す*/
}
div.menu_frame{
background-image:url(中画像のURL);
background-repeat:repeat-y;/*縦に繰り返し*/
background-position:left top;/*表示位置　左上を基準*/
padding:8px 0 0;/*上8px 左右0px 下0px*/
text-align:left;/*左寄せ*/
}
div.mainMenu{
background-image:url(下画像のURL);
background-repeat:no-repeat;/*繰り返しなし*/
background-position:left bottom;/*表示位置　左下を基準*/
margin:0 0 8px;/*注2*/
padding:0 0 12px;/*上0px 左右0px 下12px*/
font-size:0.91em;/*文字サイズを0.91倍*/
line-height:1.3;/*行間隔*/
}
#ameblo.mainMenu,#ameblo .menu_frame,
#rss.mainMenu,#rss .menu_frame,
#freespace.mainMenu,#freespace .menu_frame,.plugin .menu_frame{
background-image:none !important;/*注3*/
}