STINGER3で見出しのカスタマイズ

Androidアプリのためのブログ製作だったわけですが、STINGERをいじる事が楽しくて全くアプリに手を出せてません。

早くブログの見た目をなんとかしたい欲求に勝てません。

見出しのカスタマイズ

見出しを変えていきます。

デフォルトは↓な感じです。

皆さんが使ってますので良く見ますね。

やっぱり他人とは少しだけでも差をつけたい。

というわけで変えてみましょう。

参考はえけこのくるるさん、Webparkさん、TMlifeさんです。

まずh2は背景をつけて左線と下線を引いてみます。

カスタムh2

うん、やっぱり色があると違います。

これはstyle.cssのh2にこれを加えました。

色やら線の太さやら直線点線、色々試してみてください。

次にh3です。箇条書き等に使えるようなデザインでかっこいいもの！

と頑張ってCSS工夫して擬似要素使ってやってみたんですが、なぜかトップページの見出しのh3まで変わってしまい、解決しなかったので諦めました。

でもオリジナルのままじゃ悔しいのでちょっとだけ変更。

下線を太くして色つけて点線を直線にしただけです。

カスタムh3

最後にh4です。

カスタムh4

あんまりしつこくなく、あっさりとした感じのものにしました。

.post h4の下に次のソースを挿入してます。

これで少しは見た目が色づいて、個性が出てきたでしょうか？