【はてなブログ無料版】『minimalism』のカスタマイズまとめ！
スポンサーリンク
こんにちは！はちです。
はてなブログ無料版でブログを作成して早数か月。
最近、少しずつブログのカスタマイズをはじめました。
とはいえ、HTMLとCSSの知識が全くないままコピー&ペーストでカスタマイズしている私。
量が増えるにつれ、見返したときに「これ、なんのコードだっけ？」と思うことが増えてきました(-ω-)/
そこで今日は、自分の備忘録も兼ねてこのブログで行ったカスタマイズをまとめてみます！
- 『minimalism』について
- トップページを一覧形式に＆スマホ版の表示記事数を5記事に
- ブログ名のサイズ変更
- ナビゲーションメニューの設置
- ブログタイトルのフォント変更
- ヘッダーの色の変更
- まとめ
『minimalism』について
私が使用しているテーマは、こどみすさんが作成した『minimalism』というものです。
「なんか人気があるテーマっぽい」という適当な理由で選んだのですが、シンプルで見やすいデザインがとても気に入っています。
カスタマイズについても、こどみすさんのブログで分かりやすく説明されているので、初心者でもデザインを調整しやすくておすすめです！
私も上記の記事を見ながらカスタマイズを行いました。
トップページを一覧形式に＆スマホ版の表示記事数を5記事に
はてなPROに契約している方は、設定⇒詳細設定⇒トップページの表示形式（PC版）で一覧形式にすることができるのですが、無料版ユーザーは一覧形式を選べません……。
そこで、無料版でトップページを一覧形式にする方法を探しました。
参考にしたのがこちらのブログ！とても分かりやすかったです！
この記事で紹介されている手順で記事一覧形式を取り入れました。
スマホ版で一覧に表示される記事数を5記事に減らす設定も併せて行っています。
ちなみに私はコードの前に「これが何のコードなのか」を記載するようにしています。
HTML文書では、<!-- -->で囲んだテキストはブラウザに表示されないのでメモとして使用できます。
今回は、コードの前に<!-- 記事一覧表示 -->とメモしておきました。
ブログ名のサイズ変更
スマホ版のブログのトップページを見た時に、タイトルが一行に収まらないのが気になりました。
そこで、またまたこどみすさんの記事を見ながらカスタマイズ！
上記の記事のCSSコードをコピー＆ペーストして……
こんな感じになりました！！
ナビゲーションメニューの設置
続いて、ナビゲーションメニューの設置です！
この部分のことですね(・∀・)↑
これまたこどみすさんの記事を参考に変更しました。
アイコンと項目は好きなように変更できます。
ブログタイトルのフォント変更
タイトルのフォントを「ふい字」に変更しました。
こちらはkayokoさんの記事を参考にさせていただきました！
ゆる～い雰囲気のタイトルになりました！
ヘッダーの色の変更
ヘッダーもこどみすさんの記事を参考に変更！
どんな色にするか悩みながら料理していたら、考えることに疲れてしまって「とりあえず、我が家のメイン食材『鶏むね肉』の色でよくない？」という結論に至ってしまいました。そのうち変更する予定です！
パソコンで見るのとスマホで見るのとで全然色が違って見えたので、「色が違う！」と書こうと思ったのですが……。
【PC版ヘッダー】
【スマホ版ヘッダー】
同じやん！！
いや、当たり前ですね。カラーコードが同じなんだから違う色なはずがないですね。
我が家のパソコンではいい感じの鶏むね肉色ですが、スマホだと黄色っぽい色に見えます。みなさんの目にはどんな風に映っているのでしょうか？
まとめ
今回の記事は、完全に自分用備忘録になりました(笑)
参考にさせていただいた皆様、本当にありがとうございました！どの記事も本当に分かりやすくて、初心者の私でも楽しくカスタマイズができました。
とりあえず、『minimalism』のカスタマイズをしたいときは最初にこどみすさんの記事見よ！という感じです(笑)こどみすさんの記事でまとめられているカスタマイズにチャレンジするだけでも、ブログ全体の雰囲気がガラリと変わりました。
ブログカスタマイズ履歴と参考にしたURLをまとめておくと、自分がどんなカスタマイズをしたのかすぐに確認出来て便利かなと思います！
記事の表示（ふきだしや蛍光ペン風下線など）についてのカスタマイズも後日まとめてみようと思います(・∀・)
ブログのカスタマイズって楽しい！自分好みのデザインになるよう、少しずつ手を加えていきたいです♡
