- 2014-6-13
- Update 2018-5-7
- Wordpress
ネットサーフィンの先に見えるものがある！
みなさんこんにちはミュンヘンのWeb担当mak utsunomiya(@munchen_stil)です！趣味をはるかに超えたネットサーファーである私が、これ良いなーと思ったプラグインをどんどんご紹介していく名物コーナーの時間がやってまいりました！
サイトをリニューアルする前は、ただWordPressが有名だから使ってただけで、多少便利な代物的感覚しかなかったものですから、プラグインなんて物もそんなに使ったこと無かったんですよね。
だから、WordPressの本当の利便性なんてわかりもしなかったんですが、半年間の趣味サイト構築で見えてくるものもありました。(ネットサーフィンもバカにできませんね)
そこで目に付いたのが、WordPressサイトで見るWikipedia風の見出しです。このサイトでもお世話になっている「Table of Contents Plus」というプラグインで作れます。
一つの記事でも、本当に自分が求めてる答えがある場所がわかりやすくなるので、サイトの離脱率も少しは減らせるんではないかなと思います。ウィキが見やすいのも目次があるからだと思いますしね！
私は、カッコ良いから入れてみましたけど^^
「Table of Contents Plus」を使うには！
見出しタグが大切。
Table of Contents Plusはいわゆる、Ｈ2やＨ3などの見出しタグの設定が肝になってきます。ここが上手くいってないと、このプラグインを入れても意味はありません。
本の目次を開くとこんな感じだと思います。
1章 WordPress (見出し H2)
1.1 ブログソフトウェア (見出し H3)
1.2 仕組み (見出し H2)2章 サイト構築法 (見出し H2)
2.1 レンタルサーバーを借りよう (見出し H3)
2.2 WordPressをインストールしよう！ (見出し H3)
()の中がサイト記事用の見出しになります。このように大見出しがあってその中に小見出しを作るという順番を無視してはいけません。(見た目的にも検索エンジン的にも)
見出しをしっかり作ってサイトに訪れた人が、見たい場所にすぐ飛べるようにしておくと見ている人に好印象ですよ！それがSEOに繋がるんではないかと思います。
WordPressには、投稿ページに簡単に見出しをつけることが出来ますが、ブログによってはHTMLで記述しないといけません。といってもタグは簡単で、以下のようにタイトルを囲むだけです。
<h2>見出し2</h2>
<h3>見出し3</h3>
注意点
h1タグは記事のタイトルに当たりますので、一記事一回までです。 h2以下のタグは一つの記事にいくら使っても良いとなっていますが、訪れた方の利便性を考え無茶な使い方はしないようにしましょう。
プラグインからサイト作りを学ぶ
私が見出しを意識し始めたのが、このプラグインを入れてからです。それまでは全く意識することはありませんでしたが、サイトをかっこよくしたいというかなり不純な動機で覚えました。しかし、プラグインからサイト作りを学ぶこともあるんだなと思う今日この頃です。
Table of Contents Plus導入と設定
導入方法
- プラグイン新規追加
- Table of Contents Plusで検索
- 有効化する
- 管理画面 TOC+で設定変更
設定方法
当サイトで設定している方法のみ記載しています。キャプチャを撮っていない所や設定箇所以外はデフォルトです。Sitemapは触らなくても大丈夫です。Helpは英語になってるので、英語に自信がある方は活用して下さい。
Position : 見出し位置 デフォルト設定です。
Show when : 目次の最低表示見出し数を設定します。
Auto insert for the following content types：投稿ページや固定ページなどでの表示設定をします。
Heading text : 見出しのタイトルを設定します。
Show hierarchy : 階層表示の設定をします。
Number list items : 目次に番号を付けます。
Enable smooth scroll effect : チェックを入れるとスクロールしながら見出しに飛びます。
Width : 横幅を設定します。
Wrapping : 表示位置を設定します。
Font size : フォントサイズの設定をします。
Presentation : 目次のデザインを設定します。
Advanced(show) : 以下の非表示窓が開きます。
Heading levels : 目次に表示させる見出しを設定します。
注意点
これでウィキぺディア風の目次が完成しました！基本的にはキャプチャ部分の変更だけでカタチになるはずです。後はご自身のサイトデザインと合わせて微調整していきましょう。
また、プラグインはサーバー環境やテンプレートなどで不具合を起こす場合もありますので、導入前はバックアップをとっておきましょう。
まとめ
自己満足の世界かも知れませんが、このプラグインを入れてから記事の目的の場所がわかりやすくなったと思います。まだまだ文章を端的に表す見出しは上手く作れませんが、数をこなしたりしていくうちにだんだんと上手くなるはず！
いや、そうならなければなりませんね！
目標はよりサイトで遊んでもらうことです。このプラグインで少しでも利便性が高くなると良いですね！
