こんにちは。千尋です。
少しだけですがブログをカスタマイズしました。（PC画面のみ）
今回は、どこを変えたのか簡単に説明したいと思います！
※ＣＳＳの公開はしていませんが、設定内容を少しだけ説明しています
ちなみにわたしが使っているのは、はてなブログの「minimalism」です。
※カード型レイアウトに変更したのですが、スマホ画面が上手く機能しなくなり、原因を探したのですが分からず、結果元に戻しました・・・。
完全に私の力不足です。もし参考にされた方がいらっしゃれば、大変申し訳ございません。
トップページをカード型レイアウトに変更
トップページをカード型レイアウトに変更しました。
これが一番大きいカスタマイズですね。
前々からこの形式にしたかったんです。
アイキャッチ画像が表示されなかったり、幅が狭すぎたり、色々上手くいかなくて一番苦戦しました。
それでもなんとか形になったのではないでしょうか！
今後も色を変えたり少しどこかを変更する可能性はありますが、基本はこのレイアウトでいこうと思っています。
ブログの幅を変更
トップページをカードレイアウトに変更したことで、トップ画面の記事のページがすごく狭くなったので、ブログの幅を全体的に広くしました。
現時点では、
- ブログ全体幅：1300px
- 左側（記事部分）：800px
- 右側（プロフィールやカテゴリなど）：300px
にしています。
外枠をつける
ブログの全体幅を広くしたことでブログが大きく感じたので、引き締めるために外枠をつけました。
小さなことですが、やるとやらないのでは全然違うなと思いました。
文字のフォントを変更する
所々メイリオになっていたのが嫌でメイリオに統一したんですが、やっぱり游ゴシックに変更しました＾＾；
Macはヒラギノです。
「minimalism」がそもそもMacだとどのフォントなのか分からないので、もしかしたら変わっていないかもしれません（私はWindowsを使っています）
記事の文字サイズは17pxで、文字間隔は0.8ptにしました。
フォントに関してはまだまだ試行錯誤中ですので、いきなりフォントを変更するかもしれません。
アイキャッチを変更する
これは少し前からなのですが、「アイキャッチを真面目に作ろう！」と思って、自作で作ることにしました。
写真は『Unsplash』というサイトからお借りしています。
アイキャッチ画像を作っているのは『canva』というサイトです。（私は無料版で作っています）
以前のブログのレイアウトに合わせたサイズにしているのですが、直すのが面倒なので今後も変わらないサイズで作成しようと思っています。
【現在のアイキャッチのサイズ】
- アイキャッチ画像のサイズ：1200px × 630px
- 中のぼかしのサイズ：650×408
- タイトル文字サイズ：48
- 作者の文字サイズ：36
このサイズだと、はてなブログのＴＯＰページに文字が全部入ります。
Twitterも綺麗に表示されている・・・はず。
目次のデザインを変更
そもそも目次を付けていなかったんですが、ここ最近目次を付け始めました。
それに合わせてデザインも少し変更しました。
何故だかこのデザインを作るのに、とても時間がかかってしまいました・・・。
【番外編】アイコンとヘッダーを変更
ブログのカスタムではないんですが、アイコンとヘッダーを変更しました。
女の子のアイコンにしていますが、実物の管理人はこんなに可愛くないし、そもそも似ていないということをこの場を借りて申し上げます(笑)
あくまでもイメージとしてお持ちいただけたらなと思っています。
以上が、今回行ったブログカスタマイズでした！
他のサイトからCSSのコピペを極力せずに自分で入力したので、CSSがぐちゃぐちゃのため公開は出来ません・・・。
おかげでCSSの構造が少し理解出来たので、それは良かったかな。
今後やっていくことは
・記事の修正（過去の記事にアイキャッチ画像を付けたり、タイトルの修正、目次の追加・修正等）
・カテゴリーの修正（それに合わせてグローバルメニューを2階層に）
・スマホ版のカスタム（ヘッダーを変える）
・その他諸々
今回みたいに報告はせずに、しれっと変更していくと思います！
今後「あれ？」と思われる方もいらっしゃるかもしれませんが、管理人が頑張ってるんだなと温かい目で見ていただけると嬉しいです。
最後までお読みいただきましてありがとうございました。