投稿者: kanrinin

【自分のための覚え書き】（具体的方法の説明は中ほどの囲み目次以降）

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

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

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

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

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

１．まずプラグインをインストール

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

２．プラグインの一般設定

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

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

３．「ずれ」調整のための設定

ジャンプ先がずれることと関係がありそうな「スクロールを滑らかにする」にはチェックを入れた（ずれを直すには「ここをはずすといい」と書いてあるウェブ記事もあった）。

その後、以上の設定で下の４の作業をして目次を作ってみたが、やはりジャンプ先がずれた。そのため、「設定」に戻り、終わりの方にある「スムーズスクロールのオフセット」の欄のデフォルトの数値30を100にした（試行錯誤の結果たどり着いた数値）。

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

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

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

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

４．テキストに見出しをつける

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

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

５．プレビューで確認

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

できていた！

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

６．今回の感想

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

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

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

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

（続報20220117）ほぼ半年たったけれど、♡マークは以前としてゼロ。ということは、このブログを読んで（そもそも読む人がいないという問題はいったん置いておいて←置いておくなぁ！）、問題が解決したという人が一人もいないということ？　っていうか、読んでも書いた本人にしか理解できないということじゃない？　そういうことだったら、読んでくださった方に謝るしかない。申し訳ない！

 

【自分のための覚え書き】
【ジャンプ先をずらしておく裏ワザ実験】
【最後に解決ブログへのリンク】

以前にページ内ジャンプを設定しようとした時に、ジャンプ先がずれてしまって、うまくいかなかった。色々調べた結果、WordPressのテーマ（テンプレート）の一つ、TwentySeventeenに特有の現象のようだった。

「ソース」というのか、PHなんとかというのか、CCなんとかというのか、アルファベットが並んでいる「元データ」に何かつぎ足すとずれを直せるようなことがウェブに書いてあったが、そういう高度なことは無理。で、あきらめた。

でも、先日ウエブ上に、WordPressの設定の中に、このずれを直すような設定のしかたがあるように書いてある記事があったので、もう一度試してみようと考えた。

実験用のテキスト：

ジャンプ元
①ページ内でジャンプ
②プラグインを使う
③ジャンプ先のずれを直す

（今もジャンプ元をクリックすれば「飛ぶことは飛ぶ」が、４～５行分そもそもずらしてジャンプ先を設定してある。プラグインは問題を起こしがちなので、とりあえず、今回使ったプラグインは「無効化」したが、依然としてジャンプは可能のようなので、理解不能。とりあえず、このままにしておく。いずれは「削除」予定。）

ジャンプ元と先との間に本文を入れた方がよさそうなので、ここに顛末を少し書くことにする。

TinyMCE Advancedというプラグインを導入したが、結果を先に言うと、うまくいかなかった。やはり前と同様に、４行分ほど下にジャンプしてしまうのだ。ウェブ情報にあったような「スムーズスクロールのオフセット」の項目はWordPressの編集画面で「設定」のところには見当たらない。

試しに、ジャンプ先を四行分ずらして設定してみたが、その故意的「ずれ」の距離が目次が先に進むほど、また微妙にずれてくるみたいだし、スマホの表示ではめちゃくちゃになると思うのでこのやり方は不適切と判断。

ちなみに、このプラグイン設定中にジャンプ先の「ID」を”page”としたら、ページトップに飛んでしまうという現象が起きた。ジャンプ元と先が近すぎる？とも思ったが、

あいだにかなりテキストを入れてもページトップに飛ぶ。
IDをpageとしていたせいのようだ。questionに変えてみたら、大丈夫になった。しかしいずれにせよ、このプラグインでは無理。
次に、一応サンプル用の本文。

①ページ内でジャンプ
要するに「目次」のようなものを作りたい。
今も時々比較的長いブログを書いているが、その際、目次的なものがあると便利だと思う。
いちいちスクロールしてもらうのは不親切だし、第一「ダサい」。
ま、文系シニア女子のウェブ作成技術の限界と言えば限界。

②プラグインを使う
「プラグインはあまりたくさんインストールしない」ように、という注意を読んだこともあるが、CSSとか何とかを自分でいじるのは無理。眼が悪くて細かい文字が読めないし、そもそも、まったく意味がわからないから、ブラックボックスに手だけ突っ込んでかきまわすようなことはしたくない。
どのプラグインがいいのかまだわからない。使い方の説明がわかりやすく提供されているものをさがそう。
今のところ第一候補はTiny MCE Advanced。

③ジャンプ先のずれを直す
前に、プラグインを使わず「ソース」に文字列を入れ込むやり方で、やってみたことがあったが（あの頃はまだもう少し目が見えていた）、ジャンプした先がすれてしまって、どうしても直すことができなかった。

最初に書いたように、いろいろやったけれど、やはりずれが出て無理。

正式なずれの直し方は、やはりCSSとかいうのを使うらしく、そのために挿入の必要がある文字列が膨大！　無理。

次は「投稿ページに目次をつけるプラグイン」というのを試してみようと思う。

（続報）別のプラグインで目次をつけて、ジャンプ先をずれないようにする方法を見つけた。その覚え書きはここ。