LIFE is HARD だけど HAPPY

LIFE is HARD だけど HAPPY

旅行記メインの徒然日記。櫻井の翔氏が好きです。ブログタイトルは嵐5人出演映画からお借りしています。

【はてなブログ初心者】<グローバルメニュー, 目次, 吹き出し, ボタン, 囲み枠, 見出し, マーカー>カスタマイズを進めてみた

 

新年を迎えたので心機一転、本ブログのカスタマイズを進めてみました。
(2020. 3. 1/ 2020.3.5追記しました)

 

 

グローバルメニューをつけた

グローバルメニューとは、これです。↓

グローバルメニュー はてなブログ

記事の数が増えてきたので、整理するために作りました。それぞれの見出しのリンク先のページを過去の記事を貼り付けて作ったのと、自己紹介を+しました。

 

作り方は、以下のブログを参考にさせて頂きました。ありがとうございます。

www.yukihy.com

 

サイドメニューを整理した

  • 参加中のグループを削除し、リンクを一番下に移動しました
  • 注目記事を追加しました
  • 最新記事をヘッダー付きにしました

 

 

目次のデザインを変更した

テーマのデフォルトだと目次のバレットが数字になっていました。

f:id:rikezyosan:20200113234911p:plain

ほとんどの私の記事の場合、見出しに順序性はないので以下のように変更しました。

f:id:rikezyosan:20200113235044p:plain

このカスタマイズは、以下のブログからCSSをコピペさせて頂きました。ありがとうございます。

kimix.hatenablog.com

 

(2020. 3. 1追記)

目次のデザインをこちらを参考に変更しました。ありがとうございます。

blog.minimal-green.com

 

今のデザインは↓です。

はてなブログ 目次

Content前のアイコンのアイコンについてはこちらを参照して変えました。分かりやすい一覧をありがとうございます。

shirokai.hatenablog.com

 

吹き出しを使うようになった

 吹き出しというのはこういうの↓です。これがあるだけで、メリハリができて読みやすい記事になった気がします。

はてなブログ 吹き出し

吹き出しに関しては、こちらのコードをコピペさせていただいています。言語について何も分からなくてもコピペするだけで簡単に設定することができました。ありがとうございます。

www.notitle-weblog.com

 

 

あわせてどうぞの囲み枠をつくった

こういうやつです↓

はてなブログ あわせてどうぞ

こちらをコピペさせて頂きました。ありがとうございます。

www.crypto-ksw.com

 

 

アフィリエイトリンクをボタン化した

こんな感じのやつです↓

はてなブログ アフィリエイト ボタン

こちらの記事を参考にさせて頂きました。ありがとうございます。

fukuro-press.com

 

見出しのデザインを変更した

今は大見出しがこんな感じです↑

 

こちらのサイトの手書き風枠+ずれた背景色を使わせて頂きました。ありがとうございます。そもそもこのブログは、ベースのデザインもMinimal Greenさんのデザインを一律ピンクに変更したものです。

blog.minimal-green.com

 

はてなブログは大見出しがh3タグから始まり、h2タグがないためにSEOに弱いという話を聞きました。SEOに関しては本当か分かりませんが、一応最近書いているものは大見出しをh2タグにしています。Shift+Alt+2のショートカットキーで変更できるので楽ですが、これまでのページのデザインが崩れているので、おいおい直したいと思います。

 

 

強調部分にマーカーをひいた

こういうやつです。こちらを参考に、斜体設定(Ctrl+I)で黄色マーカーが弾けるようにしました。ありがとうございます。

www.kurasitotonoe.com

 

スマホの文字サイズ・行間を調整した

(2020.3.5追記)

ずっと、デザイン詳細で行間調整してるのに変わった気がしないなあ…と思っていたんです。そしたら、レスポンシブデザインでもスマホ表示のフォントサイズ・行間等は別で設定しなくてはならなかったのですね…。これに気が付くまで1年て…。

 

こちらのブログを参考にして、フォントサイズ16pt、行間1.7emで設定しました。分かりやすい記事をありがとうございます。

maji-peace.com

これが

はてなブログ スマホ 行間

こう

はてなブログ スマホ 行間

分かりますか?だいぶメリハリがついて見やすい行間になったと思います!

 

 最後に

太っ腹な皆さまがCSSやhtmlを公開してくださるおかげで、初心者でも様々なカスタマイズを楽しめるのがはてなブログのありがたいところです。ありがとうございます。