photo credit: ZERGE_VIOLATOR via photopin cc
はてなブログのスマホデザインを少しカスタマイズしたので今日はその事を記事にしたいと思います！
はてなブログのスマホデザインでカスタマイズした箇所はいくつかあるのですが特にカスタマイズをしたいのが見出しタグ！
見出しタグは文章の区切りでもあり、サイト全体の見やすさ、読みやすさにも大きく影響します。そのため、この見出しタグの見た目は重要だと思っています。
しかし私自身、htmlやらcssやらは全くわかっていないので、どこをどう変更すればいいのかさっぱりわからなかったです。どのように変更したらいいのかと思っていた矢先に以下のような記事を見つけました。
こちらの記事です。
はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 - Literally
「おおお！これはまさに私がやりたい事だ！！」
という事でさっそく私もこの記事の通りにh3タグのカスタマイズをさせて頂きました！
h3のタグを変更
まずはこのサイトの方がソースを記載されていますのでそのまま私のサイトにも適用してみました。
するとデフォルトがこんな感じなのが
こんな感じになりました！
※車のグレードという部分です。
うん♪良い感じ♪
CSSのデフォルト設定を利用するだけでシンプルでかつおしゃれなデザインになります♪
次に独自のカスタマイズを！
今現在、適用しているカスタマイズになります！笑
見出しタグは私もこだわっていた部分なので私好みのデザインに変更しました。
色をより鮮やかな青へ
左端の縦棒みたいな部分の色をまずはより鮮やかな青へ変更したいと思いました。今回参考にさせて頂いたCSSの色の指定方法はRGB値という形式のようです。また左端の縦棒はborder-leftなので以下のように変更しました。
border-left: 9px solid rgb(51,51,255);
※rgb(51,51,255)が青色を現します。
また背景色も白色に。白色にする場合はrgb(255,255,255)とすればOK！
下線部を引く
また下線部も引きたいと思い下線部を引く方法を調べるとborder-bottomで表現出来ると言う事なので
border-bottom:2px solid rgb(51,51,255);
と追加しました。
そうする事でこのような見出しになります！
色を決める際はこちらのサイトを参考にしました。
今回適用しているh3タグのソースを貼っておきます。参考までにどうぞ。
これをはてなブログの管理画面からデザイン→設定→スマートフォン→タイトル下の「スマートフォン用にHTMLを設定する」の部分にチェックを入れてコピペするだけでOKです。
※注意
この設定を行うにははてなブログProに入る必要があります。
最後に
まだh3だけになるのですが、自分好みのデザインに変更出来てなかなか満足しております♪
またこれまで苦手意識のために手を付けてこなかったCSSのカスタマイズを自分で出来たのはかなり大きな前進です。今回はh3タグでしたが今後はどんどんカスタマイズ箇所を拡げていけそうです。
自分で出来なかった事なので参考にさせて頂いた記事の筆者には本当に感謝しかないです。私も記事を読んで下さる方に有益となる情報を届けていける記事を書いて行きたいなと改めて感じた次第であります。
