Twenty Seventeenで投稿ページに目次をつける

【自分のための覚え書き】
環境:
【WordPressでTwentySeventeenをそのまま使用している】
【ホームページの上部にメニューバーを設置している】
目的:
【Easy Table of Contentsを使用して目次を作る】
【ジャンプ先がずれるという問題を解決する】

文系シニア女子、何時間もの奮闘の末、Easy Table of Contentsというプラグインを使って、投稿ページに目次をつけて、該当する個所にジャンプさせることに成功

◆ただし、モバイル端末では現在のところ機能していない(みたい)

◆(数時間後の続報)パソコン画面でも機能していない? WordPressの編集画面から「変更をプレビュー」というのを選択すると、きちんと目次がついたページが見られるが、その画面から、一度ほかのカテゴリーに行ってから戻ると、目次が消えてしまう! プレビュー機能は使わず、homeを表示して「ウェブ奮闘記」のカテゴリーに移動しても、目次はない。(この件については下の◆参照)

さらに、今、先週20210621日付の、このプラグインに関する運用ウェブ記事の最初に【注意!】として「Easy Table of Contentsは、アップデートにより目次のリンクURLが非常に複雑になったので、このような不安定なプラグインはあまりおすすめしない。同じ目次プラグインで運用歴の長い Table of Contents Plus の方が安定していると思う」という記述を見つけた。

Table of Contents Plusは長い間更新されていないから、Easy…の方がよい、というほかの記事を読んでEasy…を使ってみたのだが、これは…Plusを試してみた方がいいかもしれない。現在、プレビュー以外のウェブページ上で目次が作られていないのは別の原因かもしれないが……。

今調べてみたらPlusは去年から更新されていなかったものが4日前に更新されていた。これは試してみるべきだろう。しかし、今日はもう疲労困憊……と言いつつ、Plusをインストール、有効化して設定画面をみたが、「ずれ」を直せそうな設定がなかった。試しにEasyを無効化してPlusを使ったページをプレビューで見てみた。しかし、目次機能はあるが、やはり「ずれ」る。プレビュー以外では目次は表示されない点はEasyと同じ。そのため、Easyに戻したところで、今日はおしまい。

◆でも、どうも、個々の記事のタイトルをクリックして表示すれば目次が表示されるようなので、これでいいのかもしれない。ただ、モバイルではだめなのは確か。(続報:モバイルでも記事のタイトルをクリックすればOKだった。)

(以下はまだ「成功した」と思っていた時に書いた本来の本文。)

昨日、Tiny MCE Advancedというプラグインを使って、投稿ページ内のジャンプを試みてみたが、ジャンプが先ずれるという問題を解決できず、断念。

以下、Easy Table of Contentsを使って成功するまでの顛末を覚え書きとして残しておく。と同時に、目次を作る作業をもう一度再現する。

1.まずプラグインをインストール

この作業はだいぶ慣れた。WPの編集画面で「プラグイン」→「新規追加」→プラグインの名前で検索→「インストール」→「有効化」という手順。注意としては、今自分が使っているWPのヴァージョンで動作確認がされているプラグインを使うこと(その方が安全そう)。今回インストールしたのはEasy Table of Contents。

2.プラグインの一般設定

これには少し時間がかかった。まず、有効化しても、ほかのプラグインのようにWPのツールバー(?左に縦に出るメニュー)に表示されなかった。いろいろやってみて、結局WP編集メニューの「設定」→「目次」と選ぶと、このプラグインの設定画面に行けることがわかった。

設定は「ほとんど」全部デフォルトのまま。ただし、自動的に目次が作成される「表示条件」は「3」とした(続報:あとで増やした)。そのほか、「見出しラベル」とか「折りたたみ」とか、ちょっとよくわからないところはチェックを入れなかった。また、目次上で見出しの前に自動的に数字を付ける機能(らしい)「カウンタ-」も「なし」にした。自分でテキスト作成中に数字を入れるほうがわかりやすいという判断。

3.「ずれ」調整のための設定

ジャンプ先がずれることと関係がありそうな「スクロールを滑らかにする」にはチェックを入れた(ずれを直すには「ここをはずすといい」と書いてあるウェブ記事もあった)。その後、以上の設定で下の4の作業をして目次を作ってみたが、やはりジャンプ先がずれた。そのため、「設定」に戻り、終わりの方にある「スムーズスクロールのオフセット」の欄のデフォルトの数値30を100にした(試行錯誤の結果たどり着いた数値)。

最後に設定の「変更を保存」のボタンを押すのを忘れないように!

実は、数日前にページ内ジャンプを試みていた時に、ウェブで見つけた解決法の中にあった「……のオフセット」というのが、これだったようだ。あのウェブ作者も同じプラグインを使用していたのだろうか? ただし、そのウェブ記事ではこの数値を0にするとうまくいくとあったが、私の場合はメニューがページの上部に固定されていたせいか、0ではうまくいかなかった。いろいろ数値を変えてみて(すごく時間がかかった!)、デフォルト30から増やして、100にするとうまくいった。

その下の設定項目「モバイル機器で見た場合うんぬん」、というのは0のまま。

◆携帯で確認したら、そもそも目次が自動生成されていなかった。今後の課題。

4.テキストに見出しをつける

これがまた大変だった。これまで、「見出し」を使って文章を書いたことがなかったから。試行錯誤の末、今最善の方法に思えるのは、まず普通に(編集画面左上の枠内表示「段落」の状態で)テキストを書く。ただし、見出し部分の上下は改行しておく。そのあと、見出し部分をマウスでドラッグして選んでから、編集画面上左上を「見出し2」に変える。そうすると、見出し部分の文字が大きくなる。これで準備OK。

こんな基本的なWordPressの使い方も知らずに二年もブログを書いているんだから、文系シニア女子、恐るべし!

5.プレビューで確認

準備はOK。でも、WPの編集画面「ビジュアル」では、見出し部分のフォントが大きくなっただけで何も起きない。「目次」が自動生成されないので、またしても失敗かと思って、何度かやり直したりしたけれど(これが素人の悲しさ!)、ふと思いついてプレビューを見てみた。

できていた!

これも基本的な使い方だよ……。

6.今回の感想

Easy Table of Contentsは確かに比較的簡単ではあったけれど、それでも文系シニア女子には難解であった。不親切、排他的……そんなネガティブな言葉が何度も頭をよぎった。

プラグインのインストールや設定の仕方を説明したウェブ記事はたくさんあった。でも、「使い方」というのは、あまりに基礎的(文章に見出しを入れることなどだれもがやっていることなのだろうか?)(あるいは、プラグインの有効化ののち、メニューにそれが出てこなかったら、「設定」のところを見る、とかいうのは常識なのだろうか?←WPの編集に際しての基本らしい……)であるためか、情報を見つけることができなかった。そのため試行錯誤に長時間かかったぁ…!

結論:ウェブの世界は、依然として、文系シニア女子には敷居の高い世界である。

もし、万が一、この記事を読んでくださる方があって、Twenty Seventeenで目次のジャンプ先のずれが直った!という方がいらっしゃったら、ぜひ下記♡マークを押してお知らせください!