1. TOP
  2. アメブロカスタマイズ
  3. サイドメニュータイトルを画像にする・(3-8) サイドバー メニューのアメブロカスタマイズ

サイドメニュータイトルを画像にする・(3-8) サイドバー メニューのアメブロカスタマイズ

お知らせ(2016年3月8日追記) 2016年3月より、「CSS編集用デザイン」テンプレートが新たに3つ追加されました。そちらのカスタマイズでは以下のカスタマイズが使えないものも多いため、「新CSS編集用デザイン徹底解剖」と題して新たに目次を設けてカスタマイズの方法を公開中です。2016年3月前の従来のCSS編集用デザインについてのカスタマイズは、当ページでカスタマイズができますので、ご利用状況に応じて使い分けてください。 新CSS編集用デザインでのカスタマイズがご希望のかたは、こちらの目次をご覧くださいませ→新CSS編集用デザイン目次

>>こちらもどうぞ

このコラムは連載コラムです。現在はCSS編集用画面の中の「(3-8) サイドバー メニュー」エリアのカスタマイズの解説を行っています。今回でこのエリアは最後となります。前回までの記事はこのコラムの一番下でも参考になれます。

今回のコラムは・・・

サイドメニュータイトルを画像に置き換えよう

今回はサイドメニューのタイトルを画像にするカスタマイズを解説します。

サイドメニューは、ブログ読者の方があなたのブログの他の記事が読みたいな・・・と思ったときに目が行く場所です。

サイドメニューのタイトルをデザインチックにすることで、読者のあなたのブログへのアクセスのしやすさはより一層ますことでしょう。今回はそんなサイドメニューのカスタマイズ方法を紹介します。

ゴールイメージは?

サイドメニュータイトルを画像にするといわれてもどんなイメージなのかが分かりませんよね♪

ですので、サイドメニュータイトルを画像に置き換えたイメージを以下に掲載しましたのでゴールのイメージをつかんでください。

image-11083698960-11621980521

設置手順

前回は角丸の枠の解説も細かくはできませんでしたが・・・今回のコラムも・・・

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

① サイドメニュータイトル画像を用意する
② サイドメニュー部分のコードの下に今回提供するコードを追記
③ ①のサイドメニュータイトルの画像をアップロード
④ ③でアップロードした画像を②の該当箇所にコピー

という流れになります。

では手順を順番を追って解説します。
① サイドメニュータイトル画像を用意する

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

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

3カラム、2カラム両対応サイドメニュータイトル画像をダウンロードする
※この画像をダウンロードする際は、当ブログを紹介していただけるとうれしいです♪

サンプル画像の構成・・・サンプル画像は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

 

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

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

>>ページのトップへ

おすすめ

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