カスタマーエンジニアの超実生活

CE歴10年超え2児の父として仕事と家庭に奮闘する日々を語る。

【はてなブログ無料会員】見出し・下線デザインの変更方法まとめ

にほんブログ村 哲学・思想ブログ 瞑想へ にほんブログ村 子育てブログ パパの育児へ

はてなブログ無料会員向け見出し下線デザイン変更方法まとめ
「テーマデザインは変更したし、これで十分。」
「見出しとか他のブログはカラフルだけど、変更はきっと難しいだろう」

そんなことを思っていませんか?
実はデザイン変更はとても簡単なんですよ。
「コピーして貼り付ける」
この操作だけで自由にデザイン変更できちゃうんです!

見出し・下線はブログの見やすさに直結する要素なので、デザインをデフォルトのままにしてるなんてもったいない!
早速、デザインをカスタマイズしちゃいましょう!


こちらの記事では以下2つの変更について扱います。
・見出しデザインの変更
・下線デザインの変更




見出しとは

どのブログでも必ず使われているであろう、見出し。
これを使用するとブログがぐっと見やすくなります。
また見出しを使うと目次も自動生成できたりSEO的なメリットもあったり
良いことづくめなので使わない手はないですね!

ちなみに辞書で調べると「見出し」の意味は以下になります。

1.新聞・雑誌などの記事の内容が一目でわかるようにつけた標題。
2.本や帳簿の内容がすぐわかるように書き出した目次・索引など。
3.辞書で項目を示すために掲げる語。見やすいように太字などで示す。

うん、分かりやすい。
使い方が分からない言葉などは辞書で調べると理解が早まりますよ。


はてなブログの見出し設定

ツールバーで設定できるのは、見出し(h3~h5)となります。
はてなブログの見出しh3からh5の説明

ただSEO的には見出しは「h2」から使うべきのようです。
はてなブログで「h2」を使用するにはタグを手書き挿入するしかないのでちょっと面倒です。
ちなみに見出しタグには使用順があります。

見出しタグの推奨使用順は以下。
 <h1>⇒<h2>⇒<h3>⇒<h4>⇒<h5>
 ※<h1>は一回だけ使用推奨。



見出しデザイン変更方法

とても簡単に変更できます。

「デザイン」⇒「カスタマイズ」⇒「デザインCSS」
ここに好きなCSSコードを入力するだけで変更可能です。

はてなブログのデザインCSS選択までの画面操作



見出しデザイン見本

ただCSSに詳しい方なんて、そうそういませんよね。
そんなあなたのために、デザインの参考になるサイトをご紹介します。
https://saruwakakun.com/html-css/reference/h-designsaruwakakun.com

こちらのサイトではデザイン見本とそのCSSコードが一緒に書かれているので、
コピー&ペーストで、簡単にデザインを利用することができるようになっています。

使用方法は簡単!

1.お気に入りのデザインを見つける。
2.デザイン見本からCSSコードをまるっとコピーする。
3.コピーしたCSSコードをブログデザイン設定のデザインCSSに貼り付ける。
4.貼り付けたCSSコード内の「h1」という文字を「h3」「h4」「h5」に変更する。

<4について補足>
 上記サイトではCSSコードに記載されている見出しタグが全て「h1」となっています。
 例えば「h3」のデザインを変えたいのであれば、「h1」と書かれた部分は全て「h3」に書き直してください。


下線とは

文字装飾の一部です。
これは見慣れたものだと思いますので説明不要ですよね。
ちなみに辞書で調べると「下線(アンダーライン)」の意味は以下になります。

心覚えや注意をひくため、横書きの文章の必要な箇所の下に線を引くこと。

辞書の説明は分かりやすいですね。

下線を使用すると強調したい部分を目立たせることができるので、こちらもとても大事なブログ要素になります。
でもただの下線だと細い線が文字のしたに引かれるだけなのであまり目立たないですよね。

この下線をマーカー風にしてより目立つように変更しているブロガーの方が多くいます。
私もマネしたい!って思ったので、やり方説明します。

下線デザイン変更方法

こちらは「見出し」よりも少し難易度が上がります。
マーカー風にしたいのであれば、以下サイトの方法が一番簡単です。
www.gadgerepo.com
こちらの方法では、下線(/u)を全て新しいデザインに置き替えるので過去の記事にも反映されるようになっています。
また「strongタグ」「emタグ」を手書きすれば、3種類の下線を使用することができます。

下線デザイン見本

下線デザインの見本はこちらのサイトが参考になります。
下線画像を用意すれば、マーカーの他に波線だったりボーダ柄の下線が使えるようです。
saruwakakun.com

!注意!
こちらのサイトで紹介されている下線デザインの変更方法はhtmlタグを手書き+CSSコードの追加が必要になっています。
初心者の方はちょっと難しいかもしれません。(少し勉強すれば簡単なんですけどね)

まとめ

ブログデザインは記事の見やすさに直結します!
またブログの個性も出せると思うので、あなたがベストだと思うデザインを試行錯誤して探してみてください。
ちなみに私のブログデザインはまだ適当です(おい

「下線」デザインの変更はもっと簡単に自由に変更ができそうなので勉強して、やり方が判明したら記事にしたいと思います。

ではまた。

プライバシーポリシーについて