これは、無料版はてなブログを、ブログ超初心者がカスタマイズしていく記録です。
今回は、ブログテーマ「Minimalism」のカスタマイズをしていきます。
はてなブログのテーマで、codomisuさんのMinimalismを利用させて頂いています。テーマの詳細はこちらをご覧ください！
最初に、わからないままに設定してしまった部分がありました。色とか、ブログタイトル下の説明の文字の大きさとか。とか。ずっと気になっていた部分を、今回はカスタマイズできたらな。と思っています。
【私が行いたいカスタマイズ】
- ブログトップページを記事一覧で提示したい！
- 更新日を提示したい！
- ブログ内の文章を、四角で囲みたい！
- 文字の大きさを、もう少し大きくしたい！←今回！
- ブログのトップページの背景を変えたい！
- Googleアドセンスを設置したい！
- ブログ内に図を入れたい！
- 今までのブログ内容を推敲したい！
なにせ初心者、重要度も難易度もわかりません。
なので、直感的にできそうなものからどんどん手を付けていきます。
ブログ本文の文字の大きさを大きくしたい！
ブログをPCで見ている時、少し小さいなぁと感じていました。ブログをスマホで見ている時は、ちょうどよいなぁと満足していました。
なので、ほんのもう少しだけ文字を大きくしていきたいと思います。
方法は、こちらのブログを参考にさせて頂きました。
minimalismの文字サイズを本気で考えてみた - 薬剤師とザリガニの奮闘記
デフォルトの文字サイズは15pxとのことですが、私はちょっと大きめの20pxにしてみました。文字は大きい方が好きなのです。その辺がこのブログがあかぬけない所以かもしれませんね。素敵ブログへの道は遠い。。。
ヘッダーのブログ説明の文字の大きさを変えたい
PCでもスマホでも私には小さく感じました。文字は大きい方が好きなのです。完全に好みですな。
方法についてです。Minimalismの説明サイトには、ヘッダーのブログ説明の文字色を変更するコードを記載してくださっています。そこに、先ほどの文字変更時の参考ブログから学習した文字サイズのコード「font-size: 16 px;」をいれるだけでできました。
学んだ内容をすぐに活用できたので、すごくウキウキです♪
ブログタイトルの下の文字が、若干大きくなったことがわかります。
思いがけず。見出しも変更することに
ここまで変更したところで、不思議現象が発生です。
見出しの設定が無くなってしまったのです。…いやいやいや。不思議現象ではありません。私がデザインのcssから作業中に消してしまったのです。ひゃぁぁ；
「デザインcssを変更する時は、必ずコピーを取ってからにしましょう」と、さまざまなブログでさまざまな諸先輩方が伝えてくれていたのに！行っていませんでした。。こういうところですよ。私。
そんなこんなで、見出しのデザイン設定をもう一度行うことにしました。
方法はこちらのブログを参考にさせて頂きました。
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
私はどうやら見出しは大・中だけしか使わないことがわかったので、今回の設定も、見出し大（h3）と見出し中(h4)の二つだけ行いました。
見出しの文字の大きさは、本文と同じにしたくなりました。
その際は、またまたこちらのブログで学んだ内容が活用できました。
minimalismの文字サイズを本気で考えてみた - 薬剤師とザリガニの奮闘記
.entry-content p {font-size: 20px;}
上記の赤字「ｐ」は本文のことを指しているので、その部分を「h3」や「h4」に変更すると見出しの文字の大きさ設定になるようです！
目次の文字の大きさも変更！
本文も見出しも文字の大きさを大きくしたら、目次だけがやたらと小さな文字のようになってしまいました。
目次の文字の大きさも変更します。
方法やコードはこちらのブログを参考にさせて頂きました。
https://www.tomomore.com/entry/minimalism-customize
これにて、文字の大きさは統一できたかなと思います。
私の行いたいカスタマイズ一覧
超・初心者がブログをカスタマイズしていく記録！【行いたいこと一覧】
※追記：今までは毎回一覧を書いていたのですが、別のページにまとめてリンクできるように変更しました。
