【はてなブログ初心者】<グローバルメニュー, 目次, 吹き出し, ボタン, 囲み枠, 見出し, マーカー>カスタマイズを進めてみた
新年を迎えたので心機一転、本ブログのカスタマイズを進めてみました。
(2020. 3. 1/ 2020.3.5追記しました)
- グローバルメニューをつけた
- サイドメニューを整理した
- 目次のデザインを変更した
- 吹き出しを使うようになった
- あわせてどうぞの囲み枠をつくった
- アフィリエイトリンクをボタン化した
- 見出しのデザインを変更した
- 強調部分にマーカーをひいた
- スマホの文字サイズ・行間を調整した
- 最後に
グローバルメニューをつけた
グローバルメニューとは、これです。↓
記事の数が増えてきたので、整理するために作りました。それぞれの見出しのリンク先のページを過去の記事を貼り付けて作ったのと、自己紹介を+しました。
作り方は、以下のブログを参考にさせて頂きました。ありがとうございます。
サイドメニューを整理した
- 参加中のグループを削除し、リンクを一番下に移動しました
- 注目記事を追加しました
- 最新記事をヘッダー付きにしました
目次のデザインを変更した
テーマのデフォルトだと目次のバレットが数字になっていました。
ほとんどの私の記事の場合、見出しに順序性はないので以下のように変更しました。
このカスタマイズは、以下のブログからCSSをコピペさせて頂きました。ありがとうございます。
(2020. 3. 1追記)
目次のデザインをこちらを参考に変更しました。ありがとうございます。
今のデザインは↓です。
Content前のアイコンのアイコンについてはこちらを参照して変えました。分かりやすい一覧をありがとうございます。
吹き出しを使うようになった
吹き出しというのはこういうの↓です。これがあるだけで、メリハリができて読みやすい記事になった気がします。
吹き出しに関しては、こちらのコードをコピペさせていただいています。言語について何も分からなくてもコピペするだけで簡単に設定することができました。ありがとうございます。
あわせてどうぞの囲み枠をつくった
こういうやつです↓
こちらをコピペさせて頂きました。ありがとうございます。
アフィリエイトリンクをボタン化した
こんな感じのやつです↓
こちらの記事を参考にさせて頂きました。ありがとうございます。
見出しのデザインを変更した
今は大見出しがこんな感じです↑
こちらのサイトの手書き風枠+ずれた背景色を使わせて頂きました。ありがとうございます。そもそもこのブログは、ベースのデザインもMinimal Greenさんのデザインを一律ピンクに変更したものです。
はてなブログは大見出しがh3タグから始まり、h2タグがないためにSEOに弱いという話を聞きました。SEOに関しては本当か分かりませんが、一応最近書いているものは大見出しをh2タグにしています。Shift+Alt+2のショートカットキーで変更できるので楽ですが、これまでのページのデザインが崩れているので、おいおい直したいと思います。
強調部分にマーカーをひいた
こういうやつです。こちらを参考に、斜体設定(Ctrl+I)で黄色マーカーが弾けるようにしました。ありがとうございます。
スマホの文字サイズ・行間を調整した
(2020.3.5追記)
ずっと、デザイン詳細で行間調整してるのに変わった気がしないなあ…と思っていたんです。そしたら、レスポンシブデザインでもスマホ表示のフォントサイズ・行間等は別で設定しなくてはならなかったのですね…。これに気が付くまで1年て…。
こちらのブログを参考にして、フォントサイズ16pt、行間1.7emで設定しました。分かりやすい記事をありがとうございます。
これが
こう
分かりますか?だいぶメリハリがついて見やすい行間になったと思います!
最後に
太っ腹な皆さまがCSSやhtmlを公開してくださるおかげで、初心者でも様々なカスタマイズを楽しめるのがはてなブログのありがたいところです。ありがとうございます。