<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	
	xmlns:georss="http://www.georss.org/georss"
	xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
	>

<channel>
	<title>プラグイン | ブログライフ</title>
	<atom:link href="https://hiroya-smile.com/category/wordpress/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3/feed/" rel="self" type="application/rss+xml" />
	<link>https://hiroya-smile.com</link>
	<description></description>
	<lastBuildDate>Tue, 28 May 2019 11:33:02 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.4.3</generator>
<site xmlns="com-wordpress:feed-additions:1">140312766</site>	<item>
		<title>WordPressによる目次の作り方。プラグインで簡単カスタマイズ</title>
		<link>https://hiroya-smile.com/wordpress-contents/</link>
					<comments>https://hiroya-smile.com/wordpress-contents/#respond</comments>
		
		<dc:creator><![CDATA[hiroya-smile]]></dc:creator>
		<pubDate>Tue, 28 May 2019 11:31:28 +0000</pubDate>
				<category><![CDATA[プラグイン]]></category>
		<guid isPermaLink="false">https://hiroya-smile.com/?p=2728</guid>

					<description><![CDATA[<p>ひろやです。 WordPressで目次を作りたいんだけどどうやって作ればいいんだろう？ 簡単にカスタマイズする方法って何かないかな？ 現在そんな疑問をお持ちではありませんか？ たしかに目次はユーザーにとっても分かりやすく [&#8230;]</p>
<p>The post <a href="https://hiroya-smile.com/wordpress-contents/">WordPressによる目次の作り方。プラグインで簡単カスタマイズ</a> first appeared on <a href="https://hiroya-smile.com">ブログライフ</a>.</p>]]></description>
										<content:encoded><![CDATA[<p class="p3"><img fetchpriority="high" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents9.png?resize=561%2C441&#038;ssl=1" alt="" width="561" height="441" class="size-full wp-image-2738 aligncenter" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents9.png?w=561&amp;ssl=1 561w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents9.png?resize=150%2C118&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents9.png?resize=300%2C236&amp;ssl=1 300w" sizes="(max-width: 561px) 100vw, 561px" data-recalc-dims="1" /></p>
<p class="p3">ひろやです。</p>
<p class="p3"><span class="s2">WordPress</span>で目次を作りたいんだけどどうやって作ればいいんだろう？<br />
簡単にカスタマイズする方法って何かないかな？</p>
<p class="p3">現在そんな疑問をお持ちではありませんか？</p>
<p class="p3">たしかに目次はユーザーにとっても分かりやすく親切なので、ぜひ導入しておきたいところですよね。</p>
<p class="p3"><span class="s2">WordPress</span>の目次はプラグインで超簡単にカスタマイズすることが可能です。</p>
<p class="p3">今回は「<span class="s2">WordPress</span>による目次の作り方」をテーマに、画像付きでわかりやすく解説していきます。<span id="more-2728"></span></p>
<h2 class="p4"><span class="s3"><b>WordPress</b></span><b>による目次の作り方（プラグイン）</b></h2>
<p class="p3">それではさっそく<span class="s2">WordPress</span>で目次をカスタマイズしていきましょう。</p>
<p class="p3">まずは<span class="s2">WordPress</span>のダッシュボードへ移動して<span style="color: #ff0000;">「プラグイン」<span class="s2">→</span>「新規追加」</span>をクリックします。</p>
<p><img decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents1.png?resize=603%2C553&#038;ssl=1" alt="" width="603" height="553" class="alignnone size-full wp-image-2730" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents1.png?w=603&amp;ssl=1 603w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents1.png?resize=150%2C138&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents1.png?resize=300%2C275&amp;ssl=1 300w" sizes="(max-width: 603px) 100vw, 603px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p class="p3">続いて<span style="color: #ff0000;">「プラグインの検索」</span>をクリックしましょう。</p>
<p><img decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents2.png?resize=555%2C525&#038;ssl=1" alt="" width="555" height="525" class="alignnone size-full wp-image-2731" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents2.png?w=555&amp;ssl=1 555w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents2.png?resize=150%2C142&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents2.png?resize=300%2C284&amp;ssl=1 300w" sizes="(max-width: 555px) 100vw, 555px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p class="p3">目次をカスタマイズするプラグインですが「<span class="s2">Table of Contents Plus</span>」がシンプルでオススメです。</p>
<p class="p3">「<span class="s2" style="color: #000000;">Table of Contents Plus</span>」と打ち込むとプラグインがあらわれるので<span style="color: #ff0000;">「今すぐインスール」</span>をクリックしましょう。</p>
<p><span class="s4">※</span><span class="s5">「</span><span style="color: #ff0000;">Table of Contents Plus</span><span class="s5">」</span>←赤い英文をそのまま<span class="s5">コピーして使えます。</span></p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents3.png?resize=556%2C267&#038;ssl=1" alt="" width="556" height="267" class="alignnone size-full wp-image-2732" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents3.png?w=556&amp;ssl=1 556w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents3.png?resize=150%2C72&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents3.png?resize=300%2C144&amp;ssl=1 300w" sizes="(max-width: 556px) 100vw, 556px" data-recalc-dims="1" /></p>
<p class="p3">続いて「有効化」をクリック。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents4.png?resize=548%2C263&#038;ssl=1" alt="" width="548" height="263" class="alignnone size-full wp-image-2733" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents4.png?w=548&amp;ssl=1 548w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents4.png?resize=150%2C72&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents4.png?resize=300%2C144&amp;ssl=1 300w" sizes="(max-width: 548px) 100vw, 548px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p class="p3">するとプラグインの画面に移動するので「<span class="s2">Table of Contents Plus</span>」の<span style="color: #ff0000;">「設定」</span>をクリックしましょう。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents5.png?resize=316%2C99&#038;ssl=1" alt="" width="316" height="99" class="alignnone size-full wp-image-2734" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents5.png?w=316&amp;ssl=1 316w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents5.png?resize=150%2C47&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents5.png?resize=300%2C94&amp;ssl=1 300w" sizes="(max-width: 316px) 100vw, 316px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p class="p3">「<span class="s2">Table of Contents Plus</span>」の<span style="color: #ff0000;">「基本設定」</span>画面に移動するので、目次のカスタマイズ設定を行なって行きます。</p>
<p class="p3">とりいそぎ以下のように設定すれば問題ないでしょう。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents10.png?resize=640%2C736&#038;ssl=1" alt="" width="640" height="736" class="alignnone size-full wp-image-2739" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents10.png?w=807&amp;ssl=1 807w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents10.png?resize=130%2C150&amp;ssl=1 130w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents10.png?resize=261%2C300&amp;ssl=1 261w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents10.png?resize=768%2C883&amp;ssl=1 768w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
<p class="p3">目次のタイトルは好きな名前で<span class="s2">OK</span>です（今回は「もくじ」で設定しています）。</p>
<p class="p3">あと<span style="color: #ff0000;">「アンカーリンクにジャンプではなくスクロールする」</span>にチェックを入れるのが個人的にオススメです。</p>
<p class="p3">タッチしたらそこまでスルスルスルーって動くので、どこまで移動したか分かりやすいんですよね。</p>
<p class="p3">もちろんスクロールではなく「パッ」と飛んでほしいならチェックを外せば<span class="s2">OK</span>です。</p>
<p>&nbsp;</p>
<p class="p3"><span style="color: #ff0000;">「プレゼンテーション」</span>は好きな目次のデザインにチェックを入れましょう。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents7.png?resize=640%2C177&#038;ssl=1" alt="" width="640" height="177" class="alignnone size-full wp-image-2736" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents7.png?w=1294&amp;ssl=1 1294w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents7.png?resize=150%2C41&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents7.png?resize=300%2C83&amp;ssl=1 300w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents7.png?resize=768%2C212&amp;ssl=1 768w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents7.png?resize=1024%2C283&amp;ssl=1 1024w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p class="p3">もしお好みのデザインが無ければ<span style="color: #ff0000;">「カスタム」</span>にチェックを入れることで、好きにな見出しのデザインをカスタマイズできます。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents8.png?resize=640%2C300&#038;ssl=1" alt="" width="640" height="300" class="alignnone size-full wp-image-2737" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents8.png?w=1111&amp;ssl=1 1111w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents8.png?resize=150%2C70&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents8.png?resize=300%2C141&amp;ssl=1 300w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents8.png?resize=768%2C360&amp;ssl=1 768w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents8.png?resize=1024%2C480&amp;ssl=1 1024w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p class="p3">すべての設定が終わったら<span style="color: #ff0000;">「設定を更新」</span>をクリックしましょう。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents6.png?resize=571%2C357&#038;ssl=1" alt="" width="571" height="357" class="alignnone size-full wp-image-2735" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents6.png?w=571&amp;ssl=1 571w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents6.png?resize=150%2C94&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents6.png?resize=300%2C188&amp;ssl=1 300w" sizes="(max-width: 571px) 100vw, 571px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p><span style="color: #000000;">シンプルに<span style="color: #ff0000;">「グレー（デフォルト）」</span>にチェックを入れたら目次は以下のようなデザインになります。</span></p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents9.png?resize=561%2C441&#038;ssl=1" alt="" width="561" height="441" class="alignnone size-full wp-image-2738" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents9.png?w=561&amp;ssl=1 561w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents9.png?resize=150%2C118&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/wordpress-contents9.png?resize=300%2C236&amp;ssl=1 300w" sizes="(max-width: 561px) 100vw, 561px" data-recalc-dims="1" /></p>
<p class="p3">以上になります。</p>
<h2 class="p4"><b>まとめ</b></h2>
<p class="p3"><span class="s2">WordPress</span>における目次の作り方について解説しました。</p>
<p>目次は見出しを入れることで作られます。</p>
<p>「見出しってなに？」</p>
<p>という場合は こちらの記事を確認してみてくださいね。</p>
<p>→<span style="font-size: 20px;"><a href="https://hiroya-smile.com/how-to-find-a-blog/" title="ブログ記事の見出しの付け方・作り方">ブログ記事の見出しの付け方・作り方</a></span></p>
<p>以上。</p>
<p>ひろやでした。</p><p>The post <a href="https://hiroya-smile.com/wordpress-contents/">WordPressによる目次の作り方。プラグインで簡単カスタマイズ</a> first appeared on <a href="https://hiroya-smile.com">ブログライフ</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://hiroya-smile.com/wordpress-contents/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">2728</post-id>	</item>
	</channel>
</rss>
