猫好きダイアリー

no cat no life

はてなブログのデザインカスタマイズ備忘録!良い感じにできるリンクまとめ集。


スポンサーリンク

このブログははてなブログのProを使っていまして、

ブログのデザインはテーマをインストールさせていただいています。

 

それで、このブログのタイトル

猫好きダイアリー

にちなみ、肉球のアイコンなど入れていました。

 

でもちょっと変えてみようかなと変えたら、

カスタマイズコードが全部ぶっ飛んだので、

(いや私が警告出されているのに気軽に保存しすぎ)

先ほど諸々を設定し直しました。。。

 

やっと重すぎる腰をあげて・・・・・・

 

と言うわけで!

またいつかこんな感じで変更してしまうことがあるかもなので、

自分への備忘録もかねてこちらにまとめておきます。 

 

 

色の設定

 

もうこちらははてブロに限ったことではなく、

何度も何度も参考にさせていただいています!

 

現在、このブログは

mediumaquamarine
#66cdaa

を使っています。

 

www.colordic.org

 

目次のカスタマイズ

 

目次については新しくこちらから設定しました。

個人的には前より見やすくなったと思います。

 

www.papico405.com

 

見出しのカスタマイズ

 

見出しのカスタマイズはこちらを参考にしました。

これのタイプ2で、線の太さを少し調整し、背景色を白にしています。

h3とh4に適応。

 

www.notitle-weblog.com

 

アイコンフォントを使う

 

現在使っている箇所はパンくずリストのみですかね・・・

ここに使えるWebフォントがまとまっています。

 

www.foxism.jp

 

更新日時を表示する

 

以前からやったほうが良いかなと思っていましたが、やっと更新日時を出すようにしてみました。

更新日時は出した方が良いですよね。

 

www.se-nailist.com

 

トップに戻るボタンをつける 

 

画面の右の方にある上矢印のマークですね。

長文のブログの場合は、戻るボタンはあった方が便利です。

(わかっていて壊れたのでそのままにしてた・・・)

 

hatebumaru.hatenablog.com

 

カエレバ・ヨメレバのカスタマイズ

 

本の購入リンクの設定に使用している、カエレバやヨメレバのデザインです。

 

rough-log.com

 

 

文字サイズや文字の効果を付ける

 

最後にフォントサイズですが、16px以上が推奨されているようなので、サイズは大き目が良いですね。

 

文字サイズだけを変えたいなら

 

.entry-content p {font-size: 16px;}

 

を、デザイン>カスタマイズ>デザインCSSの中に入れればOKです。

 

また重要そうに見せるための蛍光マーカーの装飾も追加しました。

 

もともとMinimalismと言うテーマを使っていたところから、

それ用のカスタマイズを公開されているこちらを参考にしました。

 

www.kurasitotonoe.com

 

また何か参考サイトが増えたら追加します。