サイドメニュータイトルを画像にする・(3-8) サイドバー メニューのアメブロカスタマイズ
>>こちらもどうぞ
このコラムは連載コラムです。現在はCSS編集用画面の中の「(3-8) サイドバー メニュー」エリアのカスタマイズの解説を行っています。今回でこのエリアは最後となります。前回までの記事はこのコラムの一番下でも参考になれます。
今回のコラムは・・・
サイドメニュータイトルを画像に置き換えよう
今回はサイドメニューのタイトルを画像にするカスタマイズを解説します。
サイドメニューは、ブログ読者の方があなたのブログの他の記事が読みたいな・・・と思ったときに目が行く場所です。
サイドメニューのタイトルをデザインチックにすることで、読者のあなたのブログへのアクセスのしやすさはより一層ますことでしょう。今回はそんなサイドメニューのカスタマイズ方法を紹介します。
ゴールイメージは?
サイドメニュータイトルを画像にするといわれてもどんなイメージなのかが分かりませんよね♪
ですので、サイドメニュータイトルを画像に置き換えたイメージを以下に掲載しましたのでゴールのイメージをつかんでください。
設置手順
前回は角丸の枠の解説も細かくはできませんでしたが・・・今回のコラムも・・・
あえて細かい解説はしないで、手順メインに解説したいと思います。手順は4つになります。
① サイドメニュータイトル画像を用意する
② サイドメニュー部分のコードの下に今回提供するコードを追記
③ ①のサイドメニュータイトルの画像をアップロード
④ ③でアップロードした画像を②の該当箇所にコピー
という流れになります。
① サイドメニュータイトル画像を用意する
いきなり画像を用意しろと言われてもないと思いますので、ない方の為にサンプル画像を私の方でご用意しました。
もちろん2カラムでも3カラムでも対応できるようにしてあります。
とりあえずこの画像を使う場合は、以下の枠の中の文字リンクをクリックして画像をダウンロードしてから次の手順に進んでくださいね♪
※この画像をダウンロードする際は、当ブログを紹介していただけるとうれしいです♪
サンプル画像の構成・・・サンプル画像はzipファイルとなっていますので、ダウンロード後、まず解凍をしてください。すると二つのフォルダーが格納されています。ひとつは幅が180pxの画像。もうひとつは幅が300pxの画像になります。
そして各フォルダーの中には、全てのサイドメニューのタイトル画像が入っていますので確認してみてください。
② サイドメニュー部分のコードの下に今回提供するコードを追記
次はあなたのCSS編集用画面を開いていただき、その中の「(3-8) サイドバー メニュー」の箇所に以下のコードをコピーして追記します。赤字が追記箇所。以下のコードを全てコピーして、「(3-8) サイドバー メニュー」を書き換えてしまっても問題はありません。
/* (3-8) サイドバー メニュー
--------------------------------------------*/
/* skinMenu サイドバー メニューのエリア */
.skinMenu{
/* 注 ベースのcssに margin-bottom の記述有り */
background:#f7f7f7;/* ←サイドメニューに背景を敷きたいとき */
}
.skinMenu2{}
/* skinMenuHeader サイドメニュータイトルエリア */
.skinMenuHeader{
padding:5px 10px;
background:#e4e4e4;/* ←サイドメニューのタイトルに背景を敷きたいとき */
}
/* skinMenuBody サイドメニュー本文エリア */
.skinMenuBody{
margin:10px;
padding:10px;
background:#ffffff;/* ←サイドメニューの本文に背景を敷きたいとき */
}
/*プロフィール タイトル 背景の設定*/
.skinMenu.profileMenu .skinMenuHeader{background-color:#ffffff;
background-image:url(あなたのアップロードした画像のURLをここにコピーペースト);
background-repeat:no-repeat;
padding-bottom:20px;
text-indent:-9999px;
}
/*このブログの読者 タイトル 背景の設定*/
.skinMenu.readerMenu .skinMenuHeader{background-color:#ffffff;
background-image:url(あなたのアップロードした画像のURLをここにコピーペースト);
background-repeat:no-repeat;
padding-bottom:20px;
text-indent:-9999px;
}
/*ブックマーク タイトル 背景の設定*/
.skinMenu.bookmarkMenu .skinMenuHeader{background-color:#ffffff;
background-image:url(あなたのアップロードした画像のURLをここにコピーペースト);
background-repeat:no-repeat;
padding-bottom:20px;
text-indent:-9999px;
}
/*お気に入り タイトル 背景の設定*/
.skinMenu.favoriteMenu .skinMenuHeader{background-color:#ffffff;
background-image:url(あなたのアップロードした画像のURLをここにコピーペースト);
background-repeat:no-repeat;
padding-bottom:20px;
text-indent:-9999px;
}
/*テーマ タイトル 背景の設定*/
.skinMenu.themeMenu .skinMenuHeader{background-color:#ffffff;
background-image:url(あなたのアップロードした画像のURLをここにコピーペースト);
background-repeat:no-repeat;
padding-bottom:20px;
text-indent:-9999px;
}
/*カレンダー タイトル 背景の設定*/
.skinMenu.calendarMenu .skinMenuHeader{background-color:#ffffff;
background-image:url(あなたのアップロードした画像のURLをここにコピーペースト);
background-repeat:no-repeat;
padding-bottom:20px;
text-indent:-9999px;
}
/*月別 タイトル 背景の設定*/
.skinMenu.archiveMenu .skinMenuHeader{background-color:#ffffff;
background-image:url(あなたのアップロードした画像のURLをここにコピーペースト);
background-repeat:no-repeat;
padding-bottom:20px;
text-indent:-9999px;
}
/*最新の記事 タイトル 背景の設定*/
.skinMenu.recentEntriesMenu .skinMenuHeader{background-color:#ffffff;
background-image:url(あなたのアップロードした画像のURLをここにコピーペースト);
background-repeat:no-repeat;
padding-bottom:20px;
text-indent:-9999px;
}
/*ランキング タイトル 背景の設定*/
.skinMenu.rankingMenu .skinMenuHeader{background-color:#ffffff;
background-image:url(あなたのアップロードした画像のURLをここにコピーペースト);
background-repeat:no-repeat;
padding-bottom:20px;
text-indent:-9999px;
}
③ ①のサイドメニュータイトル画像のアップロード
ダウンロードした画像を全てアメブロの画像フォルダーにアップロードします。
④ ③でアップロードした画像を②の該当箇所にコピー
「あなたのアップロードした画像のURLをここにコピーペースト」という部分に該当するタイトル画像のURLを全てコピーペーストします。
例:プロフィールの部分を抜粋
.skinMenu.profileMenu .skinMenuHeader{background-color:#ffffff;
background-image:url(あなたがアップロードした プロフィールタイトル 画像のURLをここにコピーペースト);
background-repeat:no-repeat;
padding-bottom:20px;
text-indent:-9999px;
}
上記の 「あなたがアップロードした プロフィールタイトル 画像のURLをここにコピーペースト」
という部分に、あなたがアップロードした画像のURLをコピーペーストします。
あなたのカラム構造によって、「180px」のタイトル画像か、「300px」のタイトル画像かは使い分けてください。
2カラムの場合・・・2カラムの場合は、サイドバーは300pxの太いものしかありません。300pxのタイトル画像を上記スタイルシートの該当箇所にコピーペーストしてください。
3カラムの場合・・・3カラムの場合はサイドバーは300pxの太いものと、180pxの細いものがあるので少々やっかいです。
まず、紙と鉛筆を用意していただき、サイドメニューの太い幅(300px)の方と、細い幅(180px)の方のどちらにあなたの設定したサイドメニューのタイトルがあるかを書きとめてください。
これをもとに300pxの方には、300pxのフォルダーに入っている画像を設定し、180pxの方には180pxのフォルダーに入っているタイトル画像を設定するようにしてください。
これで設定は完了です♪
画像作成のヒント
オリジナル画像を作る場合は以下の画像サイズをもとに作成していただければ、このスタイルシートの設定の変更なしに、オリジナル画像背景を使うことができますので参考にしてみてください。
180pxの画像
幅180px 高さ40px
300pxの画像
幅300px 高さ40px
- (3-8) サイドバー メニューのカスタマイズ①・基本理論編
サイドメニューの構造を理解しよう
- (3-8) サイドバー メニューのカスタマイズ②・背景色のカスタマイズ
サイドメニューに背景色を設定しよう
- (3-8) サイドバー メニューのカスタマイズ③・背景色のカスタマイズ(解説編その1)
サイドメニューに背景色を設定しよう(解説編その1)
- (3-8) サイドバー メニューのカスタマイズ④・背景色のカスタマイズ(解説編その2)
サイドメニューに背景色を設定しよう(解説編その2)、と実践編
- (3-8) サイドバー メニューのカスタマイズ⑤・サイドメニュータイトルの文字のカスタマイズ
サイドメニューのタイトル文字のカスタマイズ
- (3-8) サイドバー メニューのカスタマイズ⑥・サイドメニューに角丸の枠画像をつけるカスタマイズ
サイドメニューに角丸の枠をつけるカスタマイズ
最後までありがとうございました。