Warning: Constant POST_PLUGIN_LIBRARY already defined in /home/pasora/pasona-sp.com/public_html/wp-content/plugins/similar-posts/similar-posts.php on line 27
Table of Contents PlusでWPの記事に目次自動生成 | 思いだし にっき
サイトアイコン 思いだし にっき

Table of Contents PlusでWordPress記事に目次自動生成

<p><img class&equals;"aligncenter size-medium wp-image-11091" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;09&sol;2645850&lowbar;s-300x200&period;jpg" alt&equals;"" width&equals;"300" height&equals;"200" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>最初に作ったWordPressのブログのテーマは権威でした。<&sol;p>&NewLine;<p>権威では、記事の初めに目次が自動表示されていました。<&sol;p>&NewLine;<p>なんせ、何も解らない頃の話。<br &sol;>&NewLine;このテーマの特徴?くらいに思っていたんですね。<br &sol;>&NewLine;でも最近、プラグインで目次を表示できることを知り、試してみました(^^)。<&sol;p>&NewLine;<p>それがTable of Contents Plusというプラグイン。<&sol;p>&NewLine;<p><&excl;--more--><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>Table of Contents Plusとは<&sol;h2>&NewLine;<p>記事にH1からH6までの見出し用のHTMLタグを使っていると、目次を生成してくれるというもの。<&sol;p>&NewLine;<p>投稿や固定ページの記事に記述した見出しタグを基に、目次を自動生成ということなので、来てくれた方が記事の内容を一目で把握できるし、そこに飛ぶこともできるのであれば便利ですよね。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>インストール方法<&sol;h2>&NewLine;<p>ダッシュボード(管理画面)の左側から「プラグイン」を選択、&Implies;「新規作成」をクリックします。<br &sol;>&NewLine;検索窓に「Table of Contents Plus 」と入力して検索。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3988 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;09&sol;tc1&period;png" alt&equals;"検索" width&equals;"363" height&equals;"50" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>プラグインが表示されたら「今すぐインストール」をクリックです。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3989 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;09&sol;tc2&period;png" alt&equals;"Table of Contents Plusプラグイン" width&equals;"398" height&equals;"368" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>このバージョンではテストされていないというのが気になるけど・・・バックアップとったところだし(^^; まっいいか!と先に進めます。<&sol;p>&NewLine;<p>「有効化」をクリックすればOK。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3990 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;09&sol;tc3&period;png" alt&equals;"有効化" width&equals;"391" height&equals;"360" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>次に使うための設定をします。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;&NewLine;<&excl;-- WP QUADS v&period; 2&period;0&period;92 Shortcode Ad -->&NewLine;<div class&equals;"quads-location quads-ad" id&equals;"quads-ad" style&equals;"">&NewLine;<&sol;div>&NewLine;&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>Table of Contents Plusの設定<&sol;h2>&NewLine;<p>有効化すると、ダッシュボード左側の「設定」の中に「TOC&plus;」が表示されます。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3991 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;09&sol;tc4&period;png" alt&equals;"設定" width&equals;"327" height&equals;"168" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>「TOC&plus;」をクリックして設定画面を出します。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3992 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;09&sol;tc5&period;png" alt&equals;"設定画面" width&equals;"639" height&equals;"696" &sol;><&sol;p>&NewLine;<p>「基本設定」のタブをクリックします。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h3>基本設定<&sol;h3>&NewLine;<p><strong>「位置」<&sol;strong> 目次の表示位置です。<br &sol;>&NewLine;デフォルテでは「最初の見出しの前」になっています。<br &sol;>&NewLine;これが一番ポピュラーですね。<br &sol;>&NewLine;最初の見出しの後や上・下というのは・・・見かけませんが、好みで(^^;<&sol;p>&NewLine;<p><strong>「表示条件」<&sol;strong> 初期設定は「4つ以上見出しがあるとき」になっていますが、記事によっては2つくらいの時もあるかもなので、ここは2に直した方が無難ですね。<br &sol;>&NewLine;4のままだと、見出しが3つとか2つだと目次が表示されません。<&sol;p>&NewLine;<p><strong>「以下のコンテンツタイプを自動挿入」<&sol;strong> postが一般投稿 pageが固定ページのことです。<br &sol;>&NewLine;postにチェックをつけます。<&sol;p>&NewLine;<p><strong>「見出し、テキスト」<&sol;strong> 目次のタイトルのことなのでデフォルトのままでいいと思います。<br &sol;>&NewLine;見出し欄にはタイトルをどう表示するか入力します。<br &sol;>&NewLine;例が書いてあります。ここも自由に。<&sol;p>&NewLine;<p><strong>「ユーザーによる目次の表示・非表示を切り替えを許可」<&sol;strong> これにチェックを入れている場合は表示・非表示をどう現すかです。<&sol;p>&NewLine;<p>デフォルトのままだとわかりにくいので日本語で入力しました。<br &sol;>&NewLine;他はデフォルトのままでいいと思いますが、色やデザインを変えたい場合は<br &sol;>&NewLine;<strong>「デザイン」<&sol;strong>で選びます。<&sol;p>&NewLine;<p>画面下部にある「上級者向け」のは、初期状態では非表示になっています。<br &sol;>&NewLine;クリックして設定項目を表示させます。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h3>上級者向け設定<&sol;h3>&NewLine;<p><img class&equals;"size-full wp-image-3993 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;09&sol;tc6&period;png" alt&equals;"上級者向け設定" width&equals;"635" height&equals;"429" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>ここで変更するのは<strong>「見出しレベル」<&sol;strong>くらいです。<br &sol;>&NewLine;目次に使用する見出しレベルの階層の設定します。<br &sol;>&NewLine;目次に表示させたくない見出しレベルは、チェックを外して非表示にします。<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-3994 aligncenter" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2017&sol;09&sol;tc7&period;png" alt&equals;"見出しレベル" width&equals;"485" height&equals;"132" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>設定が終わったら下部の「設定を更新」をクリックします。<&sol;p>&NewLine;<p>実際に投稿ページを見て確認してみます。変更したい場合は再び設定画面を開いて変更&Implies;更新でやり直せます。<&sol;p>&NewLine;<div class&equals;"su-note" style&equals;"border-color&colon;&num;e2ddb2&semi;border-radius&colon;2px&semi;-moz-border-radius&colon;2px&semi;-webkit-border-radius&colon;2px&semi;"><div class&equals;"su-note-inner su-u-clearfix su-u-trim" style&equals;"background-color&colon;&num;fcf7cc&semi;border-color&colon;&num;ffffff&semi;color&colon;&num;090101&semi;border-radius&colon;2px&semi;-moz-border-radius&colon;2px&semi;-webkit-border-radius&colon;2px&semi;"><strong><span style&equals;"color&colon; &num;3366ff&semi;"><br &sol;>&NewLine;&star;使う場合の注意事項<&sol;span><&sol;strong><&sol;p>&NewLine;<p>見出し用のHTMLタグを階層的に記述する必要があります。<br &sol;>&NewLine;H2の次にH4、その後でH3とか・・もし、適当に使っていた場合は、先にその修正が必要。<br &sol;>&NewLine;タグは、大きい見出しから順番に h2&srarr;h3&srarr;h4の順番で使います。<br &sol;>&NewLine;これを適当にやっていると目次がぐちゃぐちゃになります。あと、HTMLタグを使っていないと目次の基がないのでそれもだめですね。<&sol;p>&NewLine;<&sol;div><&sol;div>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>記事に目次自動生成 まとめ<&sol;h2>&NewLine;<div class&equals;"sb-type-ln">&NewLine;&Tab;<div class&equals;"sb-subtype-a">&NewLine;&Tab;&Tab;<div class&equals;"sb-speaker">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;&Tab;<img src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;plugins&sol;speech-bubble&sol;img&sol;s&lowbar;j1&period;png" class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-name">波空<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<div class&equals;"sb-content">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-speech-bubble">見出しタグを使っているだけで、記事の目次を簡単に自動生成って、すごく楽ちん!(^^)。<br &sol;>&NewLine;<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div>&NewLine;<div class&equals;"sb-type-ln">&NewLine;&Tab;<div class&equals;"sb-subtype-b">&NewLine;&Tab;&Tab;<div class&equals;"sb-speaker">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;&Tab;<img src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;plugins&sol;speech-bubble&sol;img&sol;icon&lowbar;n2&period;png" class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-name">猫にゃん<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<div class&equals;"sb-content">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-speech-bubble">「見出しを変更した時に目次を更新し忘れる」などのミスが無くなるのも嬉しいですな。<br &sol;>&NewLine;<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div>&NewLine;<div class&equals;"sb-type-drop">&NewLine;&Tab;<div class&equals;"sb-subtype-a">&NewLine;&Tab;&Tab;<div class&equals;"sb-speaker">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;&Tab;<img src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;plugins&sol;speech-bubble&sol;img&sol;s&lowbar;j4&period;png" class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-name">波空<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<div class&equals;"sb-content">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-speech-bubble">インストール前に心配した「テストしていない」も大丈夫だったようなので、安心して使ってくださいね&lpar;&Hat;o&Hat;&rpar;v<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>前の記事 <a href&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;3953&period;html">AddQuicktag でタグを登録投稿を便利に<&sol;a><br &sol;>&NewLine;次の記事 <a href&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;4077&period;html">WordPress過去記事への追記について<&sol;a><&sol;p>&NewLine;<p style&equals;"text-align&colon; right&semi;"><a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;page-1472&period;html"><span style&equals;"color&colon; &num;0066cc&semi;">WordPress一覧へ<&sol;span><&sol;a><&sol;p>&NewLine;<p><a href&equals;"&sol;&sol;diary&period;blogmura&period;com&sol;ranking&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener"><img src&equals;"&sol;&sol;diary&period;blogmura&period;com&sol;img&sol;diary88&lowbar;31&period;gif" alt&equals;"" width&equals;"88" height&equals;"31" border&equals;"0" &sol;><&sol;a><br &sol;>&NewLine;<a href&equals;"&sol;&sol;diary&period;blogmura&period;com&sol;ranking&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener">にほんブログ村<&sol;a><&sol;p>&NewLine;<p><a title&equals;"日々の出来事 ブログランキングへ" href&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;link&period;php&quest;1839199&colon;9200"><img src&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;img&sol;banner&sol;c&sol;banner&lowbar;1&sol;br&lowbar;c&lowbar;9200&lowbar;1&period;gif" width&equals;"110" height&equals;"31" border&equals;"0" &sol;><&sol;a><br &sol;>&NewLine;<a style&equals;"font-size&colon; 12px&semi;" href&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;link&period;php&quest;1839199&colon;9200">日々の出来事 ブログランキングへ<&sol;a><&sol;p>&NewLine;&NewLine;

モバイルバージョンを終了