サイドメニューに角丸の枠画像をつける・(3-8) サイドバー メニューのカスタマイズ
このコラムは連載コラムです。
サイドメニューに角丸の枠を設定するカスタマイズ
今回はサイドメニューを角丸の枠線にするカスタマイズを解説します。
ゴールイメージは？
サイドメニューに角丸の枠をつけるといわれてもどんなイメージなのかが分かりませんよね♪
ですので、枠を設置したイメージを以下に掲載しましたのでゴールのイメージをつかんでください。
設置手順
今回のコラムは、ひとつひとつのスタイルシートを解説するとそれだけで、10回分くらいのコラムに・・・なりそうなので・・・
あえて細かい解説はしないで、手順メインに解説したいと思います。手順は４つになります。
① 角丸画像を用意する
② サイドメニュー部分のコードを全て今回提供するコードに書き換え
③ ①の角丸画像のアップロード
④ ③でアップロードした画像を②の該当箇所にコピー
という流れになります。
① 角丸画像を用意する
いきなり画像を用意しろと言われてもないと思いますので、サンプル画像を私の方でご用意しました。
もちろん２カラムでも３カラムでも対応できるようにしてあります。
とりあえずこの画像を使う場合は、以下の枠の中の文字リンクをクリックして画像をダウンロードしてから次の手順に進んでくださいね♪
※この画像をダウンロードする際は、当ブログを紹介していただけるとうれしいです♪
サンプル画像の構成・・・サンプル画像はzipファイルとなっていますので、ダウンロード後、まず解凍をしてください。すると二つのフォルダーが格納されています。ひとつは幅が180pxの画像。もうひとつは幅が300pxの画像になります。
そして各フォルダーの中には、「上」「中」「下」の三枚の画像が入っていますので、これを以下のスタイルシートの該当箇所に、はめていく形になります。
② サイドメニュー部分のコードを全て今回提供するコードに書き換え
次はあなたのCSS編集用画面を開いていただき、その中の「(3-8) サイドバー メニュー」の箇所を以下のコードをコピーしてまるまる書き換えます。
/* (3-8) サイドバー メニュー
--------------------------------------------*/
/* skinMenuサイドバー メニューのエリア */
.skinMenu{
/* 注 ベースのcssに margin-bottom の記述有り */
background:none;/* ←サイドメニューに背景を敷きたいとき */
}
/*180px画像設定ここから↓ ３カラムのときのみ設定*/
/*①サイド180px部分 下画像 設定箇所*/
.skinSubB .skinMenu2{
padding-bottom:10px;
background-image:url(あなたがアップロードした「サイド180px部分 下画像」のURLをコピー);
background-repeat:no-repeat;
background-position:left bottom;
}
/*②サイド180px部分 上画像 設定箇所*/
.skinSubB .skinMenuHeader{background:none;
padding:10px 10px;
background-image:url(あなたがアップロードした「サイド180px部分 上画像」のURLをコピー);
background-position:left top;
background-repeat:no-repeat;
}
/*③サイド180px部分 中画像 設定箇所*/
.skinSubB .skinMenuBody{
margin:0px;
padding:10px;
background-image:url(あなたがアップロードした「サイド180px部分 中画像」のURLをコピー);
background-repeat:repeat-y;
}
/*180px画像設定ここまで↑*/
/*300px画像設定ここから↓ ２カラム・３カラム両方で必ず設定*/
/*④サイド300px部分 下画像 設定箇所*/
.skinSubA .skinMenu2{
padding-bottom:10px;
background-image:url(あなたがアップロードした「サイド300px部分 下画像」のURLをコピー);
background-repeat:no-repeat;
background-position:left bottom;
}
/*⑤サイド300px部分 上画像 設定箇所*/
.skinSubA .skinMenuHeader{background:none;
padding:10px 10px;
background-image:url(あなたがアップロードした「サイド300px部分 上画像」のURLをコピー);
background-position:left top;
background-repeat:no-repeat;
}
/*⑥サイド300px部分 中画像 設定箇所*/
.skinSubA .skinMenuBody{
margin:0px;
padding:10px;
background-image:url(あなたがアップロードした「サイド300px部分 中画像」のURLをコピー);
background-repeat:repeat-y;
}
③ ①の角丸画像のアップロード
ダウンロードした画像を全てアメブロの画像フォルダーにアップロードします。
④ ③でアップロードした画像を②の該当箇所にコピー
赤字の部分に該当するURLをコピーペーストします。
２カラムの場合・・・２カラムの場合は、サイドバーは300pxの太いものしかありません。画像設定は上記スタイルシートの３か所のみとなります。緑の文字で④～⑥までに、あなたがアップロードした３００pxの幅の画像のURLをコピーして、それぞれの赤字の部分に貼り付けてください。
３カラムの場合・・・３カラムの場合はサイドバーは300pxの太いものと、180pxの細いものがあるので、両方の幅の画像を用意する必要があります。緑の文字の①～⑥までのそれぞれに１８０ｐｘの画像と３００ｐｘの画像をコピーして貼り付けてください。
これで設定は完了です♪
画像作成のヒント
オリジナル画像を作る場合は以下の画像サイズをもとに作成していただければ、このスタイルシートの設定の変更なしに、オリジナル画像背景を使うことができますので参考にしてみてください。
180pxの画像
上・・・180px×40px
中・・・180px×2px
下・・・180px×10px
300pxの画像
上・・・300px×40px
中・・・300px×2px
下・・・300px×10px
最後までありがとうございました。
おすすめ
