サイドバーの見出し背景を画像にしてみる




内藤です

サイドバーの見出し背景を画像にしてみるやり方です。
(『CSS編集用デザイン』の場合)
※サイドバーの見出しとは「このブログの読者」や「テーマ」などの部分です。

1.背景画像となる画像を用意します

画像編集ソフトやボタンメーカーで作っておくとよいでしょう。

グラデーションなんかも簡単にできます
(『create』ボタンとダウンロードをお忘れなく)

ワイド側のサイドバーは横幅300px、もう一方のサイドバーは180pxになります。

例えばボタンメーカーでこんな画像を作っておきます。

ワイド側用  300px×30px


もう一方のサイドバー用 180px×30px

2.アメブロにアップロード

画像をアメブロの画像フォルダにアップロードします。
記事を書く要領から、『画像ボタン』で行うのが楽です。
(オリジナルサイズで表示するようにしましょう)

HMTL表示、もしくはタグ編集エディタで画像のURLが分かります

<img src=" から  " の間にあるアドレスが、画像URLになります。

3.CSS編集

画像URLが分かったら、次のCSSコードを [クイックリンク] ⇒ [デザインの変更] からCSSの編集で、最後に追加します

.skinSubA .skinMenuHeader{
background:url(&lt;font color=&quot;#FF0000&quot;&gt;ワイド側画像URL&lt;/font&gt;) no-repeat;
padding:5px 10px;/*余白*/
height:30px;/*高さ*/
}

.skinSubB .skinMenuHeader{
background:url(&lt;font color=&quot;#FF0000&quot;&gt;もう一方側の画像URL&lt;/font&gt;) no-repeat ;
padding:5px 10px;/*余白*/
height:30px;/*高さ*/
}

ワイド側画像URL、もう一方の画像URLの部分にそれぞれの画像URLを代入します

これでこのようにサイドバーの見出し背景を変えることができます

やってみてくださいね。

その他カスタマイズ目次はこちらから

2017年3月からのアメブロ常時SSL化に際しまして、「フリープラグイン」を使ったカスタマイズが利用できなくなる可能性があります
【追記あり】アメーバブログの常時SSL化に伴う仕様変更について|スタッフブログ
フリープラグインを使ったカスタマイズはせずに、CSSを使ったカスタマイズを行ってください