Plus」で記事の目次を自動生成する方法とその設定理由【WordPress】ここあんぐるここから見えるモノ、やれるコトを。ブログこれまでに5つの記事を書いてきました。書いている中で記事を読み返していると、文章全体の構造が掴みにくかったり、特定の見出しにたどり着くまでに一生懸命スクロールして見つけなければいけませんでした。Plus」というWordpressプラグインを導入することでこれらを解決できましたので、各設定の理由と共に書き残しておこうと思います。このプラグインは、以下のような目次を記事文章のhタグの構造を自動解析することで表示しています。各見出しはリンクになっていて、クリックするとその見出しの位置まで移動できます。Plus」で検索すると以下のプラグインが表示されるので、インストールして有効化します。2017年9月の時点で最終更新が2年前で、最近はメンテナンスがされていないようなので注意が必要です。本文の内容から目次を自動生成するだけのはずなので、そこまで気にしなくても良いかと思います。継続的にメンテナンスされている目次生成のプラグインで良いものを見つけたらそれも試すつもりです。以下のように設定をしています。記事中における目次の位置を設定します。「最初の見出しの前(デフォルト)」が導入文->目次(見出しの一覧)->最初の見出しという順で表示できるので、一番自然かなと思います。(記事下に目次を表示する「下」なんていう選択肢がありましたが、索引として使うのでしょうか。この構成は見慣れないため変な感じでした。見出しを出すための条件としてhタグの数を指定します。この値より少ない数の見出ししか無い記事の場合は、目次が表示されません。目次は見出しの数が少なくても基本的に出すべきと考えているので、最小値の「2」を設定しています。目次を表示したいコンテンツの種類を設定します。デフォルトでは、「page(固定ページ)」のみが選択されているため、投稿記事にも表示したい場合は、「post(投稿記事)」も選択する必要があります。投稿記事はもちろん、固定ページにもプロフィールや何かを説明するページはそれなりの文章量になるはずであるため、その両方を選択しています。見出しテキスト目次の上にタイトルを表示するか、表示する場合はその文字列を設定します。目次であることを認識してもらうために、ここは素直に「目次」と表示させています。閲覧者が目次を非表示にできるようにするかを設定します。閲覧者がわざわざ目次を非表示にすることは少ない、操作できるメリットも小さいと考えているので、不要と判断しチェック無しにしています。h4などのhタグを階層的に使用している場合、これをチェック有りにすると目次を階層的に表示できます。h4などの各見出しが同じ階層に横並びに目次に表示されます。階層表示を成している文章をあえて横並びにすると構造の意図が伝わりにくくなるので、チェック有りに設定しています。番号振り目次の各見出しの先頭に見出しの番号を表示するかを設定します。番号が無いと記事の分量を直感的に把握しにくかったり、階層表示も見づらく感じたのでチェック有りにしています。目次の見出しをクリックした時に、その場所へ瞬時に移動するか、スクロールするようになめらかに移動をするかを設定できます。チェック無しにすると、ブログのデザインによっては移動後に見出しの上部が画面外にはみ出して欠けた状態になります。後述する移動先の位置を微調整できるようにするため、チェック有りにしています。目次のdivタグの横幅を設定します。「絶対」はピクセル指定、「相対」はHTML構造において目次の親タグの横幅に対する割合を設定できます。「自動(デフォルト)」は見出しの文字列がちょうど入る幅で自動で調節されるため、これを設定しています。回り込み目次がその下の文章の左右どちらに回りこみ表示させるかを設定できます。回りこませる必要がないので「なし(デフォルト)」を設定しています。文字サイズ目次のフォントサイズを設定できます。デフォルト値でちょうど良かったので「95%」を設定しています。プレゼンテーション目次の見た目を設定できます。問題はないため「グレー(デフォルト)」に設定しています。あとで気分が変わったら変更するかもしれません。「上級者向け」の横にある「表示」をクリックすると設定できます。細かい設定が多いので、ここでは実際にデフォルト設定から変更した項目のみを記載します。見出しレベル目次に表示する見出しの階層を設定します。目次で深い階層の見出しまで表示すると鬱陶しいですが、適度に階層構造も表示させたいため、「h2」と「h3」のみを表示設定しています。前述した「スムーズ・スクロール効果を有効化」を有効にするとこの設定が適用されます。目次の見出しをクリックしてスクロール移動した時に、移動先の位置(見出し上部の間隔)を調整できます。Simplicity2のデフォルトデザインでちょうど良いと感じた「40px」を設定しています。これはブログのデザインによって変わる部分ですね。この設定で作成した目次この記事の冒頭でも表示されていますが、このような見た目になります。Plus」というWordpressプラグインを使うと、手軽に投稿記事中のhタグの構造から目次を自動表示することができます。目次は閲覧者がその記事の大体の内容が把握でき、そこに手軽にジャンプもできるため使い勝手が向上します。記事を書く側も文章構造を一目で把握できるため、記事執筆に役立てることができます。Checkerが出す「type属性を省略すべし」という警告に対する対処法を考えてみました。開発側でコードを修正するのは大変なので、記事更新時の運用側でHTML構文チェック時に警告を非表示にすることで対処することにしました。記事を読むブログの初投稿の書く内容に迷ったら「ブログの原点」を記録しよう初投稿の内容に何を書くか迷ったら、まずはブログの原点を表すスクリーンショットを撮ることが手軽なのでオススメします。ブログを運営していったある時点で原点を振り返り、初心を思い出す良いきっかけを作ることができます。Consoleのクリックが1日ズレてる気がしたから調べてみたSearchConsoleが表示する日付が、日本時間とズレてクリックが計上されてたので調べてみました。原因はSearchConsoleのタイムゾーンがPDT(太平洋夏時間)で固定で、日本時間と「16時間」も時差があったからでした。記事を読むSimplicity2の「インデックスリストミドル」にウィジェットを表示させる方法【WordPress】Simplicity2の「インデックスリストミドル」という位置(記事一覧ページの3記事目と4記事目の間)へのウィジェットの表示条件とその設定方法をまとめました。一覧リストのスタイルの設定と記事一覧ページに表示される記事数がポイントです。記事を読むSimplicity2の各ウィジェットの設置位置を視覚化してみた【WordPress】Simplicity2のウィジェットの設置位置の「インデックスリストミドル」「フッター左」などがどこを指しているのかすぐに分かるように設置位置を視覚化してみました。広告専用のウィジェットやその使い分けについて、広告設置の参考にできます。MarsEditの30日無料トライアル版を導入して記事を投稿する方法【WordPress】30日間無料のMarsEditトライアル版をインストールしてWordpressへ投稿する手順をまとめました。オフラインで、かつリアルタイムにプレビューを見ながら記事を編集できるメリットがあるため、ブログ更新の効率が向上します。コメントをキャンセルメールアドレスが公開されることはありません。