サイドの見出しを飾る

スポンサーリンク

ワードプレスのテーマSimplicity2を使っています。
大きな変更はしないで小さく色々カスタマイズして楽しんでいます。
私的メモ書きをしてます。

今日はサイドの見出しを少し飾ってみました。

使っている画像が分かりづらいかも知れませんね。
申し訳ないです。

まずはタイトルの前を飾ってみます。
上の画像の左側のことです。

アイコンは Font Awesome を利用しています。
7行目でアイコンは変更できます。
Font Awesome Icons を使うと大きさの指定はしなくて良いです。
枠内の余白は私好みの広さになっています。(4行目で変更可能)
アイコンと文字の余白も私好みです。(9行目で変更可能)

タイトル前に画像を使いたいときは下を参考にどうぞ。

使う画像の大きさは正方形が良いかと思います。
長方形なら少し余白がおかしくなるかも知れないです。

次は見出しの後ろに画像を表示させたい場合。

枠の線を付ける代わりに画像を付けても良いかなと思います。

使った画像は余白が広かったので大きめにしています。
Simplicity2のH3の高さは私のブラウザ、Chromeの検証で見る限り26pxのようなので35pxにすると丁度良く見えます。

Chrome以外での確認はしていないので他ブラウザーで崩れが生じていたらごめんなさい。
iPhone6は良い感じに見えます。

Simplicity2が親テーマで子テーマを利用しています。
子テーマのイメージフォルダに画像を入れます。

それ以外のフォルダに画像を入れた場合は画像のURLを入れると分かりやすいと思います。

これだけでも自分スタイルが出来ますね!

後は使う人の好みで微調整をすると良いですね。

スポンサーリンク