livedoorブログのテンプレートはPCは「法人用02」スマホは「法人用」を使用していた。

ブログの本文だけ長々と続けるより、見出しがあった方がかっこよかったので、なんとか見出しを作りたい。

※以前にCSSをUPして上下ラインの出る見出しを表示させる記事を書きましたが、上手く表示されないので記事を全面的に書き直しました。

見出しの見え方


livedoorブログのテンプレートはパソコンは「法人用02」、スマホは「法人用」を使用。

スマホから


スマホ見出しサンプル画像

PCから


パソコン見出しサンプル画像

作業の流れ




  1. 見出しタグを定型文に登録する(毎回コピーする手間を省く為)

  2. 見出しタグを使う



記事内に入れるコードは、毎回同じで記事ごとに入れないといけないので、定型文にしておくと効率的。

見出しタグ




[HTMLタグ編集]画面で、見出し文の最初と最後に入れる。


<h2>最初の見出し</h2>

<h3>最初の見出しの1つ下の階層 h3</h3>

<h4>最初の見出しの2つ下の階層 h4</h4>

以上を記事の見出し毎に、使っていく。

大きい見出しのh2だけを何回も使って、記事を書いても大丈夫。

見出しタグの種類


見出しタグはh1~h6まであるけど、h1はページ内に1つだけで主にタイトル等に使用するので、記事内の見出しはh2~h6を使うことになる。

詳しくは以下のサイトに図解で説明されていて、読むと理解しながら使えるのでお勧め。

「【HTML】見出しタグの使い方:h1〜h6はどう使い分ける?」サルワカ

見出しタグを記事に入れる




  1. 記事画面で[HTMLタグ編集]に切り替える

  2. 定型文機能を使って「見出しタグ」を入れる



定型文登録をしていないならコピーして記事内に張り付ける。

livedoorブログの画面


HTMLタグ編集の画面。

ここの画像用に改行を入れて見やすくしたけど、本当は文字が全部連なって表示されていて、すごく見にくい。

見出し作成作業画面

見出しタグを定型文に登録する


定型文の登録の仕方は以前の記事で書いるので、こちらをどうぞ。

https://kiraku365.com/livedoorblog-making-teikeibun/

※定型文登録が難しいなら、結局は見出しタグがあればいいだけなので、手作業で見出しタグをコピーして張り付けをすればいい。

【結論】見出しがあると見やすい


ひと手間あるけど、やっぱり見出しがあると見やすくていいね。

当時は、ネットで見かけたカッコいいブログと同じデザインのものを作りたいって、四苦八苦してたな。

色々な点(主に知識)で出来ない事がほとんどだったけど。

思い起こせば、遠く(Wordプレス)に来たもんだ。

まあ、Wordプレスはブログ書けるまでの道のりが超難関だったけどね。