【アメブロカスタマイズ】サイドバーのタイトルに背景画像を設定する方法

さて、今回はサイドバーのタイトルに背景画像を設定する方法を解説していこうと思います。

これもまた見難いですよね。

私のブログの場合下記のように変更してみました。

今日はこのようにサイドバーのタイトルを変える方法を解説していきたいと思います。

まず、画像を作らなければならないのですが今回はコチラで用意しました。

このような画像を用意しましたのでまずは、下記のリンクを右クリックをし「対象ファイルを保存」を選択してダウンロードしてください。

＞＞上の画像のダウンロードはコチラ
＞＞下の画像のダウンロードはコチラ

あなたのブログのサイドバーのサイズが合わない場合がありますのでその際はご自身で作成してくださいね。

ダウンロードしたらブログの管理画面で画像をアップデートしてください。

そうしたら

「ブログを書く」→「デザインの変更」→「ＣＳＳの編集」

でＣＳＳの編集画面を開いてください。

そうすると、ＣＳＳの記入欄の上のほうに

/*----------------------------------------------------- ameblo CSS Skin Settings Skin for: basic_ad FileName: common.css $Revision: 1.8 $ -----------------------------------------------------*/ /*============ ☆ かんたんスキンカスタマイズはこちら ☆ ==============*/ /*:(コロン)と、;(セミコロン)の間に色、画像、サイズなどを指定して下さい*/ /*１）ブログタイトルの文字サイズを変更する*/ #header h1{ font-size: 0px; /*-- 25px相当の文字サイズ --*/ } /*２）ブログタイトルの文字色を変更する*/ #header h1 a{ color:#fff; /*-- 濃いグレー --*/ } /*３）ブログ説明の文字サイズを変更する*/ #header h2{ font-size: 0px; /*-- 12px相当の文字サイズ --*/ } /*４）ブログ説明の文字色を変更する*/ #header h2{ color:#fff; /*-- 指定なし --*/ } /*５）ページ背景に画像を入れる*/ body{ background-image:url(); background-position:center; background-position:top; background-repeat:repeat-y; } /*６）ページ全体の文字色を変更する*/ body{ color: #333333; /*-- 濃いグレー --*/ } /*７）記事タイトルの背景色を変更する*/ .entry h3.title{ background-image:url(); } /*８）記事タイトルの文字色を変更する*/ .entry h3.title{ color: #cc0000; /*-- 濃いグレー --*/ } /*９）サイドバーの見出し文字色を変更する*/ h4.menu_title{ color: #666666; /*-- 濃いグレー --*/ } /*１０）サイドバーの見出し背景色を変更する*/ h4.menu_title{ background-image:url(画像); background-repeat:no-repeat; }

上記の太字の部分を青の部分のようにしてください。

コピー＆ペーストでできるはずです。

この画像の部分を画像のＵＲＬを貼り付けてください。

これで保存していただければサイドバーの背景画像が変わるはずです。

しかし、これでは高さなどが合わないと思います。

そこで・・・・

ＣＳＳの編集画面を、「ctrl」＋「Ｆ」を同時に押して検索窓を出して

「/*■モジュールタイトル - 基本設定 - サイド*/」で検索してみてください。

下記のようなソースが出てくるはずです。

/*■モジュールタイトル - 基本設定 - サイド*/ h4.menu_title{ margin:0 10px 20px 10px; margin-left:6px; margin-right:6px; padding:20px 10px; }

そこを上記のソースに張り替えてください。

もし、あなたが独自で画像を作った場合は高さが合わないはずです。

高さなどが合わない場合は、太字の数値をいじってみてください。

そうするだけでサイドバーの文字と画像が綺麗に入るようになるはずです。

ちょっとここは面倒くさくて難しく感じてしまうかもしれませんが、綺麗にはまるとうれしいものです。

是非やってみてくださいね。

>>動画版はコチラをクリックする（アメンバー登録が必要となります）