[b]ブログの見出しにアイコン画像を表示する方法【Simplicityカスタマイズ】

この間、シゲさん(@piece_hairworks)にぼくのブログの見出しについて褒めてもらいました!

めちゃくちゃ嬉しいぃぃぃー\(^o^)/

のぶはおだてられると木に登りまくります!!そして降りられなくなります…w

よいしょっと(無事降りてきましたw)

せっかくなので「のぶ的まとめ」の見出しカスタマイズを公開していきます。お気に召したらコード持っていってください^^

スポンサーリンク

Simplicityをカスタマイズする

ぼくのブログはWordPress無料テーマ「Simplicity」を利用しています。同じSimplicityユーザーの方なら(多分)コピペで一発完了ですがその他のテーマを利用の方は訂正が必要になります。

Simplicityはアップデートが頻繁に行われることでも有名(?)ですのでブログのカスタマイズは「子テーマ」をおすすめします。

前置きが長くなりました。そろそろ見出しカスタマイズを紹介していきましょう!

カスタマイズの完成図はこちら

Heading Custom01

勝手ながらシゲさんのアイコン画像で紹介。事前の了承をとっていないので今ここで謝っておきます。ごめんなさい。

準備するもの

shige
アイコン画像(縦横100px)をご用意ください。

画像をCSSで丸にしようと思ったのですが、ぼくの力不足でできなかったのでPhotoshopで丸に切り抜きました。

アイコン画像の背景が白なら別に四角のままで構いません。

いざ!見出しカスタマイズ!

FTPにアップロードする

まずはFTPのWordPressテーマの「imagesフォルダ」にアイコン画像をアップロードします。今回は「shige.png」という名前でアップロード。

スタイルシートにコードを追加する

使いたいアイコン画像をアップできたら、今度はスタイルシート(style.css)にコードを追加していきます。H4タグをカスタマイズしてアイコン画像を表示させます。

.article h4 {
  border-bottom: 1px dashed #fdd703;
  padding: 55px 0 35px 110px;
  background-image: url("images/shige.png");
  background-repeat: no-repeat;
  background-position: left bottom;
}

Simplicityでは記事中のh4タグは「.article h4」に指定されています。他のテーマを利用の方はここを修正する必要がありますのでご注意を!

コードを微調整する

下線の変更

border-bottomで下線を表示させています。左から順に「線の幅、線の種類、線の色」となっています。

線の種類には「solid、double、dotted」などがあります。

色は#から始まる6桁、または3桁の英数字で変更できます。

間隔の調整

paddingではタグ内のテキストの上下左右の間隔を調整できます。左から「top、right、bottom、left」の順になります。

例として、上のコードではh4タグのテキストの「上に55px、右に0px、下に35px、左に110px」

こうすることによりh4タグでは「アイコン画像+テキスト」という表示になります。paddingでテキストの左に間隔を作らないと画像と文字が重なってしまいます。

画像を指定する

background-imageはimagesフォルダにあるshige.pngというファイルを背景画像に呼び込みなさいという指定です。画像が表示されていないときはアップロード先やファイル名か間違っていないチェックしてください。

画像の表示パターンを指定する

background-repeatでは画像の繰り返しをしていできます。「no-repeat」とすることで画像を繰り返さず一つだけ表示しています。

画像の位置を調整する

background-positionでは画像の表示位置を指定できます。今回は「left bottom」とすることでh4タグ内の左下に表示させています。

のぶ的まとめ

いかがだったでしょうか?

操作としては画像をFTPにアップロードして、コードをスタイルシートに追加するだけ。

あとは実際に見出しを確認してから微調整で「のぶ的まとめ」のような見出しカスタマイズができます!

よければご自由にコードをコピーして改変してください。カスタマイズの参考になれば嬉しいです^ ^

この記事のカスタマイズで不具合が出ましたのでコチラの記事をご覧ください!
(2015/8/26追記)
Simplicityのh4をカスタマイズするときはプラグインの競合に注意して!
先日「のぶ的まとめ」のカスタマイズ記事でh4タグのCSSを調整するカスタマイズを提案させていただいのですが大変な欠陥が見つかりましたのでお詫...

以上、のぶでした。まったね〜^ ^