BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» livedoorブログカスタマイズ 目次を表現する方法

このエントリーをはてなブックマークに追加

livedoorブログカスタマイズ 目次を表現する方法

   投稿日: 2016/09/29    投稿者:webコラム

7b2153880c7a84b6a2e6d1f2fbab29e9_s.jpg

こんにちは! ライターのモモタロウです。

今回は、livedoorブログカスタマイズ、目次を表現する方法をお伝えいたします。

是非、試してみてくださいね。

目次をブログに表そう

まずは、ライブドアブログにログインします。

「記事を書く」で、下の画像の入力画面にします。
20160917-1.jpg

その後、四角で囲った「HTMLタグ編集」ボタンをクリックします。

ここで、以下の通り、タグを入力していきます。

まずは、目次の部分です。

仮に<目次> と入力しておきましょう。

その後、ブログの目次とするタグを入力します。

<a  href=""#a"">目次の内容1</a>

このタグを入力すると、

「目次の内容1」の部分が、ブログの上方に現れます。
今回は、「目次の内容1」と入力しましたが、自由に変更可能です。

この「目次の内容1」が、記事本文の「目次の内容1」となります。

次に、内容1となる記事本文のタグです。

まず、<記事本文>と入力しておきましょう。

その後、

<h3  id=""a"">目次の内容1</h3>
ーと入力します。

これで、目次内容1の目次から、「記事本文」の「目次の内容1」の
記事ということがわかります。

以下、記事本文はブログは下へ向かって文章を書いていき、
目次の内容2、目次の内容3のタグを書いていきます。

目次は以下の通りです。「 #a  #b # c  」の部分は、さらに「 #d  # e 」と続けることもできます。

<目次>
<a  href=""#a"">目次の内容1</a>
<a  href=""#b"">目次の内容2</a>
<a  href=""#c"">目次の内容3</a>

記事本文については、

「 <h3  id=""a"">目次の内容1</h3> 」の後に、入力します。

<記事本文>
<h3  id=""a"">目次の内容1</h3>ライブドアブログカスタマイズ/ライブドアブログカスタマイズ/ライブドアブログカスタマイズ/ライブドアブログカスタマイズ/ライブドアブログカスタマイズ/ライブドアブログカスタマイズ/ライブドアブログカスタマイズ/

<h3  id=""b"">目次の内容2</h3>ライブドアブログカスタマイズ/ライブドアブログカスタマイズ/ライブドアブログカスタマイズ/ライブドアブログカスタマイズ/ライブドアブログカスタマイズ/ライブドアブログカスタマイズ/ライブドアブログカスタマイズ/

<h3  id=""c"">目次の内容3</h3>ライブドアブログカスタマイズ/ライブドアブログカスタマイズ/ライブドアブログカスタマイズ/ライブドアブログカスタマイズ/ライブドアブログカスタマイズ/ライブドアブログカスタマイズ/ライブドアブログカスタマイズ/

記事入力画面では、以下のようになります。
20160917-2.jpg


プレビューボタンをクリックすると・・・

20160917-3.jpg



まとめ

いかがでしたか? 一つのブログに長文を書くときは、
是非、この方法を把握しておくとよいでしょう。
どこに読みたい文章が書いてあるのかが、目次で一目瞭然となります。






カテゴリ:

TOPへ