<?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/"
	>

<channel>
	<title>ブログ運営 - 跳ねながら進も</title>
	<atom:link href="https://change-blog.com/category/blog/feed" rel="self" type="application/rss+xml" />
	<link>https://change-blog.com</link>
	<description></description>
	<lastBuildDate>Tue, 30 Jun 2020 03:47:31 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
<atom:link rel="hub" href="https://pubsubhubbub.appspot.com"/>
<atom:link rel="hub" href="https://pubsubhubbub.superfeedr.com"/>
<atom:link rel="hub" href="https://websubhub.com/hub"/>
<atom:link rel="self" href="https://change-blog.com/category/blog/feed"/>
	<item>
		<title>記事公開を予約する方法</title>
		<link>https://change-blog.com/reservation-update</link>
					<comments>https://change-blog.com/reservation-update#respond</comments>
		
		<dc:creator><![CDATA[kaeru]]></dc:creator>
		<pubDate>Sun, 07 Jun 2020 15:48:26 +0000</pubDate>
				<category><![CDATA[ブログ運営]]></category>
		<guid isPermaLink="false">https://change-blog.com/?p=2899</guid>

					<description><![CDATA[オタマジャクシ WordPressでの予約投稿ってどうやるの？ &#160; 今回はWordpressでの『記事の公開を予約する方法』を紹介します。 &#160; 更新したい時間に、どうしても記事を手動で更新できないときには予約設定をしてお…]]></description>
										<content:encoded><![CDATA[<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/Otamajakushi.jpg" /></p>
<div class="name">オタマジャクシ</div>
</div>
<div class="text think_balloon left custom" style="background: #eee; color: #666666;">
<div class="custom_voice left think" style="background: #eee;"></div>
<div class="custom_voice2 left think" style="background: #eee;"></div>
<p>WordPressでの予約投稿ってどうやるの？</p>
</div>
</div>
<p>&nbsp;</p>
<p>今回はWordpressでの<strong>『記事の公開を予約する方法』</strong>を紹介します。</p>
<p>&nbsp;</p>
<p>更新したい時間に、どうしても記事を手動で更新できないときには予約設定をしておくことで解決します。</p>
<p>この記事を参考にすることで、予約投稿の方法がわかるようになります。</p>
<p>&nbsp;</p>
<h2>WordPressでの予約投稿をするメリット</h2>
<p>WordPressでの予約投稿をする1番のメリットは<span class="sc_content_icon" style="color: #1e73be;"><i class="fa fa-arrow-down" aria-hidden="true"><span>fa-arrow-down</span></i></span>以下になると思います。</p>
<div class="sc_frame_wrap onframe custom">
<div class="sc_frame_title" style="color: #ffc759; background-color: #ffffff;">
<div class="sc_frame_icon"><i class="fa fa-thumbs-o-up" aria-hidden="true"><span>fa-thumbs-o-up</span></i></div>
<p><span>メリット</span></p>
</div>
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<div class="sc_frame_text">PCを触れない時間帯にも投稿ができる</div>
</div>
</div>
<p>多くの人に読まれる時間帯にブログを投稿したい人も多いでしょう。</p>
<p>例えば平日の朝の通勤時間を狙って投稿をするためには、毎日早起きの必要があるかもしれません。あなたも通勤をしていたら投稿ができないなんてことも。</p>
<p>そんな時に予約投稿機能の恩恵を受けるでしょう。</p>
<p>&nbsp;</p>
<p>他にも、長期休暇でPCを触りたくなかったり、緊急な用事で更新ができない時もあると思います。</p>
<p>そんな時に予約投稿さえ設定をしておけば、更新頻度を落とすことなく投稿できるという訳です。</p>
<p>&nbsp;</p>
<p><span class="badge bborder orange"><i class="fa fa-lightbulb-o before" aria-hidden="true"><span>fa-lightbulb-o</span></i>POINT</span></p>
<p>ブログにファンがついてきたら、毎日同じ時間に投稿があるとファンの人がサイトに来るのを日課にしてもらえるでしょう。</p>
<p>そのためにも更新を楽しみにしてもらうような記事を書きたいですね。</p>
<p>&nbsp;</p>
<p>もちろん、SNSで投稿を知らせるという方法もあるので組み合わせたら効果的です。</p>
<p>&nbsp;</p>
<h2>WordPressでの予約投稿の方法</h2>
<p>&nbsp;</p>
<p>予約投稿の方法を説明していきます。簡単なのでささっと覚えてしまいましょう。</p>
<p>&nbsp;</p>
<p>通常の記事作成画面に進みます。</p>
<p>公開タブの中『すぐに公開する』の右の編集をクリックします。</p>
<p><img fetchpriority="high" decoding="async" src="https://change-blog.com/wp-content/uploads/2020/06/reservation-update-1.jpg" alt="Wordpressでの予約投稿の方法" width="678" height="481" class="aligncenter size-full wp-image-2919" srcset="https://change-blog.com/wp-content/uploads/2020/06/reservation-update-1.jpg 678w, https://change-blog.com/wp-content/uploads/2020/06/reservation-update-1-338x240.jpg 338w" sizes="(max-width: 678px) 100vw, 678px" /></p>
<p>&nbsp;</p>
<p>すると、日付を変更できるようになるので<span class="futozi sc_marker blue">未来日を入力</span>します。</p>
<p>入力完了後<span class="sc_marker blue">『OK』をクリック</span>します。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/06/reservation-update-2.jpg" alt="Wordpressでの予約投稿の方法" width="747" height="469" class="aligncenter size-full wp-image-2918" srcset="https://change-blog.com/wp-content/uploads/2020/06/reservation-update-2.jpg 747w, https://change-blog.com/wp-content/uploads/2020/06/reservation-update-2-382x240.jpg 382w" sizes="(max-width: 747px) 100vw, 747px" /></p>
<p>&nbsp;</p>
<p>『公開予定日時』に間違いがないかを確認して、<span class="sc_marker blue"><span class="futozi">『予約投稿』をクリック</span></span>します。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/06/reservation-update-3.jpg" alt="Wordpressでの予約投稿の方法" width="679" height="522" class="aligncenter size-full wp-image-2920" srcset="https://change-blog.com/wp-content/uploads/2020/06/reservation-update-3.jpg 679w, https://change-blog.com/wp-content/uploads/2020/06/reservation-update-3-312x240.jpg 312w" sizes="(max-width: 679px) 100vw, 679px" /></p>
<p>&nbsp;</p>
<p>『予約済み』となっていれば予約投稿の準備ができています。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/06/reservation-update-4.jpg" alt="Wordpressでの予約投稿の方法" width="678" height="514" class="aligncenter size-full wp-image-2921" srcset="https://change-blog.com/wp-content/uploads/2020/06/reservation-update-4.jpg 678w, https://change-blog.com/wp-content/uploads/2020/06/reservation-update-4-317x240.jpg 317w" sizes="(max-width: 678px) 100vw, 678px" /></p>
<p>あとはその日を待ちましょう。</p>
<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-happy.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>お疲れ様でした～</div>
</div>
<p>&nbsp;</p>
<h2>過去日を指定することも可能</h2>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/06/reservation-update-5.jpg" alt="Wordpressでの予約投稿の方法" width="753" height="467" class="aligncenter size-full wp-image-2922" srcset="https://change-blog.com/wp-content/uploads/2020/06/reservation-update-5.jpg 753w, https://change-blog.com/wp-content/uploads/2020/06/reservation-update-5-387x240.jpg 387w" sizes="(max-width: 753px) 100vw, 753px" /></p>
<p>ちょっとした補足をしておきます。</p>
<p>WordPressでの公開日を『過去日に指定』するとどうなるかの説明になります。</p>
<p>結論、<strong><span class="sc_marker y">過去に投稿されたことになる</span></strong></p>
<p>&nbsp;</p>
<p><span class="futozi">メリットは正直わかりませんが・・・</span></p>
<p>例えば、毎日投稿をすると決めていたけど、何かしらの事情で投稿ができなかった。</p>
<p>これは毎日更新を掲げている人には致命的。</p>
<p>そんな時に1日だけぽっかり空白の日にちがあってはちょっと見た目的にも悪い。</p>
<p>そんな時に過去日をしていすれば、過去日に投稿をしたことになります。</p>
<p>&nbsp;</p>
<p>もしかしたらこんな方には救いの設定なのかもしれません。</p>
<p>&nbsp;</p>
<h2>まとめ</h2>
<p>毎日決まった時間に投稿なんて、手動でやってたらいつか大変だと感じるときが来そうです。</p>
<p>使える機能が使うのが手ですね。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
]]></content:encoded>
					
					<wfw:commentRss>https://change-blog.com/reservation-update/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>検索順位チェックツールGRCの評判・使用効果の解説｜なぜ評価が高いのか？</title>
		<link>https://change-blog.com/grc-review</link>
					<comments>https://change-blog.com/grc-review#respond</comments>
		
		<dc:creator><![CDATA[kaeru]]></dc:creator>
		<pubDate>Thu, 04 Jun 2020 14:40:43 +0000</pubDate>
				<category><![CDATA[ブログ運営]]></category>
		<category><![CDATA[pickup]]></category>
		<guid isPermaLink="false">https://change-blog.com/?p=2828</guid>

					<description><![CDATA[&#160; &#160; オタマジャクシ ・GRCってどんなことができるツールなの？ ・GRCはすごいって聞くけど実際どうかな？ &#160; &#160; こんな声に答えるないようになっています。 &#160; GRCとは検索順位を簡単…]]></description>
										<content:encoded><![CDATA[<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/Otamajakushi.jpg" /></p>
<div class="name">オタマジャクシ</div>
</div>
<div class="text think_balloon left custom" style="background: #eee; color: #666666;">
<div class="custom_voice left think" style="background: #eee;"></div>
<div class="custom_voice2 left think" style="background: #eee;"></div>
<p>・GRCってどんなことができるツールなの？</p>
<p>・GRCはすごいって聞くけど実際どうかな？</p>
</div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>こんな声に答えるないようになっています。</p>
<p>&nbsp;</p>
<p><span class="sc_marker y"><strong>GRCとは検索順位を簡単にチェックできるツール</strong></span>です。</p>
<p><strong>一番の魅力は、最安プランでは1日12円から使える非常にコスパがいいこと。</strong></p>
<p>&nbsp;</p>
<p>検索順位で上位を取らないと、気持ちを込めて書いた記事も光を浴びず埋もれてしまう寂しいことだってあります。</p>
<p>その記事に光を当てる手助けをするツールです。</p>
<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon"></div>
</div>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-cry.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>いい内容の記事が多くの人に届かないのはもったいない</div>
</div>
<p>&nbsp;</p>
<p>今回の記事では、<span class="sc_marker y">GRCの『詳細』『評判』『何が優れていいるのか』を簡潔に説明していきますね。</span></p>
<p>&nbsp;</p>
<p><span class="btn-cv is-blue is-reflection is-trembling"><a href="https://px.a8.net/svt/ejp?a8mat=3BDW12+5ZIXRM+17H0+639IR">GRCの詳細を見てみる</a></span></p>
<p>&nbsp;</p>
<h2>GRCとは？</h2>
<p>GRC(ジーアールシー)とは、<span class="sc_marker y"><strong>キーワード毎の検索順位チェックツール</strong></span>です。</p>
<p>検索上位を狙うキーワードを簡単にチェックできるので、アフェリエイトで収益を出したいなら導入すべきツールで間違いありません。</p>
<div class="voice clearfix left n_bottom">
<div class="icon"></div>
</div>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-cry.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;">
<p><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>ツールなしで検索上位をとるのは</p>
<p>ひと昔前より厳しいよ</p>
</div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>GRCの詳細について</h2>
<p>&nbsp;</p>
<p>さて、<span class="sc_marker y"><strong>GRCが</strong><strong>検索順位チェックツール</strong></span>という事はわかったと思います。</p>
<p>一番気になるのは<span class="sc_content_icon" style="color: #1e73be;"><i class="fa fa-arrow-down" aria-hidden="true"><span>fa-arrow-down</span></i></span>以下のことですよね？</p>
<p>&nbsp;</p>
<p><a href="https://px.a8.net/svt/ejp?a8mat=3BDW12+5ZIXRM+17H0+639IR"><span style="text-decoration: underline;">GRCの公式サイト</span></a>にも説明が書かれていますがちょっとわかりずらい。なので公式に変わり簡単に説明をしていきたいと思います。</p>
<p>&nbsp;</p>
<div class="sc_frame_wrap custom">
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<ul>
<li class="sc_frame_text">GRCの使用で<span class="futozi">どんないいこと</span>があるの？</li>
<li>利用するための<span class="futozi">金額</span>ってどのくらい？</li>
<li>GRCは<span class="futozi">何が優れている</span>の？</li>
</ul>
</div>
</div>
<p>それでは書いていきます。</p>
<p>&nbsp;</p>
<h3>GRCを使うとどんないいことがあるか？</h3>
<p>ここでは大きく3つ抜粋しました。</p>
<div class="sc_frame_wrap solid custom">
<div class="sc_frame " style="border-color: #fff6e8; background-color: #fff6e8; color: #666666;">
<ul>
<li class="sc_frame_text">収益が上がる</li>
<li>順位の推移が見える</li>
<li>Google以外の順位も追うことができる</li>
</ul>
</div>
</div>
<p>それでは説明します。</p>
<h4>収益が上がる</h4>
<p>検索上位に表示させるために、日々SEOを意識してブログを書いているかと思います。</p>
<p>しかし、検索順位結果の分析なしでは、SEOの効果が出ているのかわかりませんね。</p>
<p>&nbsp;</p>
<p>検索順位チェックしないでSEO対策をするのは、<span class="futozi sc_marker y">白い壁に白の絵具で絵を描いているようなもの</span>。</p>
<p>どこかでミスをしても気づくことができません。</p>
<p>&nbsp;</p>
<p>検索順位をチェックして、修正を繰り返すことでだんだんと上位を狙っていけるようになります。</p>
<p>上位に表示されれば、あなたの記事を見る人も増えるので<span class="futozi">収益を出す確率を上げることが出来ます。</span></p>
<div class="voice clearfix left n_bottom">
<div class="icon"></div>
</div>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-training.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>初っ端で検索上位に食い込む人なんて極々わずかだよ</div>
</div>
<p>&nbsp;</p>
<h4>順位の推移が見える</h4>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/06/GRC-3.jpg" alt="GRC" width="1078" height="676" class="aligncenter size-full wp-image-2869" srcset="https://change-blog.com/wp-content/uploads/2020/06/GRC-3.jpg 1078w, https://change-blog.com/wp-content/uploads/2020/06/GRC-3-383x240.jpg 383w, https://change-blog.com/wp-content/uploads/2020/06/GRC-3-768x482.jpg 768w" sizes="(max-width: 1078px) 100vw, 1078px" /></p>
<p>登録した検索キーワード毎に順位を見ることができます。</p>
<p>順位が前日よりも上がった、下がったも矢印で視覚的に把握できます。</p>
<div class="voice clearfix left n_bottom">
<div class="icon"></div>
</div>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-training.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>徐々に順位を上げて1位を狙う楽しさ♪</div>
</div>
<p>&nbsp;</p>
<h4>Google以外の順位も追うことができる</h4>
<p>&nbsp;</p>
<p>サーチコンソールなどでも順位を見ることができるかと思います。</p>
<p>しかし、順位を見れるのはGoogleでの順位のみ。</p>
<p>&nbsp;</p>
<p>検索エンジンはGoogleが大きな割合を占めていますが、Yahoo!やBingからの検索流入を狙った方がいいのは周知の事実。</p>
<p><span class="sc_marker y"><span class="futozi">GRCではGoogle以外の検索エンジンの順位を追うことが可能です。</span></span></p>
<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon"></div>
</div>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-smile.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>検索エンジンごと上位を狙えば、サイト流入が増える</div>
</div>
<p>&nbsp;</p>
<h3>利用するための金額は？</h3>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/06/GRC-1.jpg" alt="GRC" width="1713" height="936" class="aligncenter size-full wp-image-2862" srcset="https://change-blog.com/wp-content/uploads/2020/06/GRC-1.jpg 1713w, https://change-blog.com/wp-content/uploads/2020/06/GRC-1-400x219.jpg 400w, https://change-blog.com/wp-content/uploads/2020/06/GRC-1-768x420.jpg 768w, https://change-blog.com/wp-content/uploads/2020/06/GRC-1-1536x839.jpg 1536w" sizes="(max-width: 1713px) 100vw, 1713px" /></p>
<p>GRCではライセンスによって料金が変わってきます。プランは5種類。</p>
<p>&nbsp;</p>
<h3>何が優れているか？メリットは？</h3>
<p>&nbsp;</p>
<p>魅力を2つ上げたいと思います。メリットというやつですね。</p>
<p>&nbsp;</p>
<div class="sc_frame_wrap onframe custom">
<div class="sc_frame_title" style="color: #ffc759; background-color: #ffffff;">
<div class="sc_frame_icon"><i class="fa fa-thumbs-o-up" aria-hidden="true"><span>fa-thumbs-o-up</span></i></div>
<p><span>メリット</span></p>
</div>
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<ul>
<li class="sc_frame_text">操作が簡単にできる</li>
<li>信頼がある</li>
<li>安い料金プランがある</li>
</ul>
</div>
</div>
<p>こちらも簡単に説明してきます。</p>
<p>&nbsp;</p>
<h4>操作が簡単にできる</h4>
<p>ブログを書いているのでPCに慣れている方の方が多いので問題ないと思いますが、操作が楽なんです。</p>
<p>アクセス解析になると抵抗感を持っていた人でも<span class="sc_marker y">2クリックほど</span>で検索順位を追うことが出来ます。</p>
<div class="voice clearfix left n_bottom">
<div class="icon"></div>
</div>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-training.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>誰でも扱えるのがポイント</div>
</div>
<p>&nbsp;</p>
<h4>信頼がある</h4>
<p>有限会社シェルウェアという会社が運営している「SEOツールラボ」に含まれるツールです。</p>
<p>&nbsp;</p>
<p><span class="futozi sc_marker y">多くのユーザーに利用をさせていて、信用と機能性が評価されています。</span></p>
<p>検索チェックツールの中でも上位に食い込んでくるほどです。</p>
<p>&nbsp;</p>
<h4>安い料金プランがある</h4>
<p>金額を見ていただいたらわかるように、最安プランは月額375円です。</p>
<p>&nbsp;</p>
<p><span class="futozi sc_marker y">30日間毎日使ったとしても12円ほど</span></p>
<p><span class="futozi">12円でブログ収益が跳ね上がる</span>のなら、ケチになる必要はない投資と考えてもいいですね</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/Otamajakushi.jpg" /></p>
<div class="name">オタマジャクシ</div>
</div>
<div class="text think_balloon left custom" style="background: #eee; color: #666666;">
<div class="custom_voice left think" style="background: #eee;"></div>
<div class="custom_voice2 left think" style="background: #eee;"></div>
<p>やすいな～レッドブル2本でも400円だよ</p>
</div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span class="btn-cv is-blue is-reflection is-trembling"><a href="https://px.a8.net/svt/ejp?a8mat=3BDW12+5ZIXRM+17H0+639IR">GRCを使ってみる</a></span></p>
<p>&nbsp;</p>
<h2>GRCのデメリットは？</h2>
<p>&nbsp;</p>
<p>デメリットを包み隠さず紹介します。</p>
<div class="sc_frame_wrap onframe custom">
<div class="sc_frame_title" style="color: #7a7a7a; background-color: #ffffff;">
<div class="sc_frame_icon"><i class="fa fa-thumbs-o-down" aria-hidden="true"><span>fa-thumbs-o-down</span></i></div>
<p><span>デメリット</span></p>
</div>
<div class="sc_frame " style="border-color: #b7b7b7; background-color: #ffffff; color: #666666;">
<ul>
<li class="sc_frame_text">支払いが銀行振り込み</li>
<li>Macでの初期設定が必要</li>
<li>無料プランはキーワードが10個まで</li>
</ul>
</div>
</div>
<p>&nbsp;</p>
<h4>支払いが銀行振り込み</h4>
<p>&nbsp;</p>
<p>ライセンス購入を申し込んだ後、メールが届くのでそこから銀行振り込みを行います。</p>
<p>&nbsp;</p>
<h4>Macでの初期設定が必要</h4>
<p>&nbsp;</p>
<p>GRCはWindows対応がベースのようです。</p>
<p>でも安心してください、Macで仕様するには専用アプリ（Wine）があります。</p>
<p>設定自体も簡単なので、ちょっと手間が増えるといった印象。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h4>無料プランはキーワードが10個まで</h4>
<p>無料プランは<span class="futozi">検索キーワードを10個までしか追うことができません。</span></p>
<p>&nbsp;</p>
<p>10個では本当にお試しレベル。ちょっと触ってみて自分に合うかを確かめるにはいいでしょう。</p>
<p>おわかりのように、<span class="futozi">有料プラン出ないと収益を上げることは不可能</span>です。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>GRCをオススメしたい人</h2>
<p><strong>アフェリエイトで収益を出す為に、本気でブログに取り組んでいる人</strong>にオススメです。</p>
<p>また、コスパ重視で結果を出したい人にも向いているでしょう。</p>
<p>&nbsp;</p>
<p>「いつか収益がでればいいや～」といつかを期待している人には必要ないツールです。</p>
<p>本気で稼ぐ気がない人には、月々400円程度の金額でも渋ってしまうかもしれません。</p>
<p>&nbsp;</p>
<p><span class="sc_marker y"><span class="futozi">収益を出している人は必ずツールに投資</span><span class="futozi">をしています。</span></span></p>
<p>この金額を払うか払わないかで、収益を上げるまでのスピードや金額も大きく変わるでしょう。</p>
<p>&nbsp;</p>
<p><span class="btn-cv is-blue is-reflection is-trembling"><a href="https://px.a8.net/svt/ejp?a8mat=3BDW12+5ZIXRM+17H0+639IR">GRCを使ってみる</a></span></p>
<p>&nbsp;</p>
<h2>GRCに対する口コミ</h2>
<p>&nbsp;</p>
<blockquote class="twitter-tweet">
<p lang="ja" dir="ltr">サーチコンソールってサイト修正には必須。googleがどんなキーワードでどんなページを評価してくれるわかるから。でも、当然限界はある。</p>
<p>だからGRCが必須。評価してくれていないキーワードやページを知るために。</p>
<p>— アクセル先生@寺子屋式ＳＥＯ (@axcel0901) <a href="https://twitter.com/axcel0901/status/1010706074293293056?ref_src=twsrc%5Etfw">June 24, 2018</a></p></blockquote>
<p><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p>
<h2>他の検索ツールと比較</h2>
<div class="sc_frame_wrap solid custom">
<div class="sc_frame " style="border-color: #fff6e8; background-color: #fff6e8; color: #666666;">
<ul>
<li class="sc_frame_text">Rank Tracker</li>
</ul>
</div>
</div>
<p>こちらも有名なツールです。</p>
<p>GRCよりも金額面では少し高いですが、高性能といったイメージでしょう。</p>
<p>&nbsp;</p>
<p>GRCの方がプランが細かく分かれているので、初めは月額375円のコースで低コストで始められるのがいいのかなといった感じですね。</p>
<p>&nbsp;</p>
<h2>まとめ</h2>
<p>記事の途中で書きましたが、検索チェックツールを使わないでSEO対策をするのは『白い壁に白い絵具で絵を書く』ようなものです。</p>
<p>その検索チェックツールの中でも金額の面からみてもコストパフォーマンスは抜群です。</p>
<p>&nbsp;</p>
<p>稼ぎを出しているブロガーは、誰もが順位チェックを行っています。</p>
<p>遅かれ早かれ使うことになるので、早いうち使って爆速で結果を出してしまうのが賢い選択がと思います。</p>
<p>&nbsp;</p>
<p><span class="btn-cv is-blue is-reflection is-trembling"><a href="https://px.a8.net/svt/ejp?a8mat=3BDW12+5ZIXRM+17H0+639IR">GRCを使ってみる</a></span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
]]></content:encoded>
					
					<wfw:commentRss>https://change-blog.com/grc-review/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>WordPressでのサイトアイコン設定方法｜ブラウザのタブに画像を表示させる</title>
		<link>https://change-blog.com/site-icon</link>
					<comments>https://change-blog.com/site-icon#respond</comments>
		
		<dc:creator><![CDATA[kaeru]]></dc:creator>
		<pubDate>Tue, 02 Jun 2020 14:05:50 +0000</pubDate>
				<category><![CDATA[ブログ運営]]></category>
		<guid isPermaLink="false">https://change-blog.com/?p=2810</guid>

					<description><![CDATA[&#160; オタマジャクシ ブラウザのタブのところに画像を表示させたい &#160; &#160; ネットサーフィンをしていると、PCブラウザのタブにサイトアイコン(ファビコン)が表示されているサイトを見かけると思います。 &#160; …]]></description>
										<content:encoded><![CDATA[<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/Otamajakushi.jpg" /></p>
<div class="name">オタマジャクシ</div>
</div>
<div class="text think_balloon left custom" style="background: #eee; color: #666666;">
<div class="custom_voice left think" style="background: #eee;"></div>
<div class="custom_voice2 left think" style="background: #eee;"></div>
<p>ブラウザのタブのところに画像を表示させたい</p>
</div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>ネットサーフィンをしていると、PCブラウザのタブにサイトアイコン(ファビコン)が表示されているサイトを見かけると思います。</p>
<p>&nbsp;</p>
<p>「自分のブログではタブに画像が表示されていない・・・」</p>
<p>ブログはじめたてはわからないものですよね。</p>
<p>&nbsp;</p>
<p>この記事を参考にすることで、Wordpressでのサイトアイコンの設定方法がわかるようになります。</p>
<p>&nbsp;</p>
<h2>サイトアイコン(ファビコン)とは？</h2>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/06/site-icon.jpg" alt="サイトアイコン(ファビコン)とは" width="2043" height="1053" class="aligncenter size-full wp-image-2811" srcset="https://change-blog.com/wp-content/uploads/2020/06/site-icon.jpg 2043w, https://change-blog.com/wp-content/uploads/2020/06/site-icon-400x206.jpg 400w, https://change-blog.com/wp-content/uploads/2020/06/site-icon-768x396.jpg 768w, https://change-blog.com/wp-content/uploads/2020/06/site-icon-1536x792.jpg 1536w" sizes="(max-width: 2043px) 100vw, 2043px" /></p>
<p>サイトアイコン(ファビコン)とはホームページのシンボルになる画像のことです。</p>
<p>具体的には、<span class="sc_content_icon" style="color: #1e73be;"><i class="fa fa-arrow-up" aria-hidden="true"><span>fa-arrow-up</span></i></span>上画像のようにいろいろな個所で使われる画像です。タブ画像、ブックマーク、スマホのアイコンに使われています。</p>
<p>&nbsp;</p>
<p>サイトアイコン設定をしておくべき理由は大きく２つ</p>
<div class="sc_frame_wrap custom">
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<ol>
<li class="sc_frame_text">自サイトが認知される</li>
<li>見た目が良くなる</li>
</ol>
</div>
</div>
<p>簡単に説明しますね。</p>
<h4>自サイトが認知される</h4>
<p>&nbsp;</p>
<p>文字通り、<span class="sc_marker y"></span><span class="futozi"><span class="sc_marker y">サイトアイコンでサイトを覚えてくれる人は多いようです</span>。</span></p>
<p>YouTubeのサイトアイコンなんて、誰でもしっているサイトアイコンになっていますね。</p>
<p>&nbsp;</p>
<p>ネットサーフィンをしているときのことを思い出していただきたいのですが、サイトを別タブで開きすぎた時はアイコンアイコンを頼りに見たいサイトを選んでいないでしょうか？</p>
<p>このようにサイトの区別がつきやすくなる効果も期待できます。</p>
<p>&nbsp;</p>
<h4>見た目が良くなる</h4>
<p>自分のサイトを作ったからには、目に見える部分はこだわりたいですよね。</p>
<p>タブやブックマークに何の表示されないのはあまりにも寂しい・・・</p>
<p>&nbsp;</p>
<h2>WordPressでのサイトアイコン(ファビコン)設定方法</h2>
<p>&nbsp;</p>
<p>WordPressの編集メニュから</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>『外観』⇒<span class="sc_marker blue">『カタログ』をクリック</span>⇒『サイト基本情報』をクリックします。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/06/site-icon-2.jpg" alt="Wordpressでのサイトアイコン設定方法" width="1793" height="863" class="aligncenter size-full wp-image-2818" srcset="https://change-blog.com/wp-content/uploads/2020/06/site-icon-2.jpg 1793w, https://change-blog.com/wp-content/uploads/2020/06/site-icon-2-400x193.jpg 400w, https://change-blog.com/wp-content/uploads/2020/06/site-icon-2-768x370.jpg 768w, https://change-blog.com/wp-content/uploads/2020/06/site-icon-2-1536x739.jpg 1536w" sizes="(max-width: 1793px) 100vw, 1793px" /></p>
<p>&nbsp;</p>
<p>『入力補助設定』からサイトアイコンを設定をしていきます。</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span><span class="sc_marker blue">『サイトアイコンを選択』をクリック</span>すると、画像を選択できるようになるのでサイトアイコンにしたい画像を選択します。</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>画像が設定されたら<span class="sc_marker blue">『公開』をクリックして完了</span>です。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/06/site-icon-3.jpg" alt="Wordpressでのサイトアイコン設定方法" width="907" height="454" class="aligncenter size-full wp-image-2819" srcset="https://change-blog.com/wp-content/uploads/2020/06/site-icon-3.jpg 907w, https://change-blog.com/wp-content/uploads/2020/06/site-icon-3-400x200.jpg 400w, https://change-blog.com/wp-content/uploads/2020/06/site-icon-3-768x384.jpg 768w" sizes="(max-width: 907px) 100vw, 907px" /></p>
<p>&nbsp;</p>
<p>更新をすれば、PC表示のタブにサイトアイコンが表示されるので確認をしてください。</p>
<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-happy.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>お疲れ様でした～</div>
</div>
<p>&nbsp;</p>
<p><span class="badge bborder orange"><i class="fa fa-lightbulb-o before" aria-hidden="true"><span>fa-lightbulb-o</span></i>POINT</span></p>
<p><span style="color: #000080; font-size: 14pt;">アイコン設定のPOINT</span></p>
<div class="sc_frame_wrap custom">
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<ol>
<li class="sc_frame_text"><span class="futozi">512ピクセル×512ピクセル以上の画像</span>を用意</li>
<li>PNGの画像を使用</li>
</ol>
</div>
</div>
<h4><span class="futozi">512ピクセル（縦）×512ピクセル（横）以上の画像</span>を用意</h4>
<p>正方形の画像を用意する必要はありません。</p>
<p>画像サイズさえ条件を満たしていれば、<span class="sc_marker y">『サイトアイコンを選択』をクリックをしてから正方形に画像を編集はできる</span>ので安心してください。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h4>PNGの画像を使用</h4>
<p><span class="futozi">PNGの画像</span>を使用した方が、<span class="sc_marker y">PCタブで表示されたときにも見栄えが良くなります。</span></p>
<p><span class="sc_content_icon" style="color: #1e73be;"><i class="fa fa-arrow-down" aria-hidden="true"><span>fa-arrow-down</span></i></span>こんな感じですね。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/06/site-icon-4.jpg" alt="Wordpressでのサイトアイコン設定方法" width="792" height="199" class="aligncenter size-full wp-image-2822" srcset="https://change-blog.com/wp-content/uploads/2020/06/site-icon-4.jpg 792w, https://change-blog.com/wp-content/uploads/2020/06/site-icon-4-400x101.jpg 400w, https://change-blog.com/wp-content/uploads/2020/06/site-icon-4-768x193.jpg 768w" sizes="(max-width: 792px) 100vw, 792px" /></p>
<div class="voice clearfix left n_bottom">
<div class="icon"></div>
</div>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-surprised.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>ちょっと白枠になると<br />
ういちゃうよね・・</div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>まとめ</h2>
<p>サイトアイコン(ファビコン)の設定は簡単にできるのがわかっていただけたと思います。</p>
<p>サイトアイコンを設定していないサイトと差をつけることができますね。</p>
<p>&nbsp;</p>
<p>試しに設定をしてみてください。</p>
<p>&nbsp;</p>
]]></content:encoded>
					
					<wfw:commentRss>https://change-blog.com/site-icon/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>アイキャッチ画像(サムネイル)の設定方法｜集客と遷移率UP</title>
		<link>https://change-blog.com/set-thumbnail</link>
					<comments>https://change-blog.com/set-thumbnail#respond</comments>
		
		<dc:creator><![CDATA[kaeru]]></dc:creator>
		<pubDate>Sat, 30 May 2020 09:23:46 +0000</pubDate>
				<category><![CDATA[ブログ運営]]></category>
		<guid isPermaLink="false">https://change-blog.com/?p=2538</guid>

					<description><![CDATA[&#160; Diverでの『アイキャッチ画像の設定方法』を紹介します。 &#160; カエル Diverの使い方を紹介するよ &#160; アイキャッチ画像(サムネイル画像)があるとないのとでは、記事の訴求力がかわります。 最近勢いのある…]]></description>
										<content:encoded><![CDATA[<p>&nbsp;</p>
<p>Diverでの<strong>『アイキャッチ画像の設定方法』</strong>を紹介します。</p>
<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-happy.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>Diverの使い方を紹介するよ</div>
</div>
<p>&nbsp;</p>
<p>アイキャッチ画像(サムネイル画像)があるとないのとでは、記事の訴求力がかわります。</p>
<p>最近勢いのあるYouTubeでもサムネで見る動画を選んだりしている、それと同じです。</p>
<p>&nbsp;</p>
<p>今回の記事を参考にすれば、アイキャッチ画像の設定の方法がわかるようになり記事のクリック率と回遊率が上がります。</p>
<p>&nbsp;</p>
<h2>アイキャッチ画像(サムネイル)の必要性</h2>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/set-thumbnail-1.jpg" alt="Diver-アイキャッチ設定" width="1232" height="461" class="aligncenter size-full wp-image-2755" srcset="https://change-blog.com/wp-content/uploads/2020/05/set-thumbnail-1.jpg 1232w, https://change-blog.com/wp-content/uploads/2020/05/set-thumbnail-1-400x150.jpg 400w, https://change-blog.com/wp-content/uploads/2020/05/set-thumbnail-1-768x287.jpg 768w" sizes="(max-width: 1232px) 100vw, 1232px" /></p>
<p>アイキャッチ画像はサムネイル画像を言い換えた方が一般的かもしれません。</p>
<p>サムネイル画像はDiverで記事を書くのであれば、複数個所で使われます。それはTOPページの記事一覧であったり、トピックスライダー、内部リンクカードでの使用もされるものです。</p>
<p>&nbsp;</p>
<p>サムネイルが設定されていることで、<span class="sc_marker y"><strong>ユーザーが他の記事に興味を持つきっかけを与え記事のクリック率や回遊率を上げることが可能</strong>です。</span></p>
<p>見栄えのいいサイトを作成したいのであれば、<span class="sc_marker y">サイトデザインを左右するものがサムネイル</span>だと知っておくべきでしょう。</p>
<p>&nbsp;</p>
<h2>アイキャッチ画像の設定方法</h2>
<p>アイキャッチ画像の設定は簡単です。</p>
<p>&nbsp;</p>
<p>記事の投稿画面をひらきます。(アイキャッチ画像を入れたいページの投稿の編集)</p>
<p>&nbsp;</p>
<p>サイドバーにアイキャッチ画像というボックスが出ていると思います。</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span><span class="sc_marker blue">『アイキャッチ画像を設定』をクリック</span>します。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/set-thumbnail-2.jpg" alt="Diver-アイキャッチ設定" width="826" height="577" class="aligncenter size-full wp-image-2756" srcset="https://change-blog.com/wp-content/uploads/2020/05/set-thumbnail-2.jpg 826w, https://change-blog.com/wp-content/uploads/2020/05/set-thumbnail-2-344x240.jpg 344w, https://change-blog.com/wp-content/uploads/2020/05/set-thumbnail-2-768x536.jpg 768w" sizes="(max-width: 826px) 100vw, 826px" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>アイキャッチ画像を設定して『記事の更新』または『記事の公開』を押せば、アイキャッチ画像(サムネイル)として表示されるようになりますよ。</p>
<p>以上になります。</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-happy.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>お疲れ様でした～</div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span class="badge bborder " style="border-color: #6183c6; color: #6183c6;"><i class="fa fa-paw before" aria-hidden="true"><span>fa-paw</span></i>補足</span></p>
<p>画像を設定をする時に『代替テキスト』という設定項目があります。</p>
<p>代替テキストはSEO効果があるので、設定をすることをおすすめしています。</p>
<p>&nbsp;</p>
<div class="sc_frame_wrap onframe custom">
<div class="sc_frame_title" style="color: #ffbb35; background-color: #ffffff;">
<div class="sc_frame_icon"><i class="fa fa-list-alt" aria-hidden="true"><span>fa-list-alt</span></i></div>
<p><span>関連記事</span></p>
</div>
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<div>画像検索でも引っかかるようになり、記事への流入経路が単純に増加</div>
<div class="sc_frame_text"><div class="sc_getpost"><a class="clearfix" href="https://change-blog.com/image-seo"  target="_blank"><div class="sc_getpost_thumb post-box-thumbnail__wrap"><img decoding="async" src="data:image/gif;base64,R0lGODdhAQABAPAAAN3d3QAAACwAAAAAAQABAAACAkQBADs=" width="128" height="77" alt="画像を使ったSEO対策-5つのポイント｜画像検索で上位に表示させる方法" loading="lazy" data-src="https://change-blog.com/wp-content/uploads/2020/04/image-seo.jpg" class="lazyload"></div><div class="title">画像を使ったSEO対策-5つのポイント｜画像検索で上位に表示させる方法</div><div class="date">2020.4.17</div><div class="substr">あなたは画像SEOを意識していますか？ちょっと設定をすることの積み重ねで、ライバルと差が付くものです。この記事では画像でSEOに効く5つのコツを紹介していいます。...</div></a></div></div>
<div class="sc_frame_text"><a href="https://change-blog.com/image-seo" title="画像を使ったSEO対策-5つのポイント｜画像検索で上位に表示させる方法 (2020-04-17 23:29:07)">&gt;&gt;画像を使ったSEO対策-5つのポイント｜画像検索で上位に表示させる方法</a></div>
</div>
</div>
<p>&nbsp;</p>
<h2>アイキャッチ画像を設定し忘れたとき</h2>
<p>&nbsp;</p>
<p>テーマによってはプラグインを使用して、アイキャッチ画像の設定漏れを防いでいるようです。</p>
<p>DIverではその機能が備わっているので設定を行っておきましょう。</p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>Diverオプション⇒『基本設定」をクリックします。</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>メイン設定の中に『サムネイル代替画像』があるので、代替画像を設定して終了です。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/set-thumbnail-4.jpg" alt="Diver-アイキャッチ設定" width="1360" height="577" class="aligncenter size-full wp-image-2757" srcset="https://change-blog.com/wp-content/uploads/2020/05/set-thumbnail-4.jpg 1360w, https://change-blog.com/wp-content/uploads/2020/05/set-thumbnail-4-400x170.jpg 400w, https://change-blog.com/wp-content/uploads/2020/05/set-thumbnail-4-768x326.jpg 768w" sizes="(max-width: 1360px) 100vw, 1360px" /></p>
<p>&nbsp;</p>
<p>設定はこれだけです。</p>
<p>&nbsp;</p>
<p><span class="badge bborder " style="border-color: #6183c6; color: #6183c6;"><i class="fa fa-paw before" aria-hidden="true"><span>fa-paw</span></i>補足</span></p>
<p>『投稿内の画像をサムネイルに設定する』にチェックをした場合</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/set-thumbnail-5.jpg" alt="Diver-アイキャッチ設定" width="498" height="315" class="aligncenter size-full wp-image-2758" srcset="https://change-blog.com/wp-content/uploads/2020/05/set-thumbnail-5.jpg 498w, https://change-blog.com/wp-content/uploads/2020/05/set-thumbnail-5-379x240.jpg 379w" sizes="(max-width: 498px) 100vw, 498px" /></p>
<p>Diverでアイキャッチ画像が設定される順番は以下のようになっています。</p>
<div class="sc_designlist ol timeline orange">
<ol>
<li>アイキャッチ画像</li>
<li>記事の1番初めの画像</li>
<li>サムネイル代替画像</li>
</ol>
</div>
<p>&nbsp;</p>
<p>画像の1番上に来る画像は、<span class="sc_marker y"><span class="futozi">サムネイルに向いていないものあるのでチェックは外しましょう</span></span>。</p>
<p>&nbsp;</p>
<h2>アイキャッチ画像(サムネイル)関連情報</h2>
<p>&nbsp;</p>
<p>アイキャッチ画像(サムネイル)が記事一覧ではぼやけてしまうことがあります。</p>
<p>せっかく注意を惹きつける画像が台無しまっては意味がなくなるので、回避方法をまとめておきました。</p>
<div class="sc_frame_wrap onframe custom">
<div class="sc_frame_title" style="color: #ffbb35; background-color: #ffffff;">
<div class="sc_frame_icon"><i class="fa fa-list-alt" aria-hidden="true"><span>fa-list-alt</span></i></div>
<p><span>関連記事</span></p>
</div>
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<div class="sc_frame_text"><div class="sc_getpost"><a class="clearfix" href="https://change-blog.com/diver-eye-catching-clearly"  target="_blank"><div class="sc_getpost_thumb post-box-thumbnail__wrap"><img decoding="async" src="data:image/gif;base64,R0lGODdhAQABAPAAAN3d3QAAACwAAAAAAQABAAACAkQBADs=" width="128" height="77" alt="【Diver】アイキャッチ画像(サムネイル)をぼやけさせない方法" loading="lazy" data-src="https://change-blog.com/wp-content/uploads/2020/05/diver-eye-catching-clearly.jpg" class="lazyload"></div><div class="title">【Diver】アイキャッチ画像(サムネイル)をぼやけさせない方法</div><div class="date">2020.5.15</div><div class="substr"> WordpressテーマDiverで『アイキャッチ画像(サムネイル)』をくっきりと表示する方法を紹介していきます。  カエル Diverの疑問や悩み解決するよ  Diverの記事一覧で表示されるアイキャッチ画像(サムネイル)がぼやけて表示されていないで困っていないでしょうか？ 注目されるための画像...</div></a></div></div>
<div class="sc_frame_text"><span style="text-decoration: underline;"><a href="https://change-blog.com/diver-eye-catching-clearly" title="【Diver】アイキャッチ画像(サムネイル)をぼやけさせない方法 (2020-05-15 22:00:08)">&gt;&gt;【Diver】アイキャッチ画像(サムネイル)をぼやけさせない方法 </a></span></div>
</div>
</div>
<p>&nbsp;</p>
<h2>まとめ</h2>
<p>アイキャッチ画像(サムネイル)は必ず設定をして損はないでしょう。</p>
<p>設定も簡単なので、サイトのクオリティを上げるために画像はこだわっていけたらいいですね。</p>
<p>&nbsp;</p>
<p>Diverに関する記事は他にもあるので良かったら見てください。</p>
<p>また、SEOに関する記事も書いてあるので合わせてどうぞ。</p>
<p>&nbsp;</p>
]]></content:encoded>
					
					<wfw:commentRss>https://change-blog.com/set-thumbnail/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>サイトスピード改善施策とスコア結果｜75ポイントUP-誰でもマネが可能</title>
		<link>https://change-blog.com/sitespeed-up-practice</link>
					<comments>https://change-blog.com/sitespeed-up-practice#respond</comments>
		
		<dc:creator><![CDATA[kaeru]]></dc:creator>
		<pubDate>Tue, 12 May 2020 08:53:40 +0000</pubDate>
				<category><![CDATA[ブログ運営]]></category>
		<category><![CDATA[pickup]]></category>
		<guid isPermaLink="false">https://change-blog.com/?p=1840</guid>

					<description><![CDATA[&#160; オタマジャクシ ・サイトスピードを速くしたい ・どうやったらサイトスピードは上がるの？ &#160; こんな疑問や悩みを解決していきます。 &#160; サイトスピードとは、ユーザーがサイトを訪問した時に、サイトが表示されるま…]]></description>
										<content:encoded><![CDATA[<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/Otamajakushi.jpg" /></p>
<div class="name">オタマジャクシ</div>
</div>
<div class="text think_balloon left custom" style="background: #eee; color: #666666;">
<div class="custom_voice left think" style="background: #eee;"></div>
<div class="custom_voice2 left think" style="background: #eee;"></div>
<p>・サイトスピードを速くしたい<br />
・どうやったらサイトスピードは上がるの？</p>
</div>
<div></div>
</div>
<p>&nbsp;</p>
<p>こんな疑問や悩みを解決していきます。</p>
<p>&nbsp;</p>
<p>サイトスピードとは、ユーザーがサイトを訪問した時に、サイトが表示されるまでの時間を言います。</p>
<p><strong><span class="sc_marker y">サイトスピードが遅いとユーザビリティ低下とSEOへの悪影響をおこす危険がある</span></strong>ため、無視できない要素です。</p>
<p>&nbsp;</p>
<p>『サイトスピードの重要性はわかってるけど何をしたらいいんだろう？』という方も多いのではないでしょうか。</p>
<p>そこで、今回は<strong>『実際にサイトスピードを上げるために行った対策を、一つ一つ効果検証をつけて紹介』</strong>していきます。</p>
<p>&nbsp;</p>
<p>この記事にあることは誰でも行える簡単な対策なのでマネができます。</p>
<p>参考にしてもらえたら、あなたのサイトのサイトスピードは確実に上がるでしょう。</p>
<p>&nbsp;</p>
<h2>サイトスピードが低いと起きる事</h2>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-img-1.jpg" alt="サイトスピードが低いと起きる事" width="675" height="450" class="aligncenter wp-image-2428" /></p>
<p>サイトスピードが遅いと、以下2つのマイナス影響が起こりえます。</p>
<p>損をしないためにも、サイトスピードの対策の必要性に十分気が付けると思います。</p>
<div class="sc_frame_wrap custom">
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<ul>
<li class="sc_frame_text">ユーザーの直帰率が上がる</li>
<li>SEOに悪影響を与える</li>
</ul>
</div>
</div>
<p>簡単に説明をしていきます。</p>
<p>&nbsp;</p>
<h3>ユーザーの直帰率が上がる</h3>
<p>&nbsp;</p>
<p>ユーザビリティの低下につながってしまいます。</p>
<p>サイトは腐るほどあるので、表示速度がければ他のサイトを見る人が多いのは当たり前かもしれませんね。</p>
<p>表示速度に関してが、このような検証データもあります。</p>
<blockquote><p>・表示速度が1秒から3秒に落ちると、直帰率は32%上昇<br />
・表示速度が1秒から5秒に落ちると、直帰率は90%上昇<br />
・表示速度が1秒から6秒に落ちると、直帰率は106%上昇<br />
・表示速度が1秒から7秒に落ちると、直帰率は113%上昇<br />
・表示速度が1秒から10秒に落ちると、直帰率は123%上昇</p>
<div class="blockquote_ref">
<div><a href="https://www.suzukikenichi.com/blog/speed-matters-for-mobile-sites/" target="_blank" rel="noopener noreferrer">海外SEOブログ</a></div>
</div>
</blockquote>
<div></div>
<h3>SEOに悪影響を与える</h3>
<div></div>
<div><span>2018年に『Speed Update」』が実装されたことで、サイトの表示スピードはSEOでの必須項目になりました。</span></div>
<div></div>
<div>表示スピードが下がると、Googlのクローラー（あなたのサイトを検索エンジンに登録するロボット）にがすべてのコンテンツを読み込みません。</div>
<div></div>
<div>こちらの記事を読むと好きな時にクローラーを呼ぶ方法がわかります。</div>
<div><a href="https://change-blog.com/attract-crawler" title="Google クローラーをページに呼ぶ方法 &amp; 巡回頻度をあげる方法 (2020-04-12 00:54:47)">&gt;&gt;Google クローラーをページに呼ぶ方法 &amp; 巡回頻度をあげる方法 </a></div>
<h2>サイトスピードの測り方</h2>
<p>&nbsp;</p>
<p>Googleが提供しているサイトスピードの分析ツールがあります。</p>
<p><span class="sc_content_icon" style="color: #1e73be;"><i class="fa fa-arrow-down" aria-hidden="true"><span>fa-arrow-down</span></i></span>以下のサイトを参考にしてみましょう。</p>
<p><a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="noopener noreferrer">PageSpeed Insights<span class="sc_content_icon" style="color: #1e73be;"><i class="fa fa-external-link" aria-hidden="true"><span>fa-external-link</span></i></span></a><span>で測定ができます。</span></p>
<p>&nbsp;</p>
<p>このサイトでサイトスピードを測ることで以下を知れます。</p>
<div class="sc_frame_wrap onframe custom">
<div class="sc_frame_title" style="color: #ffbb33; background-color: #ffffff;">できる事</div>
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<div class="sc_frame_text">
<ul>
<li>起動速度の世界順位が知れる</li>
<li>サイトスピードを上げる改善策のヒントが知れる</li>
</ul>
</div>
</div>
</div>
<p>ここの結果のスコアが80点であれば、世界の上位20％に食い込んでいるという事になります。</p>
<p>つまり50点以上であれば世界の半分のサイトにはサイトスピードで優っていると言えるんです。</p>
<p>&nbsp;</p>
<h2>サイトスピードの目安</h2>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-img-2.jpg" alt="サイトスピードの目安" width="1350" height="901" class="aligncenter wp-image-2429 size-full" srcset="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-img-2.jpg 1350w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-img-2-360x240.jpg 360w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-img-2-768x513.jpg 768w" sizes="(max-width: 1350px) 100vw, 1350px" /></p>
<p><a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="noopener noreferrer">PageSpeed Insights<span class="sc_content_icon" style="color: #1e73be;"><i class="fa fa-external-link" aria-hidden="true"><span>fa-external-link</span></i></span></a><span>で</span>は起動速度の世界順位を知ることが出来ますが、どのくらいいのスコアならOKなのでしょうか？</p>
<p><span class="sc_marker y">結論、<span class="futozi">80以上あれば十分</span>でしょう。</span></p>
<p>&nbsp;</p>
<p>もちろん、早ければ早いほどユーザビリティの向上につながります。</p>
<h2>改善前と改善後のサイトスピード</h2>
<p>&nbsp;</p>
<p>サイトスピードがものすごく低かったのですが、<span class="futozi">7つの改善施策</span>を行いサイトスピードを高めることが出来ました。</p>
<p>&nbsp;</p>
<p>現在使っているWordpressテーマ『<a href="https://www.infotop.jp/click.php?aid=384269&amp;iid=70619">DIVER<span class="sc_content_icon" style="color: #666666;"><i class="fa fa-external-link" aria-hidden="true"><span>fa-external-link</span></i></span></a>』は表示速度が格段に早いというわけではありません。</p>
<p>しかし、しっかりと対策をとることで高得点をたたき出すことが出来ました。</p>
<p>&nbsp;</p>
<p>実際のスコアは<span class="sc_content_icon" style="color: #1e73be;"><i class="fa fa-arrow-down" aria-hidden="true"><span>fa-arrow-down</span></i></span>このようになります。<span class="sc_content_icon" style="color: #1e73be;"><br />
</span></p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-4.jpg" alt="サイトスピードの改善前と改善後" width="1468" height="1076" class="aligncenter size-full wp-image-2399" srcset="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-4.jpg 1468w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-4-327x240.jpg 327w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-4-768x563.jpg 768w" sizes="(max-width: 1468px) 100vw, 1468px" /><span class="sc_content_icon" style="color: #1e73be;"></span></p>
<p>パソコンは関しては99点にまですることができたのは納得いくスコアでした。</p>
<p>&nbsp;</p>
<p>サイトスピードは特別目立たないですがDiverは一度使ったら二度と離れられないテーマです。</p>
<p><a href="https://change-blog.com/diver-review" title="『Diver (ダイバー)』誰もを魅了する有料テーマ！《レビュー》 (2020-03-05 23:53:58)">&gt;&gt;『Diver (ダイバー)』誰もを魅了する有料テーマ！《レビュー》</a></p>
<p>&nbsp;</p>
<h2>サイトスピードの改善施策</h2>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/sitespeedup-2.jpg" alt="サイトスピード改善対策項目" width="1384" height="577" class="aligncenter size-full wp-image-1847" srcset="https://change-blog.com/wp-content/uploads/2020/04/sitespeedup-2.jpg 1384w, https://change-blog.com/wp-content/uploads/2020/04/sitespeedup-2-768x320.jpg 768w" sizes="(max-width: 1384px) 100vw, 1384px" /></p>
<p>それでは具体的な施策と、それぞれの結果を順を追って説明していきますね。</p>
<p><span class="sc_content_icon" style="color: #1e73be;"><i class="fa fa-arrow-up" aria-hidden="true"><span>fa-arrow-up</span></i></span>上画像のように、<a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="noopener noreferrer">PageSpeed Insights<span class="sc_content_icon" style="color: #1e73be;"><i class="fa fa-external-link" aria-hidden="true"><span>fa-external-link</span></i></span></a><span>では</span>改善すべき項目がわかるので1つ1つ対応のアクションに移りやすいです。</p>
<p>&nbsp;</p>
<p>それぞれ必要な個所をご覧ください。改善していった順番に記載しています。</p>
<div class="sc_frame_wrap custom">
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<ol>
<li class="sc_frame_text">適切なサイズの画像</li>
<li>効率的な画像フォーマット</li>
<li>使用していない CSS を削除してください</li>
<li><span>レンダリングを妨げるリソースの除外</span></li>
<li><span>次世代フォーマットでの画像の配信</span></li>
<li>その他行ったこと</li>
</ol>
</div>
</div>
<p>&nbsp;</p>
<h3>1．適切なサイズの画像</h3>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-8.jpg" alt="" width="128" height="13" class="aligncenter size-thumbnail wp-image-2407" srcset="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-8.jpg 1123w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-8-400x40.jpg 400w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-8-768x77.jpg 768w" sizes="(max-width: 128px) 100vw, 128px" /> <img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-6.jpg" alt="適切なサイズの画像" width="1405" height="132" class="aligncenter wp-image-2405 size-full" srcset="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-6.jpg 1405w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-6-400x38.jpg 400w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-6-768x72.jpg 768w" sizes="(max-width: 1405px) 100vw, 1405px" /></p>
<p>『適切なサイズの画像』という項目を改善してい行きます。</p>
<h4>問題点</h4>
<p>サイトスピードを低下させている原因には画像周りに問題があることが多いです。</p>
<p>必要以上に大きいファイルサイズの画像が登録されていると、CSSを使用して適切な画像サイズに変更が行われます。その変更過程でサイトスピードの低下につながってしまという訳です。</p>
<h4>実際の対策</h4>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-5.jpg" alt="EWWW Image Optimizerを使っての表示速度の改善" width="968" height="430" class="aligncenter size-full wp-image-2402" srcset="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-5.jpg 968w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-5-400x178.jpg 400w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-5-768x341.jpg 768w" sizes="(max-width: 968px) 100vw, 968px" /></p>
<p>画像を圧縮させてサイズを小さくすることで、表示の負荷を減らすことを狙いました。</p>
<p>&nbsp;</p>
<p>画像を圧縮させるためにWordpressプラグイン『EWWW Image Optimizer』を使用しました。</p>
<p>このプラグインでは、<span class="futozi">WordPressにアップロードした画像を質を下げることなく自動で圧縮・最適化することが可能</span>です。さらに、<span class="futozi">今までに保存していた画像も一括で圧縮・最適化も行ってくれる</span>優れもの。</p>
<p>&nbsp;</p>
<p>画像を使っているすべてのサイトに一括で効果がでるので、サイト全体のサイトスピードUPのこうかが見込めます。</p>
<p>&nbsp;</p>
<div class="sc_frame_wrap onframe custom">
<div class="sc_frame_title" style="color: #ffbb35; background-color: #ffffff;">
<div class="sc_frame_icon"><i class="fa fa-list-alt" aria-hidden="true"><span>fa-list-alt</span></i></div>
<p><span>関連記事</span></p>
</div>
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<div class="sc_frame_text">
<p>詳しい使い方や内容はこちらの記事に細かく書いてあります。</p>
<div class="sc_getpost"><a class="clearfix" href="https://change-blog.com/ewww-image-optimizer" ><div class="sc_getpost_thumb post-box-thumbnail__wrap"><img decoding="async" src="data:image/gif;base64,R0lGODdhAQABAPAAAN3d3QAAACwAAAAAAQABAAACAkQBADs=" width="128" height="77" alt="【画像最適化】EWWW Image Optimizer の設定・使用方法｜表示速度UP" loading="lazy" data-src="https://change-blog.com/wp-content/uploads/2020/04/ewww-image-optimizer.jpg" class="lazyload"></div><div class="title">【画像最適化】EWWW Image Optimizer の設定・使用方法｜表示速度UP</div><div class="date">2020.4.30</div><div class="substr">画像の最適化・軽量化をするプラグイン『EWWW Image Optimizer 』の設置方法と使い方を説明していきます。 この記事を読むことであなたのサイトスピードはグンと上がります。...</div></a></div>
<p><a href="https://change-blog.com/ewww-image-optimizer" title="EWWW Image Optimizer の設定・使用方法｜画像最適化で表示速度UP (2020-04-30 09:35:06)">&gt;&gt;EWWW Image Optimizer の設定・使用方法｜画像最適化で表示速度UP </a></p>
</div>
</div>
</div>
<p><a href="https://change-blog.com/ewww-image-optimizer" title="EWWW Image Optimizer の設定・使用方法｜画像最適化で表示速度UP (2020-04-30 09:35:06)"></a></p>
<p><span class="badge bborder " style="border-color: #6183c6; color: #6183c6;"><i class="fa fa-paw before" aria-hidden="true"><span>fa-paw</span></i>補足</span></p>
<p>WordPressに画像をアップロードする前に、画像を圧縮する方法もあります。</p>
<p>『<a href="https://tinypng.com">TinyPNG</a>』を使えば無料で画像の圧縮を行うことができるので、チェックしてみるのもオススメ。</p>
<p>&nbsp;</p>
<h4>結果</h4>
<p>&nbsp;</p>
<p>結果は次の『効率的な画像フォーマット』の対策と並行して行ったので、次に記載します。</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-cry.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>記録がうまく取れなかった・・</div>
<div></div>
</div>
<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon"></div>
</div>
<h3>2．効率的な画像フォーマット</h3>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-7.jpg" alt="効率的な画像フォーマット" width="1151" height="99" class="aligncenter wp-image-2406 size-full" srcset="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-7.jpg 1151w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-7-400x34.jpg 400w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-7-768x66.jpg 768w" sizes="(max-width: 1151px) 100vw, 1151px" /></p>
<p>『効率的な画像フォーマット』という項目を改善してい行きます。</p>
<p>効率的な画像フォーマットの修正とは、画像を適切なサイズに変換したり画像のフォーマットを適切なものにすることです。</p>
<p>&nbsp;</p>
<h4>問題点</h4>
<p>『画像のフォーマットが適していない事』や『画像の容量が大きいこと』があげられます。</p>
<p>背景を透過していなくてい画像はJPGになっていますか？</p>
<p>サイトスピードを上げるには使用用途によって画像のファイル形式を正しくする必要があるんです。</p>
<div class="sc_frame_wrap solid custom">
<div class="sc_frame " style="border-color: #fff6e8; background-color: #fff6e8; color: #666666;">
<div class="sc_frame_text">☆推奨されるがファイル形式</div>
<ul>
<li>写真や画像⇒jpg形式</li>
<li>透過部分がある画像⇒PNG形式</li>
<li><span>アニメーション画像⇒gif形式</span></li>
</ul>
</div>
<p>&nbsp;</p>
</div>
<h4>実際の対策</h4>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-11.jpg" alt="PNGからJPG" width="650" height="162" class="aligncenter size-full wp-image-2410" srcset="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-11.jpg 650w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-11-400x100.jpg 400w" sizes="(max-width: 650px) 100vw, 650px" /></p>
<p>&nbsp;</p>
<p>『<a href="https://png2jpg.com/">PNGtoJPG</a>』ではPNGからJPGにファイル形式を変更する時には、以下のサイトを使うのがいいでしょう。</p>
<p><span>画像のフォーマット(JPG、GIF、PNGとう)はファイルの拡張子を見れば判断ができます。</span></p>
<p>&nbsp;</p>
<p>無駄にPNGになっていて、重くなっていることがあるのでこれを期にキレイにしてしまいましょう。</p>
<h4>結果</h4>
<p>&nbsp;</p>
<div class="sc_frame_wrap onframe custom">
<div class="sc_frame_title" style="color: #ffad0a; background-color: #ffffff;">
<div class="sc_frame_icon"><i class="fa fa-bullseye" aria-hidden="true"><span>fa-bullseye</span></i></div>
<p><span>スコア</span></p>
</div>
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">・モバイル：7⇒８<br />
・パソコン：59⇒59</div>
<div></div>
<div>結果は『効率的な画像フォーマット』『適切なサイズの画像』が改善できる項目から消すことができました。</div>
</div>
<p>しかし、サイトスピードは全く上がりませんでした。</p>
<p><span class="sc_content_icon" style="color: #1e73be;"><i class="fa fa-arrow-down" aria-hidden="true"><span>fa-arrow-down</span></i></span>改善できる項目</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-13.jpg" alt="効率的な画像フォーマット" width="1480" height="469" class="aligncenter size-full wp-image-2412" srcset="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-13.jpg 1480w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-13-400x127.jpg 400w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-13-768x243.jpg 768w" sizes="(max-width: 1480px) 100vw, 1480px" /></p>
<p><span class="sc_content_icon" style="color: #1e73be;"><i class="fa fa-arrow-down" aria-hidden="true"><span>fa-arrow-down</span></i></span>サイトスピード（画像修正後の結果）</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-12.jpg" alt="効率的な画像フォーマット" width="1184" height="877" class="aligncenter wp-image-2411 size-full" srcset="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-12.jpg 1184w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-12-324x240.jpg 324w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-12-768x569.jpg 768w" sizes="(max-width: 1184px) 100vw, 1184px" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>3．使用していない CSS を削除してください</h3>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-8.jpg" alt="使用していない CSS を削除してください" width="1123" height="113" class="aligncenter wp-image-2407 size-full" srcset="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-8.jpg 1123w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-8-400x40.jpg 400w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-8-768x77.jpg 768w" sizes="(max-width: 1123px) 100vw, 1123px" /></p>
<p>『使用していない CSS を削除してください』という項目を改善してい行きます。</p>
<h4>問題点</h4>
<p><span>ユーザーの画面にコンテンツが表示されるまでには、CSSをいったん読み込むという作業が入っています。</span></p>
<p>つまり不要なCSSがあると、その分無意味に時間を使っているということになるのです。</p>
<p>&nbsp;</p>
<p>使用していないCSSをチェックして、いらないCSSは消しておけば解決します。</p>
<h4>実際の対策</h4>
<p>&nbsp;</p>
<p><span>使っていないコードがいくつかあり、それを一気に削除しました。</span></p>
<p>僕の場合は、Googl FontをCSSコードで呼び出して使っていましたが、フォントにこだわりがなかったので消してしまいました。</p>
<p><a href="https://fonts.google.com/"><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-16.jpg" alt="GoogleFont" width="162" height="51" class="aligncenter size-full wp-image-2416" /></a></p>
<p>&nbsp;</p>
<h4>結果</h4>
<p>&nbsp;</p>
<div class="sc_frame_wrap onframe custom">
<div class="sc_frame_title" style="color: #ffad0a; background-color: #ffffff;">
<div class="sc_frame_icon"><i class="fa fa-bullseye" aria-hidden="true"><span>fa-bullseye</span></i></div>
<p><span>スコア</span></p>
</div>
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">・モバイル：８⇒32<br />
・パソコン：59⇒72</div>
</div>
<div>スコアがかなり伸びました。</div>
<div>不要なCSSコードがそれほどあったという事ですね。</div>
<div></div>
<div>WordPressをはじめたての頃は、CSSを適当にいじっていたのが問題だったようでした。</div>
<div></div>
<div><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-15.jpg" alt="使用していない CSS を削除してくださいの結果" width="1393" height="880" class="aligncenter wp-image-2415 size-full" srcset="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-15.jpg 1393w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-15-380x240.jpg 380w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-15-768x485.jpg 768w" sizes="(max-width: 1393px) 100vw, 1393px" /></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3><span>4．レンダリングを妨げるリソースの除外</span></h3>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-9.jpg" alt="レンダリングを妨げるリソースの除外" width="1127" height="103" class="aligncenter wp-image-2408 size-full" srcset="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-9.jpg 1127w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-9-400x37.jpg 400w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-9-768x70.jpg 768w" sizes="(max-width: 1127px) 100vw, 1127px" /></p>
<p>『レンダリングを妨げるリソースの除外』という項目を改善してい行きます。</p>
<p>&nbsp;</p>
<h4>問題点</h4>
<p>WEBサイトを表示させるには、プログラムコードをいったんすべて読み込むことが必要です。</p>
<p>その読み込みを一時停止してしまうコードがレンダリングを妨げるリソースになります。</p>
<p>&nbsp;</p>
<p>多くの場合<span class="sc_marker y">『CSS』または『JavaScript』がレンダリングを妨げ遅くしている原因</span>と考えられます。</p>
<p>&nbsp;</p>
<p>レンダリングを妨げるリソースの除外』コード修正ができる人はコードを書き換えた方がいいでしょう。</p>
<p>しかし、改善のハードルが高すぎるので、誰でもできるプラグイの導入で改善できる方法を紹介していきます。</p>
<p>プラグインが増えるとサイトが重くなるので、使用するプラグインは少ない方がBESTですね。</p>
<div class="voice clearfix left n_bottom">
<div class="icon"></div>
</div>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-smile.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>対策を3つ紹介するよ！</div>
</div>
<p>&nbsp;</p>
<h4>実際の対策-その1</h4>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-18.jpg" alt="Autoptimize" width="748" height="361" class="aligncenter size-full wp-image-2418" srcset="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-18.jpg 748w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-18-400x193.jpg 400w" sizes="(max-width: 748px) 100vw, 748px" /></p>
<p><span>WEBでサイトを表示させるときにはサイトを作っているプログラミングコードのダウンロードが必要です。</span></p>
<p>そのプログラミングコードが重たいと、サイトスピードが遅くなるのは当たり前。</p>
<p>&nbsp;</p>
<p>この問題を解決するためにプラグイン『<span>Autoptimize</span>』を使いました。</p>
<p><span>『Autoptimize</span>』<span>は</span><span class="sc_marker y">プログラミングコード（HTMLやCSS、JavaScript）のファイルを圧縮・最適化することができます。</span></p>
<p>&nbsp;</p>
<div class="sc_frame_wrap onframe custom">
<div class="sc_frame_title" style="color: #ffbb35; background-color: #ffffff;">
<div class="sc_frame_icon"><i class="fa fa-list-alt" aria-hidden="true"><span>fa-list-alt</span></i></div>
<p><span>関連記事</span></p>
</div>
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<div class="sc_frame_text">
<p>詳しい使い方や効果はこちらの記事に細かく書いてあります。</p>
<div class="sc_getpost"><a class="clearfix" href="https://change-blog.com/autoptimize" ><div class="sc_getpost_thumb post-box-thumbnail__wrap"><img decoding="async" src="data:image/gif;base64,R0lGODdhAQABAPAAAN3d3QAAACwAAAAAAQABAAACAkQBADs=" width="128" height="77" alt="【サイト高速化】Autoptimizeの効果と設定方法｜WordPressプラグイン" loading="lazy" data-src="https://change-blog.com/wp-content/uploads/2020/05/Autoptimize.jpg" class="lazyload"></div><div class="title">【サイト高速化】Autoptimizeの効果と設定方法｜WordPressプラグイン</div><div class="date">2020.5.4</div><div class="substr">『Autoptimize』は、サイトの読み込み速度を早くする効果があります。サイトスピードををあげることはSEOに効果もあります。詳しく設定方法や効果が記載されています。...</div></a></div>
<p><a href="https://change-blog.com/autoptimize" title="【サイト高速化】Autoptimizeの効果と設定方法｜Wordpressプラグイン (2020-05-04 01:20:21)">【サイト高速化】Autoptimizeの効果と設定方法｜Wordpressプラグイン</a></p>
</div>
</div>
</div>
<p>&nbsp;</p>
<h4>その1の結果</h4>
<p>&nbsp;</p>
<div class="sc_frame_wrap onframe custom">
<div class="sc_frame_title" style="color: #ffad0a; background-color: #ffffff;">
<div class="sc_frame_icon"><i class="fa fa-bullseye" aria-hidden="true"><span>fa-bullseye</span></i></div>
<p><span>スコア</span></p>
</div>
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">・モバイル：32⇒37<br />
・パソコン：72⇒87</div>
</div>
<p>プラグイン『Autoptimize』の導入したことで、またもスコアが伸びました。</p>
<p>ただ、これではまだ</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-17.jpg" alt="" width="1350" height="855" class="aligncenter size-full wp-image-2417" srcset="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-17.jpg 1350w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-17-379x240.jpg 379w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-17-768x486.jpg 768w" sizes="(max-width: 1350px) 100vw, 1350px" /></p>
<p>&nbsp;</p>
<h4>実際の対策-その2</h4>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-20.jpg" alt="WP Fastest Cache" width="837" height="387" class="aligncenter wp-image-2420 size-full" srcset="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-20.jpg 837w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-20-400x185.jpg 400w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-20-768x355.jpg 768w" sizes="(max-width: 837px) 100vw, 837px" /></p>
<p><span>ページを表示するためのデータを保存する仕組み（</span>キャッシュ）を改善することで、サイトスピードをあげることが可能。</p>
<p>この問題を解決するためにプラグイン『<span>WP Fastest Cache</span>』を使いました。</p>
<p><span>『WP Fastest Cache』とは、</span><strong><span class="sc_marker y">WordPressのキャッシュの設定と削除をすることができるプラグイン</span></strong><span>です。</span></p>
<p>また、画像遅延の読み込み効果でさらにサイトスピードの向上に期待ができる。</p>
<p>&nbsp;</p>
<div class="sc_frame_wrap onframe custom">
<div class="sc_frame_title" style="color: #ffbb35; background-color: #ffffff;">
<div class="sc_frame_icon"><i class="fa fa-list-alt" aria-hidden="true"><span>fa-list-alt</span></i></div>
<p><span>関連記事</span></p>
</div>
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<div class="sc_frame_text">
<p>詳しい使い方や効果はこちらの記事に細かく書いてあります。</p>
<div class="sc_getpost"><a class="clearfix" href="https://change-blog.com/wp-fastest-cache" ><div class="sc_getpost_thumb post-box-thumbnail__wrap"><img decoding="async" src="data:image/gif;base64,R0lGODdhAQABAPAAAN3d3QAAACwAAAAAAQABAAACAkQBADs=" width="128" height="77" alt="【サイト読み込み短縮】WP Fastest Cacheの効果と設定方法｜WordPressプラグイン" loading="lazy" data-src="https://change-blog.com/wp-content/uploads/2020/05/wp-fastest-cache.jpg" class="lazyload"></div><div class="title">【サイト読み込み短縮】WP Fastest Cacheの効果と設定方法｜WordPressプラグイン</div><div class="date">2020.5.3</div><div class="substr">サイトスピードを速くしたいと思っていませんか？WP Fastest Cacheを使用すると、Wordpressのキャッシュの設定と削除を行えサイトスピードがあがります。設定方法と効果を詳しく解説していきます。...</div></a></div>
<p><a href="https://change-blog.com/wp-fastest-cache" title="WP Fastest Cacheの効果と設定方法｜Wordpressプラグイン (2020-05-03 00:07:09)">&gt;&gt;WP Fastest Cacheの効果と設定方法｜Wordpressプラグイン </a></p>
</div>
</div>
</div>
<p>&nbsp;</p>
<h4>その2の結果</h4>
<p>&nbsp;</p>
<div class="sc_frame_wrap onframe custom">
<div class="sc_frame_title" style="color: #ffad0a; background-color: #ffffff;">
<div class="sc_frame_icon"><i class="fa fa-bullseye" aria-hidden="true"><span>fa-bullseye</span></i></div>
<p><span>スコア</span></p>
</div>
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">・モバイル：37⇒70<br />
・パソコン：87⇒98</div>
</div>
<p><span>『WP Fastest Cache』を使うことでパソコンのスコアがほぼ満足のいくスコアになりました。</span></p>
<p>また、モバイルも70と十分な結果に。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-19.jpg" alt="" width="1384" height="862" class="aligncenter size-full wp-image-2419" srcset="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-19.jpg 1384w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-19-385x240.jpg 385w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-19-768x478.jpg 768w" sizes="(max-width: 1384px) 100vw, 1384px" /></p>
<p>&nbsp;</p>
<h4>実際の対策-その3</h4>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-22.jpg" alt="" width="958" height="116" class="aligncenter size-full wp-image-2424" srcset="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-22.jpg 958w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-22-400x48.jpg 400w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-22-768x93.jpg 768w" sizes="(max-width: 958px) 100vw, 958px" /></p>
<p>施策その1・施策その2を両方使っても、『レンダリングを妨げるリソースの除外』は完璧に修正をすることができませんでした。</p>
<p>さらには表示速度を速める方法があるので試すことにしました。</p>
<p>&nbsp;</p>
<p>先ほども説明したように、WEBサイトを表示させるにはプログラムコードをいったんすべて読み込むという工程があります。</p>
<p><span>ということは、プログラムコード(Javascript)の読み込みを後回しにできれば、表示速度は早くなる可能性がでます。</span></p>
<p>&nbsp;</p>
<p>この問題を解決するためにプラグイン『<span>『Script to Footere</span>』を使いました。</p>
<p><span>プラグイン『Script to Footere』とは、</span><strong><span class="sc_marker y">Javascript（プログラミング言語）の読み込みを後回しにしてくれるプラグイン</span></strong><span>です。</span></p>
<p>&nbsp;</p>
<div class="sc_frame_wrap onframe custom">
<div class="sc_frame_title" style="color: #ffbb35; background-color: #ffffff;">
<div class="sc_frame_icon"><i class="fa fa-list-alt" aria-hidden="true"><span>fa-list-alt</span></i></div>
<p><span>関連記事</span></p>
</div>
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<div class="sc_frame_text">
<p>詳しい使い方や効果はこちらに細かく載せています。</p>
<div class="sc_getpost"><a class="clearfix" href="https://change-blog.com/script-to-footere" ><div class="sc_getpost_thumb post-box-thumbnail__wrap"><img decoding="async" src="data:image/gif;base64,R0lGODdhAQABAPAAAN3d3QAAACwAAAAAAQABAAACAkQBADs=" width="128" height="77" alt="【ページ読み込み改善】Script to Footereの効果と設定方法｜WordPressプラグイン" loading="lazy" data-src="https://change-blog.com/wp-content/uploads/2020/05/script-to-footere.jpg" class="lazyload"></div><div class="title">【ページ読み込み改善】Script to Footereの効果と設定方法｜WordPressプラグイン</div><div class="date">2020.5.5</div><div class="substr">ページの読み込み速度を速め方をしっていますか？プラグイン『Script to Footer』を使うことで、プログラミング言語）の読み込みを後回しにしてサイトスピードを速めます。詳しく設定方法があるので参考にしてください...</div></a></div>
<p><a href="https://change-blog.com/script-to-footere" title="【ページ読み込み改善】Script to Footereの効果と設定方法｜Wordpressプラグイン (2020-05-05 01:37:56)">【ページ読み込み改善】Script to Footereの効果と設定方法｜Wordpressプラグイン </a></p>
</div>
</div>
</div>
<p>&nbsp;</p>
<h4>その３の結果</h4>
<p>&nbsp;</p>
<div class="sc_frame_wrap onframe custom">
<div class="sc_frame_title" style="color: #ffad0a; background-color: #ffffff;">
<div class="sc_frame_icon"><i class="fa fa-bullseye" aria-hidden="true"><span>fa-bullseye</span></i></div>
<p><span>スコア</span></p>
</div>
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">・モバイル：70⇒82<br />
・パソコン：98⇒99</div>
</div>
<div></div>
<p>モバイルのスコアが80を超えました。</p>
<p>パソコンに関しては最高のパフォーマンスを発揮してくれています。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-21.jpg" alt="" width="1149" height="711" class="aligncenter size-full wp-image-2423" srcset="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-21.jpg 1149w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-21-388x240.jpg 388w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-21-768x475.jpg 768w" sizes="(max-width: 1149px) 100vw, 1149px" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3><span>5．次世代フォーマットでの画像の配信</span></h3>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-10.jpg" alt="" width="1136" height="96" class="aligncenter size-full wp-image-2404" srcset="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-10.jpg 1136w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-10-400x34.jpg 400w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-10-768x65.jpg 768w" sizes="(max-width: 1136px) 100vw, 1136px" /></p>
<p>&nbsp;</p>
<p>この項目は特にアクションをとる必要はないと思っています。</p>
<p>『画像のフォーマットが適していない事』や『画像の容量が大きいこと』の対策を行ったことで自動的に項目から消えていました。</p>
<p>&nbsp;</p>
<p>『次世代フォーマットでの画像の配信』は手を付けなくても効果は十分に出ました。</p>
<p>今後は手を付けていく必要があるかもしれないので準備はしておこうと思います。</p>
<p>&nbsp;</p>
<h2>その他の改善施策</h2>
<p>他にも不要なプラグインの削除をおこなっています。</p>
<p>魅力的なプラグインは多いです。しかし、入れすぎてしまっては動作がおそくなる原因になります。</p>
<p>必要ない物はどんどん消してしまいましょう。</p>
<div class="voice clearfix left n_bottom">
<div class="icon"></div>
</div>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-smile.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"><br />
</span>サイトスピードを上げるって<br />
大掃除みたいだね</div>
</div>
<h2>まとめ</h2>
<p>WordPressでの実際行った施策を一挙公開しました。</p>
<p>この施策でサイトスピードは格段にはやくすることができました。</p>
<p>&nbsp;</p>
<p>今回はコードをいじることなく、初心者の方でも簡単に行える施策のみ載せています。</p>
<p>難しい改善策をやりだしたらきりがなく、本当の目的の記事を書くという事ができなくなってしいますからね。</p>
<p>なので今回は必要最低限の対策ということです。</p>
<p>&nbsp;</p>
<p>施策自体はがっつり1日かければ終わらせることが可能なので、1日時間をとって作業してしまうのも手ですね。</p>
<p>参考になればうれしいです。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://change-blog.com/sitespeed-up-practice/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【アドセンス狩り対策】AdSense Invalid Click Protector設定で回避</title>
		<link>https://change-blog.com/adsense-invalid-click-protector</link>
					<comments>https://change-blog.com/adsense-invalid-click-protector#respond</comments>
		
		<dc:creator><![CDATA[kaeru]]></dc:creator>
		<pubDate>Wed, 06 May 2020 13:11:14 +0000</pubDate>
				<category><![CDATA[ブログ運営]]></category>
		<guid isPermaLink="false">https://change-blog.com/?p=2215</guid>

					<description><![CDATA[&#160; オタマジャクシ ・アドセンス狩りの効果的な対策を知りたい ・AdSense Invalid Click Protectorの使用方法を教えて &#160; こんな疑問や悩みを解決していきます。 &#160; アドセンス狩りとは…]]></description>
										<content:encoded><![CDATA[<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/Otamajakushi.jpg" /></p>
<div class="name">オタマジャクシ</div>
</div>
<div class="text think_balloon left custom" style="background: #eee; color: #666666;">
<div class="custom_voice left think" style="background: #eee;"></div>
<div class="custom_voice2 left think" style="background: #eee;"></div>
<p>・アドセンス狩りの効果的な対策を知りたい<br />
・AdSense Invalid Click Protectorの使用方法を教えて</p>
</div>
</div>
<p>&nbsp;</p>
<p>こんな疑問や悩みを解決していきます。</p>
<p>&nbsp;</p>
<p>アドセンス狩りとは、広告を不正にクリックしGoogleアドセンスの停止に追いやる行為です。</p>
<p>そんな迷惑行為ですが、<strong><span class="sc_marker y">プラグイン『 AdSense Invalid Click Protector』を使うことで事前に防ぐことができます</span>。</strong></p>
<p>&nbsp;</p>
<p>いつだれに惑行為をされるかわからないので、早いうちに設定をしておいた方が得策です。</p>
<p>もしも被害にあってしまうと、アドセンスのアカウントが無効かされるなんてことも。</p>
<p>&nbsp;</p>
<p>そこで今回は<span class="sc_marker y"><strong>『 AdSense Invalid Click Protector</strong><strong>の効果と設置方法』</strong></span>を説明していきます。</p>
<p>&nbsp;</p>
<p>この記事を参考にすることで、広告停止による収益減を未然に防げるようになります。</p>
<p>画像をつけて解説をしていくので、画像どおりにマネをするだけで簡単にアドセンス狩りの対策が終了するでしょう。</p>
<h2>アドセンス狩りについて</h2>
<p>&nbsp;</p>
<p>アドセンス狩りとは、<span class="sc_marker y"><span class="futozi">Googleアドセンスの広告を不正にクリックしてアカウントを無効にさせる行為</span></span>のことを言います。</p>
<p>簡単に言うと「広告を何度もクリックをしてサイト運営者にペナルティをくらわせる、ネット上での嫌がらせ」ですね・・・</p>
<p>&nbsp;</p>
<p>Googleアドセンス公式では以下の禁止行為を禁止しています。アドセンス狩りはこの禁止行為を第三者が行っているものになります。</p>
<p>自分でのクリックは制御の使用がありますが、第三者となると対策を打つしかないという訳です。</p>
<blockquote><p>サイト運営者様がご自身の広告をクリックしたり、手動または他の方法で表示回数やクリック数を作為的に増やしたりすることは禁止されています。</p>
<div class="blockquote_ref">
<div><a href="https://support.google.com/adsense/answer/48182?hl=ja" target="_blank" rel="noopener noreferrer">AdSense プログラム ポリシー</a></div>
</div>
</blockquote>
<p>&nbsp;</p>
<p>アドセンス狩りをしてくる人にメリットは無く、嫌がらせ・妬み・競合の蹴落としという理由が多いでしょう。</p>
<p>そんな理由であなたの広告収入が減ってしまうのは非常につまらない話ですよね。</p>
<p>&nbsp;</p>
<p>アドセンス狩りはいつだれに狙われるかわかりません。その危険性はサイトの閲覧者が増えれば増えるほど増していきます。</p>
<p>だから事前の対策が必要ということですね。</p>
<div class="voice clearfix left n_bottom">
<div class="icon"></div>
</div>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-cry.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>嫌がらせは悲しいけど・・・<br />
大勢のブロガーが被害にあってるんだよ</div>
</div>
<h2>『AdSense Invalid Click Protector』で不正クリックは防げる</h2>
<p>『AdSense Invalid Click Protector』とは、Googleアドセンス広告の不正クリックを未然に防いでくれるプラグインです。</p>
<p>&nbsp;</p>
<p>具体的な設定効果は以下のようになります。</p>
<div class="sc_frame_wrap solid custom">
<div class="sc_frame " style="border-color: #fff6e8; background-color: #fff6e8; color: #666666;">
<div class="sc_frame_text"><span style="color: #000000;">期間○の間に、同じユーザーから〇回広告がクリックされたら、そのユーザーを〇日間ブロックする</span></div>
</div>
</div>
<p>つまり、<span class="sc_marker y">ありえない頻度で広告をクリックするユーザーをサイトに一定期間入れなくする</span>という対策が打てます。</p>
<p>&nbsp;</p>
<p>それでは設定方法を説明をしていきます。</p>
<h2>『AdSense Invalid Click Protector』の設定方法</h2>
<p>&nbsp;</p>
<p>『AdSense Invalid Click Protector』の導入を以下の流れで進めていきます。</p>
<div class="sc_frame_wrap custom">
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<ol>
<li class="sc_frame_text">インストールと有効化</li>
<li>AdSense Invalid Click Protectorの設定方法</li>
<li>効果を有効にさせる方法</li>
<li>不正クリックの広告を表示する方法</li>
</ol>
</div>
<p>&nbsp;</p>
</div>
<p><span class="badge bborder red"><i class="fa fa-exclamation-triangle before" aria-hidden="true"><span>fa-exclamation-triangle</span></i>注意</span></p>
<p><span class="sc_marker red"></span><span class="futozi"><span class="sc_marker red">このプラグインは設定だけでは効果を発揮しないので最後まで気が抜けません</span>。</span></p>
<p>&nbsp;</p>
<p>それでは説明をしていきます。</p>
<h3>インストールと有効化</h3>
<p>&nbsp;</p>
<p>まずは、<span class="sc_marker y">プラグイン『AdSense Invalid Click Protector』をインストール</span>します。</p>
<p>&nbsp;</p>
<p>WordPressの編集画面から</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>『プラグイン』→<span class="sc_marker blue" style="background-color: #ffffff;">『新規追加』をクリック</span></p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/Search-Regex-0.jpg" alt="インストール" width="398" height="156" class="aligncenter wp-image-1370 size-full" /></p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>プラグインを追加の画面になるので、<span class="sc_marker blue">『AdSense Invalid Click Protector』と検索</span>します。</p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>検索後『今すぐインストール』をクリックしてインストールを行います。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-1.jpg" alt="AdSense-Invalid-Click-Protectorのインストール" width="2392" height="918" class="aligncenter size-full wp-image-2220" srcset="https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-1.jpg 2392w, https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-1-768x295.jpg 768w, https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-1-1536x589.jpg 1536w, https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-1-2048x786.jpg 2048w" sizes="(max-width: 2392px) 100vw, 2392px" /></p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>インストールの終了後、<span class="sc_marker blue">プラグインを追加の『有効化』をクリック</span>して、完了です。</p>
<p>&nbsp;</p>
<h3>AdSense Invalid Click Protectorの設定方法</h3>
<p>&nbsp;</p>
<p>次に以下の〇部分の設定をしていきます。</p>
<div class="sc_frame_wrap solid custom">
<div class="sc_frame " style="border-color: #fff6e8; background-color: #fff6e8; color: #666666;">
<div class="sc_frame_text"><span style="color: #000000;">期間○の間に、同じユーザーから〇回広告がクリックされたら、そのユーザーを〇日間ブロックする</span></div>
</div>
</div>
<p>&nbsp;</p>
<p>インストールが問題なく完了していれば、設定の中に『AdSense Invalid Click Protector』が追加されています。</p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>WordPressのメニューから<span class="sc_marker blue">『AdSense Invalid Click Protector』→『General Settings』をクリック</span></p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-2.jpg" alt="AdSense-Invalid-Click-Protector-設定方法" width="1492" height="585" class="aligncenter size-full wp-image-2221" srcset="https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-2.jpg 1492w, https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-2-768x301.jpg 768w" sizes="(max-width: 1492px) 100vw, 1492px" /></p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>設定画面になるので順に説明をしてきます。</p>
<p>画像と同じようにチェックをいれておけばアドセンス狩りの対策ではOKです。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-3.jpg" alt="AdSense-Invalid-Click-Protector-設定方法" width="1705" height="1292" class="aligncenter size-full wp-image-2222" srcset="https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-3.jpg 1705w, https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-3-768x582.jpg 768w, https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-3-1536x1164.jpg 1536w" sizes="(max-width: 1705px) 100vw, 1705px" /></p>
<p>&nbsp;</p>
<p><span style="font-size: 14pt;"><span class="futozi">◇Set the Ad Click Limit</span></span></p>
<p><span class="sc_marker y">『クリックの上限』</span>を設定できます。</p>
<p>ある一定期間にここで設定したクリック上限以上をクリックするとブロックを行います。</p>
<p><span class="futozi">僕は5回を上限に設定をしています。</span></p>
<p>&nbsp;</p>
<p><span style="font-size: 14pt;"><span class="futozi">◇Click Counter Cooke Expiration Time</span></span></p>
<p><span class="sc_marker y">『クリック数をカウントする期間』</span>を設定できます。</p>
<p>この期間を過ぎるとクリック数の記録がリセットされます。</p>
<p><span class="futozi">僕は期間は3時間に設定をしています。</span></p>
<p>&nbsp;</p>
<p><span style="font-size: 14pt;"><span class="futozi">◇Set the Visitor Ban Duration</span></span></p>
<p><span><span class="sc_marker y">『ドセンス狩りの危険があるユーザーのブロックする期間』</span>を設定できます。</span></p>
<p>危険なユーザーである可能性があり、数値を大きく設定してしまいたい気持ちもわかります。しかし、大きすぎると誤作動があるので現実味のある時間にしましょう。</p>
<p><span class="futozi">ちなみに僕は1週間の設定です。</span></p>
<p>&nbsp;</p>
<p>画像のように設定をすると以下のような設定になっていることになります。</p>
<div class="sc_frame_wrap solid custom">
<div class="sc_frame " style="border-color: #fff6e8; background-color: #fff6e8; color: #666666;">
<div class="sc_frame_text"><span style="color: #000000;"><span style="color: #ff0000;">3時間<span style="color: #000000;">の間</span></span>に、同じユーザーから<span style="color: #ff0000;">５回</span>広告がクリックされたら、そのユーザーを<span style="color: #ff0000;">７日間ブロック</span>する。</span></div>
</div>
</div>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>設定を変更をクリックして完了です。</p>
<p>&nbsp;</p>
<p>しかし！これだけでは有効になっていません。<br />
<span style="color: #ff0000;"><span class="futozi">次に説明をする設定を行わないの機能しません。</span></span></p>
<div class="voice clearfix left n_bottom">
<div class="icon"></div>
</div>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-surprised.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>ここで終わらないから<br />
気を付けて！！！</div>
</div>
<p>&nbsp;</p>
<h3>効果を有効にさせる方法(ショートコードの作成)</h3>
<p>『AdSense Invalid Click Protector』を動作させるためには、GoogleアドセンスのコードにPHPコードを追加する必要があります。</p>
<p>&nbsp;</p>
<p>その過程で<span>functions.phpファイルに追加する必要があるのですが、失敗をするとサイトで何も表示されなくなります。大変なことになってしまいますね。</span></p>
<div class="voice clearfix left n_bottom">
<div class="icon"></div>
</div>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-surprised.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>こ、怖い・・・</div>
</div>
<p>とても危険なので、今回は<strong><span class="sc_marker blue">WordPress初心者の方がリスクなしで設定ができる方法</span></strong>を説明していきます。</p>
<p>&nbsp;</p>
<p>プラグイン『Code Snippets』を使えば、安全に『functions.phpファイル』の書き込み管理を行ってくれます。</p>
<p>それでは進めていきますね。</p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>『プラグイン』→<span style="background-color: #ffffff;">『新規追加』→『Code Snippets』検索→<span class="sc_marker blue">『今すぐインストール』を</span></span><span class="sc_marker blue">クリック</span></p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-4.jpg" alt="Code Snippetsのインストール" width="2165" height="759" class="aligncenter size-full wp-image-2223" srcset="https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-4.jpg 2165w, https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-4-768x269.jpg 768w, https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-4-1536x538.jpg 1536w, https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-4-2048x718.jpg 2048w" sizes="(max-width: 2165px) 100vw, 2165px" /></p>
<p>&nbsp;</p>
<p>インストール後には、Wordpress管理画面のメニューに『Code Snippets』が追加されています。</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>『Code Snippets』→<span class="sc_marker blue">『Add New』をクリック</span></p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-5.jpg" alt="Code Snippetsの使用方法" width="1507" height="443" class="aligncenter size-full wp-image-2225" srcset="https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-5.jpg 1507w, https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-5-768x226.jpg 768w" sizes="(max-width: 1507px) 100vw, 1507px" /></p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>コードを貼り付けていく。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-6.jpg" alt="Code Snippetsの使用方法" width="2151" height="996" class="aligncenter size-full wp-image-2227" srcset="https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-6.jpg 2151w, https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-6-768x356.jpg 768w, https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-6-1536x711.jpg 1536w, https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-6-2048x948.jpg 2048w" sizes="(max-width: 2151px) 100vw, 2151px" /></p>
<p>&nbsp;</p>
<p>➀管理用に「わかりやすい名前の設定」をします。(自分がわかればOKです)</p>
<p>②コードを挿入する<br />
コード挿入の仕方は以下のコピぺでOKです</p>
<p><span class="sc_content_icon" style="color: #1e73be;"><i class="fa fa-arrow-down" aria-hidden="true"><span>fa-arrow-down</span></i></span>『<span class="futozi" style="background-color: #dbdbdb;">&lt;!!--　アドセンスコードを設置　--&gt;</span>』を削除して、自分のGoogleアドセンスの広告コードを設置しましょう。</p>
<p>&nbsp;</p>
<pre class="line-numbers"><code class="language-php">function googleads01() {
    if( aicp_can_see_ads() ) {
        $adCode = '
            &lt;div class="aicp"&gt;
                
　　　　　　　<span style="color: #ff0000;">&lt;!!--　アドセンスコードを設置　--&gt;
</span>
            &lt;/div&gt;';
        return $adCode;
    } else {
        return '&lt;div class="error"&gt;広告は非表示です。&lt;/div&gt;';
    }
}
add_shortcode('ads01', 'googleads01');</code></pre>
<p>&nbsp;</p>
<p>参考として、僕が設定しているものを張っておきます。</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-7.jpg" alt="AdSense Invalid Click Protector-6" width="1884" height="1084" class="aligncenter size-full wp-image-2229" srcset="https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-7.jpg 1884w, https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-7-768x442.jpg 768w, https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-7-1536x884.jpg 1536w" sizes="(max-width: 1884px) 100vw, 1884px" /></p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>コードのコピペが完了したら『Save changes and activate』をクリックして設定終了です。</p>
<p>その他の設定は特に触る必要はありません。</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-8.jpg" alt="AdSense Invalid Click Protector-6" width="1827" height="227" class="aligncenter size-full wp-image-2230" srcset="https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-8.jpg 1827w, https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-8-768x95.jpg 768w, https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-8-1536x191.jpg 1536w" sizes="(max-width: 1827px) 100vw, 1827px" /></p>
<p>&nbsp;</p>
<p>以上で設定はすべて完了です！</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-happy.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>お疲れ様でした～</div>
</div>
<h3>不正クリックの広告を表示する方法</h3>
<p>&nbsp;</p>
<p>一通りの設定が完了しました。</p>
<p><span class="sc_marker y">不正クリックに対応したアドセンス広告の設置</span>をしていきます。</p>
<p>広告を張っていきたい場所に<span style="color: #ff6600;">以下のショートコード</span>を記載するだけでOKです。</p>
<div class="sc_frame_wrap solid custom">
<div class="sc_frame " style="border-color: #fff6e8; background-color: #fff6e8; color: #666666;">
<div class="sc_frame_text"><span class="futozi">ads01を[]で閉じたもの(詳しくは下の画像を)</span></div>
</div>
</div>
<p>&nbsp;</p>
<p>例えば<span class="sc_content_icon" style="color: #1e73be;"><i class="fa fa-arrow-down" aria-hidden="true"><span>fa-arrow-down</span></i></span>こんな感じです。</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-9.jpg" alt="AdSense-Invalid-Click-Protector-を使った広告表示" width="2089" height="822" class="aligncenter size-full wp-image-2233" srcset="https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-9.jpg 2089w, https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-9-768x302.jpg 768w, https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-9-1536x604.jpg 1536w, https://change-blog.com/wp-content/uploads/2020/05/AdSense-Invalid-Click-Protector-9-2048x806.jpg 2048w" sizes="(max-width: 2089px) 100vw, 2089px" /></p>
<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon"></div>
</div>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-cry.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>アドセンスの自動広告を利用している場合は<br />
不正クリック防止のアドセンス広告を入れる事はできないみたい</div>
</div>
<p>&nbsp;</p>
<p>このサイトで使用しているDiverでの不正クリック防止のアドセンス広告の設置方法はこちらで詳しく紹介しています。</p>
<p><a href="https://change-blog.com/diver-adsensediver-adsense-hunting" title="【Diver】アドセンス狩りの対策｜Diver使用者向けに解説 (2020-05-07 01:36:56)">&gt;&gt;【Diver】アドセンス狩りの対策｜Diver使用者向けに解説 </a></p>
<p>&nbsp;</p>
<h2>まとめ</h2>
<p>『AdSense Invalid Click Protector』を使った、アドセンス狩りを未然に防ぐための方法でした。</p>
<p>&nbsp;</p>
<p>アドセンス狩りに合う危険は誰にでもあり、<span class="sc_marker y">万が一アドセンスが停止すると復旧はかなり大変</span>とされています。</p>
<p>&nbsp;</p>
<p>広告の停止を未然に防いで、嫌な思いをすることないブログ運営にしていきましょう。</p>
<p>&nbsp;</p>
]]></content:encoded>
					
					<wfw:commentRss>https://change-blog.com/adsense-invalid-click-protector/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【ページ読み込み改善】Script to Footereの効果と設定方法｜WordPressプラグイン</title>
		<link>https://change-blog.com/script-to-footere</link>
					<comments>https://change-blog.com/script-to-footere#respond</comments>
		
		<dc:creator><![CDATA[kaeru]]></dc:creator>
		<pubDate>Mon, 04 May 2020 16:37:56 +0000</pubDate>
				<category><![CDATA[ブログ運営]]></category>
		<guid isPermaLink="false">https://change-blog.com/?p=2070</guid>

					<description><![CDATA[&#160; オタマジャクシ Script to Footereの効果が知りたい！ どうやって使えばいいの？ &#160; こんな疑問や悩みを解決していきます。 &#160; プラグイン『Script to Footer』は、ページの読み込…]]></description>
										<content:encoded><![CDATA[<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/Otamajakushi.jpg" /></p>
<div class="name">オタマジャクシ</div>
</div>
<div class="text think_balloon left custom" style="background: #eee; color: #666666;">
<div class="custom_voice left think" style="background: #eee;"></div>
<div class="custom_voice2 left think" style="background: #eee;"></div>
<ul>
<li>Script to Footereの効果が知りたい！</li>
<li>どうやって使えばいいの？</li>
</ul>
</div>
</div>
<p>&nbsp;</p>
<p>こんな疑問や悩みを解決していきます。</p>
<p>&nbsp;</p>
<p><span class="sc_marker y"><strong>プラグイン『Script to Footer』は、</strong><strong>ページの読み込み速度を</strong></span><span class="futozi"><span class="sc_marker y"><strong>速めることが可能</strong></span>です。</span></p>
<p>表示速度の低下はSEOに悪影響を及ぼすため対策をしておいた方が損をしないで済みます。</p>
<p>&nbsp;</p>
<p>今回は<span class="sc_marker y"><strong>『Script to Footerの効果と設置方法』</strong></span>について説明していきます。</p>
<p>設定が簡単で、表示速度の改善効果はかなり出るでしょう。</p>
<p>&nbsp;</p>
<p>表示速度の対策は行ってきたけど、表示速度がなかなか上がらないと悩んでいる方には必見です。</p>
<p>&nbsp;</p>
<h2>Script to Footereとは？効果は？</h2>
<p>&nbsp;</p>
<p>『Script to Footere』は、<strong><span class="sc_marker y">Javascript（プログラミング言語）の読み込みを後回しにしてくれるプラグイン</span></strong>です。</p>
<p>&nbsp;</p>
<p>表示速度を遅くしている原因の1つには、Javascriptを読み込まないと表示を先に進ませないという仕組みがあるからです。</p>
<p>ましてや Javascriptがページ上部にあるとなおさら表示速度が遅くなってしまいます。</p>
<p>&nbsp;</p>
<p>つまり、Javascriptを読み込みが後回しにできたら表示速度は上がるのは当然ですね。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-happy.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>このプラグインを使用して<br />
表示速度は格段に早くなりました。</div>
</div>
<p>&nbsp;</p>
<h2>Script to Footereの設置方法</h2>
<p>&nbsp;</p>
<p>『Script to Footere』の<span class="sc_marker y">設置はインストールして終わり</span>です。</p>
<p>&nbsp;</p>
<p>設定に関してほとんど設定をしなくて問題ありません。<br />
一部不具合が出てた時くらいの対応でいいでしょう。</p>
<p>&nbsp;</p>
<div class="sc_frame_wrap custom">
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<ol>
<li class="sc_frame_text">インストールと有効化</li>
<li>補足</li>
<li>注意点</li>
</ol>
</div>
</div>
<p>&nbsp;</p>
<p>それでは説明をしていきます。</p>
<p>&nbsp;</p>
<h3>インストールと有効化</h3>
<p>&nbsp;</p>
<p>まずは、<span class="sc_marker y">プラグイン『Script to Footere』をインストール</span>します。</p>
<p>&nbsp;</p>
<p>WordPressの編集画面から</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>『プラグイン』→<span class="sc_marker blue" style="background-color: #ffffff;">『新規追加』をクリック</span></p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/Search-Regex-0.jpg" alt="インストール" width="398" height="156" class="aligncenter wp-image-1370 size-full" /></p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>プラグインを追加の画面になるので、<span class="sc_marker blue">『Script to Footere』と検索</span>します。</p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>検索後『今すぐインストール』をクリックしてインストールを行います。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/Scripts-To-Footer-1.jpg" alt="Scripts-To-Footer-インストール" width="1923" height="608" class="aligncenter size-full wp-image-2074" srcset="https://change-blog.com/wp-content/uploads/2020/04/Scripts-To-Footer-1.jpg 1923w, https://change-blog.com/wp-content/uploads/2020/04/Scripts-To-Footer-1-768x243.jpg 768w, https://change-blog.com/wp-content/uploads/2020/04/Scripts-To-Footer-1-1536x486.jpg 1536w" sizes="(max-width: 1923px) 100vw, 1923px" /></p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>インストールの終了後、<span class="sc_marker blue">プラグインを追加の『有効化』をクリック</span>して完了です。</p>
<p>&nbsp;</p>
<p>特にこれといって設定は必要ないので、サイトスピードが上がっているか早速チェックしましょう。</p>
<p>&nbsp;</p>
<h3>補足</h3>
<p>&nbsp;</p>
<p>設定画面もあり、特定のページに対してこのプラグインの効果を無効にすることができます。</p>
<p><span class="sc_marker y">特に設定の必要はなしでいいでしょう。</span></p>
<p>&nbsp;</p>
<p>しかし、このプラグインを導入して『サイトの表示』や『動作の違和感』があった場合がまれにあります。</p>
<p>そんな時は</p>
<p>『設定』→<span class="futozi sc_marker y">『Keep jQuery in the Header』にチェック</span>を入れましょう。</p>
<p>&nbsp;</p>
<p>そうすることで修正されます。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/Scripts-To-Footer-2.jpg" alt="Scripts-To-Footer-設定" width="1130" height="818" class="aligncenter size-full wp-image-2075" srcset="https://change-blog.com/wp-content/uploads/2020/04/Scripts-To-Footer-2.jpg 1130w, https://change-blog.com/wp-content/uploads/2020/04/Scripts-To-Footer-2-768x556.jpg 768w" sizes="(max-width: 1130px) 100vw, 1130px" /></p>
<p>&nbsp;</p>
<p>基本はインストールして終了のプラグインです。</p>
<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-happy.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>お疲れ様でした～</div>
</div>
<p>&nbsp;</p>
<h2>サイトスピードを上げるために</h2>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-23.jpg" alt="サイトスピードを上げる施策" width="1502" height="555" class="aligncenter size-full wp-image-2438" srcset="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-23.jpg 1502w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-23-400x148.jpg 400w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-23-768x284.jpg 768w" sizes="(max-width: 1502px) 100vw, 1502px" /></p>
<p>サイトスピードはSEO対策でも必須事項です。</p>
<p>&nbsp;</p>
<p>これまでサイトスピードを上げる施策を数々と行ってきて、<a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="noopener noreferrer">PageSpeed Insights<span class="sc_content_icon" style="color: #1e73be;"><i class="fa fa-external-link" aria-hidden="true"><span>fa-external-link</span></i></span></a><span>で</span>スコア99を出せました。</p>
<p>再現性が高いので以下を参考にすることでサイトスピードを上げることができるでしょう。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="sc_frame_wrap onframe custom">
<div class="sc_frame_title" style="color: #ffbb35; background-color: #ffffff;">
<div class="sc_frame_icon"><i class="fa fa-list-alt" aria-hidden="true"><span>fa-list-alt</span></i></div>
<p><span>関連記事</span></p>
</div>
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<div class="sc_frame_text">
<div class="sc_getpost"><a class="clearfix" href="https://change-blog.com/sitespeed-up-practice" ><div class="sc_getpost_thumb post-box-thumbnail__wrap"><img decoding="async" src="data:image/gif;base64,R0lGODdhAQABAPAAAN3d3QAAACwAAAAAAQABAAACAkQBADs=" width="128" height="77" alt="サイトスピード改善施策とスコア結果｜75ポイントUP-誰でもマネが可能" loading="lazy" data-src="https://change-blog.com/wp-content/uploads/2020/05/sitespeed-up-practice.jpg" class="lazyload"></div><div class="title">サイトスピード改善施策とスコア結果｜75ポイントUP-誰でもマネが可能</div><div class="date">2020.5.12</div><div class="substr">あなたはサイトスピードを気にしているでしょうか？サイトスピードが遅いとユーザビリティ低下とSEOへの悪影響をおこす危険があります。この記事では具体的なスコアアップの改善方法を知ることができます。...</div></a></div>
<p><a href="https://change-blog.com/sitespeed-up-practice" title="サイトスピード改善施策とスコア結果｜75ポイントUP-誰でもマネが可能 (2020-05-12 17:53:40)">&gt;&gt;サイトスピード改善施策とスコア結果｜75ポイントUP-誰でもマネが可能 </a></p>
</div>
</div>
</div>
<p>&nbsp;</p>
<h2>まとめ</h2>
<p>&nbsp;</p>
<p>今回は『Script to Footere』の使用方法について説明をしました。</p>
<p>プラグインを使ってしまえば、難しいこともなく一瞬だったと思いま。</p>
<p>&nbsp;</p>
<p>先ほど紹介した『表示速度を上げた方法』を参考にすれば表示速度は高速になり、あなたのサイトの離脱率を下げるでしょう。</p>
<p>サイトスピードは対策をしていきましょう。</p>
<p>&nbsp;</p>
]]></content:encoded>
					
					<wfw:commentRss>https://change-blog.com/script-to-footere/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【サイト高速化】Autoptimizeの効果と設定方法｜WordPressプラグイン</title>
		<link>https://change-blog.com/autoptimize</link>
					<comments>https://change-blog.com/autoptimize#respond</comments>
		
		<dc:creator><![CDATA[kaeru]]></dc:creator>
		<pubDate>Sun, 03 May 2020 16:20:21 +0000</pubDate>
				<category><![CDATA[ブログ運営]]></category>
		<guid isPermaLink="false">https://change-blog.com/?p=2030</guid>

					<description><![CDATA[&#160; オタマジャクシ Autoptimizeの効果が知りたい！ どうやって使えばいいの？ &#160; こんな疑問や悩みを解決していきます。 &#160; 『Autoptimize』は、サイトの読み込み速度を早くする効果があります。…]]></description>
										<content:encoded><![CDATA[<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/Otamajakushi.jpg" /></p>
<div class="name">オタマジャクシ</div>
</div>
<div class="text think_balloon left custom" style="background: #eee; color: #666666;">
<div class="custom_voice left think" style="background: #eee;"></div>
<div class="custom_voice2 left think" style="background: #eee;"></div>
<ul>
<li>Autoptimizeの効果が知りたい！</li>
<li>どうやって使えばいいの？</li>
</ul>
</div>
</div>
<p>&nbsp;</p>
<p>こんな疑問や悩みを解決していきます。</p>
<p>&nbsp;</p>
<p><strong><span class="sc_marker y">『Autoptimize』は、サイトの読み込み速度を早くする効果があります</span>。</strong></p>
<p>ご存だとは思いますが、サイトスピードの遅さはSEOに悪影響を及ぼします。</p>
<p>&nbsp;</p>
<p>そこで今回は<span class="sc_marker y"><strong>『Autoptimize</strong><strong>の効果と設置方法』</strong></span>を説明していきます。</p>
<p>チェックをするだけで設定ができるので、SEO対策の一つとして取り入れることがオススメです。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>Autoptimizeとは？効果は？</h2>
<p>&nbsp;</p>
<p>Autoptimizeは<span class="sc_marker y">プログラミングコード（HTMLやCSS、JavaScript）のファイルを圧縮・最適化してくれます</span>。</p>
<p>&nbsp;</p>
<p>ちょっと細かく説明すると、WEBでサイトを表示させるときにはサイトを作っているプログラミングコードのダウンロードが必要です。</p>
<p>そのダウンロードファイルが重いとサイトの表示速度も遅くなるのは想像がつくと思います。</p>
<p>だから、軽く圧縮すれば早くなるという事です！</p>
<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon"></div>
</div>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-smile.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>プログラミングコードの無駄な部分を削り<br />
ぎゅっとするイメージだよ</div>
</div>
<p>&nbsp;</p>
<p>コードをいじっての圧縮は難易度が高いので、プログラミングをしてこなかった人こそプラグインに頼った方がいいでしょう。</p>
<p>プラグインでは難しい設定はなく、今回説明する通りにチェックをするだけであなたのサイトの表示速度が上がります。</p>
<p>&nbsp;</p>
<p>表示速度に関してが、このような検証データもあります。</p>
<blockquote><p>・表示速度が1秒から3秒に落ちると、直帰率は32%上昇<br />
・表示速度が1秒から5秒に落ちると、直帰率は90%上昇<br />
・表示速度が1秒から6秒に落ちると、直帰率は106%上昇<br />
・表示速度が1秒から7秒に落ちると、直帰率は113%上昇<br />
・表示速度が1秒から10秒に落ちると、直帰率は123%上昇</p>
<div class="blockquote_ref">
<div><a href="https://www.suzukikenichi.com/blog/speed-matters-for-mobile-sites/" target="_blank" rel="noopener noreferrer">海外SEOブログ</a></div>
</div>
</blockquote>
<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon"></div>
</div>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-cry.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>せっかくページに来てくれても<br />
「表示が遅い！！」って理由で<br />
記事が読まれないのは悲しいね</div>
</div>
<p>&nbsp;</p>
<p>だからこそ、サイトを早く表示させるこのに力を注ぐべきというわけなのです。</p>
<p>サイトスピードはこのサイトで測ることができます。</p>
<p>&nbsp;</p>
<p>Google公式の<a href="https://developers.google.com/speed/pagespeed/insights">PageSpeed Insights<span class="sc_content_icon" style="color: #1e73be;"><i class="fa fa-external-link" aria-hidden="true"><span>fa-external-link</span></i></span><span class="sc_content_icon" style="color: #ccc;"></span></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>Autoptimizeの使用法</h2>
<p>&nbsp;</p>
<p>『Autoptimize』の導入を以下の流れで進めていきます。</p>
<p>&nbsp;</p>
<div class="sc_frame_wrap custom">
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<ol>
<li class="sc_frame_text">インストールと有効化</li>
<li>Autoptimizeの設定方法</li>
</ol>
</div>
</div>
<p>&nbsp;</p>
<p>それでは説明をしていきます。</p>
<p>&nbsp;</p>
<h3>インストールと有効化</h3>
<p>&nbsp;</p>
<p>まずは、<span class="sc_marker y">プラグイン『Autoptimize』をインストール</span>します。</p>
<p>WordPressの編集画面から</p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>『プラグイン』→<span class="sc_marker blue" style="background-color: #ffffff;">『新規追加』をクリック</span></p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/Search-Regex-0.jpg" alt="インストール" width="398" height="156" class="aligncenter wp-image-1370 size-full" /></p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>プラグインを追加の画面になるので、<span class="sc_marker blue">『Autoptimize』と検索</span>します。</p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>検索後『今すぐインストール』をクリックしてインストールを行います。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/autoptimize-1.jpg" alt="autoptimizeのインストール" width="1976" height="807" class="aligncenter size-full wp-image-2053" srcset="https://change-blog.com/wp-content/uploads/2020/04/autoptimize-1.jpg 1976w, https://change-blog.com/wp-content/uploads/2020/04/autoptimize-1-768x314.jpg 768w, https://change-blog.com/wp-content/uploads/2020/04/autoptimize-1-1536x627.jpg 1536w" sizes="(max-width: 1976px) 100vw, 1976px" /></p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>インストールの終了後、<span class="sc_marker blue">プラグインを追加の『有効化』をクリック</span>して、完了です。</p>
<p>&nbsp;</p>
<h3>基本設定</h3>
<p>&nbsp;</p>
<p>それでは目次を表示させる設定をしていきます。</p>
<p>&nbsp;</p>
<p>インストールが問題なく完了していれば、設定の中に『Autoptimize』が追加されています。</p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>WordPressのメニューから『設定』→<span class="sc_marker blue">『Autoptimize』をクリック</span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/autoptimize-2.jpg" alt="autoptimizeの設定方法" width="838" height="240" class="aligncenter size-full wp-image-2093" srcset="https://change-blog.com/wp-content/uploads/2020/05/autoptimize-2.jpg 838w, https://change-blog.com/wp-content/uploads/2020/05/autoptimize-2-768x220.jpg 768w" sizes="(max-width: 838px) 100vw, 838px" /></p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>設定画面になるので順に説明をしてきます。</p>
<p>画像と同じようにチェックをいれることでサイトのスピードは上がるでしょう。<br />
人によって既にいれているプラグインと干渉しないようにチェックは必要です。</p>
<p>&nbsp;</p>
<h4>JS、CSS＆HTMLタグ</h4>
<p>&nbsp;</p>
<p>この項目ではファイルサイズの圧縮化と最適化をおこなってくれます。</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>基本は画像と一緒のチェックで問題はありません。</p>
<p>&nbsp;</p>
<p>◇JavaScript オプションのチェック項目</p>
<div class="sc_frame_wrap solid custom">
<div class="sc_frame " style="border-color: #fff6e8; background-color: #fff6e8; color: #666666;">
<div class="sc_frame_text">
<p>JavaScript コードの最適化</p>
<p><span>JS ファイルを連結する</span></p>
</div>
</div>
<p><span></span></p>
</div>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/autoptimize-3.jpg" alt="autoptimizeの設定方法" width="1498" height="1425" class="aligncenter size-full wp-image-2094" srcset="https://change-blog.com/wp-content/uploads/2020/05/autoptimize-3.jpg 1498w, https://change-blog.com/wp-content/uploads/2020/05/autoptimize-3-768x731.jpg 768w" sizes="(max-width: 1498px) 100vw, 1498px" /></p>
<p>&nbsp;</p>
<p>◇CSSオプションのチェック項目<span></span></p>
<div class="sc_frame_wrap solid custom">
<div class="sc_frame " style="border-color: #fff6e8; background-color: #fff6e8; color: #666666;">
<div class="sc_frame_text">
<p><span>CSS コードを最適化</span></p>
<p><span>CSS ファイルを連結する</span></p>
<p><span>インラインの CSS を連結</span></p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/autoptimize-4.jpg" alt="autoptimizeの設定方法" width="1588" height="1345" class="aligncenter size-full wp-image-2095" srcset="https://change-blog.com/wp-content/uploads/2020/05/autoptimize-4.jpg 1588w, https://change-blog.com/wp-content/uploads/2020/05/autoptimize-4-768x650.jpg 768w, https://change-blog.com/wp-content/uploads/2020/05/autoptimize-4-1536x1301.jpg 1536w" sizes="(max-width: 1588px) 100vw, 1588px" /></p>
<p>&nbsp;</p>
<p>◇HTMLオプションのチェック項目</p>
<div class="sc_frame_wrap solid custom">
<div class="sc_frame " style="border-color: #fff6e8; background-color: #fff6e8; color: #666666;">
<div class="sc_frame_text">HTML コードを最適化</div>
</div>
</div>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/autoptimize-5.jpg" alt="autoptimizeの設定方法" width="1581" height="462" class="aligncenter size-full wp-image-2096" srcset="https://change-blog.com/wp-content/uploads/2020/05/autoptimize-5.jpg 1581w, https://change-blog.com/wp-content/uploads/2020/05/autoptimize-5-768x224.jpg 768w, https://change-blog.com/wp-content/uploads/2020/05/autoptimize-5-1536x449.jpg 1536w" sizes="(max-width: 1581px) 100vw, 1581px" /></p>
<p>&nbsp;</p>
<p>◇その他オプションのチェック項目</p>
<p>基本チェックでOKです。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/autoptimize-6.jpg" alt="autoptimizeの設定方法" width="1578" height="852" class="aligncenter size-full wp-image-2097" srcset="https://change-blog.com/wp-content/uploads/2020/05/autoptimize-6.jpg 1578w, https://change-blog.com/wp-content/uploads/2020/05/autoptimize-6-768x415.jpg 768w, https://change-blog.com/wp-content/uploads/2020/05/autoptimize-6-1536x829.jpg 1536w" sizes="(max-width: 1578px) 100vw, 1578px" /></p>
<p>&nbsp;</p>
<p><span class="badge bborder orange"><i class="fa fa-lightbulb-o before" aria-hidden="true"><span>fa-lightbulb-o</span></i>POINT</span></p>
<p>変更を保存したあとサイトのチェックをしましょう。</p>
<p>もしも表示が崩れていたら、どこかの項目が悪さをしていので外す必要があります。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h4>画像タグ</h4>
<p>&nbsp;</p>
<p><span><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>『Lazy-load images?』このタグにチェックをいれると、画像の遅延読み込みを行うことができます。</span></p>
<p>他のプラグインで導入しているなら別ですが、導入していないようならチェックをしておく方がいいでしょう。</p>
<p>画像を遅く読み込ませることでサイトの表示スピードは上がります。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/autoptimize-7.jpg" alt="autoptimizeの設定方法" width="2209" height="834" class="aligncenter size-full wp-image-2098" srcset="https://change-blog.com/wp-content/uploads/2020/05/autoptimize-7.jpg 2209w, https://change-blog.com/wp-content/uploads/2020/05/autoptimize-7-768x290.jpg 768w, https://change-blog.com/wp-content/uploads/2020/05/autoptimize-7-1536x580.jpg 1536w, https://change-blog.com/wp-content/uploads/2020/05/autoptimize-7-2048x773.jpg 2048w" sizes="(max-width: 2209px) 100vw, 2209px" /></p>
<p>&nbsp;</p>
<h4>追加タグ</h4>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/autoptimize-8.jpg" alt="autoptimizeの設定方法" width="2216" height="1254" class="aligncenter size-full wp-image-2099" srcset="https://change-blog.com/wp-content/uploads/2020/05/autoptimize-8.jpg 2216w, https://change-blog.com/wp-content/uploads/2020/05/autoptimize-8-768x435.jpg 768w, https://change-blog.com/wp-content/uploads/2020/05/autoptimize-8-1536x869.jpg 1536w, https://change-blog.com/wp-content/uploads/2020/05/autoptimize-8-2048x1159.jpg 2048w" sizes="(max-width: 2216px) 100vw, 2216px" /></p>
<p>&nbsp;</p>
<p>設定は以上です</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-happy.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>お疲れ様でした～</div>
</div>
<p>&nbsp;</p>
<h2>WP Fastest Cacheと併用して表示速度を上げる</h2>
<p>&nbsp;</p>
<p>WP Fastest Cacheと併用することでさらに表示速度は上がります。</p>
<p>WP Fastest Cacheはキャッシュ系の削除のプラグインで、今回紹介した『Autoptimize』の手の届かない所を補うといったイメージです。</p>
<p>こちらの記事も参考にしてみてください。</p>
<p><a href="https://change-blog.com/wp-fastest-cache" title="WP Fastest Cacheの効果と設定方法｜Wordpressプラグイン (2020-05-03 00:07:09)">&gt;&gt;【サイト読み込み短縮】WP Fastest Cacheの効果と設定方法｜Wordpressプラグイン</a></p>
<p>&nbsp;</p>
<p>これまでサイトスピードを上げる施策を数々と行ってきて、<a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="noopener noreferrer">PageSpeed Insights<span class="sc_content_icon" style="color: #1e73be;"><i class="fa fa-external-link" aria-hidden="true"><span>fa-external-link</span></i></span></a><span>で</span>スコア99を出せました。</p>
<p>再現性が高いのでこちもどうぞ</p>
<div class="sc_frame_wrap onframe  custom">
<div class="sc_frame_title" style="color: #ffbb35; background-color: #ffffff;">
<div class="sc_frame_icon"><i class="fa fa-list-alt" aria-hidden="true"><span>fa-list-alt</span></i></div>
<p><span>関連記事</span></div>
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<div class="sc_frame_text">
<div class="sc_getpost"><a class="clearfix" href="https://change-blog.com/sitespeed-up-practice" ><div class="sc_getpost_thumb post-box-thumbnail__wrap"><img decoding="async" src="data:image/gif;base64,R0lGODdhAQABAPAAAN3d3QAAACwAAAAAAQABAAACAkQBADs=" width="128" height="77" alt="サイトスピード改善施策とスコア結果｜75ポイントUP-誰でもマネが可能" loading="lazy" data-src="https://change-blog.com/wp-content/uploads/2020/05/sitespeed-up-practice.jpg" class="lazyload"></div><div class="title">サイトスピード改善施策とスコア結果｜75ポイントUP-誰でもマネが可能</div><div class="date">2020.5.12</div><div class="substr">あなたはサイトスピードを気にしているでしょうか？サイトスピードが遅いとユーザビリティ低下とSEOへの悪影響をおこす危険があります。この記事では具体的なスコアアップの改善方法を知ることができます。...</div></a></div>
<p><a href="https://change-blog.com/sitespeed-up-practice" title="サイトスピード改善施策とスコア結果｜75ポイントUP-誰でもマネが可能 (2020-05-12 17:53:40)">&gt;&gt;サイトスピード改善施策とスコア結果｜75ポイントUP-誰でもマネが可能 </a></p>
</div>
</div>
</div>
<p>&nbsp;</p>
<h2>まとめ</h2>
<p>&nbsp;</p>
<p>今回は『Autoptimize』の使用方法について説明をしました。</p>
<p>サイトの速度が遅くて、せっかく来たユーザに離脱されることほどもったいないことはありません。</p>
<p>&nbsp;</p>
<p>先ほど紹介した『表示速度を上げた方法』を参考にすれば表示スピードは高速になります。</p>
<p>対策をしていきましょう。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://change-blog.com/autoptimize/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【サイト読み込み短縮】WP Fastest Cacheの効果と設定方法｜WordPressプラグイン</title>
		<link>https://change-blog.com/wp-fastest-cache</link>
					<comments>https://change-blog.com/wp-fastest-cache#respond</comments>
		
		<dc:creator><![CDATA[kaeru]]></dc:creator>
		<pubDate>Sat, 02 May 2020 15:07:09 +0000</pubDate>
				<category><![CDATA[ブログ運営]]></category>
		<guid isPermaLink="false">https://change-blog.com/?p=2031</guid>

					<description><![CDATA[&#160; &#160; オタマジャクシ WP Fastest Cacheの効果が知りたい！ どうやって使えばいいの？ &#160; こんな疑問や悩みを解決していきます。 &#160; 『WP Fastest Cache』は、サイトの読み…]]></description>
										<content:encoded><![CDATA[<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/Otamajakushi.jpg" /></p>
<div class="name">オタマジャクシ</div>
</div>
<div class="text think_balloon left custom" style="background: #eee; color: #666666;">
<div class="custom_voice left think" style="background: #eee;"></div>
<div class="custom_voice2 left think" style="background: #eee;"></div>
<ul>
<li>WP Fastest Cacheの効果が知りたい！</li>
<li>どうやって使えばいいの？</li>
</ul>
</div>
</div>
<p>&nbsp;</p>
<p>こんな疑問や悩みを解決していきます。</p>
<p>&nbsp;</p>
<p><strong><span class="sc_marker y">『WP Fastest Cache』は、サイトの読み込み時間を短縮させるキャッシュ削除系のプラグイン</span></strong>です。</p>
<p>このプラグインを導入することで、あなたのサイトの表示スピードは上がります。</p>
<p>&nbsp;</p>
<p>サイトスピードが遅ければ、SEOに悪影響を及ぼすので対策を行っておきたいポイントですね。</p>
<p>&nbsp;</p>
<p>そこで今回は『<span class="sc_marker y">WP Fastest Cache』の効果と設定方法</span>の説明をしていきます。</p>
<p>簡単に設定ができるよう画像を使った説明になるので、SEO対策の一つとして取り入れていきましょう。</p>
<p>&nbsp;</p>
<h2>WP Fastest Cacheとは</h2>
<p>&nbsp;</p>
<p>『WP Fastest Cache』とは、<strong><span class="sc_marker y">WordPressのキャッシュの設定と削除をすることができるプラグイン</span></strong>です。<br />
また、プログラミングコードの圧縮と最適化も行えます。</p>
<p>&nbsp;</p>
<p>キャッシュは、ページを表示するためのデータを保存する仕組みがあります。<br />
こうすることで、同じページを開いた時に1度目より早く表示することができるのです。</p>
<p>&nbsp;</p>
<p>難しい言葉が並びますが、一言でいうならこう<span class="sc_content_icon" style="color: #eaba35;"><i class="fa fa-arrow-down" aria-hidden="true"><span>fa-arrow-down</span></i></span>です。</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-happy.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>ページキャッシュをすると<br />
サーバーの応答がスムーズになる</div>
</div>
<p>&nbsp;</p>
<p>初心者には難しい領域ですが、プラグインはそこを誰でも簡単にできるようにするのがいいところですね</p>
<p>&nbsp;</p>
<p>キャッシュ削除系の他プラグイン（『W3 Total Cashe』や『WP Super Cashe』）よりも使いやすく、表示速度のスコアがよかったので『WP Fastest Cache』を使用することにしました。</p>
<p>&nbsp;</p>
<h2>WP Fastest Cacheの使用法</h2>
<p>&nbsp;</p>
<p>『WP Fastest Cache』の導入を以下の流れで進めていきます。</p>
<p>&nbsp;</p>
<div class="sc_frame_wrap custom">
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<ol>
<li class="sc_frame_text">インストールと有効化</li>
<li>WP Fastest Cacheの設定方法</li>
<li>キャッシュの有効期限の設定</li>
</ol>
</div>
</div>
<p>&nbsp;</p>
<p>それでは説明をしていきます。</p>
<p>&nbsp;</p>
<h3>インストールと有効化</h3>
<p>&nbsp;</p>
<p>まずは、<span class="sc_marker y">プラグイン『WP Fastest Cache』をインストール</span>します。</p>
<p>WordPressの編集画面から</p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>『プラグイン』→<span class="sc_marker blue" style="background-color: #ffffff;">『新規追加』をクリック</span></p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/Search-Regex-0.jpg" alt="インストール" width="398" height="156" class="aligncenter wp-image-1370 size-full" /></p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>プラグインを追加の画面になるので、<span class="sc_marker blue">『WP Fastest Cache』と検索</span>します。</p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>検索後『今すぐインストール』をクリックしてインストールを行います。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-1.jpg" alt="wp-fastest-cacheのインストール" width="1964" height="746" class="aligncenter size-full wp-image-2054" srcset="https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-1.jpg 1964w, https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-1-768x292.jpg 768w, https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-1-1536x583.jpg 1536w" sizes="(max-width: 1964px) 100vw, 1964px" /></p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>インストールの終了後、<span class="sc_marker blue">プラグインを追加の『有効化』をクリック</span>して、完了です。</p>
<p>&nbsp;</p>
<h3>WP Fastest Cacheの設定</h3>
<p>&nbsp;</p>
<p>それではWP Fastest Cacheの設定をしていきます。</p>
<p>インストールが問題なく完了していれば、管理画面のサイドバーに『WP Fastest Cache』が追加されています。</p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>WordPress管理画面のサイドバーから<span class="sc_marker blue">『WP Fastest Cache』をクリック</span></p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-2.jpg" alt="wp-fastest-cacheの設定方法" width="1460" height="360" class="aligncenter size-full wp-image-2057" srcset="https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-2.jpg 1460w, https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-2-768x189.jpg 768w" sizes="(max-width: 1460px) 100vw, 1460px" /></p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #27c63a;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>設定画面になるので順に説明をしてきます。</p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>まずは日本語表記にしましょう。<br />
日本語表記になるのはこのプラグインの良さでもありますね。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-31.jpg" alt="wp-fastest-cacheを日本語に切り替える" width="1983" height="1274" class="aligncenter size-full wp-image-2060" srcset="https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-31.jpg 1983w, https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-31-768x493.jpg 768w, https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-31-1536x987.jpg 1536w" sizes="(max-width: 1983px) 100vw, 1983px" /></p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>それでは<span class="sc_marker blue">必要な個所にチェック</span>を入れていきます。</p>
<p>基本はすべてにチェックを入れておけば問題ないのですが、すでに導入済みのプラグインがある場合はチェックをするか考慮が必要になってきます。</p>
<p>&nbsp;</p>
<p>チェックをしていくと『先読み』『新規投稿』『Update Post』のときにこのようなポップアップが表示されます。</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span><span class="sc_marker blue">下の画面と同じようにチェック</span>をしましょう。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-4.jpg" alt="wp-fastest-cacheの設定方法" width="859" height="828" class="aligncenter size-full wp-image-2062" srcset="https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-4.jpg 859w, https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-4-768x740.jpg 768w" sizes="(max-width: 859px) 100vw, 859px" /></p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-5.jpg" alt="wp-fastest-cacheの設定方法" width="2227" height="717" class="aligncenter size-full wp-image-2061" srcset="https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-5.jpg 2227w, https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-5-768x247.jpg 768w, https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-5-1536x495.jpg 1536w, https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-5-2048x659.jpg 2048w" sizes="(max-width: 2227px) 100vw, 2227px" /></p>
<p>&nbsp;</p>
<p>◇『キャッシュ』</p>
<p>有効にチェックを入れないとプラグインが機能しません。</p>
<p>&nbsp;</p>
<p>◇『先読み』</p>
<p>あらかじめキャッシュを作成する機能になります。サイトを訪れた人に表示速度を高める効果があります。<br />
こちらはデフォルトのままでOKです</p>
<p>&nbsp;</p>
<p>◇ログインユーザー</p>
<p>サイトの管理者に対してキャッシュを表示しないようになります。</p>
<p>&nbsp;</p>
<p>◇モバイル</p>
<p>モバイルユーザーに向けてデスクトップ版のキャッシュを表示しないようにします。<br />
チャックをした方がサイトスピードは速くなりました。</p>
<p>&nbsp;</p>
<p>◇『新規投稿』</p>
<p>記事を投稿した時にすべてのキャッシュを消すかどうかです。<br />
デフォルトのすべて消すで問題ありません。</p>
<p>&nbsp;</p>
<p>◇『Update Post』</p>
<p>投稿ページなどを更新した時にどこまでキャッシュを削除するかという項目です。<br />
こちらもデフォルトのままで構いません。</p>
<p>&nbsp;</p>
<p>◇HTML・CSS・JSの最適化と圧縮</p>
<p>各ファイルを圧縮・最適化してくれ、サイトスピードを上げてくれます。</p>
<p>&nbsp;</p>
<p>◇Gzip圧縮</p>
<p>サーバーからの送られるファイルを圧縮することで転送量を減らすことができます。<br />
このプラグインの無料版ではちょっと弱いので、他のプラグインで代用するのがオススメです。</p>
<p>方法は後程説明します。</p>
<p>&nbsp;</p>
<p>◇ブラウザキャッシュ</p>
<p>ブラウザ上でキャッシュを作成してくれます。</p>
<p>&nbsp;</p>
<p>◇Disable Emojis</p>
<p>WordPress絵文字の無効化をおこなうことができます。使わない機能なので向うにしましょう。</p>
<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-happy.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>どれも初心者には難しいから<br />
画像と同じようにチェックでOKだよ！</div>
</div>
<p>&nbsp;</p>
<h3>キャッシュの削除と有効期限設定</h3>
<p>&nbsp;</p>
<p>キャッシュはサイトスピードを上げる反面、キャッシュが溜まりすぎると動作を鈍くします。</p>
<p>なので、定期的にキャッシュの削除がひつようになります。</p>
<p>&nbsp;</p>
<p>『WP Fastest Cache』ではキャッシュの削除を2つの方法で行えます。</p>
<div class="sc_frame_wrap custom">
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<ol>
<li class="sc_frame_text">手動でキャッシュを消す</li>
<li>自動でキャッシュを消す</li>
</ol>
</div>
</div>
<p>&nbsp;</p>
<h4>手動でキャッシュを消す</h4>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>『キャッシュの削除タグ』→『キャッシュの削除』をクリック</p>
<p>これだけで完了です。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-7.jpg" alt="wp-fastest-cache-キャッシュを消す" width="1580" height="1237" class="aligncenter size-full wp-image-2065" srcset="https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-7.jpg 1580w, https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-7-768x601.jpg 768w, https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-7-1536x1203.jpg 1536w" sizes="(max-width: 1580px) 100vw, 1580px" /></p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>『WP Fastest Cache』インストール後は管理画面の上部バーに『Delete Cache』が表示されるのでワンクリックでキャッシュの削除をおこなえます。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-8.jpg" alt="wp-fastest-cache-キャッシュを消す" width="1715" height="458" class="aligncenter size-full wp-image-2066" srcset="https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-8.jpg 1715w, https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-8-768x205.jpg 768w, https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-8-1536x410.jpg 1536w" sizes="(max-width: 1715px) 100vw, 1715px" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h4>自動でキャッシュを消す</h4>
<p>&nbsp;</p>
<p>設定をすると自動でキャッシュを消してくれます。</p>
<p>手動でしかキャッシュを消すことができないプラグインがあるなか自動は優秀で強みといえるでしょう。</p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>『キャッシュの削除タグ』→『Add New Rule』をクリック</p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>ポップアップに表示される項目を埋めていきます。</p>
<p>サイトの更新頻度が高ければ、1日に1度でいいでしょう。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-6.jpg" alt="wp-fastest-cache-キャッシュを消す自動設定" width="2189" height="1214" class="aligncenter size-full wp-image-2064" srcset="https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-6.jpg 2189w, https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-6-768x426.jpg 768w, https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-6-1536x852.jpg 1536w, https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-6-2048x1136.jpg 2048w" sizes="(max-width: 2189px) 100vw, 2189px" /></p>
<p>&nbsp;</p>
<p>以上です</p>
<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-happy.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>お疲れ様でした～</div>
</div>
<p>&nbsp;</p>
<h2>Autoptimizeと併用でサイトスピードは上がる</h2>
<p>&nbsp;</p>
<p>途中ちらっと触れましたが『WP Fastest Cache』の無料版では『HTML・CSS・JSの最適化と圧縮』の効果が弱いです。</p>
<p>なので、この『HTML・CSS・JSの最適化と圧縮』に強いプラグインの導入が別に必要になるのです。</p>
<p>&nbsp;</p>
<p>そのプラグインは『Autoptimize』です。</p>
<p>ただし、通常の設定のままでは、機能がかぶりエラーが起きる可能性があります。</p>
<p>なので以下のように設定をする必要がでてきます。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-9.jpg" alt="wp-fastest-cacheとAutoptimizeの併用" width="1380" height="1103" class="aligncenter wp-image-2068 size-full" srcset="https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-9.jpg 1380w, https://change-blog.com/wp-content/uploads/2020/04/wp-fastest-cache-9-768x614.jpg 768w" sizes="(max-width: 1380px) 100vw, 1380px" /></p>
<p>&nbsp;</p>
<p>こうすることでサイトスピードをグンと早くすることができます。</p>
<p>詳しい設置方法はこちらをみてください。</p>
<p><a href="https://change-blog.com/autoptimize" title="【サイト高速化】Autoptimizeの効果と設定方法｜Wordpressプラグイン (2020-05-04 01:20:21)">&gt;&gt;【サイト高速化】Autoptimizeの効果と設定方法｜Wordpressプラグイン</a></p>
<p>&nbsp;</p>
<h2>サイトスピードを上げるために</h2>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-23.jpg" alt="サイトスピードを上げる施策" width="1502" height="555" class="aligncenter size-full wp-image-2438" srcset="https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-23.jpg 1502w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-23-400x148.jpg 400w, https://change-blog.com/wp-content/uploads/2020/05/sitespeedup-23-768x284.jpg 768w" sizes="(max-width: 1502px) 100vw, 1502px" /></p>
<p>サイトスピードはSEO対策でも必須事項です。</p>
<p>&nbsp;</p>
<p>これまでサイトスピードを上げる施策を数々と行ってきて、<a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="noopener noreferrer">PageSpeed Insights<span class="sc_content_icon" style="color: #1e73be;"><i class="fa fa-external-link" aria-hidden="true"><span>fa-external-link</span></i></span></a><span>で</span>スコア99を出せました。</p>
<p>再現性が高いので以下を参考にすることでサイトスピードを上げることができるでしょう。</p>
<p>&nbsp;</p>
<div class="sc_frame_wrap onframe custom">
<div class="sc_frame_title" style="color: #ffbb35; background-color: #ffffff;">
<div class="sc_frame_icon"><i class="fa fa-list-alt" aria-hidden="true"><span>fa-list-alt</span></i></div>
<p><span>関連記事</span></p>
</div>
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<div class="sc_frame_text">
<div class="sc_getpost"><a class="clearfix" href="https://change-blog.com/sitespeed-up-practice" ><div class="sc_getpost_thumb post-box-thumbnail__wrap"><img decoding="async" src="data:image/gif;base64,R0lGODdhAQABAPAAAN3d3QAAACwAAAAAAQABAAACAkQBADs=" width="128" height="77" alt="サイトスピード改善施策とスコア結果｜75ポイントUP-誰でもマネが可能" loading="lazy" data-src="https://change-blog.com/wp-content/uploads/2020/05/sitespeed-up-practice.jpg" class="lazyload"></div><div class="title">サイトスピード改善施策とスコア結果｜75ポイントUP-誰でもマネが可能</div><div class="date">2020.5.12</div><div class="substr">あなたはサイトスピードを気にしているでしょうか？サイトスピードが遅いとユーザビリティ低下とSEOへの悪影響をおこす危険があります。この記事では具体的なスコアアップの改善方法を知ることができます。...</div></a></div>
<p><a href="https://change-blog.com/sitespeed-up-practice" title="サイトスピード改善施策とスコア結果｜75ポイントUP-誰でもマネが可能 (2020-05-12 17:53:40)">&gt;&gt;サイトスピード改善施策とスコア結果｜75ポイントUP-誰でもマネが可能 </a></p>
</div>
</div>
</div>
<p>&nbsp;</p>
<h2>まとめ</h2>
<p>&nbsp;</p>
<p>今回は『WP Fastest Cache』の使用方法について説明をしました。</p>
<p>内容は難しいですが、プラグインを使ってしまえばすぐに設定をすることができます。</p>
<p>&nbsp;</p>
<p>先ほど紹介した『表示速度を上げた方法』を参考にすれば表示スピードは高速にな、あなたのサイトの直帰率を下げるでしょう。</p>
<p>サイトスピードは対策をしていきましょう。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
]]></content:encoded>
					
					<wfw:commentRss>https://change-blog.com/wp-fastest-cache/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【ガイド】問い合わせフォームの作成方法｜WordPressプラグイン Contact Form 7</title>
		<link>https://change-blog.com/contact-form</link>
					<comments>https://change-blog.com/contact-form#respond</comments>
		
		<dc:creator><![CDATA[kaeru]]></dc:creator>
		<pubDate>Fri, 01 May 2020 15:07:37 +0000</pubDate>
				<category><![CDATA[ブログ運営]]></category>
		<guid isPermaLink="false">https://change-blog.com/?p=1497</guid>

					<description><![CDATA[&#160; オタマジャクシ ・お問い合わせフォームはどう作ればいいの？ ・お問い合わせフォームって必要？ &#160; こんな疑問や悩みを解決していきます。 &#160; 結論、お問い合わせフォームはサイト運営で必要であり、プラグイン 『…]]></description>
										<content:encoded><![CDATA[<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/Otamajakushi.jpg" /></p>
<div class="name">オタマジャクシ</div>
</div>
<div class="text think_balloon left custom" style="background: #eee; color: #666666;">
<div class="custom_voice left think" style="background: #eee;"></div>
<p>・お問い合わせフォームはどう作ればいいの？<br />
・お問い合わせフォームって必要？</p>
</div>
<div></div>
</div>
<p>&nbsp;</p>
<p>こんな疑問や悩みを解決していきます。</p>
<p>&nbsp;</p>
<p>結論、<strong><span class="sc_marker y">お問い合わせフォームはサイト運営で必要であり、プラグイン 『Contact Form 7』を使えば簡単に作ることができます。</span></strong></p>
<p>&nbsp;</p>
<p>問い合わせフォームは、ユーザーとのコミュニケーションをとれる場でもあります。</p>
<p>また、Googleアドセンスの合格にも必須と話に上がる項目です。</p>
<p>&nbsp;</p>
<p>そこで、今回は<strong>『Contact Form 7を使った、問い合わせフォームの作成方法から設置方法』</strong>を解説してきます。</p>
<p>この記事を参考にすることで、迷うことなくあなたのサイトに問い合わせフォームを設置できるでしょう。</p>
<h2>Contact Form 7とは</h2>
<p>&nbsp;</p>
<p>Contact Form 7とは<span class="sc_marker y"><strong>WordPressで問い合わせフォームを簡単に作ることができるプラグイン</strong></span>です。</p>
<p>&nbsp;</p>
<p>このプラグインは問い合わせフォームの作成の簡単さから、日本だけではなく世界中で使われているプラグインになります。</p>
<p>作成から設置の仕方までを画像をふんだんに使い説明をしていきます。</p>
<div class="voice clearfix left n_bottom">
<div class="icon"></div>
</div>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-smile.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>頑張っていきましょう！</div>
</div>
<p>&nbsp;</p>
<h2>Contact Form 7のインストール</h2>
<p>&nbsp;</p>
<p>プラグイン『Contact Form 7』をインストールします。</p>
<p>&nbsp;</p>
<p>手順はWordpressのメニューを開き<br />
<span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>『プラグイン』→『新規追加』の順でクリックします。</p>
<p>&nbsp;</p>
<p>プラグインの追加画面が表示されるので、検索ボックスに『Contact Form 7』と入力します。</p>
<p>すると、『Contact Form 7』のプラグインが表示されるので、『今すぐインストール』をクリックします。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/contact-form-1.jpg" alt="Contact Form 7プラグイン-インストール" width="2028" height="770" class="aligncenter size-full wp-image-1530" srcset="https://change-blog.com/wp-content/uploads/2020/04/contact-form-1.jpg 2028w, https://change-blog.com/wp-content/uploads/2020/04/contact-form-1-768x292.jpg 768w, https://change-blog.com/wp-content/uploads/2020/04/contact-form-1-1536x583.jpg 1536w" sizes="(max-width: 2028px) 100vw, 2028px" /></p>
<p>&nbsp;</p>
<p>インストール後は有効化をおこないましょう。</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/contact-form-2.jpg" alt="Contact Form 7プラグイン-有効化" width="881" height="345" class="aligncenter size-full wp-image-1531" srcset="https://change-blog.com/wp-content/uploads/2020/04/contact-form-2.jpg 881w, https://change-blog.com/wp-content/uploads/2020/04/contact-form-2-768x301.jpg 768w" sizes="(max-width: 881px) 100vw, 881px" /></p>
<p>&nbsp;</p>
<h2>お問い合わせフォームの作成</h2>
<p>&nbsp;</p>
<p><span>Contact Form 7 を有効化すると、「お問い合わせ」項目が追加されます。</span></p>
<p>&nbsp;</p>
<p>WordPressのメニューを開き<br />
<span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>『お問い合わせ』→『コンタクトフォーム』の順でクリックします。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/contact-form-3.jpg" alt="Contact Form 7の設定" width="1148" height="469" class="aligncenter size-full wp-image-1533" srcset="https://change-blog.com/wp-content/uploads/2020/04/contact-form-3.jpg 1148w, https://change-blog.com/wp-content/uploads/2020/04/contact-form-3-768x314.jpg 768w" sizes="(max-width: 1148px) 100vw, 1148px" /></p>
<p>&nbsp;</p>
<p>クリック後は『コンタクトフォーム』画面が表示されます。</p>
<p>&nbsp;</p>
<p>初めからデフォルトで『コンタクトフォーム１』が入っています。<br />
このコンタクトフォーム１をベースに設定をしていきます。</p>
<p>&nbsp;</p>
<p>※問い合わせをページごとに変えたい場合は、複数問い合わせフォームを作ってもいいですが、基本は1つあれば十分です<img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/contact-form-4.jpg" alt="Contact Form 7の設定" width="1883" height="718" class="aligncenter size-full wp-image-1534" srcset="https://change-blog.com/wp-content/uploads/2020/04/contact-form-4.jpg 1883w, https://change-blog.com/wp-content/uploads/2020/04/contact-form-4-768x293.jpg 768w, https://change-blog.com/wp-content/uploads/2020/04/contact-form-4-1536x586.jpg 1536w" sizes="(max-width: 1883px) 100vw, 1883px" /></p>
<p>&nbsp;</p>
<p>『コンタクトフォーム１』をクリックすると、コンタクトフォームの編集画面に進みます。</p>
<p>&nbsp;</p>
<p>ここでは問い合わせフォームの編集を行うことができます。</p>
<p>このままではシンプルですが、ホームページに設定をすることが目的なので先に進めていきます。<br />
細かい設定は、後述します。</p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>設定をしたら『保存』を押します。</p>
<p>このままでは「問い合わせフォーム」はサイトに反映はされません。</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>まずは、下記の青枠にあるコードをコピーします。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/contact-form-5.jpg" alt="Contact Form 7の設定" width="2075" height="1209" class="aligncenter size-full wp-image-1535" srcset="https://change-blog.com/wp-content/uploads/2020/04/contact-form-5.jpg 2075w, https://change-blog.com/wp-content/uploads/2020/04/contact-form-5-768x447.jpg 768w, https://change-blog.com/wp-content/uploads/2020/04/contact-form-5-1536x895.jpg 1536w, https://change-blog.com/wp-content/uploads/2020/04/contact-form-5-2048x1193.jpg 2048w" sizes="(max-width: 2075px) 100vw, 2075px" /></p>
<p>&nbsp;</p>
<h2>お問い合わせフォームを固定ページに反映させる</h2>
<p>&nbsp;</p>
<p>WordPressのメニューを開き<br />
『固定ページ』→『新規作成』の順でクリックします。</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/contact-form-6.jpg" alt="問い合わせフォームの作成" width="1132" height="359" class="aligncenter size-full wp-image-1544" srcset="https://change-blog.com/wp-content/uploads/2020/04/contact-form-6.jpg 1132w, https://change-blog.com/wp-content/uploads/2020/04/contact-form-6-768x244.jpg 768w" sizes="(max-width: 1132px) 100vw, 1132px" /></p>
<p>&nbsp;</p>
<p>『新規固定ページを追加』の画面に切り替わります。</p>
<p>&nbsp;</p>
<p>まずはタイトルと、パーマリンクを設定しましょう。</p>
<p>タイトルは［お問い合わせ］<br />
パーマリンクは［contact］とコピーして貼り付けましょう。</p>
<p>&nbsp;</p>
<p>パーマリンクはSEO効果もあるのでこれを機に覚えておきましょう。<br />
<a href="https://change-blog.com/permanent-link" title="パーマリンクとは？設定のコツと変更方法【SEO評価の初期化を回避】 (2020-04-14 03:12:03)">&gt;&gt;パーマリンクとは？設定のコツと変更方法【SEO評価の初期化を回避】</a></p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/contact-form-7.jpg" alt="問い合わせフォームの作成" width="2012" height="482" class="aligncenter size-full wp-image-1545" srcset="https://change-blog.com/wp-content/uploads/2020/04/contact-form-7.jpg 2012w, https://change-blog.com/wp-content/uploads/2020/04/contact-form-7-768x184.jpg 768w, https://change-blog.com/wp-content/uploads/2020/04/contact-form-7-1536x368.jpg 1536w" sizes="(max-width: 2012px) 100vw, 2012px" /></p>
<p>&nbsp;</p>
<p>次に<span class="sc_marker blue">『先ほどコピーしたコード』を画像のように貼り付けます</span>。</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>貼り付けが完了したら<span class="sc_marker blue">『公開』をクリック</span>してください。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/contact-form-8.jpg" alt="問い合わせフォームの作成" width="2036" height="506" class="aligncenter size-full wp-image-1542" srcset="https://change-blog.com/wp-content/uploads/2020/04/contact-form-8.jpg 2036w, https://change-blog.com/wp-content/uploads/2020/04/contact-form-8-768x191.jpg 768w, https://change-blog.com/wp-content/uploads/2020/04/contact-form-8-1536x382.jpg 1536w" sizes="(max-width: 2036px) 100vw, 2036px" /></p>
<p>公開をおしてから、ブラウザで確認すると以下のように見えるはずです。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/04/contact-form-9.jpg" alt="問い合わせフォームの作成" width="1137" height="1063" class="aligncenter size-full wp-image-1543" srcset="https://change-blog.com/wp-content/uploads/2020/04/contact-form-9.jpg 1137w, https://change-blog.com/wp-content/uploads/2020/04/contact-form-9-768x718.jpg 768w" sizes="(max-width: 1137px) 100vw, 1137px" /></p>
<p>&nbsp;</p>
<p>これでお問い合わせページの作成ができました。</p>
<p>まだ、このお問い合わせをトップページからリンクさせなくてはいけないですね。</p>
<p>もうひと頑張りです！！</p>
<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon"></div>
</div>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-training.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>あとちょっと！<br />
fight</div>
</div>
<p>&nbsp;</p>
<h2>問い合わせページをトップページとリンクさせる</h2>
<p>&nbsp;</p>
<p>トップページからのリンクを作っていきます。</p>
<p>問い合わせフォームをつける場所は人それぞですが考えられる3パターンのリンク方法を紹介します。</p>
<div class="sc_frame_wrap custom">
<div class="sc_frame " style="border-color: #ffe0a3; background-color: #ffffff; color: #666666;">
<ul>
<li class="sc_frame_text">ヘッダーにリンクさせる方法</li>
<li>フッダーにリンクさせる方法</li>
<li>サイドバーにリンクさせる方法</li>
</ul>
</div>
</div>
<p>それでは簡単に紹介していきましょう。</p>
<p>&nbsp;</p>
<h3>ヘッダーにリンクさせる方法</h3>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/contact-form-12.jpg" alt="ヘッダーメニューに追加させる方法" width="1917" height="888" class="aligncenter size-full wp-image-2117" srcset="https://change-blog.com/wp-content/uploads/2020/05/contact-form-12.jpg 1917w, https://change-blog.com/wp-content/uploads/2020/05/contact-form-12-768x356.jpg 768w, https://change-blog.com/wp-content/uploads/2020/05/contact-form-12-1536x712.jpg 1536w" sizes="(max-width: 1917px) 100vw, 1917px" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>ヘッダーに問い合わせフォームを作るイメージは<span class="sc_content_icon" style="color: #1e73be;"><i class="fa fa-arrow-up" aria-hidden="true"><span>fa-arrow-up</span></i></span>こんな感じです。</p>
<p>&nbsp;</p>
<p>WordPressの管理画面を開き</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>『外観』→『メニュー』をクリックします。</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>画像の➀の場所でヘッダーに使用しているメニューを選択します。</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>②メニュー名を確認したら、左の『固定ページ』と書かれたエリアから『お問い合わせ』を選択し『メニューに追加』をクリックします。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/contact-form-20.jpg" alt="ヘッダー問い合わせをメニューに追加させる方法" width="2054" height="1051" class="aligncenter size-full wp-image-2125" srcset="https://change-blog.com/wp-content/uploads/2020/05/contact-form-20.jpg 2054w, https://change-blog.com/wp-content/uploads/2020/05/contact-form-20-768x393.jpg 768w, https://change-blog.com/wp-content/uploads/2020/05/contact-form-20-1536x786.jpg 1536w, https://change-blog.com/wp-content/uploads/2020/05/contact-form-20-2048x1048.jpg 2048w" sizes="(max-width: 2054px) 100vw, 2054px" /></p>
<p>&nbsp;</p>
<p>お問い合わせがメニュー構造の中に入ったのを確認したら</p>
<p>『ヘッダーのナビゲーション』を選択して<span class="sc_marker blue">『メニューを保存』をクリック</span>します。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/contact-form-24.jpg" alt="問い合わせをヘッダーメニューに追加させる方法" width="2165" height="1063" class="aligncenter size-full wp-image-2132" srcset="https://change-blog.com/wp-content/uploads/2020/05/contact-form-24.jpg 2165w, https://change-blog.com/wp-content/uploads/2020/05/contact-form-24-768x377.jpg 768w, https://change-blog.com/wp-content/uploads/2020/05/contact-form-24-1536x754.jpg 1536w, https://change-blog.com/wp-content/uploads/2020/05/contact-form-24-2048x1006.jpg 2048w" sizes="(max-width: 2165px) 100vw, 2165px" /></p>
<p>&nbsp;</p>
<p>これで完了です。確認をしてみてください。</p>
<p>&nbsp;</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-happy.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>お疲れ様でした～</div>
</div>
<p>&nbsp;</p>
<h3>フッダーにリンクさせる方法</h3>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/contact-form-23.jpg" alt="問い合わせをフッターメニューに追加を追加" width="1939" height="362" class="aligncenter size-full wp-image-2128" srcset="https://change-blog.com/wp-content/uploads/2020/05/contact-form-23.jpg 1939w, https://change-blog.com/wp-content/uploads/2020/05/contact-form-23-768x143.jpg 768w, https://change-blog.com/wp-content/uploads/2020/05/contact-form-23-1536x287.jpg 1536w" sizes="(max-width: 1939px) 100vw, 1939px" /></p>
<p>&nbsp;</p>
<p>フッダーに問い合わせフォームを作るイメージは<span class="sc_content_icon" style="color: #1e73be;"><i class="fa fa-arrow-up" aria-hidden="true"><span>fa-arrow-up</span></i></span>こんな感じです。サイトの一番下に表示されるようになります。</p>
<p>&nbsp;</p>
<p>WordPressの管理画面を開き</p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>『外観』→『メニュー』をクリックします。</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>画像の➀の場所でフッダーに使用しているメニューを選択します。</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>②メニュー名を確認したら、左の『固定ページ』と書かれたエリアから『お問い合わせ』を選択し『メニューに追加』をクリックします。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/contact-form-21.jpg" alt="問い合わせをフッターメニューに追加を追加" width="2053" height="1055" class="aligncenter size-full wp-image-2126" srcset="https://change-blog.com/wp-content/uploads/2020/05/contact-form-21.jpg 2053w, https://change-blog.com/wp-content/uploads/2020/05/contact-form-21-768x395.jpg 768w, https://change-blog.com/wp-content/uploads/2020/05/contact-form-21-1536x789.jpg 1536w, https://change-blog.com/wp-content/uploads/2020/05/contact-form-21-2048x1052.jpg 2048w" sizes="(max-width: 2053px) 100vw, 2053px" /></p>
<p>&nbsp;</p>
<p>お問い合わせがメニュー構造の中に入ったのを確認したら</p>
<p>『フッターのメニュー』を選択して<span class="sc_marker blue">『メニューを保存』をクリック</span>します。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/contact-form-22.jpg" alt="問い合わせをフッターメニューに追加を追加" width="2194" height="1170" class="aligncenter size-full wp-image-2127" srcset="https://change-blog.com/wp-content/uploads/2020/05/contact-form-22.jpg 2194w, https://change-blog.com/wp-content/uploads/2020/05/contact-form-22-768x410.jpg 768w, https://change-blog.com/wp-content/uploads/2020/05/contact-form-22-1536x819.jpg 1536w, https://change-blog.com/wp-content/uploads/2020/05/contact-form-22-2048x1092.jpg 2048w" sizes="(max-width: 2194px) 100vw, 2194px" /></p>
<p>&nbsp;</p>
<p>これで完了です。確認をしてみてください。</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-happy.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>お疲れ様でした～</div>
</div>
<p>&nbsp;</p>
<h3>サイドバーにリンクさせる方法</h3>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/contact-form-18.jpg" alt="問い合わせをサイドバーに追加を追加" width="1261" height="1173" class="aligncenter size-full wp-image-2123" srcset="https://change-blog.com/wp-content/uploads/2020/05/contact-form-18.jpg 1261w, https://change-blog.com/wp-content/uploads/2020/05/contact-form-18-768x714.jpg 768w" sizes="(max-width: 1261px) 100vw, 1261px" /></p>
<p>&nbsp;</p>
<p>サイドバーに問い合わせフォームを作るイメージは<span class="sc_content_icon" style="color: #1e73be;"><i class="fa fa-arrow-up" aria-hidden="true"><span>fa-arrow-up</span></i></span>こんな感じです。</p>
<p>WordPressの管理画面を開き</p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>『外観』→『ウィジェット』をクリックします。<span class="sc_content_icon" style="color: #8abf7c;"></span></p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/contact-form-15.jpg" alt="問い合わせをサイドバーに追加を追加" width="1141" height="557" class="aligncenter size-full wp-image-2120" srcset="https://change-blog.com/wp-content/uploads/2020/05/contact-form-15.jpg 1141w, https://change-blog.com/wp-content/uploads/2020/05/contact-form-15-768x375.jpg 768w" sizes="(max-width: 1141px) 100vw, 1141px" /></p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>ウィジェット内のテキストを、メインサイドバーにもっていきます。</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/contact-form-16.jpg" alt="問い合わせをサイドバーに追加を追加" width="1882" height="1067" class="aligncenter size-full wp-image-2121" srcset="https://change-blog.com/wp-content/uploads/2020/05/contact-form-16.jpg 1882w, https://change-blog.com/wp-content/uploads/2020/05/contact-form-16-768x435.jpg 768w, https://change-blog.com/wp-content/uploads/2020/05/contact-form-16-1536x871.jpg 1536w" sizes="(max-width: 1882px) 100vw, 1882px" /></p>
<p>&nbsp;</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>タイトルには「お問い合わせ」と入力し</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>先ほどコピーしたコードをそのまま貼り付けます。</p>
<p><span class="sc_content_icon" style="color: #8abf7c;"><i class="fa fa-check-square-o" aria-hidden="true"><span>fa-check-square-o</span></i></span>『保存』をクリックして完了です</p>
<p>&nbsp;</p>
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/05/contact-form-17.jpg" alt="問い合わせをサイドバーに追加を追加" width="1405" height="981" class="aligncenter size-full wp-image-2122" srcset="https://change-blog.com/wp-content/uploads/2020/05/contact-form-17.jpg 1405w, https://change-blog.com/wp-content/uploads/2020/05/contact-form-17-768x536.jpg 768w" sizes="(max-width: 1405px) 100vw, 1405px" /></p>
<p>&nbsp;</p>
<p>これで完了です。確認をしてみてください。</p>
<div class="voice clearfix left n_bottom">
<div class="icon">
<p><img decoding="async" src="https://change-blog.com/wp-content/uploads/2020/03/full-kaeru-happy.png" /></p>
<div class="name">カエル</div>
</div>
<div class="text sc_balloon left custom" style="background: #dff7c3; color: #666666;"><span class="custom_voice left normal" style="border-color: transparent #dff7c3 transparent transparent;"></span>お疲れ様でした～</div>
</div>
<p>&nbsp;</p>
<h2>まとめ</h2>
<p>&nbsp;</p>
<p>プラグイン『Contact Form 7』を使うことで、簡単にお問い合わせフォームを作成できるのがわかったと思います。</p>
<p>自分で作ることは難しくても、このプラグインを使えばすぐですね。</p>
<p>&nbsp;</p>
<p>お問い合わせフォームを作っておくとGoogleアドセンスの合格にも近づくのでまだの方は是非設定をしておきましょう。</p>
<p>&nbsp;</p>
]]></content:encoded>
					
					<wfw:commentRss>https://change-blog.com/contact-form/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
