本ページにはプロモーションが含まれています。
思い切ってブログデザインを変えました！！
ブログのデザインっていじりだすと止まらなくなるのですが、とりあえず最低限のカスタマイズだけ終わらせました。
今回は、ブログ初心者の私でもそれっぽくお洒落なデザインにするために参考にしたサイトをまとめておこうと思います。
以前使用していたテーマは「Minimalism」で、今回は「UnderShirt」へ変更しました！
※ちなみに本ブログは有料版のはてなブログProを利用しています。
今回使用したテーマ「UnderShirt」
UnderShirtの特徴は、
- アイキャッチ画像が大きい
- 2列タイプのカード型
- シンプルでカスタマイズしやすい
ところだと思います！
今まで使用していた「Minimalism」もシンプルなデザインでカスタマイズしやすかったのですが、とあるブロガーさんのデザインに惹かれ、思い切って変更！！
変更する前に、非公開のサブブログを作成し、そこにUnderShirtをインストール。ある程度カスタマイズし、納得のいくデザインになったところで当ブログにインストールしました！
トップページはこのようになりました。
写真が目を惹くデザインなので、アイキャッチにはこだわりたいと思います！
前のブログで使用していたCSSは消えてしまうので、新テーマをインストールする前に必ずバックアップを取っておいてください！
カスタマイズしたところ
私が今回カスタマイズしたところは主に2箇所です！
- トップページ
- 記事ページ
トップページ｜見やすくシンプルに
トップページでカスタマイズしたところは、
- グローバルメニュー
- 次のページボタンに色をつける
- 投稿日時を右下に
- 本文とはてなスターを消す
の4箇所です！詳しく紹介していきます！
グローバルメニュー
グローバルメニューはとりあえずシンプルなものを設置したかったので、こちらのブログを参考にさせていただきました。
今後、記事のカテゴリーがある程度増えたら2階層のデザインにしようと思っています。
「次のページボタン」に色つけ
デフォルトでは背景と同化しているので、色をつけて分かりやすくしました。
こちらのブログを参考にさせていただきました！
とても分かりやすくまとめられていて、一気にお洒落ブログに早変わりします！
以下2点のカスタマイズも、こちら↑↑を参考にさせていただきました。
投稿日時を右下にする
デフォルトでは記事タイトルの真下にありますが、カードの右下の余白に変更することで、バランスが良くなりました！
本文、はてなスターを消す
デフォルトでは記事下にはてなスターが表示されます。
はてなスターがあることによって、ページの読み込みが遅くなるとのことなので、CSSコードをお借りして消すことに。(私は本文も消すコードを使用しました)
トップページの はてなスター、本文表示が消えました。
記事中には、はてなスターは残っており機能もそのままです！
見た目はスッキリしましたが、カテゴリがごちゃごちゃしてる、、、(泣)
カテゴリの位置はこれから修正していきたいと思います！
記事ページ
記事ページでカスタマイズしたところは、
- フォントデザイン
- 見出し
の2箇所です！詳しく紹介していきます！
フォントデザイン
フォントデザインを変更できることは、こちらのブログを読むまで知りませんでした( ◜◡◝ )
フォントを変更するCSSコードをお借りしました。
見出し
見出しデザインのカスタマイズは「Minimalism」を使用している時からしていたのですが、うまく反映されず放置。
そしてついに、うまく反映されない原因がCSSコードを貼る順番だと昨日気付きました、、、、、適当に貼っていたCSSコードを整理して、やっっっっっっっと反映されました（号泣）ここ最近で1番嬉しかった、、、、、（初心者丸出し)
これを機にちゃんと勉強をしようと思います(泣)
そんなこんなで(？)見出しは、ご存知の方が多いと思いますが、サルワカさんのこちらの記事を参考にさせていただきました。
素敵なデザインばかりでめちゃくちゃ迷いました。
見出しの色は、まだ検討中ですが、くすみカラーでまとめたいなと計画中です！
最後に｜デザインカスタマイズまとめ
ブログデザインっていじり出したら止まらない…ここ数日間はカスタマイズしては、違うな〜を繰り返してました。まだ変更途中なので、過去の記事など読みにくいところもあるかもしれないですが、少しずつ手直ししていきます。ご了承下さい…
そしてCSS、HTML初心者でも簡単にカスタマイズできるよう、まとめてくださってる方々には感謝しかないです。
他にもカスタマイズしたいところがたくさんありますが、ぼちぼちやっていきます！
最後まで読んでくださり、ありがとうございました！
＼はてなブログProだとカスタマイズの幅が広がります！／
▼はてなブログ収益化を目指している人必見！
