サイドバーのメニュータイトルをカスタマイズ

今回は、サイドバーにあるメニュータイトルをカスタマイズする方法をご紹介します。

まず、
サイドバーのメニュータイトルとは？

まぁ、見て頂ければ
すぐお解りになると思いますが、
→の部分の事です。

現在、このブログでは、
　・背景色
　・タイトル文字の色

を指定して、表示しております。
まぁ、無難な表示方法ですね

でも、今回のカスタマイズでは、
この背景をあなたのお好みの画像に変更することも出来るのです。

この部分は
結構手抜きにしがちなのですが、
デザイン的にまとめるためには
カスタマイズ必須項目でもあったりします。

このメニュータイトルをカスタマイズすることにより、

アメブロ全体の
　カラーバランスを整える。
　視認性を良くする。

といった効果があります。

では、
サイドバーにあるメニュータイトルのカスタマイズ

①背景画像を指定する場合は、その画像をあなたのPCに保存して、
【画像フォルダ】にアップロードしておきましょう。

②以下のタグを【CSS編集画面】に追加します。
　　CSS編集画面でタグを追加する方法 はこちらです。

『追加するタグ』はこちらから。

↓↓↓この下から↓↓↓
/*サイドバーメニュータイトル*/
.menu_title {
color: #ffffff; /* タイトル文字色 */
font-size: 12px; /* タイトル文字サイズ */
padding-top: 12px;
}
.menu_title {
border-bottom: none;
background-image: url(背景画像にする場合はここに入力);
background-position: center bottom;
background-repeat: no-repeat;
background-color: #205080; /* 背景色 */
}
/*サイドバーメニュータイトル・ここまで*/
↑↑↑この上まで↑↑↑

赤文字の部分にあなたのお好みの『画像のURL』を貼り付けることにより、あなたの好みのスタイルに変更できます。

青文字の部分にあなたのお好みの色コードを指定してください。
　色を変更する方法 はこちらです。

緑文字の部分で文字サイズを変更できます。数字を変更してみてください。
　文字サイズを変更する方法 はこちらです。

<< 関連記事 >>
アメブロ ヘッダー画像の変更カスタマイズ
サイドバーのリンクにリストマークをつけて分かりやすくするカスタマイズ
読者登録 画像の変更 カスタマイズ
CSS編集をするための手順

Greased Lightbox

→ ← + - ↻

読み込み中

クリックでキャンセルします

画像が存在しません

Greased Lightbox

→ ← + - ↻

読み込み中

クリックでキャンセルします

画像が存在しません

読者登録 画像の変更 カスタマイズ

サイドバーにある読者登録用のボタン画像の変更方法をご紹介します。

もともとあるサイドバーの読者登録用のボタン画像ってシンプルなのはいいのですが、
スキンを変更してもどれも似たような感じ…

だったら、変更してしまいましょう。

読者登録用のボタン画像って？
このブログでいったら、



これです。（このボタン画像もデザイン的にちょっと…汗。なので近々作成して変更する予定です）

では、
サイドバーにある読者登録用のボタン画像を変更するカスタマイズ

①まずは画像をあなたのPCに保存して、
【画像フォルダ】にアップロードしておきましょう。

読者登録用のボタン画像はまだ作成できておりません
　なるべくはやめに作成しますのでお待ちください。
それまでこの辺で探してみてください。

②以下のタグを【CSS編集画面】に追加します。
　　CSS編集画面でタグを追加する方法 はこちらです。

『追加するタグ』はこちらから。

↓↓↓この下から↓↓↓
/*サイドバー読者登録リンク画像変更*/
#readerList dt a {
background-image :url(画像URLを入力してください);
background-position :left top;
background-repeat :no-repeat;
display : block;
height : 260px; /*画像の高さ*/
width : 260px; /*画像の幅*/
text-indent :-9999px;
}
#readerList dt a:hover {
background-image :url(画像URLを入力してください);
display : block;
}
/*サイドバー読者登録リンク画像変更・ここまで*/
↑↑↑この上まで↑↑↑

赤文字の部分に画像のURLを入力してください。

青文字の部分に画像のサイズを入力してください。

これで終了です。今回も簡単でしたね。

<< 関連記事 >>
アメブロ ヘッダー画像の変更方法
記事内のリンクを自動で強調する方法
サイドバーのリンクにリストマークをつけて分かりやすくする方法
CSS編集をするための手順