クラシトトノエ*賃貸の階段のあるおうち

メゾネット2LDKのおうちでインテリア・収納・家計を整えて、シンプルライフを目指しています

ライブドアブログでの見出しの使い方とカスタマイズ

若い頃に仕事でプログラミングをしていましたが、ウェブ関係はほぼ初心者です。
個人的にホームページを作成していた過去もあったような…?そんな程度です(^^;
見よう見まねで始めたブログ。
日々試行錯誤をしていますが…
「見出し」って、とても文章が見やすくなりますよね!

 

 

見出しの意味と使い方

私が考えていた見出しとは、ただ単に見た目が良くなって、文章が読みやすくなるだけだと思っていました。
しかしそれは間違った使い方をしてしまう原因だったようです。

・ブログを読む人に、文章をわかりやすく伝える
Googleに記事の重要なキーワードを伝える

これらを正しく理解していないと、以前の私のように間違った使い方をしてしまいます。

<h>見出し</h>

私はこんな使い方をしていました(;^_^A
見出しはh1~h6で順番に使っていくものと気づき…
改めて、間違った箇所を直していくことにしました。

 

ライブドアブログでの、見出しの入れ方

ライブドアブログでブログを書く時の画面には、見出しを入れるボタンなどはありませんよね。
ならば、自分で作るしかありません( *´艸`)

 

見出しのhtmlタグを記事内で使用する

ライブドアブログでは、cssを見たところ記事のタイトルがh1となっているようです。
h1は記事内で一番偉く、使うのは基本1回ということで、私たちが記事内で使えるのはh2からということになります。

「記事を書く」画面で「HTMLタグ編集」というボタンがあります。
ボタンを押すとhtmlで書かれたブログ記事が表示されると思います。
見出しを入れたい箇所に、<h2>見出しを入力</h2> を入力します。

 

あらかじめ定型文に登録する

上述のように、いちいちhtmlタグ編集で入力していくのは面倒ですよね。
私は定型文に登録して使っています。

「ブログ設定」>「基本設定」>「定型文」>「新しい定型文を作る」

f:id:ku-kahan:20180916235827p:plain

このように入力しておくと、いちいちhtmlタグを編集しなくても、見出しがいつでも使えるようになります。
私はh2とh3くらいしか使わないかな、と思ったので、h3まで登録しています。

 

見出しのデザインを変更する

使用しているブログデザインによって、見出しのデザインもあらかじめ決まっているかと思います。
このブログは、シンプルかわいいを目指していたりします(笑)
見出しのデザインは、ブログを彩る重要な要素だと思っています。

素敵な見出しを探して、参考にさせていただきました。

www.nxworld.net


こちらのサンプルを、
「ブログ設定」>「デザイン/ブログパーツ設定」>「PC」
>「カスタマイズ」タグ>「CSS」タグ内


記事本文というコメント付近にあるこの箇所

f:id:ku-kahan:20180917000011p:plain

h2とh3の部分を参考ブログからコピペさせていただきました。
CSSをいじるのは自己責任でお願いします。不具合が生じても責任は負いかねます。

見出し2(h2)はこのような表示になり、

f:id:ku-kahan:20180917000049p:plain


見出し3(h3)はこのような表示になります。

f:id:ku-kahan:20180917000112p:plain


どうでしょうか?シンプルかわいくなっていますかね(;^_^A
しかし残念ながらスマホ版にはCSSは反映されないようです。

 

まとめ

ブログを始めて3か月、ようやく見出しの大事さに気づいた私。

見出しとは、
・ブログを読む人に、文章をわかりやすく伝える
Googleに記事の重要なキーワードを伝える

見出しの使い方は、
・見出しはh1が一番偉く、ライブドアブログではh2から使用していく
ライブドアでは見出しは定型文に登録しておくと使いやすい
cssで見出しのデザインを好みのものに変更できる

これから徐々に過去の記事をきちんと修正していきたいと思います。


最後までお読みいただきありがとうございました。