[e]ブログが進化!本日のStinger5カスタマイズ

Stinger5カスタマイズ

先ほど当ブログ「ehicalog」をカスタマイズしました。

とりあえずやってみようという感じで始めてみましたが、予想以上に上手くいって大満足です。

今回の喜びを備忘録として書き残したいと思います。

Stinger5カスタマイズ一覧

今回行ったカスタマイズが以下になります。

  • 記事本文の文字色
  • 記事のクリック範囲増大
  • サイドバーにカテゴリーの一覧

記事本文の文字色

今までは記事本文の文字色がだったのですが、記事の背景が白なのでコントラストが強過ぎるかなと感じていました。

そこで、グレーっぽい色の文字にしてコントラストを抑えてみたわけです。

個人的には色味が弱まって読みやすくなったと満足しています。

もし読みにくいなどのご意見あれば教えてください!

記事のクリック範囲増大

PC限定ですが、デフォルトでは記事のリンクは画像やタイトルをクリックしなければ飛べないようになっています。

そこで、どこをクリックしても飛べるように記事のクリック範囲を広げてみました

ついでにマウスオーバーで背景色が黄色になるようにしてありますので、視覚的にも分かりやすくなったなと感じています。

サイドバーにカテゴリーの一覧

今までカテゴリーを一覧で載せてなかったのですが、今回サイドウィジェットにカテゴリーを追加してみました。

こちらも見た目をカスタマイズして、記事数を右寄せにしたり、マウスオーバーで色が変わるようにしてあります。

カスタマイズ参考記事

今回キャリコ(@calicocatxyz)さんの記事を参考にさせて頂きました。

STINGER5 の記事一覧に対してリンクのクリック範囲を広げる方法 | キャリコ
STINGER5 のカテゴリ名と件数をカスタマイズする方法 | キャリコ

Stinger5のカスタマイズ記事が豊富でいつも参考にさせて頂いているブログです。
コードも分かりやすいので、今回そのまま使わせて頂きました。

キャリコ(@calicocatxyz)さん!本当にありがとうございます!

素人でもStinger5を楽々カスタマイズ!

今回のカスタマイズは自分でやろうとしたらほぼ不可能ですし、途中で挫折していたのは間違いありません。

素人の自分がここまでカスタマイズできるのは、情報を提供してくれる皆さんの知恵を借りることができるからです。

特にStinger5は皆さんのコードをコピペさせてもらうことでこれだけのカスタマイズができる、とても使いやすいテーマなんだと改めて実感しました。

これからもブログのカスタマイズを楽しみたいと思います!

以上、ナシタカ(@ehicalog)でした!

from するぷろ

この記事も読まれています

ABOUTこの記事をかいた人

GoProが大好きでHEOR5 Blackから子どもの撮影に活用しています。撮影した動画の編集も大好きで家族の思い出ムービーをたくさん作っているので動画編集についても紹介していきます。