<?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>WordPress | ブログライフ</title>
	<atom:link href="https://hiroya-smile.com/category/wordpress/feed/" rel="self" type="application/rss+xml" />
	<link>https://hiroya-smile.com</link>
	<description></description>
	<lastBuildDate>Sun, 16 Jun 2019 13:01:51 +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-image-upload/</link>
					<comments>https://hiroya-smile.com/wordpress-image-upload/#respond</comments>
		
		<dc:creator><![CDATA[hiroya-smile]]></dc:creator>
		<pubDate>Sun, 16 Jun 2019 13:01:51 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://hiroya-smile.com/?p=3116</guid>

					<description><![CDATA[<p>ひろやです。 今回はWordPressで画像をアップロードして挿入する方法について解説します。 読者が読みやすいように適所に画像を配置していきましょう。 WordPressで画像をアップロードして挿入する手順 それではさ [&#8230;]</p>
<p>The post <a href="https://hiroya-smile.com/wordpress-image-upload/">WordPressで画像をアップロードして挿入する方法</a> first appeared on <a href="https://hiroya-smile.com">ブログライフ</a>.</p>]]></description>
										<content:encoded><![CDATA[<p class="p1"><span class="s1">ひろやです。</span></p>
<p class="p1"><span class="s1">今回は<span style="color: #ff0000;"><strong>WordPress</strong></span></span><span style="color: #ff0000;"><strong>で画像をアップロードして挿入</strong></span>する方法について解説します。</p>
<p>読者が読みやすいように適所に画像を配置していきましょう。<span id="more-3116"></span></p>
<h2>WordPressで画像をアップロードして挿入する手順</h2>
<p>それではさっそくWordPressで画像をアップロードしていきましょう。</p>
<p>まずは<span style="color: #ff0000;">「ダッシュボード → 投稿（マウスオン）→ 新規投稿」</span>の順に投稿画面へ移動します。</p>
<p><img fetchpriority="high" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-eye-catch-display2.png?resize=467%2C314&#038;ssl=1" alt="" width="467" height="314" class="alignnone size-full wp-image-3021" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-eye-catch-display2.png?w=467&amp;ssl=1 467w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-eye-catch-display2.png?resize=150%2C101&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-eye-catch-display2.png?resize=300%2C202&amp;ssl=1 300w" sizes="(max-width: 467px) 100vw, 467px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p>投稿画面へ移動したら<span style="color: #ff0000;">「メディアを追加」</span>をクリックします。</p>
<p><img decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-editor18.png?resize=558%2C210&#038;ssl=1" alt="" width="558" height="210" class="alignnone size-full wp-image-3084" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-editor18.png?w=558&amp;ssl=1 558w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-editor18.png?resize=150%2C56&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-editor18.png?resize=300%2C113&amp;ssl=1 300w" sizes="(max-width: 558px) 100vw, 558px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p><span style="color: #000000;">「メディアを追加」</span>という画面が表示されるので<span style="color: #ff0000;">「ファイルをアップロード」</span>タブをクリックしましょう。</p>
<p><img decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload12.png?resize=509%2C174&#038;ssl=1" alt="" width="509" height="174" class="alignnone size-full wp-image-3129" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload12.png?w=509&amp;ssl=1 509w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload12.png?resize=150%2C51&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload12.png?resize=300%2C103&amp;ssl=1 300w" sizes="(max-width: 509px) 100vw, 509px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p>続いて<span style="color: #ff0000;">「ファイルを選択」</span>をクリックします。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload11.png?resize=640%2C424&#038;ssl=1" alt="" width="640" height="424" class="alignnone size-full wp-image-3128" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload11.png?w=698&amp;ssl=1 698w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload11.png?resize=150%2C99&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload11.png?resize=300%2C199&amp;ssl=1 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p>アップロードして挿入したい画像を選択して<span style="color: #ff0000;">「開く」</span>をクリックしましょう。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload1.png?resize=502%2C381&#038;ssl=1" alt="" width="502" height="381" class="alignnone size-full wp-image-3118" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload1.png?w=502&amp;ssl=1 502w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload1.png?resize=150%2C114&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload1.png?resize=300%2C228&amp;ssl=1 300w" sizes="(max-width: 502px) 100vw, 502px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p>WordPressへ画像がアップロードされるので<span style="color: #ff0000;">「投稿を挿入」</span>をクリックします。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload13.png?resize=640%2C403&#038;ssl=1" alt="" width="640" height="403" class="alignnone size-full wp-image-3130" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload13.png?w=966&amp;ssl=1 966w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload13.png?resize=150%2C95&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload13.png?resize=300%2C189&amp;ssl=1 300w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload13.png?resize=768%2C484&amp;ssl=1 768w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p>そうすることで以下のように投稿画面で画像が挿入されます。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload10.png?resize=587%2C426&#038;ssl=1" alt="" width="587" height="426" class="alignnone size-full wp-image-3127" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload10.png?w=587&amp;ssl=1 587w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload10.png?resize=150%2C109&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload10.png?resize=300%2C218&amp;ssl=1 300w" sizes="(max-width: 587px) 100vw, 587px" data-recalc-dims="1" /></p>
<p>基本的にはこの操作でWordPressへ画像をアップロードして挿入することが可能です。</p>
<p>操作自体は簡単ですよね。</p>
<p>ただ、<span class="line-yellow"><strong>いくつか補足して説明したいことがある</strong></span>ので、今らからその補足事項を簡単に説明します。</p>
<h2>WordPressの画像のアップロードはドラッグ&amp;ドロップでも可能</h2>
<p>まず、WordPressへの画像のアップロードは<span style="color: #ff0000;">「ファイル選択」</span>をクリックせずとも、<span style="color: #ff0000;">「ドラッグ&amp;ドロップ」</span>でも操作可能です。</p>
<p>「ドラッグ&amp;ドロップ」というのは何か移動したいファイルがあるときに<span class="line-yellow"><strong>「ファイルを左クリックしたまま掴み、目的の場所まで移動して左クリックを離す」</strong></span>という操作のことですね。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload5.png?resize=640%2C361&#038;ssl=1" alt="" width="640" height="361" class="alignnone size-full wp-image-3122" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload5.png?w=1192&amp;ssl=1 1192w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload5.png?resize=150%2C85&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload5.png?resize=300%2C169&amp;ssl=1 300w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload5.png?resize=768%2C433&amp;ssl=1 768w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload5.png?resize=1024%2C577&amp;ssl=1 1024w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
<p>ぶっちゃけると僕自身はこの方法でWordPressに画像をアップロードしていますw</p>
<p>サブモニター（マルチモニター）を使っているので、単純にこちらの方が楽なんですよね。</p>
<p>この画像のアップロード方法はおすすめです。</p>
<h2>WordPressの画像のアップロードは複数でも可能</h2>
<p>また、<span class="line-yellow"><strong>WordPressの画像のアップロードは複数ファイルでも可能</strong></span>です。</p>
<p>アップロードしたい画像をまとめて選択して、そのまま「ドラッグ&amp;ドロップ」ですね。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload6.png?resize=640%2C336&#038;ssl=1" alt="" width="640" height="336" class="alignnone size-full wp-image-3123" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload6.png?w=1280&amp;ssl=1 1280w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload6.png?resize=150%2C79&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload6.png?resize=300%2C158&amp;ssl=1 300w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload6.png?resize=768%2C403&amp;ssl=1 768w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload6.png?resize=1024%2C538&amp;ssl=1 1024w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
<p>これでまとめてアップロードできるし、そのまま<span style="color: #ff0000;">「投稿に挿入」</span>をクリックすることで、複数の画像をまとめて記事に挿入することができます。</p>
<p>アップロードしたい画像がいくつかある場合は、この方法でアップロードしてみてくださいね。</p>
<h2>「添付ファイルの詳細」の説明</h2>
<p><span style="color: #ff0000;">WordPressへの画像のアップロードおよび挿入の方法は以上になりますが、最後に「添付ファイルの詳細」</span>の部分を簡単に解説します。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload2.png?resize=358%2C407&#038;ssl=1" alt="" width="358" height="407" class="alignnone size-full wp-image-3119" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload2.png?w=358&amp;ssl=1 358w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload2.png?resize=132%2C150&amp;ssl=1 132w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload2.png?resize=264%2C300&amp;ssl=1 264w" sizes="(max-width: 358px) 100vw, 358px" data-recalc-dims="1" /></p>
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px; background-color: #eeffff;">
<ol>
<li><span style="color: #ff0000;"><strong>代替テキスト</strong></span>：読者が記事を読む際に画像が表示されない場合、「代替テキスト」に打ち込んだ文字が画像の代わりに表示されます。特に入れなくても問題ありません。</li>
<li><span style="color: #ff0000;"><strong>タイトル</strong></span>：画像の名前で基本的にはアップロードしたときの画像の名前が反映されます。</li>
<li><span style="color: #ff0000;"><strong>キャプション</strong></span>：画像を挿入したときに同時に「キャプション」に打ち込んだ文字が表示されます。特に入れなくても問題ありません。</li>
</ol>
<p>※<span style="color: #ff0000;"><strong>「説明」</strong></span>はこのあと解説します。</p>
</div>
<p>&nbsp;</p>
<h2>「説明」をフル活用しよう</h2>
<p>先ほど解説しなかった<span style="color: #ff0000;">「説明」</span>の解説です。</p>
<p>説明は基本的に自由に記入してOKなのですが、僕なりの活用法を紹介したいと思います。</p>
<p>結論から言うと、僕は画像の「説明」の部分には<span class="line-yellow"><strong>画像の特徴をあらわす「キーワード」</strong></span>を入れていますね。</p>
<p>なぜなら、以下のように<span style="color: #ff0000;"><strong>「メディア項目を検索」</strong></span>という部分を活用することで、のちのち画像が探しやすくなるからです。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload3.png?resize=640%2C403&#038;ssl=1" alt="" width="640" height="403" class="alignnone size-full wp-image-3120" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload3.png?w=966&amp;ssl=1 966w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload3.png?resize=150%2C95&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload3.png?resize=300%2C189&amp;ssl=1 300w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload3.png?resize=768%2C484&amp;ssl=1 768w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
<p>ブログを書いていると<span class="line-yellow"><strong>「前に使った画像をもう一度使いたいな」</strong></span>といった場面が多々でてきます。</p>
<p>でもWordPressにアップロードする画像が多くなってくると、その画像を探すのもまたひと苦労するんですよね。</p>
<p>でもこの「説明」の部分に画像の特徴となるキーワードをいれておくことで、メディア検索するときにサクッと見つけることが可能になります。</p>
<p>複数のキーワードを入れることもできるので、コンマ区切りでキーワードを打ち込みましょう。</p>
<p>今回アップロードした画像の例で言えば<span style="color: #ff0000;">「星,銀河,宇宙」</span>などのように打ち込めば良いということですね！</p>
<p>ぜひこの説明欄を有効活用していきましょう。</p>
<h2>「添付ファイルの表示設定」の説明</h2>
<p>画像をアップロードした際に下へスクロールすると<span style="color: #ff0000;">「添付ファイルの表示設定」</span>があります。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload7.png?resize=640%2C496&#038;ssl=1" alt="" width="640" height="496" class="alignnone size-full wp-image-3124" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload7.png?w=800&amp;ssl=1 800w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload7.png?resize=150%2C116&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload7.png?resize=300%2C233&amp;ssl=1 300w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload7.png?resize=768%2C595&amp;ssl=1 768w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p>設定で<span style="color: #ff0000;">「サイズ」</span>とありますが、ここで<span class="line-yellow"><strong>画像のサイズが選択できる</strong></span>ので覚えておきましょう。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload8.png?resize=640%2C496&#038;ssl=1" alt="" width="640" height="496" class="alignnone size-full wp-image-3125" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload8.png?w=799&amp;ssl=1 799w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload8.png?resize=150%2C116&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload8.png?resize=300%2C232&amp;ssl=1 300w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload8.png?resize=768%2C595&amp;ssl=1 768w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p>クリックするとサイズの種類が3つあるので、適したものを選択しましょう。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload9.png?resize=412%2C281&#038;ssl=1" alt="" width="412" height="281" class="alignnone size-full wp-image-3126" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload9.png?w=412&amp;ssl=1 412w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload9.png?resize=150%2C102&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/06/wordpress-image-upload9.png?resize=300%2C205&amp;ssl=1 300w" sizes="(max-width: 412px) 100vw, 412px" data-recalc-dims="1" /></p>
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px; background-color: #eeffff;">
<ul>
<li>サムネイル &#8211; 150 × 150</li>
<li>中 &#8211; 300 × 200</li>
<li>フルサイズ &#8211; 画像そのままのサイズ</li>
</ul>
</div>
<p>&nbsp;</p>
<p>なお、画像の編集で好きなサイズに調整したりトリミングすることも可能です。</p>
<h2>まとめ</h2>
<p>WordPressで画像のアップロードおよび挿入の手順について解説しました。</p>
<p>以上。</p>
<p>ひろやでした。</p><p>The post <a href="https://hiroya-smile.com/wordpress-image-upload/">WordPressで画像をアップロードして挿入する方法</a> first appeared on <a href="https://hiroya-smile.com">ブログライフ</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://hiroya-smile.com/wordpress-image-upload/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">3116</post-id>	</item>
		<item>
		<title>WordPressでスマホ画面をプレビューする方法（ブログならOK）</title>
		<link>https://hiroya-smile.com/wordpress-smartphone/</link>
					<comments>https://hiroya-smile.com/wordpress-smartphone/#respond</comments>
		
		<dc:creator><![CDATA[hiroya-smile]]></dc:creator>
		<pubDate>Thu, 30 May 2019 01:09:23 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://hiroya-smile.com/?p=2783</guid>

					<description><![CDATA[<p>ひろやです。 現在そんな疑問をお持ちではありませんか？ 確かに投稿してからわざわざ自分のスマホ画面でどう表示されているか見るのって、かなり手間ですよね。 もうすでに記事は投稿してるのに自分のスマホ画面を見て編集して、また [&#8230;]</p>
<p>The post <a href="https://hiroya-smile.com/wordpress-smartphone/">WordPressでスマホ画面をプレビューする方法（ブログならOK）</a> first appeared on <a href="https://hiroya-smile.com">ブログライフ</a>.</p>]]></description>
										<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress4-1.png?resize=417%2C330&#038;ssl=1" alt="" width="417" height="330" class="alignnone size-full wp-image-2788 aligncenter" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress4-1.png?w=417&amp;ssl=1 417w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress4-1.png?resize=150%2C119&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress4-1.png?resize=300%2C237&amp;ssl=1 300w" sizes="(max-width: 417px) 100vw, 417px" data-recalc-dims="1" /></p>
<p class="p3">ひろやです。</p>
<p class="p3"><span class="s2">						<div class="chat_l ">						<div class="talker"><b><img decoding="async" class="circle" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/gimon-e1559103891780-300x300.jpg?resize=300%2C300&#038;ssl=1" alt="疑問" data-recalc-dims="1" />						</b></div>				<div class="bubble_wrap">					<div class="bubble rc8" style="background-color:#ffffff">
					<div class="bubble_in" style="border-color:#ffffff">
					<p>WordPress</span>でスマホ画面をプレビューする方法はあるのかな？<span class="s2"></p>
					</div>
					</div></div>
</div>
</span></p>
<p class="p3">現在そんな疑問をお持ちではありませんか？</p>
<p class="p3">確かに投稿してからわざわざ自分のスマホ画面でどう表示されているか見るのって、かなり手間ですよね。</p>
<p class="p3">もうすでに記事は投稿してるのに自分のスマホ画面を見て編集して、またスマホ画面を見て、編集してって・・・かなりめんどい！</p>
<p class="p3">僕も最初はそういう風に確認していましたが、実は超簡単に<span class="s2">WordPress</span>でスマホ画面をプレビューする方法があったんですね。</p>
<p class="p3">そんなわけで今回は<span style="color: #ff0000;"><span class="s2">WordPress</span>でスマホ画面をプレビューする手順</span>について解説していきます。</p>
<p class="p3"><span class="s3">※</span>ちなみに この方法であれば<span class="s2">WordPress</span>に限らず、あらゆるサイトでスマホ表示にプレビューできます。<span id="more-2783"></span></p>
<h2 class="p1"><span class="s1"><b>WordPress</b></span><b>でスマホ画面をプレビューするのは簡単</b></h2>
<p class="p3"><span class="s2">WordPress</span>でスマホ画面をプレビューする方法は、すごく簡単です。</p>
<p class="p1">その方法はパソコンのブラウザを<span style="color: #ff0000;">「<span class="s1">Chrome</span>（クローム）」</span>にするだけ。</p>
<p class="p1"><span class="s1">						<div class="chat_l ">						<div class="talker"><b><img decoding="async" class="circle" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/gimon-e1559103891780-300x300.jpg?resize=300%2C300&#038;ssl=1" alt="疑問" data-recalc-dims="1" />						</b></div>				<div class="bubble_wrap">					<div class="bubble rc8" style="background-color:#ffffff">
					<div class="bubble_in" style="border-color:#ffffff">
					<p>Chrome</span>ってなに？<span class="s1"></p>
					</div>
					</div></div>
</div>
</span></p>
<p class="p1">というと<span class="s1">Google</span>が提供しているブラウザのことで、簡単に言うと「インターネットを見るためのソフト」のことです。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress1.png?resize=59%2C62&#038;ssl=1" alt="" width="59" height="62" class="alignnone size-full wp-image-2769" data-recalc-dims="1" /></p>
<p class="p4">Windows<span class="s3">であれば「</span>Microsoft Edge<span class="s3">」に。</span></p>
<p class="p1"><span class="s1">Mac</span>であれば「<span class="s1">Safari</span>」にあたるものですね。</p>
<p class="p1">すでに<span class="s1">Chrome</span>を使っている場合は問題ありませんが、もし別のブラウザを使っている場合は<span class="s1">Chrome</span>をダウンロードしてインストールしましょう。</p>
<p class="p1"><span class="s1">Chrome</span>のダウンロードはこちらから可能です。</p>
<p class="p1"><span class="s1">→<a href="https://www.google.com/intl/ja/chrome/" target="_blank" rel="noopener noreferrer"><span style="font-size: 20px;">Chrome</span></a></span><span style="font-size: 20px;">をダウンロードする。</span></p>

<h2 class="p1"><span class="s1"><b>WordPress</b></span><b>でスマホ画面をプレビューする手順</b></h2>
<p class="p3"><span class="s2">Chrome</span>がインストールできたことを前提に解説していきますね。</p>
<p class="p3">パソコンのデスクトップに<span class="s2" style="color: #ff0000;">Chrome</span>が表示されたらクリックして起動しましょう。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress1.png?resize=59%2C62&#038;ssl=1" alt="" width="59" height="62" class="alignnone size-full wp-image-2769" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p class="p3">自分のWordPressにログインして、スマホ画面にしたい記事のプレビューを表示させます。</p>
<p>WordPressの投稿画面で<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/smartphone1.png?resize=307%2C330&#038;ssl=1" alt="" width="307" height="330" class="alignnone size-full wp-image-2785" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/smartphone1.png?w=307&amp;ssl=1 307w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/smartphone1.png?resize=140%2C150&amp;ssl=1 140w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/smartphone1.png?resize=279%2C300&amp;ssl=1 279w" sizes="(max-width: 307px) 100vw, 307px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p>まずは普通にパソコン画面のプレビューを表示します。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress2.png?resize=640%2C415&#038;ssl=1" alt="" width="640" height="415" class="waku alignnone wp-image-2770 size-full" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress2.png?w=764&amp;ssl=1 764w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress2.png?resize=150%2C97&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress2.png?resize=300%2C194&amp;ssl=1 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p class="p3">プレビュー記事の空白部分あたりで<span style="color: #ff0000;">「右クリック<span class="s2"> → </span>検証」</span>をクリックしましょう。</p>
<p><span class="s3">※</span>「検証」が出てこない場合はブログ上のどこかで右クリックを繰り返してみてください。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress3.png?resize=640%2C370&#038;ssl=1" alt="" width="640" height="370" class="alignnone size-full wp-image-2771" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress3.png?w=748&amp;ssl=1 748w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress3.png?resize=150%2C87&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress3.png?resize=300%2C174&amp;ssl=1 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p>すると右にコードが出てくるので上側にある<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/examine-wordpress5-1.png?resize=557%2C344&#038;ssl=1" alt="" width="557" height="344" class="alignnone size-full wp-image-2789" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress5-1.png?w=557&amp;ssl=1 557w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress5-1.png?resize=150%2C93&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress5-1.png?resize=300%2C185&amp;ssl=1 300w" sizes="(max-width: 557px) 100vw, 557px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p>すると記事の上に<span style="color: #ff0000;">「Respnsive」</span>と現われるので、この部分をクリックしましょう。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress2-1.png?resize=606%2C474&#038;ssl=1" alt="" width="606" height="474" class="alignnone size-full wp-image-2786" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress2-1.png?w=606&amp;ssl=1 606w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress2-1.png?resize=150%2C117&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress2-1.png?resize=300%2C235&amp;ssl=1 300w" sizes="(max-width: 606px) 100vw, 606px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p>するとプルダウンでiPhone等のスマホ機種が並ぶので、<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/examine-wordpress4-1.png?resize=417%2C330&#038;ssl=1" alt="" width="417" height="330" class="alignnone size-full wp-image-2788" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress4-1.png?w=417&amp;ssl=1 417w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress4-1.png?resize=150%2C119&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress4-1.png?resize=300%2C237&amp;ssl=1 300w" sizes="(max-width: 417px) 100vw, 417px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p>iPhone Xにしたらこんな感じ。</p>
<p>プレビューがスマホ画面にバッチリ変わりましたね。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress6-1.png?resize=372%2C366&#038;ssl=1" alt="" width="372" height="366" class="alignnone size-full wp-image-2790" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress6-1.png?w=372&amp;ssl=1 372w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress6-1.png?resize=150%2C148&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress6-1.png?resize=300%2C295&amp;ssl=1 300w" sizes="(max-width: 372px) 100vw, 372px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p>ちなみに<span style="color: #ff0000;">スマホ画面の大きさは「◯%」の部分をクリック</span>したらパーセントの種類が表示されます。</p>
<p>見やすいパーセントを選んでスマホ画面を確認しましょう。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress7.png?resize=404%2C310&#038;ssl=1" alt="" width="404" height="310" class="alignnone size-full wp-image-2791" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress7.png?w=404&amp;ssl=1 404w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress7.png?resize=150%2C115&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress7.png?resize=300%2C230&amp;ssl=1 300w" sizes="(max-width: 404px) 100vw, 404px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p>もし<span style="color: #ff0000;">閉じたい場合は画面右側の「X」をクリック</span>すればOKです。</p>
<p>ブラウザ自体を閉じても構いません。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress3-1.png?resize=352%2C268&#038;ssl=1" alt="" width="352" height="268" class="alignnone size-full wp-image-2787" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress3-1.png?w=352&amp;ssl=1 352w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress3-1.png?resize=150%2C114&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress3-1.png?resize=300%2C228&amp;ssl=1 300w" sizes="(max-width: 352px) 100vw, 352px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p class="p3">解説は以上になります。</p>
<h2 class="p3">まとめ</h2>
<p class="p3"><span class="s2">WordPressでスマホ画面をプレビューする方法について解説しました。</span></p>
<p>記事タイトルにもありますが、この方法はWordPressに限らず色んなサイトでスマホ画面をプレビューできます。</p>
<p>だから、はてなブログとかでも応用できたりすると思うので、ぜひ試してみてくださいね。</p>
<p class="p3">以上。</p>
<p class="p3">ひろやでした。</p><p>The post <a href="https://hiroya-smile.com/wordpress-smartphone/">WordPressでスマホ画面をプレビューする方法（ブログならOK）</a> first appeared on <a href="https://hiroya-smile.com">ブログライフ</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://hiroya-smile.com/wordpress-smartphone/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">2783</post-id>	</item>
		<item>
		<title>ブログがWordPressを使っているか調べる方法</title>
		<link>https://hiroya-smile.com/examine-wordpress/</link>
					<comments>https://hiroya-smile.com/examine-wordpress/#respond</comments>
		
		<dc:creator><![CDATA[hiroya-smile]]></dc:creator>
		<pubDate>Wed, 29 May 2019 04:52:22 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://hiroya-smile.com/?p=2766</guid>

					<description><![CDATA[<p>ひろやです。 現在そんな疑問をお持ちではありませんか？ 今回はWordPressを使っているかどうかを調べる方法について解説していきます。 WordPressを使っているかどうかを調べるのは簡単 調べたいブログがWord [&#8230;]</p>
<p>The post <a href="https://hiroya-smile.com/examine-wordpress/">ブログがWordPressを使っているか調べる方法</a> first appeared on <a href="https://hiroya-smile.com">ブログライフ</a>.</p>]]></description>
										<content:encoded><![CDATA[<p class="p1"><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress3.png?resize=640%2C370&#038;ssl=1" alt="" width="640" height="370" class="alignnone size-full wp-image-2771 aligncenter" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress3.png?w=748&amp;ssl=1 748w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress3.png?resize=150%2C87&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress3.png?resize=300%2C174&amp;ssl=1 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
<p class="p1">ひろやです。</p>
<p class="p1"><span>						<div class="chat_l ">						<div class="talker"><b><img decoding="async" class="circle" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/gimon-e1559103891780-300x300.jpg?resize=300%2C300&#038;ssl=1" alt="疑問" data-recalc-dims="1" />						</b></div>				<div class="bubble_wrap">					<div class="bubble rc8" style="background-color:#ffffff">
					<div class="bubble_in" style="border-color:#ffffff">
					<p></span>このブログって<span class="s1">WordPressを</span>使って運営してるのかなぁ？<span></p>
					</div>
					</div></div>
</div>
</span></p>
<p class="p1">現在そんな疑問をお持ちではありませんか？</p>
<p class="p1">今回は<span style="color: #ff0000;"><span class="s1">WordPress</span>を使っているかどうかを調べる方法</span>について解説していきます。<span id="more-2766"></span></p>
<h2 class="p3"><span class="s2"><b>WordPress</b></span><b>を使っているかどうかを調べるのは簡単</b></h2>
<p class="p1">調べたいブログが<span class="s1">WordPress</span>を使っているかどうかを調べるのは、実はめちゃくちゃ簡単です。</p>
<p class="p1">その方法はパソコンのブラウザを<span style="color: #ff0000;">「<span class="s1">Chrome</span>（クローム）」</span>にするだけ。</p>
<p class="p1"><span class="s1">						<div class="chat_l ">						<div class="talker"><b><img decoding="async" class="circle" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/gimon-e1559103891780-300x300.jpg?resize=300%2C300&#038;ssl=1" alt="疑問" data-recalc-dims="1" />						</b></div>				<div class="bubble_wrap">					<div class="bubble rc8" style="background-color:#ffffff">
					<div class="bubble_in" style="border-color:#ffffff">
					<p>Chrome</span>ってなに？<span class="s1"></p>
					</div>
					</div></div>
</div>
</span></p>
<p class="p1">というと<span class="s1">Google</span>が提供しているブラウザのことで、簡単に言うと「インターネットを見るためのソフト」のことです。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress1.png?resize=59%2C62&#038;ssl=1" alt="" width="59" height="62" class="alignnone size-full wp-image-2769" data-recalc-dims="1" /></p>
<p class="p4">Windows<span class="s3">であれば「</span>Microsoft Edge<span class="s3">」に。</span></p>
<p class="p1"><span class="s1">Mac</span>であれば「<span class="s1">Safari</span>」にあたるものですね。</p>
<p class="p1">すでに<span class="s1">Chrome</span>を使っている場合は問題ありませんが、もし別のブラウザを使っている場合は<span class="s1">Chrome</span>をダウンロードしてインストールしましょう。</p>
<p class="p1"><span class="s1">Chrome</span>のダウンロードはこちらから可能です。</p>
<p class="p1"><span class="s1">→<a href="https://www.google.com/intl/ja/chrome/" target="_blank" rel="noopener noreferrer"><span style="font-size: 20px;">Chrome</span></a></span><span style="font-size: 20px;">をダウンロードする。</span></p>
<h2 class="p3"><b>ブログが</b><span class="s2"><b>WordPress</b></span><b>かどうかを調べる手順</b></h2>
<p class="p1"><span class="s1">Chrome</span>がインストールできたことを前提に解説していきますね。</p>
<p class="p1">パソコンのデスクトップに<span class="s1">Chrome</span>のブラウザが表示されたらクリックして起動しましょう。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress1.png?resize=59%2C62&#038;ssl=1" alt="" width="59" height="62" class="alignnone size-full wp-image-2769" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p class="p1"><span class="s1">Chrome</span>で<span class="s1">WordPress</span>を使っているかどうか調べたいブログを表示させます。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress2.png?resize=640%2C415&#038;ssl=1" alt="" width="640" height="415" class="waku alignnone wp-image-2770 size-full" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress2.png?w=764&amp;ssl=1 764w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress2.png?resize=150%2C97&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress2.png?resize=300%2C194&amp;ssl=1 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p class="p1">そのブログの記事の空白部分あたりで<span style="color: #ff0000;">「右クリック<span class="s1"> → </span>検証」</span>をクリックしましょう。</p>
<p class="p1"><span class="s4">※</span>「検証」が出てこない場合はブログ上のどこかで右クリックを繰り返してみてください。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress3.png?resize=640%2C370&#038;ssl=1" alt="" width="640" height="370" class="alignnone size-full wp-image-2771" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress3.png?w=748&amp;ssl=1 748w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress3.png?resize=150%2C87&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress3.png?resize=300%2C174&amp;ssl=1 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p class="p1">以下のようなページが表示されたらキーボードの<span style="color: #ff0000;">「<span class="s1">Ctrl + F</span>」</span>を押します。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress4.png?resize=640%2C415&#038;ssl=1" alt="" width="640" height="415" class="alignnone size-full wp-image-2772" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress4.png?w=1269&amp;ssl=1 1269w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress4.png?resize=150%2C97&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress4.png?resize=300%2C194&amp;ssl=1 300w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress4.png?resize=768%2C497&amp;ssl=1 768w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress4.png?resize=1024%2C663&amp;ssl=1 1024w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p class="p1">コードの下部分に<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/examine-wordpress5.png?resize=640%2C372&#038;ssl=1" alt="" width="640" height="372" class="alignnone size-full wp-image-2773" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress5.png?w=1258&amp;ssl=1 1258w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress5.png?resize=150%2C87&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress5.png?resize=300%2C174&amp;ssl=1 300w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress5.png?resize=768%2C446&amp;ssl=1 768w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress5.png?resize=1024%2C595&amp;ssl=1 1024w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
<p>&nbsp;</p>
<p class="p1">ここに<span style="color: #ff0000;">「<span class="s1">wordpress</span>」</span>と打ち込みましょう。</p>
<p class="p1">「<span class="s1">WordPress</span>」と文字があれば黄色のマーカーがつきます。</p>
<p class="p1">この<span style="color: #ff0000;">「<span class="s1">WordPress</span>」と黄色のマーカーが付いたら、そのブログは<span class="s1">WordPress</span>を使っている</span>ということですね。</p>
<p><img loading="lazy" decoding="async" src="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress6.png?resize=640%2C372&#038;ssl=1" alt="" width="640" height="372" class="alignnone size-full wp-image-2774" srcset="https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress6.png?w=1258&amp;ssl=1 1258w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress6.png?resize=150%2C87&amp;ssl=1 150w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress6.png?resize=300%2C174&amp;ssl=1 300w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress6.png?resize=768%2C446&amp;ssl=1 768w, https://i0.wp.com/hiroya-smile.com/wp-content/uploads/2019/05/examine-wordpress6.png?resize=1024%2C595&amp;ssl=1 1024w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
<p>もし「WordPress」と黄色いマーカーが付かなければ、そのブログはWordPressを使っていないということになります。</p>
<p class="p1">解説は以上です。</p>
<h2 class="p1">まとめ</h2>
<p class="p1"><span class="s1">WordPress</span>を使っているかどうかを調べる方法について解説しました。</p>
<p class="p1">この方法は簡単に調べられるのでオススメです。</p>
<p class="p1">あと、この方法って実は<span style="color: #ff0000;">「自分のブログ記事がスマホ表示でどう見えるか？」</span>ということも分かるんですよね。</p>
<p class="p1">わざわざ「ブログ記事を投稿してからスマホで見る」ということをしなくて済むので楽です。</p>
<p class="p1">このやり方は別の記事で解説しているので、ぜひ確認してみてください。</p>
<p class="p1"><span class="s1">→記事更新中</span></p>
<p class="p1">以上。</p>
<p class="p1">ひろやでした。</p><p>The post <a href="https://hiroya-smile.com/examine-wordpress/">ブログがWordPressを使っているか調べる方法</a> first appeared on <a href="https://hiroya-smile.com">ブログライフ</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://hiroya-smile.com/examine-wordpress/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">2766</post-id>	</item>
		<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 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="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 loading="lazy" 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 loading="lazy" 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>
