一から自分の好きなようにブログのデザインをカスタマイズしていくってとても大変ですが、できたときの達成感は格別ですし、よりブログに愛着もわきます。
今回ははてなブログMinimalismを使用したカスタマイズ方法です。
これからカスタマイズに挑戦してみたいと思っている方や新しくリニューアルしたいと思う方向けの記事です。
ビフォーアフター
リニューアルでどんな風にブログが変わったかをまとめました。
デザインはすべてはてなブログのテーマストアから選んでいます。
＊実際の画面を撮り忘れたのでブログを作成後のプレビュー画面をスクリーンショットしています。
①【Haruni】 by minimalgreenさん
私のお気に入りのデザインです。
かわいくてカスタマイズもしやすくて、ずっと愛用してきました。
カスタマイズ方法もわかりやすく書いてあるので初心者さんにもとてもオススメだと思います。
②【Minimalism】 by codomisuさん
テーマストア一番人気の真っ白なデザインを今回はカスタマイズしました。
今のデザイン完成後のプレビューなので、すでにもうカスタマイズが反映されていますね。
③ リニューアル完成！
自分なりにいろいろ調べて、何とかカスタマイズできました。
新たにカスタマイズしたところ
まずはじめに、こちらを読んでからスタートしていきます。
①タイトルの背景
ここで使うのが通常のカラーコードではなくグラデーションのカラーコードです。
☑ 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設定にもだいぶ慣れてきましたが、まだまだ知らないことやうまくいかないことが多くて今回もいろいろと勉強になりました。
でも、真っ白だったデザインが自分の好きなカラーになっていくのはとても楽しいですね。
お世話になったサイト様、ありがとうございました。
コメント