このサイトの目次は、トップページに配置しています。
記事一覧のリンクをトップページに置いておく事で、誰でも目的の記事にすぐ辿り着けます。
探していない記事でも「おや？」と思わせる記事タイトルにしておく事で、記事に飛んでもらえる可能性もあります。
ただ、私個人的には「〜は間違っている！」とか「ブログ利用者の98％が〜」とか「〜でまだ消耗してるの？」といった、煽りタイトルが好きになれません。
大げさ、決めつけ、極端な否定、などなど狙い過ぎて内容と噛み合っていない場合が良くあります。
確かに目を奪われる衝撃的なタイトルは、興味を持ってもらえますのでPV数は増えます。
内容が本当に衝撃的な内容であれば良いのですが、そうでなかった時のガッカリ感は大きいです。
チョコを買ったのに中身がポテトチップスだったら二度と買わないですよね。
そんなサイトに何度も訪れようと思うでしょうか？
少なくとも私は、二度と訪問しないよう避けます。
最近は閲覧者も煽られ慣れてきており、煽りタイトル記事が避けられる傾向も出てきています。
ある程度、興味を引くように面白おかしくタイトルを付けるのは良いと思います。
狙い過ぎたタイトルのせいで自ら記事の価値をさげてしまう場合もあります。
記事のタイトルは、記事内容に合ったものが基本です。
目次の目的は、あくまでも１クリックで欲する情報に辿り着けるようにするもので、閲覧者を釣るものではありません。
「上手く釣られたなぁ〜！」と笑顔になるより「はぁ？何これムカつく！」と渋い顔になる割合が多いと思います。
目次をトップページに置くとどうなるか
目次として記事一覧をトップページに置くと、どうしても縦に長くなってしまいます。
最新の記事は、目次の下に押し下げられます。
パソコンでブログを観る分には良いのですが、スマホ等で見ると目次の長さ分スクロールしないと最新記事が読めません。
記事が多くなればなるほど目次は、縦に伸びますので、最新記事を見てもらえる可能性は減ります。
これはデメリットです。
私は本屋さんで本を買う時、先ず目次を見ます。
そして、本文を軽く読んでみて面白そうなら購入します。
本は目次を何度も見ながら読みませんが、ブログを参考書と考えると目次は見たい時に、すぐ確認できる場所にないと使いづらいです。
目次でどんな事が書かれているか大体の構成をお伝えして、興味がある方には参考書のように使って貰えるように、当ブログはトップページに目次を配置しています。
サイトマップを記載したページを作り、グローバルメニューに配置して１クリックで飛べるようにしても、同じ効果が得られると思います。
ただ、わざわざクリックしてサイトマップを観てくれる方はそう多くはないでしょう。
カテゴリがあるのに目次は必要か？
目次が無い場合、カテゴリが活用されます。
サイトマップ、記事一覧、目次と比べると「カテゴリ」というのは、アバウトな記事分類方法です。
通常１カテゴリに幾つかの記事が入ります。
閲覧者は目的に近いカテゴリから情報を得ようと１つのカテゴリをクリックします。
しかし、表示される記事に目的情報があるとは限りません。
閲覧者は情報を求めてカテゴリ内の記事を行ったり来たりして探しまわる事になります。
カテゴリを細かく分けて行けば、カテゴリが目次の役割を果たしてくれる気もしますが、サイドバーは横幅が狭いので見づらいです。
目次やサイトマップを作り、カテゴリと記事内容を一目で解るようにしてあげれば、閲覧者に無駄な時間を使わせずに済みます。
ブログは記事が多くなってくると目的の記事を見つけるのが困難になってくるものです。
そこをどう探しやすくするかは重要です。
目次とカテゴリは同じような役目のため、存在意義を奪いあいます。
目次を階層化してやれば、カテゴリ分けの役目を持たせる事が可能です。
当ブログのように目次にカテゴリ要素を入れたら、思い切ってカテゴリを削除してしても良いと思います。
目次が無いブログでは、カテゴリは必須だと思います。
見づらいというデメリットはありますがカテゴリ分けを細かくして、目次的な役割を持たせるのが本来のカテゴリの使い方です。
トップページの先頭に最新記事が表示できるのはメリットも多いです。
日記ブログなど情報が多岐にわたる場合は、目次を必要としないでしょう。
その場合は、カテゴリのようなざっくりした分類の方が使い勝手が良いです。
何でもかんでも目次がありゃ良いってものでもありません。
目次を作るかどうか、どこに設置するか、カテゴリの扱いをどうするかを考えてみましょう。
当ブログは、カテゴリのカスタマイズ記事があるので、目次とカテゴリを共存させています。
目次があっても、カテゴリのリンクを押して記事に移動する方も時々居るようなので、サイドバーにあるカテゴリを消しづらい面もあります。
目次の設置方法
いよいよ、トップページに目次を設置する方法です。
さくらブログの管理画面から【デザイン】→【コンテンツ】を選び、ブログパーツが並んだ画面を表示します。
下にスクロールすると、画面左下にオプションボックスがあります。
「ページアイコンの表示」にチェックを入れてください。
これによりどこにブログパーツを表示するかオンオフ出来るようになります。
【記事】のブログパーツが見える位置まで上にスクロールして戻ります。
左の［コンテンツ］ボックスから【自由形式】というブログパーツをドラックアンドドロップして【記事】パーツの上に配置します。
「ト・記・過 カ」という小さいボタンが【自由形式】パーツの下に表示されていると思います。
この小さいボタンをクリックするとオンオフ出来ます。
「ト」だけを残して他の３つをグレーになるようにしてください。
これで、【自由形式】はトップページでしか表示されなくなります。
配置したブログパーツ【自由形式】をクリックします。
タイトル欄に「目次」など好きなブログパーツ名を入力します。
ここに入力する名前は、何でも構いません。
内容は以下の形で記入します。
<ul>
<li><a href="http:・・・ブログURL" target="_blank">タイトル１</a></li>
<li><a href="http:・・・ブログURL" target="_blank">タイトル２</a></li>
<li><a href="http:・・・ブログURL" target="_blank">タイトル３</a></li>
</ul>「http:・・・ブログURL」の部分は、リンクしたいページのURLを入れてください。
リンクしたいページをブラウザで開いて、URL欄をコピーすれば良いです。
数が足りない場合は、目次表示したい数分行を増やしてください。
「タイトル１」の部分は、記事タイトル名です。
そのまま目次に表示されるリンク文字になります。
記入出来たら【自由記事】ウインドー内を下にスクロールして【保存】ボタンを押してください。
ウインドーが閉じるとブログパーツが並んだ画面に戻ります。
画面下の【保存】ボタンも忘れずに押します。
これで、トップページにだけ目次が表示されるようになるはずです。
ブログを確認してみましょう。
目次に枠をつける
目次は表示されたけど、文字だけが表示されているので素気ないと思います。
そこで、目次を枠で囲ってあげます。
下記のように目次項目の上と下に、枠を作るタグを記入してやります。
<div style="background:#E0E6F8; padding:10px; border:1px dotted #5882FA;">
<ul>
<li><a href="http:・・・ブログURL" target="_blank">タイトル１</a></li>
<li><a href="http:・・・ブログURL" target="_blank">タイトル２</a></li>
<li><a href="http:・・・ブログURL" target="_blank">タイトル３</a></li>
</ul>
</div>「"background:#E0E6F8」これは、背景カラーです。
「dotted #5882FA」これは、枠のドット線のカラーです。
好きな色に変更してください。
<div style> 〜 </div>までが、枠で囲まれます。
ブログなどで使う枠は、コピペで使えるものを紹介しているサイトが多くあるので、好きなものを探すと良いでしょう。
階層化した目次
当ブログは、カテゴリを階層化しています。
階層化している方は、階層構造もそのまま目次にしたいと思います。
目次リンクを階層化するには、入れ子状に配置します。
「入れ子」状に構造化する事を「ネスト」とか「ネスティング」なんて呼びます。
<ul>
<li>おにぎらず
<ul>
<li><a href="http:・・・ブログURL" target="_blank">うめぼし</a></li>
<li><a href="http:・・・ブログURL" target="_blank">おかか</a></li>
<li><a href="http:・・・ブログURL" target="_blank">ツナマヨ</a></li>
</ul>
</li>
</ul>こんな風に表示されます。
- おにぎらず
- うめぼし
- おかか
- ツナマヨ
<ol>というタグを使用すると数字を先頭に付ける事も出来ます。
<ul>
<li>サンドラズ
<ol>
<li><a href="http:・・・ブログURL" target="_blank">タマゴ</a></li>
<li><a href="http:・・・ブログURL" target="_blank">ピーナッツバター</a></li>
<li><a href="http:・・・ブログURL" target="_blank">チーズサーモン</a></li>
</ol>
</li>
</ul>こっちは、こんな風に表示されます。
- サンドラズ
- タマゴ
- ピーナッツバター
- チーズサーモン
「もくじ」というタイトル表示
目次という事を解ってもらうために、「目次」「もくじ」「CONTENTS」「サイトマップ」などタイトルが欲しい場合は、目次リストの「ul」の上に目次タイトルを書いてください。
特に難しい指定をしなくても「もくじ」などの文字が表示されます。
「もくじ」という見出しを少しおしゃれにしたいとか、装飾してあげたい場合はCSSでの指定が必要になってきます。
以下の記事が参考になると思います。
以上、目次をトップページに配置する方法でした。
おつかれさまでした！
スポンサーリンク
