真っ白なブログデザインを自分色にするためのCSSの編集方法とオススメブログ

真っ白なブログデザインを自分色にするためのCSSの編集方法とオススメブログブログ
この記事は約4分で読めます。

一から自分の好きなようにブログのデザインをカスタマイズしていくってとても大変ですが、できたときの達成感は格別ですし、よりブログに愛着もわきます。

今回ははてなブログMinimalismを使用したカスタマイズ方法です。

これからカスタマイズに挑戦してみたいと思っている方や新しくリニューアルしたいと思う方向けの記事です。

スポンサーリンク

ビフォーアフター

リニューアルでどんな風にブログが変わったかをまとめました。

デザインはすべてはてなブログのテーマストアから選んでいます。

はてなブログカスタマイズ

*実際の画面を撮り忘れたのでブログを作成後のプレビュー画面をスクリーンショットしています。

①【Haruni】 by minimalgreenさん

私のお気に入りのデザインです。

かわいくてカスタマイズもしやすくて、ずっと愛用してきました。

カスタマイズ方法もわかりやすく書いてあるので初心者さんにもとてもオススメだと思います。

はてなブログカスタマイズ2

②【Minimalism】 by codomisuさん

テーマストア一番人気の真っ白なデザインを今回はカスタマイズしました。

今のデザイン完成後のプレビューなので、すでにもうカスタマイズが反映されていますね。

はてなブログカスタマイズ3

③ リニューアル完成!

自分なりにいろいろ調べて、何とかカスタマイズできました。

はてなブログカスタマイズ4

新たにカスタマイズしたところ

まずはじめに、こちらを読んでからスタートしていきます。

ひつじの雑記帳
身近な豆知識ネタからちょっとギークなプログラミングネタまで

①タイトルの背景

ここで使うのが通常のカラーコードではなくグラデーションのカラーコードです。

☑ Web Design and Development | itmeo

好きなグラデーションを選んで【copy CSS】をクリックすると自動的にコピーされます。

ひつじさんのブログに載っていたCSS
/* ### ヘッダーの背景色 ### */
#blog-title{
background: #カラーコード !important;
}
(以下略)

の太線のところに先程コピーしたグラデーションカラーのCSSをそのまま投入!

グラデーションCSS
/* ### ヘッダーの背景色 ### */
#blog-title{
background-image: linear-gradient(カラーコード);
}

これだけで背景がグラデーションになります。

②ナビゲーションメニューの表示とアイコン

こちらを参考にしながらカスタマイズしました。

要略すると・・・

ナビゲーションメニューCSS

(文略)<i class="fa fa-home" aria-hidden="true"></i> HOME</a></div>

の太文字のところがアイコンの表示になるので、ここを好きなアイコンに変えます。

私の場合はこのhomeのところをアイコンの名前にすることで表示されました。

③目次のデザイン

④見出しのデザイン

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

⑤シェアボタンの表示

シェアボタンは最初にご紹介したひつじさんのブログをそのまま引用させていただきました。

まとめ

他にももう少しカスタマイズしたいところはありますが、また少しずつやっていこうと思っています。

CSS設定にもだいぶ慣れてきましたが、まだまだ知らないことやうまくいかないことが多くて今回もいろいろと勉強になりました。

でも、真っ白だったデザインが自分の好きなカラーになっていくのはとても楽しいですね。

お世話になったサイト様、ありがとうございました。

コメント

タイトルとURLをコピーしました