サイドメニューに角丸の枠画像をつける・(3-8) サイドバー メニューのカスタマイズ

サイドメニューに角丸の枠画像をつける・(3-8) サイドバー メニューのカスタマイズ

アメブロカスタマイズ サイドバーのカスタマイズ

このコラムは連載コラムです。

サイドメニューに角丸の枠を設定するカスタマイズ

今回はサイドメニューを角丸の枠線にするカスタマイズを解説します。

ゴールイメージは?

サイドメニューに角丸の枠をつけるといわれてもどんなイメージなのかが分かりませんよね♪

ですので、枠を設置したイメージを以下に掲載しましたのでゴールのイメージをつかんでください。

image-11079581392-11614236254

設置手順

今回のコラムは、ひとつひとつのスタイルシートを解説するとそれだけで、10回分くらいのコラムに・・・なりそうなので・・・

あえて細かい解説はしないで、手順メインに解説したいと思います。手順は4つになります。

① 角丸画像を用意する
② サイドメニュー部分のコードを全て今回提供するコードに書き換え
③ ①の角丸画像のアップロード
④ ③でアップロードした画像を②の該当箇所にコピー

という流れになります。

では手順を順番を追って解説します。
① 角丸画像を用意する

いきなり画像を用意しろと言われてもないと思いますので、サンプル画像を私の方でご用意しました。

もちろん2カラムでも3カラムでも対応できるようにしてあります。
とりあえずこの画像を使う場合は、以下の枠の中の文字リンクをクリックして画像をダウンロードしてから次の手順に進んでくださいね♪

3カラム、2カラム両対応角丸枠画像をダウンロードする
※この画像をダウンロードする際は、当ブログを紹介していただけるとうれしいです♪

サンプル画像の構成・・・サンプル画像はzipファイルとなっていますので、ダウンロード後、まず解凍をしてください。すると二つのフォルダーが格納されています。ひとつは幅が180pxの画像。もうひとつは幅が300pxの画像になります。

そして各フォルダーの中には、「上」「中」「下」の三枚の画像が入っていますので、これを以下のスタイルシートの該当箇所に、はめていく形になります。

② サイドメニュー部分のコードを全て今回提供するコードに書き換え

次はあなたのCSS編集用画面を開いていただき、その中の「(3-8) サイドバー メニュー」の箇所を以下のコードをコピーしてまるまる書き換えます。

/* (3-8) サイドバー メニュー
——————————————–*/
/* skinMenuサイドバー メニューのエリア */
.skinMenu{
/* 注 ベースのcssに margin-bottom の記述有り */
background:none;/* ←サイドメニューに背景を敷きたいとき */
}

/*180px画像設定ここから↓ 3カラムのときのみ設定*/

/*①サイド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画像設定ここから↓ 2カラム・3カラム両方で必ず設定*/

/*④サイド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をコピーペーストします。

2カラムの場合・・・2カラムの場合は、サイドバーは300pxの太いものしかありません。画像設定は上記スタイルシートの3か所のみとなります。緑の文字で④~⑥までに、あなたがアップロードした300pxの幅の画像のURLをコピーして、それぞれの赤字の部分に貼り付けてください。

3カラムの場合・・・3カラムの場合はサイドバーは300pxの太いものと、180pxの細いものがあるので、両方の幅の画像を用意する必要があります。緑の文字の①~⑥までのそれぞれに180pxの画像と300pxの画像をコピーして貼り付けてください。

これで設定は完了です♪

画像作成のヒント

オリジナル画像を作る場合は以下の画像サイズをもとに作成していただければ、このスタイルシートの設定の変更なしに、オリジナル画像背景を使うことができますので参考にしてみてください。

180pxの画像

上・・・180px×40px
中・・・180px×2px
下・・・180px×10px

300pxの画像

上・・・300px×40px
中・・・300px×2px
下・・・300px×10px

最後までありがとうございました。

 

こちらを押してアメブロカスタマイズガイドを見てみる

>>ページのトップへ

おすすめ

無料メルマガ
optin
自分で作るアメブロカスタマイズ

« »

コメントは受け付けていません。