ふぃかろぐ

アートやライフスタイル、ブログ運営のことなどいろんなことを書いている雑記ブログ。

初心者でもできる!はてなブログのデザインをカスタマイズしてみた

どうも、ふぃかです。

 

こんにちは。

 

はてなブログをはじめて、30日が過ぎました。

ずっとデフォルトのまま記事を書いてきたのですが、そろそろ少し見やすくしたいなと思い、デザインをいじってみました。

 

いろんな方のサイトを参考にさせてもらいましたので、自分の備忘録としてまとめておきます。

 

またこの記事がどなたかの参考になれば嬉しいです。

 

 

デザインを変える前に

ブログのデザインをカスタマイズする

Photo by rawpixel on Unsplash

あたしは事前にエクスポート&インポートをして、このブログのコピー(非公開)を作っておいたので、そちらでCSSの実験をしてから、適用しました。

 

コードのバックアップはとっておきましょう。

 

PCはもちろん、スマホでも動作のチェックを必ずしましょう。

あたしもうまく表示されない、デザインが崩れているなんてことがありました。

スマホでのチェックをお忘れなく。

 

デザインのカスタマイズ

では、あたしがしたカスタマイズをご紹介します。

 

記事タイトル

そのままでもいいかな〜と思ったのですが、薄いピンクの吹き出しにしてみました。

スマホで見ると、カテゴリの文字に吹き出しがかかるので、そのうちまた変えるかもしれません。

 

色は#FAC4D0の薄いピンクにしています。

 

www.north-geek.com

見出し

実は今回、一番変えたかったのが見出し。

見出しを変えるだけで、とっても見やすくなりますよね。

 

あたしは大見出し、中見出し、小見出しをそれぞれ設定しました。

 

これも大好きなピンク色で統一。

少し濃いめのピンク#FA75A1にしました。

 

www.yukihy.com

saruwakakun.com

目次

これも見出しと同じぐらい変えたかったところ。

 

まず「もくじ」や「index」「contents」という文字を入れたかったのと、背景の色を変えるか、もしくは線で囲むかしたかったのでいろいろいじってみました。

 

いろんなのに変えて試してみたのですが、おしゃれな可愛いデザインのものにしました。

 

kimix.hatenablog.com

www.yukihy.com

 

ただ、ひとつ問題が起こります。

スマホで見るとデザインが崩れるのです。

どうしたらいいのだろうと検索しまくったら、ありました。対処法!これでやったらばっちりスマホでもキレイに表示されました。

 

samemai.com

引用

これもかっこよく「“」のマークで囲むデザインに変更です。

デフォルトのままずっと使っていましたが、これはもっと早い段階で変えたかったですね。

これでうんと見やすくなりました。

 

www.bambi.red

 

カエレバ・ヨメレバ

これもずっと気になっていたので、変えることができて嬉しいです。

 

ちなみにこれはレスポンシブデザインに設定するとボタンの表示がキレイに出ませんでした。

なので、これを設置した時点でレスポンシブは諦めて、PCとスマホそれぞれでコードを入れることにしました。

shufulife.com

 

おまけ

あると便利な配色サイト。

こちらを参考にあたしの好きなピンクに変えました。

 

自分のブログのイメージカラーを考えておくと、デザインが統一されてすっきりと見やすくなりますね。

www.color-sample.com

www.colordic.org

 

最後に

ブログのデザインをカスタマイズするためのサイトまとめ

Photo by Damian Zaleski on Unsplash

デザインを変えることはとても楽しかったのですが、いつの間にかものすごく時間が過ぎていて、正直ちょっと疲れました。

 

こればかりやっていないで、記事をもっとどんどん書かなければいけませんね。

 

デザインをいじるのは時間と心の余裕のある時にしましょう。

 

しかし、少しデザインを変えるだけで、随分と見やすくなります。

それに書いているこっちまで楽しくなります。

 

これからまだグローバルナビなど設置していきたいと思っているので、時間のある時にでもまた更新します。

 

参考にさせていただいたサイト、たくさんリンク貼らせていただきました。

初心者のあたしでもわかりやすかったです。

ありがとうございます。