<?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://koaramarch.com/tag/pickup/feed" rel="self" type="application/rss+xml" />
	<link>https://koaramarch.com</link>
	<description></description>
	<lastBuildDate>Fri, 31 Jul 2020 21:16:17 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.2.2</generator>

<image>
	<url>https://koaramarch.com/wp-content/uploads/2020/03/cropped-リサイズ1-32x32.jpg</url>
	<title>おすすめ！ | コアラの行進ブログ</title>
	<link>https://koaramarch.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>【画像最適化】WordPressに画像を掲載するまでの手順を解説</title>
		<link>https://koaramarch.com/image-optimize</link>
		
		<dc:creator><![CDATA[コアラ]]></dc:creator>
		<pubDate>Thu, 25 Jun 2020 20:40:46 +0000</pubDate>
				<category><![CDATA[サイト速度改善]]></category>
		<category><![CDATA[おすすめ！]]></category>
		<category><![CDATA[サイト表示速度の悩み]]></category>
		<category><![CDATA[ブログの悩み]]></category>
		<category><![CDATA[画像最適化]]></category>
		<guid isPermaLink="false">https://koaramarch.com/?p=14965</guid>

					<description><![CDATA[<p>本記事では、WordPressのブログ記事に画像を掲載するまでの手順を３ステップで解説していきます。 この記事の内容を実践して頂ければ、SEO対策効果も期待できるので、検索順位も上がる可能性がありますよ。 画像の最適化と...</p>
The post <a href="https://koaramarch.com/image-optimize">【画像最適化】WordPressに画像を掲載するまでの手順を解説</a> first appeared on <a href="https://koaramarch.com">コアラの行進ブログ</a>.]]></description>
										<content:encoded><![CDATA[<div class="voice cf l"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/01/necchusyou_face_boy1.jpg" width="150" height="150"><figcaption class="name">ブロガーさん</figcaption></figure><div class="voicecomment">
<p>さーてと、ブログに載せる画像はこれで決まりだな。<br />あとはこれをそのままWordPressにアップロードして完成～♪</p>
</div></div>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">
<p>ちょっと待った！</p>
<p>ファイルサイズが大きいままの画像をブログに載せ続けると、<b>ページの読み込み速度がもろに悪化しますよ！</b></p>
<p>それに、<strong>画像を最適化しないと、Googleの検索エンジンにも評価されませんからね。</strong></p>
</div></div>


<div class="voice cf l"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/01/necchusyou_face_boy2.jpg" width="150" height="150"><figcaption class="name">ブロガーさん</figcaption></figure><div class="voicecomment">
<p>そうなの？？<br />では記事に画像を掲載するまでの手順を教えてください！</p>
</div></div>





<p>本記事では、<span class="marker">WordPressのブログ記事に画像を掲載するまでの手順を３ステップで解説していきます。</span></p>





<p>この記事の内容を実践して頂ければ、SEO対策効果も期待できるので、検索順位も上がる可能性がありますよ。</p>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">
<p>ご存知のかたも、チェックリスト代わりに読んでみてくださいね。<br />さっそく解説していきます。</p>
</div></div>



<h2 class="wp-block-heading">画像の最適化とは？</h2>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="770" height="513" src="https://koaramarch.com/wp-content/uploads/2020/06/sunrise-1583304_1280-1.jpg" alt="画像の最適化とは" class="wp-image-15138" srcset="https://koaramarch.com/wp-content/uploads/2020/06/sunrise-1583304_1280-1.jpg 770w, https://koaramarch.com/wp-content/uploads/2020/06/sunrise-1583304_1280-1-370x247.jpg 370w, https://koaramarch.com/wp-content/uploads/2020/06/sunrise-1583304_1280-1-768x512.jpg 768w, https://koaramarch.com/wp-content/uploads/2020/06/sunrise-1583304_1280-1-300x200.jpg 300w" sizes="(max-width: 770px) 100vw, 770px" /></figure></div>



<p></p>



<p>ブロガーさんにとっての画像の最適化とは、<span class="marker">リサイズや圧縮などをおこなうことで、画像を適切なファイルサイズでブログに配置することです。</span></p>



<h3 class="wp-block-heading">画像の最適化で得られる効果</h3>



<p>画像の最適化により、以下の効果が得られます。</p>



<ol><li>Webページの読み込み速度が改善される</li><li>Googleの検索エンジンにも評価される</li></ol>





<p class="point"><i class="fa fa-check" aria-hidden="true"></i> Webページの読み込み速度が改善される</p>



<p><span class="marker">画像を最適化することで、画像のファイルサイズが縮小します。</span><br>その結果、<span class="marker">Webページの読み込み速度が改善されます。</span></p>




<div class="supplement border">Webページを読み込む際、コンテンツ全体のサイズが小さいほうが速く読み込めるからですね。</div>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">Webページを構成する要素のうち、画像のファイルサイズは大きなウェイトを占めますので、読み込み速度が改善される可能性はじゅうぶんありますよ。<br />
</div></div>





<p class="point"><i class="fa fa-check" aria-hidden="true"></i> Googleの検索エンジンにも評価される</p>



<p><span class="marker">画像を最適化することで、Googleの検索エンジンにも評価されます。</span></p>




<div class="supplement border">実は、Googleはあなたのサイトコンテンツを評価する際、ページの読み込み速度も評価指標の一つに入れています。</div>





<p>なので、画像の最適化によりSEO対策効果につながり、検索順位も上がる可能性がありますよ。</p>



<h3 class="wp-block-heading">最適化を行わないとどうなるの？</h3>



<p>それはまさに、ブログを始めた当初の僕ですね…</p>





<p>何も知識のなかった僕は、気にせずそのまま画像をブログにアップロード！</p>



<p>すると、サイト全体がみるみるうちに重くなってしまったんですよね…</p>




<div class="supplement border">
<p>Google提供の速度計測ができる<a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeedInaights</a>において、スコアが30を下回るくらいでしたね。<br />※個人が改善できるスコアの目安は60くらいです。</p>
</div>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">
<p>あなたもこうなる前に、早めに最適化の手順をマスターしておきましょう。</p>
</div></div>



<h2 class="wp-block-heading">【画像最適化】WordPressに画像を掲載するまでの手順【３ステップ】</h2>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="770" height="428" src="https://koaramarch.com/wp-content/uploads/2020/06/Amazon-プライムビデオとは？-5.png" alt="【画像最適化】WordPressに画像を掲載するまでの手順【３ステップ】" class="wp-image-15057" srcset="https://koaramarch.com/wp-content/uploads/2020/06/Amazon-プライムビデオとは？-5.png 770w, https://koaramarch.com/wp-content/uploads/2020/06/Amazon-プライムビデオとは？-5-370x206.png 370w, https://koaramarch.com/wp-content/uploads/2020/06/Amazon-プライムビデオとは？-5-768x427.png 768w" sizes="(max-width: 770px) 100vw, 770px" /></figure></div>



<p>画像の最適化を行い、WordPressに画像を掲載するまでの手順は以下の3ステップでできます。</p>



<ol><li>リサイズしよう</li><li>圧縮しよう</li><li>alt属性に画像の説明を記載しよう</li></ol>



<h3 class="wp-block-heading">ステップ１：リサイズしよう</h3>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="770" height="428" src="https://koaramarch.com/wp-content/uploads/2020/06/27.png" alt="ステップ１：リサイズしよう" class="wp-image-15054" srcset="https://koaramarch.com/wp-content/uploads/2020/06/27.png 770w, https://koaramarch.com/wp-content/uploads/2020/06/27-370x206.png 370w, https://koaramarch.com/wp-content/uploads/2020/06/27-768x427.png 768w" sizes="(max-width: 770px) 100vw, 770px" /></figure></div>


<div class="c_box intitle blue_box"><div class="box_title"><span>リサイズとは？</span></div>
<p>画像のサイズ（大きさ）を拡大・縮小して変更すること。<br />縮小させるとファイルサイズが軽くなり、速度改善につながります。</p>
</div>





<p>リサイズツールは、今回は僕も使っている<a href="https://bulkresizephotos.com/ja">Bulk Resize Photos</a>を使います。</p>




<div class="supplement border">
<p>詳しい使い方はこちらを参考ください。<br /><a href="https://koaramarch.com/image-resize-tool">&gt;&gt;ブロガーにおすすめの画像リサイズツール「Bulk Resize Photos」がスゴイ！</a></p>
</div>





<p>これを使って、あなたのブログ記事の横幅サイズに合わせてあげれば、一番無駄がないファイルサイズとなるでしょう。</p>







<p class="no-margin">▼僕の場合は、ブログ記事の横幅の最大が<strong>728px</strong>なので、画像の横幅も大体それくらいになるようにリサイズします。</p>



<div class="wp-block-image fig_solid"><figure class="aligncenter size-large"><img decoding="async" width="924" height="536" src="https://koaramarch.com/wp-content/uploads/2020/06/コメント-2020-06-21-202115.jpg" alt="ブログ記事の横幅の最大である728pxに合わせてリサイズ" class="wp-image-14903" srcset="https://koaramarch.com/wp-content/uploads/2020/06/コメント-2020-06-21-202115.jpg 924w, https://koaramarch.com/wp-content/uploads/2020/06/コメント-2020-06-21-202115-370x215.jpg 370w, https://koaramarch.com/wp-content/uploads/2020/06/コメント-2020-06-21-202115-768x446.jpg 768w" sizes="(max-width: 924px) 100vw, 924px" /></figure></div>




<div class="voice cf l"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/01/necchusyou_face_boy2.jpg" width="150" height="150"><figcaption class="name">ブロガーさん</figcaption></figure><div class="voicecomment">ところで、ブログ記事の横幅サイズなんて知らないんですけど？？<br />
</div></div>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">
Chromeブラウザの検証ツールを使えばかんたんに分かりますよ。<br />
</div></div>



<p class="no-margin">▼Windowsなら、あなたのブログ記事を開いてから、右クリック→検証を選択後、下図の赤枠のアイコンをクリックします。</p>



<div class="wp-block-image fig_solid"><figure class="aligncenter size-large"><img decoding="async" width="257" height="111" src="https://koaramarch.com/wp-content/uploads/2020/05/2020-05-24_21h52_28.png" alt="Chromeの検証ツール" class="wp-image-13347"/></figure></div>





<p class="no-margin">▼記事のタイトルにでも矢印キーを合わせれば横幅のサイズが分かります。</p>



<div class="wp-block-image fig_solid"><figure class="aligncenter size-large"><img decoding="async" width="900" height="353" src="https://koaramarch.com/wp-content/uploads/2020/06/コメント-2020-06-25-055324-1.jpg" alt="" class="wp-image-15080" srcset="https://koaramarch.com/wp-content/uploads/2020/06/コメント-2020-06-25-055324-1.jpg 900w, https://koaramarch.com/wp-content/uploads/2020/06/コメント-2020-06-25-055324-1-370x145.jpg 370w, https://koaramarch.com/wp-content/uploads/2020/06/コメント-2020-06-25-055324-1-768x301.jpg 768w" sizes="(max-width: 900px) 100vw, 900px" /></figure></div>


<div class="voice cf l"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/01/necchusyou_face_boy1.jpg" width="150" height="150"><figcaption class="name">ブロガーさん</figcaption></figure><div class="voicecomment">おお！これは使える！<br />
</div></div>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">調べるのが面倒でしたら、大体<b>700～800px</b>くらいにしておけば、たいていのブログ記事に対応できるかと。<br />
</div></div>





<p class="point"><i class="fa fa-check" aria-hidden="true"></i> 豆知識その１：アイキャッチ画像サイズについて</p>



<p>アイキャッチ画像だけは、少し大きめの<b>1200×630px</b>がいいようです。</p>





<p><br>これは、SNSの中でも一番サイズの大きいFacebookに掲載するサイズに合わせるためです。</p>




<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">ちなみに、このサイズをTwitterに適用すると、上下が15pxずつ見切れる計算になります。<br />頭の片隅にでも覚えておくとよいかも。<br />
</div></div>





<p class="point"><i class="fa fa-check" aria-hidden="true"></i> 豆知識その２：JPGとPNGについて</p>



<p>画像の拡張子でよく見かけるJPGとPNGの違いについて、ご存知ですか？</p>




<div class="c_box intitle blue_box"><div class="box_title"><span>JPG</span></div>
自然物、色がにぎやか、多様色に向いている。<br />
</div>


<div class="c_box intitle yellow_box"><div class="box_title"><span>PNG</span></div>
人工物、使われる色の数が少ない、単色系に向いている。<br />
</div>





<p>写真や風景画などは、JPG。</p>



<p>色数の少ないアイコンは、PNGで。</p>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">良く分からなければ、JPGにしておきましょう。<br />
</div></div>



<p></p>



<h3 class="wp-block-heading">ステップ２：圧縮しよう</h3>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="770" height="428" src="https://koaramarch.com/wp-content/uploads/2020/06/28.png" alt="ステップ２：圧縮しよう" class="wp-image-15055" srcset="https://koaramarch.com/wp-content/uploads/2020/06/28.png 770w, https://koaramarch.com/wp-content/uploads/2020/06/28-370x206.png 370w, https://koaramarch.com/wp-content/uploads/2020/06/28-768x427.png 768w" sizes="(max-width: 770px) 100vw, 770px" /></figure></div>


<div class="c_box intitle blue_box"><div class="box_title"><span>圧縮とは？</span></div>
<p>画像の圧縮とは、画像サイズはそのままに、画質の劣化は気にならない程度で抑えつつ、ファイルサイズだけを縮小させることです。</p>
</div>





<p>圧縮は、WordPressのプラグイン「<strong>Compress JPEG &amp; PNG images</strong>」を使えばかんたんにできます。</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="940" height="312" src="https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-16-055829-2.jpg" alt="Compress JPEG &amp; PNG imagesプラグイン" class="wp-image-12924" srcset="https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-16-055829-2.jpg 940w, https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-16-055829-2-300x100.jpg 300w, https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-16-055829-2-768x255.jpg 768w" sizes="(max-width: 940px) 100vw, 940px" /></figure></div>




<div class="supplement border">
<p>設定方法について知りたい方は、こちらの記事が参考になります。<br /><a href="https://mirai-creators.com/4014/">&gt;&gt;【画像圧縮】Compress JPEG &amp; PNG images プラグインの設定と使い方</a></p>
</div>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">一度設定しておくと、あとは自動で圧縮してくれますので導入しておきましょう。<br />
</div></div>





<p>これで圧縮の準備が整いました。</p>



<p class="no-margin">▼あとは、リサイズした画像をいつも通り、WordPressのメディアライブラリにドラッグ＆ドロップしてアップロードします。<br>※圧縮は、プラグインが自動で行ってくれますのでご安心を！</p>



<div class="wp-block-image fig_solid"><figure class="aligncenter size-large"><img decoding="async" width="880" height="457" src="https://koaramarch.com/wp-content/uploads/2020/06/コメント-2020-06-25-072643-2.jpg" alt="メディアライブラリにドラッグ＆ドロップ" class="wp-image-15091" srcset="https://koaramarch.com/wp-content/uploads/2020/06/コメント-2020-06-25-072643-2.jpg 880w, https://koaramarch.com/wp-content/uploads/2020/06/コメント-2020-06-25-072643-2-370x192.jpg 370w, https://koaramarch.com/wp-content/uploads/2020/06/コメント-2020-06-25-072643-2-768x399.jpg 768w" sizes="(max-width: 880px) 100vw, 880px" /></figure></div>




<div class="supplement border">
<p>Gutenbergエディタをお使いなら、投稿編集画面に直接ドラッグ＆ドロップでもいけますね。</p>
<div class="wp-block-image fig_solid">
<figure class="aligncenter size-large"><img decoding="async" src="https://koaramarch.com/wp-content/uploads/2020/06/コメント-2020-06-25-204804-1.jpg" alt="投稿画面に直接ドラッグ＆ドロップ"></figure>
</div>
</div>





<p>画像ファイルサイズの最適化に関しては、リサイズ→圧縮の2ステップで終了です！</p>





<p>元々の画像のファイルサイズと比べると、明らかに軽くなっているはずです。</p>


<div class="c_box intitle blue_box"><div class="box_title"><span>画像ファイルサイズの目安</span></div>
<p>特に画質にこだわりがなければ、アイキャッチ画像なら、<b>200KB以内</b>。<br />
その他の画像は、<b>80KB以内</b>くらいを目安にしてみてください。</p>
</div>



<h3 class="wp-block-heading">ステップ３：alt属性に画像の説明を記載しよう</h3>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="770" height="428" src="https://koaramarch.com/wp-content/uploads/2020/06/29.png" alt="ステップ３：alt属性に画像の説明を記載しよう" class="wp-image-15056" srcset="https://koaramarch.com/wp-content/uploads/2020/06/29.png 770w, https://koaramarch.com/wp-content/uploads/2020/06/29-370x206.png 370w, https://koaramarch.com/wp-content/uploads/2020/06/29-768x427.png 768w" sizes="(max-width: 770px) 100vw, 770px" /></figure></div>



<p><strong>alt属性</strong>ってご存知ですか？</p>





<p>alt属性は、<span class="marker">画像を掲載する際のコードに付加するもので、グーグルの巡回ロボット君があなたの記事を評価する際に利用します。</span></p>




<div class="supplement border">逆に言うと、このalt属性がなければ、ロボットは画像に関してなんの評価もしてくれないのです。</div>





<p>実際、意味のない装飾画像であれば記入不要です。</p>



<p>ただ、判断に困りそうなら基本的に<strong>alt属性には、画像の説明を必ず記入する</strong>と覚えておいても問題ないでしょう。</p>





<p class="point"><i class="fa fa-check" aria-hidden="true"></i> どこに記入すればいいの？</p>



<p>コードに直接記入する以外の方法だと、2パターンあります。</p>





<p><strong>1つ目が、メディアライブラリから記入するパターン。</strong></p>



<p class="no-margin">▼WordPressの管理画面より、メディアライブラリを開きます。</p>



<div class="wp-block-image fig_solid"><figure class="aligncenter size-medium"><img decoding="async" width="210" height="370" src="https://koaramarch.com/wp-content/uploads/2020/06/2020-06-25_07h22_40-1-210x370.jpg" alt="WordPressの管理画面より、メディアライブラリを開く" class="wp-image-15104" srcset="https://koaramarch.com/wp-content/uploads/2020/06/2020-06-25_07h22_40-1-210x370.jpg 210w, https://koaramarch.com/wp-content/uploads/2020/06/2020-06-25_07h22_40-1.jpg 492w" sizes="(max-width: 210px) 100vw, 210px" /></figure></div>





<p class="no-margin">▼適当な画像を選択すると、下図の画面が出てきますので、そこの「代替テキスト」と言う欄に書き込めばOKです。</p>



<div class="wp-block-image fig_solid"><figure class="aligncenter size-large"><img decoding="async" width="900" height="352" src="https://koaramarch.com/wp-content/uploads/2020/06/2020-06-25_07h29_29.jpg" alt="代替テキストにalt属性を記入" class="wp-image-15108" srcset="https://koaramarch.com/wp-content/uploads/2020/06/2020-06-25_07h29_29.jpg 900w, https://koaramarch.com/wp-content/uploads/2020/06/2020-06-25_07h29_29-370x145.jpg 370w, https://koaramarch.com/wp-content/uploads/2020/06/2020-06-25_07h29_29-768x300.jpg 768w" sizes="(max-width: 900px) 100vw, 900px" /><figcaption>メディアライブラリから記入</figcaption></figure></div>







<p><strong>2つ目が、投稿編集画面から記入するパターン</strong>。</p>



<p class="no-margin">▼Gutenbergなら、挿入した画像をクリックして、画像設定のAltテキストという所に記入すればOK。</p>



<div class="wp-block-image fig_solid"><figure class="aligncenter size-large"><img decoding="async" width="1024" height="408" src="https://koaramarch.com/wp-content/uploads/2020/06/2020-06-25_21h24_14-1024x408.jpg" alt="画像設定のAltテキスト" class="wp-image-15110" srcset="https://koaramarch.com/wp-content/uploads/2020/06/2020-06-25_21h24_14-1024x408.jpg 1024w, https://koaramarch.com/wp-content/uploads/2020/06/2020-06-25_21h24_14-370x147.jpg 370w, https://koaramarch.com/wp-content/uploads/2020/06/2020-06-25_21h24_14-768x306.jpg 768w, https://koaramarch.com/wp-content/uploads/2020/06/2020-06-25_21h24_14.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>投稿編集画面の画像設定から記入</figcaption></figure></div>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">メディアライブラリに記入した内容より、こちらで記入した内容のほうが優先されます。<br />
</div></div>





<p class="no-margin">▼これも検証ツールで確認すると、ちゃんと反映されていることが分かります。<br>（毎回確認する必要はないですからね）</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="1024" height="355" src="https://koaramarch.com/wp-content/uploads/2020/06/2020-06-26_06h03_22-1024x355.jpg" alt="" class="wp-image-15160" srcset="https://koaramarch.com/wp-content/uploads/2020/06/2020-06-26_06h03_22-1024x355.jpg 1024w, https://koaramarch.com/wp-content/uploads/2020/06/2020-06-26_06h03_22-370x128.jpg 370w, https://koaramarch.com/wp-content/uploads/2020/06/2020-06-26_06h03_22-768x267.jpg 768w, https://koaramarch.com/wp-content/uploads/2020/06/2020-06-26_06h03_22.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure></div>





<p class="point"><i class="fa fa-check" aria-hidden="true"></i> alt属性に記入する内容について</p>



<p>記入する内容は、<span class="marker">記事のキーワードの羅列ではなく、画像を説明する自然な言葉や文章がいいでしょう。</span></p>


<div class="supplement warning">
<p>記事のキーワードの羅列はやめておきましょう。<br />※昔はここにキーワードを羅列しておくと上位表示された時代があったそうですが、今はロボットも賢くなり、キーワードの羅列は無意味な行為となっているようです。
</p>
</div>



<p></p>



<h2 class="wp-block-heading">【発展】画像を遅延読み込みさせよう</h2>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="770" height="480" src="https://koaramarch.com/wp-content/uploads/2020/06/premium-quality-15-4-inch-laptop-notebook-pro-website-ui-apps-mock-up-left-side-front-view_39605-175-1.jpg" alt="画像を遅延読み込みさせよう" class="wp-image-14096" srcset="https://koaramarch.com/wp-content/uploads/2020/06/premium-quality-15-4-inch-laptop-notebook-pro-website-ui-apps-mock-up-left-side-front-view_39605-175-1.jpg 770w, https://koaramarch.com/wp-content/uploads/2020/06/premium-quality-15-4-inch-laptop-notebook-pro-website-ui-apps-mock-up-left-side-front-view_39605-175-1-300x187.jpg 300w, https://koaramarch.com/wp-content/uploads/2020/06/premium-quality-15-4-inch-laptop-notebook-pro-website-ui-apps-mock-up-left-side-front-view_39605-175-1-768x479.jpg 768w" sizes="(max-width: 770px) 100vw, 770px" /></figure></div>



<p>こちらは発展です。</p>





<p><strong>Webページを開いたときに見えない画像を遅延読み込みさせることで、読み込み速度を改善することができます。</strong></p>





<p class="no-margin">▼詳しくはこちらで解説しています。</p>


<div class="related_article cf typesimple"><a href="https://koaramarch.com/offscreen-image-solution" class="related_article__link"><figure class="eyecatch thum"><img width="486" height="290" src="https://koaramarch.com/wp-content/uploads/2020/06/39-486x290.jpg" class="attachment-home-thum size-home-thum wp-post-image" alt="オフスクリーン画像の遅延読み込みはAutoptimizeで速攻解決" decoding="async" /></figure><div class="meta inbox"><p class="ttl" data-labeltext="関連記事">オフスクリーン画像の遅延読み込みはAutoptimizeで速攻解決</p><time class="time__date date gf undo">2020年7月30日</time></div></a></div>



<h2 class="wp-block-heading">【画像最適化】WordPressに画像を掲載するまでの手順を解説 まとめ</h2>



<figure class="wp-block-image size-large"><img decoding="async" width="800" height="480" src="https://koaramarch.com/wp-content/uploads/2020/04/david-travis-5bYxXawHOQg-unsplash-1.jpg" alt="まとめ" class="wp-image-10236" srcset="https://koaramarch.com/wp-content/uploads/2020/04/david-travis-5bYxXawHOQg-unsplash-1.jpg 800w, https://koaramarch.com/wp-content/uploads/2020/04/david-travis-5bYxXawHOQg-unsplash-1-300x180.jpg 300w, https://koaramarch.com/wp-content/uploads/2020/04/david-travis-5bYxXawHOQg-unsplash-1-768x461.jpg 768w" sizes="(max-width: 800px) 100vw, 800px" /></figure>



<p>画像の取り扱いを身につけておくだけで、Webページの読み込み速度が改善されるだけでなく、Googleにも評価される記事になります。</p>





<p>リサイズなど面倒ではありますが、のちのち困らないように、この記事で覚えたことを実践してみてくださいね。</p>




<div class="c_box intitle blue_box"><div class="box_title"><span>コアラのまとめ</span></div>
<p>【画像最適化】WordPressに画像を掲載するまでの手順【３ステップ】</p>
<ol>
<li><b>リサイズしよう</b><br />おすすめリサイズツールは、「<a href="https://bulkresizephotos.com/ja">Bulk Resize Photos</a>」</li>
<li><b>圧縮しよう</b><br />おすすめプラグインは、「Compress JPEG &amp; PNG images」</li>
<li><b>alt属性に画像の説明を記載しよう</b><br />Googleに評価されやすくなります。</li>
</ol>
</div>







<p class="no-margin">あなたのサイトは大丈夫？<br>▼画像を最適化して、自サイトの読み込み速度を改善しましょう。</p>


<div class="related_article cf typesimple"><a href="https://koaramarch.com/pagespeedinsights" class="related_article__link"><figure class="eyecatch thum"><img width="486" height="290" src="https://koaramarch.com/wp-content/uploads/2020/05/アイキャッチ-11-1-1-486x290.jpg" class="attachment-home-thum size-home-thum wp-post-image" alt="【最新版】PageSpeedInsightsの使い方と計測結果の見方を解説" decoding="async" /></figure><div class="meta inbox"><p class="ttl" data-labeltext="関連記事">【最新版】PageSpeedInsightsの使い方と計測結果の見方を解説</p><time class="time__date date gf undo">2020年8月1日</time></div></a></div>


<div class="related_article cf typesimple"><a href="https://koaramarch.com/offscreen-image-solution" class="related_article__link"><figure class="eyecatch thum"><img width="486" height="290" src="https://koaramarch.com/wp-content/uploads/2020/06/39-486x290.jpg" class="attachment-home-thum size-home-thum wp-post-image" alt="オフスクリーン画像の遅延読み込みはAutoptimizeで速攻解決" decoding="async" /></figure><div class="meta inbox"><p class="ttl" data-labeltext="関連記事">オフスクリーン画像の遅延読み込みはAutoptimizeで速攻解決</p><time class="time__date date gf undo">2020年7月30日</time></div></a></div>


<div class="related_article cf typesimple"><a href="https://koaramarch.com/chrome-devtools" class="related_article__link"><figure class="eyecatch thum"><img width="486" height="290" src="https://koaramarch.com/wp-content/uploads/2020/05/アイキャッチ-2-486x290.png" class="attachment-home-thum size-home-thum wp-post-image" alt="【超簡単】Chrome検証ツールでブログデザインを調べる方法" decoding="async" /></figure><div class="meta inbox"><p class="ttl" data-labeltext="関連記事">【超簡単】Chrome検証ツールでブログデザインを調べる方法</p><time class="time__date date gf undo">2020年8月1日</time></div></a></div>The post <a href="https://koaramarch.com/image-optimize">【画像最適化】WordPressに画像を掲載するまでの手順を解説</a> first appeared on <a href="https://koaramarch.com">コアラの行進ブログ</a>.]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>サイト速度改善に役立つプラグインならこの3つ【まるっと解決】</title>
		<link>https://koaramarch.com/faster-plugin</link>
		
		<dc:creator><![CDATA[コアラ]]></dc:creator>
		<pubDate>Sun, 17 May 2020 20:00:04 +0000</pubDate>
				<category><![CDATA[サイト速度改善]]></category>
		<category><![CDATA[おすすめ！]]></category>
		<category><![CDATA[サイト表示速度の悩み]]></category>
		<category><![CDATA[ブログの悩み]]></category>
		<guid isPermaLink="false">https://koaramarch.com/?p=12538</guid>

					<description><![CDATA[<p>そんな疑問が解決できる記事を書きました。 本記事の内容 サイト速度改善に役立つ3つのプラグインの紹介 サイト速度改善に関する豆知識 執筆者情報 僕が運営する当サイトは、これから紹介するプラグインの導入やその他施策により、...</p>
The post <a href="https://koaramarch.com/faster-plugin">サイト速度改善に役立つプラグインならこの3つ【まるっと解決】</a> first appeared on <a href="https://koaramarch.com">コアラの行進ブログ</a>.]]></description>
										<content:encoded><![CDATA[<div class="voice cf l"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/01/necchusyou_face_boy2.jpg" width="150" height="150"><figcaption class="name">ブロガーさん</figcaption></figure><div class="voicecomment">
<ul class="no-li">
<li>自サイトがなんだか重い気がする。。。</li>
<li>自サイトの表示速度を改善したい。</li>
</ul>
</div></div>



<p>そんな疑問が解決できる記事を書きました。</p>





<p class="point"><i class="fa fa-check" aria-hidden="true"></i> 本記事の内容</p>



<ul><li>サイト速度改善に役立つ3つのプラグインの紹介</li><li>サイト速度改善に関する豆知識</li></ul>





<p class="point"><i class="fa fa-check" aria-hidden="true"></i> 執筆者情報</p>



<p>僕が運営する当サイトは、これから紹介するプラグインの導入やその他施策により、PageSpeedInsightsで<strong>34点→67点</strong>の表示速度スコア改善に成功しています。</p>



<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment"><p>さっそく解説していきます。</p></div></div>



<div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>



<p class="st-mcbox-title-2" style="font-weight: bold">＼当ブログで使用中のテーマ／</p>
<div class="btn-2 btn-2-blue">
<a href="https://px.a8.net/svt/ejp?a8mat=3BBJ96+6M5ER6+3PSE+639IQ" rel="nofollow">WordPressテーマ「スワロー」公式サイトはこちら</a>
<img decoding="async" border="0" width="1" height="1" src="https://www18.a8.net/0.gif?a8mat=3BBJ96+6M5ER6+3PSE+639IQ" alt="">
</div>



<p>　</p>



<h2 class="wp-block-heading">サイト速度改善に役立つプラグイン3選</h2>



<div class="wp-block-image"><figure class="aligncenter"><img decoding="async" width="770" height="480" src="https://koaramarch.com/wp-content/uploads/2020/05/gareth-davies-1CrN-IbvtH0-unsplash.jpg" alt="サイト速度改善に役立つプラグインならこの3つ" class="wp-image-12936" srcset="https://koaramarch.com/wp-content/uploads/2020/05/gareth-davies-1CrN-IbvtH0-unsplash.jpg 770w, https://koaramarch.com/wp-content/uploads/2020/05/gareth-davies-1CrN-IbvtH0-unsplash-300x187.jpg 300w, https://koaramarch.com/wp-content/uploads/2020/05/gareth-davies-1CrN-IbvtH0-unsplash-768x479.jpg 768w" sizes="(max-width: 770px) 100vw, 770px" /></figure></div>





<p>はじめに結論。</p>



<p>サイト速度改善に役立つお手軽プラグインはこの3つ。</p>





<table class="wp-block-table">
    <tbody>
        <tr">
            <td style="background-color:#e7f5fe;"></td>
            <td style="background-color:#fafafa;">プラグイン</td>
            <td style="background-color:#fafafa;">目的</td>
        </tr>
        <tr>
            <td style="background-color:#e7f5fe; text-align: center;">1</td>
            <td>Compress JPEG &amp; PNG images</td>
            <td>画像圧縮</td>
        </tr>
        <tr>
            <td style="background-color:#e7f5fe; text-align: center;">2</td>
            <td>Autoptimize</td>
            <td>・コード圧縮<br>・画像読み込み遅延</td>
        </tr>
        <tr>
            <td style="background-color:#e7f5fe; text-align: center;">3</td>
            <td>WP Fastest Cache</td>
            <td>キャッシュ活用</td>
        </tr>
    </tbody>
</table>





<p>順に解説していきます。</p>





<p class="point"><i class="fa fa-check" aria-hidden="true"></i> 導入する前に自サイトの表示速度を確認しておこう！</p>



<p>3つのプラグインを導入する前に、<a rel="noopener noreferrer" href="https://developers.google.com/speed/pagespeed/insights/" target="_blank">PageSpeedInsights</a>で現在の自サイトの表示速度を確認しておきましょう。</p>





<p>使い方が分からなければ、こちらの記事を参考ください。<br>（1分でできます）</p>


<div class="related_article cf typesimple"><a href="https://koaramarch.com/pagespeedinsights" class="related_article__link"><figure class="eyecatch thum"><img width="486" height="290" src="https://koaramarch.com/wp-content/uploads/2020/05/アイキャッチ-11-1-1-486x290.jpg" class="attachment-home-thum size-home-thum wp-post-image" alt="【最新版】PageSpeedInsightsの使い方と計測結果の見方を解説" decoding="async" /></figure><div class="meta inbox"><p class="ttl" data-labeltext="関連記事">【最新版】PageSpeedInsightsの使い方と計測結果の見方を解説</p><time class="time__date date gf undo">2020年8月1日</time></div></a></div>



<h2 class="wp-block-heading">①Compress JPEG &amp; PNG imagesプラグイン</h2>



<div class="wp-block-image"><figure class="aligncenter"><img decoding="async" width="940" height="312" src="https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-16-055829-2.jpg" alt="Compress JPEG &amp; PNG imagesプラグイン" class="wp-image-12924" srcset="https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-16-055829-2.jpg 940w, https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-16-055829-2-300x100.jpg 300w, https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-16-055829-2-768x255.jpg 768w" sizes="(max-width: 940px) 100vw, 940px" /></figure></div>





<p>以下について順に解説します。 </p>



<ul><li>Compress JPEG &amp; PNG imagesってどんなプラグイン？</li><li>Compress JPEG &amp; PNG imagesの導入方法</li><li>画像の最適化ベストプラクティス</li></ul>



<h3 class="wp-block-heading">Compress JPEG &amp; PNG imagesってどんなプラグイン？</h3>



<p>Compress JPEG &amp; PNG imagesは、<span class="marker">画像の最適化に必須の画像圧縮を行ってくれるプラグイン</span>になります。</p>




<div class="supplement border">
ページのほとんどが静的な個人サイトにおいて、画像のファイルサイズが一番大事と言ってもいいでしょう。<br />
</div>





<p>なぜなら、<strong>画像のファイルサイズは、Webサイトを構成するHTMLやCSSコードに比べて明らかに大きいから。</strong></p>





<p>このプラグインを導入すれば、WordPressに画像をアップロードするときに自動で圧縮してくれます。</p>





<p class="point"><i class="fa fa-check" aria-hidden="true"></i> EWWW Image Optimizerではだめなの？</p>



<p>よく比較されるのですが、画像圧縮プラグインの有名どころとして、<strong>EWWW Image Optimizer</strong>プラグインというものもあります。</p>





<p>こちらを採用しても全然かまいませんよ。</p>





<p>細かい話は抜きにして簡単にまとめると、下表のとおり。<br>※両者無料版の場合です。</p>



<table class="wp-block-table">
    <tbody>
        <tr>
            <td style="background-color:#e7f5fe;"></td>
            <td style="background-color:#fafafa;">EWWW Image Optimizer</td>
            <td style="background-color:#fafafa;">Compress JPEG &amp; PNG images</td>
        </tr>
        <tr>
            <td style="background-color:#e7f5fe;">圧縮方針</td>
            <td>画像劣化を最小限に抑えて圧縮</td>
            <td>圧縮最優先</td>
        </tr>
        <tr>
            <td style="background-color:#e7f5fe;">圧縮率</td>
            <td>Compress JPEG～に比べると、<span style="color: blue">低い</td>
            <td style="color: red">高い</td>
        </tr>
        <tr>
            <td style="background-color:#e7f5fe;">サーバーへの負荷</td>
            <td ><span style="color: blue">高い</span><br>※ページの表示速度に影響が出る可能性がある</td>
            <td style="color: red">低い</td>
        </tr>
        <tr>
            <td style="background-color:#e7f5fe;">無料版でできること</td>
            <td>何枚でも圧縮可能</td>
            <td>500枚/月まで</td>
        </tr>
        <tr>
            <td style="background-color:#e7f5fe;">おすすめな人</td>
            <td>・画像の枚数が多い<br>・画像（写真）を最大限売りにしたサイト</td>
            <td>・画像の枚数がそこまで多くない<br>・ページの表示速度を損ないたくない</td>
        </tr>
    </tbody>
</table>


<div class="supplement border">Compress JPEG &amp; PNG imagesは月500枚となっていますが、<b>実はWordPressは画像をアップロードした瞬間にいくつかの表示サイズに合わせた画像を複製します</b>。</p>
<p>それらの画像すべてに圧縮の設定をしていると、<b>月100枚</b>くらいとなるので注意。<br />
</div>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">結局どちらがおすすめ？と聞かれれば、僕も使用している<b>Compress JPEG &amp; PNG images</b>と答えます。<br />
</div></div>





<p>なぜかと聞かれれば、以下の理由です。</p>



<ul><li>圧縮最優先のため、EWWW～より画像劣化があると言っても、見た目上は分からないレベルだから</li><li>サーバーの負荷が低く、ページ速度を損なわないから</li><li>月100枚程度で今のところ問題ないから</li></ul>



<h3 class="wp-block-heading">導入方法 </h3>



<p>こちらのサイトでていねいに解説されているので参考ください。</p>



<p><a href="https://mirai-creators.com/4014/">&gt;&gt;【画像圧縮】Compress JPEG &amp; PNG images プラグインの設定と使い方</a></p>



<h3 class="wp-block-heading">画像の最適化は「リサイズ」してから、「圧縮」がベストプラクティス！</h3>



<div class="wp-block-image"><figure class="aligncenter"><img decoding="async" width="770" height="428" src="https://koaramarch.com/wp-content/uploads/2020/05/リサイズと縮小.jpg" alt="画像の最適化は「リサイズ」してから、「圧縮」がベストプラクティス！" class="wp-image-12955" srcset="https://koaramarch.com/wp-content/uploads/2020/05/リサイズと縮小.jpg 770w, https://koaramarch.com/wp-content/uploads/2020/05/リサイズと縮小-300x167.jpg 300w, https://koaramarch.com/wp-content/uploads/2020/05/リサイズと縮小-768x427.jpg 768w" sizes="(max-width: 770px) 100vw, 770px" /></figure></div>





<p>画像の最適化は以下の手順で行うのがベストプラクティスです。</p>



<ol><li>画像のリサイズ<br>（Bulk Resize Photosを使用。JPG化も合わせて行う。）</li><li>画像の圧縮<br>（WordPressに画像アップロードすれば、Compress JPEG &amp; PNG imagesプラグインが自動で圧縮してくれる）</li></ol>




<div class="supplement border">
<a href="https://bulkresizephotos.com/ja">Bulk Resize Photos</a>は画像サイズを縮小してくれるツール。</p>
<p>ついでにファイル形式をPNG&#x27a1;JPG化も行ってくれます。</p>
<p>あなたのサイト記事の表示幅に合わせて画像サイズをリサイズしてみてください。<br />
</div>


<div class="related_article cf typesimple"><a href="https://koaramarch.com/image-resize-tool" class="related_article__link"><figure class="eyecatch thum"><img width="486" height="290" src="https://koaramarch.com/wp-content/uploads/2020/06/アイキャッチ-27-486x290.jpg" class="attachment-home-thum size-home-thum wp-post-image" alt="ブロガーにおすすめの画像リサイズツール「Bulk Resize Photos」がスゴイ！" decoding="async" /></figure><div class="meta inbox"><p class="ttl" data-labeltext="関連記事">ブロガーにおすすめの画像リサイズツール「Bulk Resize Photos」がスゴイ！</p><time class="time__date date gf undo">2020年7月30日</time></div></a></div>




<div class="c_box intitle blue_box"><div class="box_title"><span>画像サイズの目安</span></div>
特に画質にこだわりがなければ、アイキャッチ画像なら、200KB以内。<br />
その他画像は80KB以内くらいを目安にしてみてください。<br />
</div>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">あくまで目安です。<br />
</div></div>





<p class="point"><i class="fa fa-check" aria-hidden="true"></i> 豆知識：JPGとPNGについて</p>



<p>画像の拡張子でよく見かけるJPGとPNGの違いについて、ご存知ない方は以下を参照ください。</p>




<div class="c_box intitle blue_box"><div class="box_title"><span>JPG</span></div>
自然物、色がにぎやか、多様色に向いている。<br />
</div>


<div class="c_box intitle yellow_box"><div class="box_title"><span>PNG</span></div>
人工物、使われる色の数が少ない、単色系に向いている。<br />
</div>





<p>それぞれに適したもののほうがファイルサイズも軽くなります。</p>





<div class="supplement border">Twitterのブロガー界隈でよく、なんでもかんでもJPG化をおすすめしているのを見かけますが、PNG形式のほうが軽くなることもあるので注意。</div>



<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">とはいえ、良く分からなければJPGにしておきましょう。
</div></div>



<h2 class="wp-block-heading">②Autoptimizeプラグイン</h2>



<figure class="wp-block-image"><img decoding="async" width="943" height="310" src="https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-16-055005.jpg" alt="Autoptimize" class="wp-image-12927" srcset="https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-16-055005.jpg 943w, https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-16-055005-300x99.jpg 300w, https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-16-055005-768x252.jpg 768w" sizes="(max-width: 943px) 100vw, 943px" /></figure>





<p>以下について順に解説します。</p>



<ul><li>Autoptimizeってどんなプラグイン？</li><li>Autoptimizeの導入方法</li></ul>



<h3 class="wp-block-heading">Autoptimizeってどんなプラグイン？</h3>



<p>こんなプラグインです。</p>



<ul><li>CSSやJavaScriptコードを圧縮してくれる</li><li>画像を遅延読み込みしてくれる</li></ul>





<p class="point"><i class="fa fa-check" aria-hidden="true"></i> コードの圧縮とは？</p>



<p>コードの圧縮とは、改行やスペースやコメントなど、無駄な記述を省いてファイルサイズを小さくすること。</p>





<p>必要なコードは消されないので安心してくださいね。</p>







<p class="point"><i class="fa fa-check" aria-hidden="true"></i> 画像の遅延読み込みとは？</p>



<p>ページを開いたとき、画面外の画像ってどうせ見えないですよね？</p>





<p>Autoptimizeの導入により、画面外の画像はあとで読み込むように設定できます。</p>





<p>もちろん、最初にすべての画像を読み込むより、表示速度も向上します。</p>



<h3 class="wp-block-heading">導入方法</h3>



<p>こちらでていねいに解説していますので参考ください。</p>


<div class="related_article cf typesimple"><a href="https://koaramarch.com/autoptimize" class="related_article__link"><figure class="eyecatch thum"><img width="486" height="290" src="https://koaramarch.com/wp-content/uploads/2020/06/アイキャッチ-4-486x290.jpg" class="attachment-home-thum size-home-thum wp-post-image" alt="Autoptimizeプラグインの設定方法【注意点あり】" decoding="async" /></figure><div class="meta inbox"><p class="ttl" data-labeltext="関連記事">Autoptimizeプラグインの設定方法【注意点あり】</p><time class="time__date date gf undo">2020年7月30日</time></div></a></div>




<div class="supplement warning">画像の遅延読み込みは、表示が崩れたりすることもあります。</p>
<p>実際に自サイトのページを読み込んでみて画面を確認してみてください。<br />
※特にスマホ画面で確認されることをおすすめします。<br />
</div>



<h2 class="wp-block-heading">③WP Fastest Cacheプラグイン</h2>



<div class="wp-block-image"><figure class="aligncenter"><img decoding="async" width="941" height="316" src="https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-16-054637.jpg" alt="③WP Fastest Cacheプラグイン" class="wp-image-12928" srcset="https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-16-054637.jpg 941w, https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-16-054637-300x101.jpg 300w, https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-16-054637-768x258.jpg 768w" sizes="(max-width: 941px) 100vw, 941px" /></figure></div>





<p>以下について順に解説します。</p>



<ul><li>WP Fastest Cacheってどんなプラグイン？</li><li>WP Fastest Cacheの導入方法</li><li>WP Fastest Cache導入の注意点</li></ul>



<h3 class="wp-block-heading">WP Fastest Cacheってどんなプラグイン？</h3>



<p><span class="marker">WP Fastest Cacheプラグインは、キャッシュの活用を図るプラグイン。</span></p>




<div class="c_box intitle blue_box"><div class="box_title"><span>キャッシュとは？</span></div>
閲覧したサイトの情報を記憶して、次に速く読み込めるようにする機能のことです。<br />
</div>





<p>これを活用することで、表示速度を改善できます。</p>



<h3 class="wp-block-heading">導入方法</h3>



<p>こちらのサイトでていねいに解説されているので参考ください。</p>



<p><a href="https://tekito-style.me/columns/wordpress-plugin-fastest-cache" rel="nofollow">&gt;&gt;WP Fastest Cacheの使い方・設定方法【キャッシュ改善のおすすめプラグイン】</a></p>



<h3 class="wp-block-heading">注意点：カスタマイズしたら、キャッシュクリアをお忘れなく</h3>



<p>WP Fastest Cacheを導入すると、テーマのカスタマイズなどを行った際に、画面に反映されないことがよくあります。</p>





<p>それは、<span class="marker">カスタマイズ前のキャッシュが残ってしまうためです</span>。</p>





<p><strong>面倒ですが、カスタマイズを行った際はキャッシュをクリアするようにしましょう。</strong></p>





<p>▼キャッシュのクリアはWordPressのホーム画面からできます。</p>



<div class="wp-block-image"><figure class="aligncenter"><img decoding="async" width="315" height="110" src="https://koaramarch.com/wp-content/uploads/2020/02/image-3.png" alt="キャッシュのクリア" class="wp-image-6605" srcset="https://koaramarch.com/wp-content/uploads/2020/02/image-3.png 315w, https://koaramarch.com/wp-content/uploads/2020/02/image-3-300x105.png 300w" sizes="(max-width: 315px) 100vw, 315px" /></figure></div>



<h2 class="wp-block-heading">サイト速度改善に役立つお手軽プラグイン3選 まとめ</h2>



<div class="wp-block-image"><figure class="aligncenter"><img decoding="async" width="800" height="480" src="https://koaramarch.com/wp-content/uploads/2020/04/david-travis-5bYxXawHOQg-unsplash-1.jpg" alt="サイト速度改善に役立つお手軽プラグイン3選 まとめ" class="wp-image-10236" srcset="https://koaramarch.com/wp-content/uploads/2020/04/david-travis-5bYxXawHOQg-unsplash-1.jpg 800w, https://koaramarch.com/wp-content/uploads/2020/04/david-travis-5bYxXawHOQg-unsplash-1-300x180.jpg 300w, https://koaramarch.com/wp-content/uploads/2020/04/david-travis-5bYxXawHOQg-unsplash-1-768x461.jpg 768w" sizes="(max-width: 800px) 100vw, 800px" /></figure></div>





<p>いかがでしょうか。</p>





<p>すべて導入できましたら、再度PageSpeedInsightsにて表示速度を計測してみてください。<br>少し改善されていることと思います。</p>





<p><strong>プラグインを入れすぎると読み込みに時間がかかり、重くなりがちです。<br>なのでプラグインは厳選すべきではあります。</strong></p>





<p>とはいえ、今回紹介したプラグイン3種はあまり時間をかけずに表示速度の改善が図れるので、サクッと解決したい人には超おすすめです。</p>




<div class="c_box intitle blue_box"><div class="box_title"><span>コアラのまとめ</span></div>
<p>サイト速度改善に役立つプラグインならこの3つ</p>
<ol>
<li><strong>Compress JPEG &#038; PNG imagesプラグイン</strong><br />圧縮してくれます。</li>
<li><strong>Autoptimizeプラグイン</strong><br />コードや画像の最適化をしてくれます。</li>
<li><strong>WP Fastest Cacheプラグイン</strong><br />キャッシュを活用することで速く読み込めるようになります。</li>
</ol>
</div>





<p>この記事が少しでもお役に立ちますと幸いです。</p>




<div class="related_article cf typesimple"><a href="https://koaramarch.com/image-optimize" class="related_article__link"><figure class="eyecatch thum"><img width="486" height="290" src="https://koaramarch.com/wp-content/uploads/2020/06/アイキャッチ-20-486x290.png" class="attachment-home-thum size-home-thum wp-post-image" alt="" decoding="async" /></figure><div class="meta inbox"><p class="ttl" data-labeltext="関連記事">【画像最適化】WordPressに画像を掲載するまでの手順を解説</p><time class="time__date date gf undo">2020年8月1日</time></div></a></div>


<div class="related_article cf typesimple"><a href="https://koaramarch.com/pagespeedinsights" class="related_article__link"><figure class="eyecatch thum"><img width="486" height="290" src="https://koaramarch.com/wp-content/uploads/2020/05/アイキャッチ-11-1-1-486x290.jpg" class="attachment-home-thum size-home-thum wp-post-image" alt="【最新版】PageSpeedInsightsの使い方と計測結果の見方を解説" decoding="async" /></figure><div class="meta inbox"><p class="ttl" data-labeltext="関連記事">【最新版】PageSpeedInsightsの使い方と計測結果の見方を解説</p><time class="time__date date gf undo">2020年8月1日</time></div></a></div>



<p></p>The post <a href="https://koaramarch.com/faster-plugin">サイト速度改善に役立つプラグインならこの3つ【まるっと解決】</a> first appeared on <a href="https://koaramarch.com">コアラの行進ブログ</a>.]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【Gutenbergの使い方】高速化ショートカットテク10選！</title>
		<link>https://koaramarch.com/gutenberg-shortcut</link>
		
		<dc:creator><![CDATA[コアラ]]></dc:creator>
		<pubDate>Wed, 06 May 2020 20:00:08 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Gutenberg]]></category>
		<category><![CDATA[おすすめ！]]></category>
		<category><![CDATA[ブログの悩み]]></category>
		<guid isPermaLink="false">https://koaramarch.com/?p=11387</guid>

					<description><![CDATA[<p>そんな疑問が解決できる記事を書きました。 結論、Gutenbergに用意されているショートカットキーを使いこなしましょう。 本記事では、Gutenbergの使い方を僕も本当に良く使うショートカットキーに絞ってお伝えします...</p>
The post <a href="https://koaramarch.com/gutenberg-shortcut">【Gutenbergの使い方】高速化ショートカットテク10選！</a> first appeared on <a href="https://koaramarch.com">コアラの行進ブログ</a>.]]></description>
										<content:encoded><![CDATA[<div class="voice cf l"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/01/necchusyou_face_boy2.jpg" width="150" height="150"><figcaption class="name">ブロガーさん</figcaption></figure><div class="voicecomment">ワードプレスの新エディタ「Gutenberg（グーテンベルク）」を使っているのですが、ブロックの部品をいちいちマウスで選んだりするのが面倒なんです！</p>
<p>何か良い方法はありませんか？<br />
</div></div>



<p>そんな疑問が解決できる記事を書きました。</p>





<p>結論、<span class="marker">Gutenbergに用意されているショートカットキーを使いこなしましょう。</span></p>





<p>本記事では、Gutenbergの使い方を僕も本当に良く使うショートカットキーに絞ってお伝えします。</p>





<p style="text-align:left">作業効率を高めたい方は必読ですよ。 </p>





<p class="point"><i class="fa fa-check" aria-hidden="true"></i> 執筆者情報</p>


<div class="supplement border">
ブログを始めてから50記事ほどGuternbergで記事執筆を行いました。</p>
<p>エンジニアという仕事柄、PC作業が多く、PCのあらゆるショートカットキーを使いこなして効率化を図るのが得意です。<br />
</div>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">さっそく解説していきます。<br />
</div></div>



<p class="st-mcbox-title-2" style="font-weight: bold">＼当ブログで使用中のテーマ／</p>
<div class="btn-2 btn-2-blue">
<a href="https://px.a8.net/svt/ejp?a8mat=3BBJ96+6M5ER6+3PSE+639IQ" rel="nofollow">WordPressテーマ「スワロー」公式サイトはこちら</a>
<img decoding="async" border="0" width="1" height="1" src="https://www18.a8.net/0.gif?a8mat=3BBJ96+6M5ER6+3PSE+639IQ" alt="">
</div>





<h2 class="wp-block-heading">【Gutenbergの使い方】高速化ショートカットテク10選！</h2>



<div class="wp-block-image"><figure class="aligncenter"><img decoding="async" width="770" height="428" src="https://koaramarch.com/wp-content/uploads/2020/05/laurent-peignault-MTJxRri1UiI-unsplash-1.jpg" alt="【Gutenbergの使い方】高速化ショートカットテク10選！" class="wp-image-11551" srcset="https://koaramarch.com/wp-content/uploads/2020/05/laurent-peignault-MTJxRri1UiI-unsplash-1.jpg 770w, https://koaramarch.com/wp-content/uploads/2020/05/laurent-peignault-MTJxRri1UiI-unsplash-1-300x167.jpg 300w, https://koaramarch.com/wp-content/uploads/2020/05/laurent-peignault-MTJxRri1UiI-unsplash-1-768x427.jpg 768w" sizes="(max-width: 770px) 100vw, 770px" /></figure></div>



<p>まずはショートカットキーを一覧でご紹介。</p>



<p><span class="marker">Gutenbergで僕がよく使うショートカットキーだけを10個厳選しました。</span></p>



<table class="wp-block-table">
    <tbody>
        <tr style="background-color: #e7f5fe;">
            <td>操作内容</td>
            <td><b>Windows</b></td>
            <td><b>Mac</b></td>
        </tr>
        <tr>
            <td>変更を保存</td>
            <td>Ctrl + S</td>
            <td>⌘S</td>
        </tr>
        <tr>
            <td>太字</td>
            <td>Ctrl + B</td>
            <td>⌘B</td>
        </tr>
        <tr>
            <td>直前の変更を取り消す</td>
            <td>Ctrl + Z</td>
            <td>⌘Z</td>
        </tr>
        <tr>
            <td>選択したテキストをリンクに変換</td>
            <td>Ctrl + K</td>
            <td>⌘K</td>
        </tr>
        <tr>
            <td>ブロックを上に作成</td>
            <td>Ctrl + Alt + T</td>
            <td>⌥⌘T</td>
        </tr>
        <tr>
            <td>ブロックを下に作成</td>
            <td>Ctrl + Alt + Y</td>
            <td>⌥⌘Y</td>
        </tr>
        <tr>
            <td>ブロックの複製</td>
            <td>Ctrl + Shift + D </td>
            <td>⇧⌘D</td>
        </tr>
        <tr>
            <td>ブロックの削除</td>
            <td>Shift + Alt + Z </td>
            <td>⌃⌥Z</td>
        </tr>
        <tr>
            <td>ブロックタイプ変更</td>
            <td>/</td>
            <td>/</td>
        </tr>
        <tr>
            <td>ショートカットキー一覧の表示</td>
            <td>Shift + Alt + H</td>
            <td>⌃⌥H</td>
        </tr>
    </tbody>
</table>




<div class="supplement border">Gutenbergの特徴であるブロック要素で使えるショートカットが数多くありますね。</div>





<p><strong>これらを使いこなすことができれば、マウスを使う回数が減り、作業効率が格段に向上しますよ。</strong></p>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">使っていくと、案外すぐに覚えられますので、意識して使っていきましょう。<br />
</div></div>



<p>それでは順にみていきます。</p>



<h3 class="wp-block-heading">まずは基本の4つ</h3>



<table class="wp-block-table">
    <tbody>
        <tr style="background-color: #e7f5fe;">
            <td>操作内容</td>
            <td><b>Windows</b></td>
            <td><b>Mac</b></td>
        </tr>
        <tr>
            <td>変更を保存</td>
            <td>Ctrl + S</td>
            <td>⌘S</td>
        </tr>
        <tr>
            <td>太字</td>
            <td>Ctrl + B</td>
            <td>⌘B</td>
        </tr>
        <tr>
            <td>直前の変更を取り消す</td>
            <td>Ctrl + Z</td>
            <td>⌘Z</td>
        </tr>
        <tr>
            <td>選択したテキストをリンクに変換</td>
            <td>Ctrl + K</td>
            <td>⌘K</td>
        </tr>
    </tbody>
</table>



<p>これは、MicrosoftのOfficeやほかのアプリでも似たキー操作なのでとっつきやすいのではないでしょうか。</p>




<div class="supplement border">
つまり、Gutenbergに限らず覚えておいたほうがよいキー操作と言えますね。<br />
</div>





<p>最後のリンクに変換する方法だけご紹介。<br>※Windowsで説明します。</p>





<p>▼①リンクを貼りたい文を選択してから、Ctrl + Kを押します。</p>



<div class="wp-block-image fig_solid"><figure class="aligncenter"><img decoding="async" width="770" height="428" src="https://koaramarch.com/wp-content/uploads/2020/05/28.png" alt="Ctrl + Kでリンクに変換する方法" class="wp-image-13224" srcset="https://koaramarch.com/wp-content/uploads/2020/05/28.png 770w, https://koaramarch.com/wp-content/uploads/2020/05/28-300x167.png 300w, https://koaramarch.com/wp-content/uploads/2020/05/28-768x427.png 768w" sizes="(max-width: 770px) 100vw, 770px" /></figure></div>





<p>▼②あとは任意のリンクを入力すれば完成。</p>



<div class="wp-block-image fig_solid"><figure class="aligncenter"><img decoding="async" width="770" height="428" src="https://koaramarch.com/wp-content/uploads/2020/05/29.png" alt="リンクを入力すれば完成" class="wp-image-13225" srcset="https://koaramarch.com/wp-content/uploads/2020/05/29.png 770w, https://koaramarch.com/wp-content/uploads/2020/05/29-300x167.png 300w, https://koaramarch.com/wp-content/uploads/2020/05/29-768x427.png 768w" sizes="(max-width: 770px) 100vw, 770px" /></figure></div>





<p>▼（補足）赤枠部を押せば、新しいタブで開く設定やリンク属性を追加できます。</p>



<div class="wp-block-image fig_solid"><figure class="aligncenter"><img decoding="async" width="722" height="310" src="https://koaramarch.com/wp-content/uploads/2020/05/画像rel.jpg" alt="新しいタブで開く設定やリンク属性を追加" class="wp-image-11424" srcset="https://koaramarch.com/wp-content/uploads/2020/05/画像rel.jpg 722w, https://koaramarch.com/wp-content/uploads/2020/05/画像rel-300x129.jpg 300w" sizes="(max-width: 722px) 100vw, 722px" /></figure></div>



<p>上図のリンク属性などの意味については以下を参照ください。</p>



<ul><li>Open in New Tab：リンク先を新しいタブで開く</li><li>Add &#8220;nofollow to link&#8221;：リンク先をクロールしない</li><li>Add &#8220;sponsored&#8221; to link&#8221;：広告リンク</li></ul>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">ちなみに、リンク解除したい場合、Windowsなら、Ctrl+ Shift + K。Macなら、⇧⌘Kでできます。<br />
</div></div>



<h3 class="wp-block-heading">知っておくと便利なブロックショートカット2つ</h3>



<table class="wp-block-table">
    <tbody>
        <tr style="background-color: #e7f5fe;">
            <td>操作内容</td>
            <td><b>Windows</b></td>
            <td><b>Mac</b></td>
        </tr>
        <tr>
            <td>ブロックを上に作成</td>
            <td>Ctrl + Alt + T</td>
            <td>⌥⌘T</td>
        </tr>
        <tr>
            <td>ブロックを下に作成</td>
            <td>Ctrl + Alt + Y</td>
            <td>⌥⌘Y</td>
        </tr>
    </tbody>
</table>



<p>ブロックとブロックの間に新たなブロックを挿入したいときに便利ですね。</p>





<p>ブロックを下に作成するショートカットキーだけご覧いただきましょう。</p>





<p>▼任意のブロックでCtrl + Alt + Y を押してみましょう。</p>



<div class="wp-block-image fig_solid"><figure class="aligncenter"><img decoding="async" width="770" height="428" src="https://koaramarch.com/wp-content/uploads/2020/05/30.png" alt="Ctrl + Alt + Y でブロックを下に作成" class="wp-image-13226" srcset="https://koaramarch.com/wp-content/uploads/2020/05/30.png 770w, https://koaramarch.com/wp-content/uploads/2020/05/30-300x167.png 300w, https://koaramarch.com/wp-content/uploads/2020/05/30-768x427.png 768w" sizes="(max-width: 770px) 100vw, 770px" /></figure></div>



<p>選択中のブロックの下側に新たなブロックが作成されました。</p>





<p>Ctrl + Alt + Tなら、上側に新たなブロックが作成されます。</p>



<h3 class="wp-block-heading">高速化に持ってこい！ブロックショートカット3つ</h3>



<table class="wp-block-table">
    <tbody>
        <tr style="background-color: #e7f5fe;">
            <td>操作内容</td>
            <td><b>Windows</b></td>
            <td><b>Mac</b></td>
        </tr>
        <tr>
            <td>ブロックの複製</td>
            <td>Ctrl + Shift + D </td>
            <td>⇧⌘D</td>
        </tr>
        <tr>
            <td>ブロックの削除</td>
            <td>Shift + Alt + Z </td>
            <td>⌃⌥Z</td>
        </tr>
        <tr>
            <td>ブロックタイプ変更</td>
            <td>/</td>
            <td>/</td>
        </tr>
    </tbody>
</table>



<p>マウス操作でももちろんできますが、結構めんどくさいです。</p>



<p>ショートカットキーを覚えてサクッと行いましょう。</p>





<p>ここで押さえておきたいのが<strong>「ブロックタイプの変更」</strong>ですね。</p>





<p>▼通常、マウス操作で下図赤枠のブロックの追加ボタンをクリックすれば、各ブロックタイプが表示されますが・・・</p>



<div class="wp-block-image fig_solid"><figure class="aligncenter"><img decoding="async" width="850" height="631" src="https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-04-171218-1.jpg" alt="ブロックタイプの追加" class="wp-image-11478" srcset="https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-04-171218-1.jpg 850w, https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-04-171218-1-300x223.jpg 300w, https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-04-171218-1-768x570.jpg 768w" sizes="(max-width: 850px) 100vw, 850px" /></figure></div>





<p>▼「<strong>/（スラッシュ）</strong>」を入力しても、ブロックタイプが出てきます。</p>



<div class="wp-block-image fig_solid"><figure class="aligncenter"><img decoding="async" width="782" height="540" src="https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-04-171526-1.jpg" alt="" class="wp-image-11479" srcset="https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-04-171526-1.jpg 782w, https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-04-171526-1-300x207.jpg 300w, https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-04-171526-1-768x530.jpg 768w" sizes="(max-width: 782px) 100vw, 782px" /></figure></div>



<p>続けて、日本語でブロックタイプを入力すれば、ブロックタイプが変換できます。<br>例）/リスト、/ショート など。</p>





<p>一部のタイプは、英語一文字で呼び出せるので覚えておくと便利です。</p>



<ul><li>/h　：カスタムHTML編集</li><li>/i　 ：画像挿入</li></ul>



<h3 class="wp-block-heading">忘れたときはこれで一覧表示！</h3>



<table class="wp-block-table">
    <tbody>
        <tr style="background-color: #e7f5fe;">
            <td>操作内容</td>
            <td><b>Windows</b></td>
            <td><b>Mac</b></td>
        </tr>
        <tr>
            <td>ショートカットキー一覧の表示</td>
            <td>Shift + Alt + H</td>
            <td>⌃⌥H</td>
        </tr>
    </tbody>
</table>



<p>最後に、ショートカットキーを忘れた時は、上表のキーで一覧表示をしましょう。</p>



<div class="wp-block-image fig_solid"><figure class="aligncenter is-resized"><img decoding="async" src="https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-24-053139-2.jpg" alt="ショートカットキー一覧1" class="wp-image-13259" width="816" height="612" srcset="https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-24-053139-2.jpg 800w, https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-24-053139-2-300x225.jpg 300w, https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-24-053139-2-768x576.jpg 768w" sizes="(max-width: 816px) 100vw, 816px" /></figure></div>



<div class="wp-block-image fig_solid"><figure class="aligncenter"><img decoding="async" width="800" height="500" src="https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-24-053156-4.jpg" alt="ショートカットキー一覧2" class="wp-image-13257" srcset="https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-24-053156-4.jpg 800w, https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-24-053156-4-300x188.jpg 300w, https://koaramarch.com/wp-content/uploads/2020/05/コメント-2020-05-24-053156-4-768x480.jpg 768w" sizes="(max-width: 800px) 100vw, 800px" /></figure></div>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">このショートカットキー自体が少し覚えづらいんですけどね。<br />
</div></div>



<p></p>



<h2 class="wp-block-heading">【番外編】マークダウン記法も覚えておくと便利です</h2>



<p>クラシックエディタでも対応していると思いますが、Gutenbergでも<span class="marker">マークダウン記法を少し覚えておくだけで、スピードアップが図れますよ。</span></p>





<p>以下の3つだけおさえておきましょう。<br>※␣はスペースキーです。</p>



<ul><li>##␣　：見出し2（###␣なら、見出し3）</li><li>*␣　：リスト</li><li>1.␣　：番号付きリスト</li></ul>



<p>上記を段落ブロックで入力すれば、すぐに各ブロックに変換できます。</p>



<h2 class="wp-block-heading">【Gutenbergの使い方】高速化ショートカットテク10選！まとめ</h2>



<div class="wp-block-image"><figure class="aligncenter"><img decoding="async" width="800" height="480" src="https://koaramarch.com/wp-content/uploads/2020/04/david-travis-5bYxXawHOQg-unsplash-1.jpg" alt="【Gutenbergの使い方】高速化ショートカットテク10選！まとめ" class="wp-image-10236" srcset="https://koaramarch.com/wp-content/uploads/2020/04/david-travis-5bYxXawHOQg-unsplash-1.jpg 800w, https://koaramarch.com/wp-content/uploads/2020/04/david-travis-5bYxXawHOQg-unsplash-1-300x180.jpg 300w, https://koaramarch.com/wp-content/uploads/2020/04/david-travis-5bYxXawHOQg-unsplash-1-768x461.jpg 768w" sizes="(max-width: 800px) 100vw, 800px" /></figure></div>



<p>Gutenbergショートカットキー一覧を再掲します。</p>



<table class="wp-block-table">
    <tbody>
        <tr style="background-color: #e7f5fe;">
            <td>操作内容</td>
            <td><b>Windows</b></td>
            <td><b>Mac</b></td>
        </tr>
        <tr>
            <td>変更を保存</td>
            <td>Ctrl + S</td>
            <td>⌘S</td>
        </tr>
        <tr>
            <td>太字</td>
            <td>Ctrl + B</td>
            <td>⌘B</td>
        </tr>
        <tr>
            <td>直前の変更を取り消す</td>
            <td>Ctrl + Z</td>
            <td>⌘Z</td>
        </tr>
        <tr>
            <td>選択したテキストをリンクに変換</td>
            <td>Ctrl + K</td>
            <td>⌘K</td>
        </tr>
        <tr>
            <td>ブロックを上に作成</td>
            <td>Ctrl + Alt + T</td>
            <td>⌥⌘T</td>
        </tr>
        <tr>
            <td>ブロックを下に作成</td>
            <td>Ctrl + Alt + Y</td>
            <td>⌥⌘Y</td>
        </tr>
        <tr>
            <td>ブロックの複製</td>
            <td>Ctrl + Shift + D </td>
            <td>⇧⌘D</td>
        </tr>
        <tr>
            <td>ブロックの削除</td>
            <td>Shift + Alt + Z </td>
            <td>⌃⌥Z</td>
        </tr>
        <tr>
            <td>ブロックタイプ変更</td>
            <td>/</td>
            <td>/</td>
        </tr>
        <tr>
            <td>ショートカットキー一覧の表示</td>
            <td>Shift + Alt + H</td>
            <td>⌃⌥H</td>
        </tr>
    </tbody>
</table>



<p>ぜひこれらを使いこなして、記事執筆の高速化をはかってみてください。</p>





<p><strong>数十分単位の執筆時間削減</strong>につながると思います。</p>



<h3 class="wp-block-heading">【余談】今後のGutenberg</h3>



<p>最後にこちらのアンケート結果をご紹介。</p>



<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【WPブロガーアンケート】<a href="https://twitter.com/hashtag/%E6%8B%A1%E6%95%A3%E5%B8%8C%E6%9C%9B?src=hash&amp;ref_src=twsrc%5Etfw">#拡散希望</a><br><br>WordPressを使ってるブロガーのみなさんに聞きたいまめ&#x1f603;&#x1f3b5;<br><br>みなさん、WPで記事書くときは、旧エディタかグーテンベルクどちら使ってるまめか&#x2049;&#xfe0f;<br><br>おまめは旧エディタ(Classic Editor)からなかなか抜け出せないまめ&#x1f4a6;<a href="https://twitter.com/hashtag/%E5%88%9D%E5%BF%83%E8%80%85%E3%83%96%E3%83%AD%E3%82%AC%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#初心者ブロガー</a><a href="https://twitter.com/hashtag/%E3%83%96%E3%83%AD%E3%82%B0%E5%88%9D%E5%BF%83%E8%80%85?src=hash&amp;ref_src=twsrc%5Etfw">#ブログ初心者</a><a href="https://twitter.com/hashtag/%E3%83%96%E3%83%AD%E3%82%B0%E6%9B%B8%E3%81%91?src=hash&amp;ref_src=twsrc%5Etfw">#ブログ書け</a></p>— おまめ Lv.44@ブログ毎日更新GW中(理由は固定ツイートに) (@omame_no_okane) <a href="https://twitter.com/omame_no_okane/status/1255361146456084481?ref_src=twsrc%5Etfw">April 29, 2020</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



<p>（おまめさん、ありがとうございます。）</p>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/03/コアラ1.jpg" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">
旧エディタのクラシックエディタ使用者が圧倒的に多いですね。</p>
<p>Gutenbergはまだまだ普及していないのかも。。。<br />
</div></div>





<p>最近ブログを始めた僕は、クラシックエディタの良さを知りません。</p>





<p>HTMLコードでも書けなくはないですが、</p>



<ul><li>別エディタで作ったものをコピペするのが面倒</li><li>画像のリンクを作成したりするのが面倒</li></ul>



<p>上記のような理由より、今のところGutenbergに落ち着いています。</p>





<p>本記事ではGutenbergの使い方をショートカットキーの使い方に絞ってお伝えしました。</p>



<p>新エディタGuternbergは今後ますます発展、機能拡充していくと思います。</p>





<p>クラシックエディタは今のところ、<strong>2021年末まで</strong>サポートされるそうですが、いずれ移行の時期がきます。</p>



<p>今のうちにGutenbergになれておくのも良いかもしれませんね。</p>





<p>記事内の図が見づらいなどありましたら、Twitter（<a href="https://twitter.com/KoaraCom?ref_src=twsrc%5Etfw" class="aioseop-link">@KoaraCom</a>）にてご連絡ください。早急に対応します。</p>


<div class="related_article cf typesimple"><a href="https://koaramarch.com/addquicktag" class="related_article__link"><figure class="eyecatch thum"><img width="486" height="290" src="https://koaramarch.com/wp-content/uploads/2020/05/アイキャッチ-9-1-486x290.jpg" class="attachment-home-thum size-home-thum wp-post-image" alt="【最新版】AddQuicktagの使い方【Gutenberg対応】" decoding="async" /></figure><div class="meta inbox"><p class="ttl" data-labeltext="関連記事">【最新版】AddQuicktagの使い方【Gutenberg対応】</p><time class="time__date date gf undo">2020年5月29日</time></div></a></div>


<div class="related_article cf typesimple"><a href="https://koaramarch.com/wordpress-swallow-customize" class="related_article__link"><figure class="eyecatch thum"><img width="486" height="290" src="https://koaramarch.com/wp-content/uploads/2020/02/2-486x290.jpg" class="attachment-home-thum size-home-thum wp-post-image" alt="ワードプレステーマ・スワロー 投稿タイトル下のSNSボタンを削除するカスタマイズ" decoding="async" /></figure><div class="meta inbox"><p class="ttl" data-labeltext="関連記事">ワードプレス・スワローカスタマイズ 投稿タイトル下のSNSボタンを削除</p><time class="time__date date gf undo">2020年6月6日</time></div></a></div>The post <a href="https://koaramarch.com/gutenberg-shortcut">【Gutenbergの使い方】高速化ショートカットテク10選！</a> first appeared on <a href="https://koaramarch.com">コアラの行進ブログ</a>.]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>夫婦のお金の管理は共通口座で一元化せよ！【我が家の最適解】</title>
		<link>https://koaramarch.com/common-household-management</link>
		
		<dc:creator><![CDATA[コアラ]]></dc:creator>
		<pubDate>Mon, 27 Jan 2020 09:00:27 +0000</pubDate>
				<category><![CDATA[家計管理]]></category>
		<category><![CDATA[おすすめ！]]></category>
		<category><![CDATA[楽天証券]]></category>
		<guid isPermaLink="false">https://koaramarch.com/?p=3934</guid>

					<description><![CDATA[<p>こんな悩みを解決できる記事を書きました。 　 結論、夫婦で使用する共通口座を使った方法で解決できるかもですよ！ 　 ここだけの話をすると・・・これから紹介する方法で、我が家は夫婦2人で生活している時だと年間300万近く貯...</p>
The post <a href="https://koaramarch.com/common-household-management">夫婦のお金の管理は共通口座で一元化せよ！【我が家の最適解】</a> first appeared on <a href="https://koaramarch.com">コアラの行進ブログ</a>.]]></description>
										<content:encoded><![CDATA[<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2019/10/-e1572438031439.png" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">こんにちは、コアラ（<a href="https://twitter.com/koaraCom?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @koaraCom</a><script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>）です。<br />
</div></div>


<div class="voice cf l"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2020/01/necchusyou_face_boy2.jpg" width="150" height="150"><figcaption class="name">男性</figcaption></figure><div class="voicecomment">
・夫（妻）がお金を月々いくら使っているのか分からない</p>
<p>・貯金ができない</p>
<p>・家計管理を毎日するのは大変だ。何か良い方法はないか？</p>
</div></div>



<p>こんな悩みを解決できる記事を書きました。 </p>



<p>　</p>



<p>結論、<span class="marker">夫婦で使用する共通口座を使った方法で解決できるかもですよ！</span></p>



<p>　</p>



<p>ここだけの話をすると・・・<br>これから紹介する方法で、我が家は夫婦2人で生活している時だと<strong>年間300万</strong>近く貯金することができましたよ。</p>



<p>手間のかからない方法なので、受け入れられると思います。</p>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2019/10/-e1572438031439.png" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">さっそく解説していきます。<br />
</div></div>


<div class="supplement warning">この記事を読んで分かること<br />
・共通口座を使ったお金の管理法とそのメリット<br />
</div>



<h2 class="wp-block-heading">共通口座を使ったお金の管理法【我が家の最適解】 </h2>



<div class="wp-block-image"><figure class="aligncenter"><img decoding="async" width="640" height="427" src="https://koaramarch.com/wp-content/uploads/2020/01/Benedick-·-SlidesCarnival-のコピー-44-1.jpg" alt="夫婦のお金の管理は共通口座で一元化せよ【我が家の最適解】" class="wp-image-3925" srcset="https://koaramarch.com/wp-content/uploads/2020/01/Benedick-·-SlidesCarnival-のコピー-44-1.jpg 640w, https://koaramarch.com/wp-content/uploads/2020/01/Benedick-·-SlidesCarnival-のコピー-44-1-300x200.jpg 300w" sizes="(max-width: 640px) 100vw, 640px" /></figure></div>



<p>まずはやり方から説明。上図が我が家の夫婦で共通口座を使ったお金の管理法です！ <br>※送金額はでたらめです。</p>



<p>ポイントは以下の5つ。</p>



<ol><li>夫と妻それぞれの口座はネット銀行で開設</li><li>共通口座はなんでもいい</li><li>自動入金サービス、送金サービスを使う</li><li>支払いは基本クレジットカードで</li><li>月の終わりに支出をチェック！</li></ol>



<p>順に解説します。 </p>



<h3 class="wp-block-heading">夫と妻それぞれの口座はネット銀行で開設 </h3>



<p><span class="marker">ネット銀行は入金も送金も規定の上限回数以内なら手数料が無料です。</span></p>



<p>なのでネット銀行が断然オススメ。</p>



<p>給料を振込む口座をネット銀行にしておいて、そこから出金していきます。</p>



<h3 class="wp-block-heading">夫婦の共通口座はなんでもいい</h3>



<p>夫婦間共通で使用する口座をどちらかの名義で用意しましょう。</p>



<p>ここはお好きな銀行でどうぞ。</p>


<div class="voice cf l"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2019/10/マミー.png" width="150" height="150"><figcaption class="name">妻マミー</figcaption></figure><div class="voicecomment">我が家は特に使用していなかった私のゆうちょ口座を夫婦の共通口座としました。<br />
</div></div>



<h3 class="wp-block-heading">自動入金サービス、送金サービスを使う</h3>



<p>ネット銀行の<span class="marker">自動入金サービス、送金サービスを活用しましょう。</span></p>



<p>もちろん一回設定しておけば、あとは自動でやってくれます。</p>


<div class="supplement warning">
共通口座には使う分だけ入れること。</p>
<p>夫婦の共通口座はあくまで生活費。<br />
貯金をする口座ではないです。</p>
<p>必要以上に入金すると、<strong>贈与税</strong>とみなされる可能性もありますので注意してくださいね。<br />
</div>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2019/10/-e1572438031439.png" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">残高が2桁万円程度に落ち着けておくとよさそうです。</p>
<p>もしそれ以上にお金が貯まっていくのなら、送金金額を見直してそれぞれの口座への貯金にまわしてみましょう。<br />
</div></div>



<h3 class="wp-block-heading">支払いは基本クレジットカードで</h3>


<div class="supplement border">
引き落とし先を共通口座にしたクレジットカードを用意します。<br />
普段はクレジットカードで引き落とします。<br />
</div>



<p>我が家では<strong>クレジットカードが使えるところなら、ほとんどどこでも使いますね。</strong></p>



<p>　</p>



<p>有名なのが楽天カードですね。<br>100円1ポイントなので、実質1%OFFですね。</p>



<p>　</p>



<p>キャンペーンもよくやっていますし、ポイントがざくざく貯まりますよ！</p>



<p>　</p>



<p class="point"><i class="fa fa-check" aria-hidden="true"></i> 家族カードなら管理しやすい</p>



<p>さらに！<span class="marker">家族カードなら明細がひとつになって管理がとても楽になりますね。</span></p>


<div class="supplement border">
楽天は家族カードではなくて別々に作ったほうが、新規入会キャンペーンでポイントも別々にもらえてお得ではあるようです。<br />
</div>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2019/10/-e1572438031439.png" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">
我が家は管理が楽なので楽天で家族カードを作りました。<br />
</div></div>



<p class="st-mcbox-title-2">＼ 年会費永年無料／</p>
<div class="btn-2 btn-2-orange">
<a href="//af.moshimo.com/af/c/click?a_id=1729560&amp;p_id=58&amp;pc_id=58&amp;pl_id=669&amp;guid=ON" rel="nofollow">楽天カードのお申込みはこちら</a><img decoding="async" src="//i.moshimo.com/af/i/impression?a_id=1729560&amp;p_id=58&amp;pc_id=58&amp;pl_id=669" width="1" height="1" style="border:none;">
</div>



<p>　</p>



<p class="point"><i class="fa fa-check" aria-hidden="true"></i> 現金は毎月3万円</p>



<p>さすがに現金がないと困るときもあるので、我が家では月の初めに<strong>3万円</strong>補充します。</p>



<p>月の終わりに使った金額を把握してから戻し、また3万円補充します。</p>



<p>これなら常に使った金額が分かりますね。</p>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2019/10/-e1572438031439.png" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">
たいていはクレジットで支払うので、まあ余りますね。<br />
</div></div>



<h3 class="wp-block-heading">月の終わりに支出をチェック！</h3>



<p>最後は月の終わりに支出をチェックしてみましょう。</p>



<p>「え？どうやって？」</p>



<p>　</p>



<p>簡単ですね。<span class="marker">クレジットカードの明細を確認しましょう。</span></p>



<p>それと使用した現金分を合わせたのが支出です。</p>



<p>　</p>



<p>「支出はカテゴリー別に分けないの？」</p>



<p>我が家はこのあたりはテキトーですね^^;</p>



<ul><li>「なんか最近支出が多くなってきているな。どうして？」</li><li>「今月やたら支出が多い。どうして？」</li></ul>



<p>こんな時に限り細かくチェックするようにしています。</p>



<h2 class="wp-block-heading">夫婦のお金の管理は共通口座で一元化！メリットは「見える化」</h2>



<div class="wp-block-image"><figure class="aligncenter"><img decoding="async" width="640" height="427" src="https://koaramarch.com/wp-content/uploads/2020/01/Benedick-·-SlidesCarnival-のコピー-44-1.jpg" alt="夫婦のお金の管理は共通口座で一元化せよ【我が家の最適解】" class="wp-image-3925" srcset="https://koaramarch.com/wp-content/uploads/2020/01/Benedick-·-SlidesCarnival-のコピー-44-1.jpg 640w, https://koaramarch.com/wp-content/uploads/2020/01/Benedick-·-SlidesCarnival-のコピー-44-1-300x200.jpg 300w" sizes="(max-width: 640px) 100vw, 640px" /></figure></div>



<p>再掲します。</p>



<p>共通口座で一元化すれば管理が楽ちん。</p>



<p>もうひとつメリットをあげるとすれば・・・ズバリ「<span class="marker">お金の見える化</span>」です。</p>



<ol><li>夫婦で生活費を共有、管理できる &#x27a1;「<strong>支出の見える化</strong>」</li><li>貯金と生活費を区別できる &#x27a1;「<strong>貯金の見える化</strong>」 </li></ol>



<p>順にみていきましょう。 </p>



<h3 class="wp-block-heading">夫婦で生活費を共有、管理できる &#x27a1;「支出の見える化」</h3>



<p>お金の出所をひとつにすることで、<strong>夫婦で日々の生活費を共有、管理ができます。</strong></p>



<p class="has-medium-font-size">「<span class="red">支出の見える化</span>」</p>



<p>ですね。</p>



<h3 class="wp-block-heading">貯金と生活費を区別できる &#x27a1; 「貯金の見える化」 </h3>



<p>あらかじめ貯金を避けているので、<strong>自動で貯金が貯まる仕組みができます</strong>。</p>



<p class="has-medium-font-size">「<span class="red">貯金の見える化</span>」</p>



<p>ですね。</p>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2019/10/-e1572438031439.png" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">両者の見える化によって、「知らず知らずのうちに浪費癖がついていても、気づけない！」というケースがなくなりますよ。<br />
</div></div>



<h2 class="wp-block-heading">マネーフォワードアプリで完全に見える化できる！ </h2>



<p>さらに、あなたが証券口座を開設して投資をしているのなら、<a href="https://play.google.com/store/apps/details?id=com.moneyforward.android.app&amp;hl=ja">マネーフォワード</a>というアプリがオススメ。</p>



<p>　</p>



<p>このアプリを使えば、<strong>すべての口座が丸見えに！完全に見える化</strong>ができます。<br>※セキュリティには配慮ください。</p>



<p>　</p>



<p>これについてはまた記事にしたいと思いますので、お待ちくださいね。</p>



<h2 class="wp-block-heading">夫婦のお金の管理は共通口座で一元化せよ！【我が家の最適解】 まとめ</h2>



<div class="wp-block-image"><figure class="aligncenter"><img decoding="async" width="770" height="513" src="https://koaramarch.com/wp-content/uploads/2020/01/david-travis-5bYxXawHOQg-unsplash.jpg" alt="夫婦のお金の管理は共通口座で一元化せよ！【我が家の最適解】 まとめ" class="wp-image-4652" srcset="https://koaramarch.com/wp-content/uploads/2020/01/david-travis-5bYxXawHOQg-unsplash.jpg 770w, https://koaramarch.com/wp-content/uploads/2020/01/david-travis-5bYxXawHOQg-unsplash-300x200.jpg 300w, https://koaramarch.com/wp-content/uploads/2020/01/david-travis-5bYxXawHOQg-unsplash-768x512.jpg 768w" sizes="(max-width: 770px) 100vw, 770px" /></figure></div>



<p>いかがでしょうか。</p>



<p>　</p>



<p>一回設定してしまえば、あとは月1回チェックするだけ。</p>



<p><strong>貯金も最初に避けているため、自動で貯まる仕組みがこれで完成ですね！</strong></p>



<p>これが我が家の最適解でした。</p>



<p>　</p>



<p>手間のかからない方法なので、簡単かつ貯金を確実に増やしたい方は参考にしてみてくださいね。</p>


<div>
    <span class="fr-border-titlePlus">コアラのまとめ</span>
</div>
<div class="fr-border-titlePlus2">
<ul class="no-border">
<li>夫婦で共通口座を使ってお金を管理すると、「<strong>お金の見える化</strong>」ができる！</li>
<li>家族で生活費を共有、管理できる &#x27a1;「<strong>支出の見える化</strong>」</li>
<li>貯金と生活費を区別できる &#x27a1; 「<strong>貯金の見える化</strong>」</li>
</ul>
</div>



<p>　</p>



<p>貯金ができるようになったら、お金にもコツコツ働いてもらいませんか？</p>



<p>つみたてNISAなら、有意義な時間を過ごしながらもお金にも働いてもらうことができますよ！</p>



<p>　</p>



<p>まだの方は、こちらの記事でつみたてNISAのシミュレーションから始めてみましょう。<br> <a href="https://koaramarch.com/rakuten-easy-simulation">&gt;&gt;【超かんたん】つみたてNISAを楽天証券でシミュレーション！</a> </p>



<p>　</p>



<p>Twitter（<a href="https://twitter.com/KoaraCom?ref_src=twsrc%5Etfw">@KoaraCom</a>）でも情報発信しております。<br>お気軽にフォローまたは感想をツイートください^^</p>The post <a href="https://koaramarch.com/common-household-management">夫婦のお金の管理は共通口座で一元化せよ！【我が家の最適解】</a> first appeared on <a href="https://koaramarch.com">コアラの行進ブログ</a>.]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>ブログ用おすすめPCスペックはこれ！PC初心者に分かりやすく解説</title>
		<link>https://koaramarch.com/for-pc-spec</link>
		
		<dc:creator><![CDATA[コアラ]]></dc:creator>
		<pubDate>Mon, 23 Dec 2019 09:00:43 +0000</pubDate>
				<category><![CDATA[副業・ブログ]]></category>
		<category><![CDATA[PC]]></category>
		<category><![CDATA[おすすめ！]]></category>
		<category><![CDATA[コアラ流時間革命]]></category>
		<category><![CDATA[ブログの悩み]]></category>
		<guid isPermaLink="false">https://koaramarch.com/?p=2226</guid>

					<description><![CDATA[<p>PCに詳しくない方のために、スペックを表す用語についても簡単に解説していきますね。 記事の信頼性 記事を書いている僕は、ITエンジニアとして8年働いています。 普段、様々なPCを触る機会がありますので、PCにはそれなりに...</p>
The post <a href="https://koaramarch.com/for-pc-spec">ブログ用おすすめPCスペックはこれ！PC初心者に分かりやすく解説</a> first appeared on <a href="https://koaramarch.com">コアラの行進ブログ</a>.]]></description>
										<content:encoded><![CDATA[<div class="voice cf l"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2019/10/necchusyou_face_boy1.png" width="150" height="150"><figcaption class="name">男性</figcaption></figure><div class="voicecomment">
コアラさん、ブログ用のPCに最適なおすすめのスペックを教えてくれない？</p>
<p>1台で事足りるスペックがいいな。<br />
</div></div>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2019/10/-e1572438031439.png" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">分かりました。そのような相談なら僕に任せてください！<br />
</div></div>



<p>PCに詳しくない方のために、スペックを表す用語についても簡単に解説していきますね。</p>


<div class="supplement ">
この記事を読んで分かること<br />
・ブログ用PCに最適なおすすめスペック<br />
・スペックを表す用語について<br />
</div>



<p class="point"><i class="fa fa-check" aria-hidden="true"></i> 記事の信頼性</p>



<p>記事を書いている僕は、ITエンジニアとして8年働いています。</p>



<p>普段、様々なPCを触る機会がありますので、PCにはそれなりに詳しいです。</p>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2019/10/-e1572438031439.png" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">さっそく解説していきます。<br />
</div></div>



<h2 class="wp-block-heading">ブログ用おすすめPCスペックはこれ！</h2>



<figure class="wp-block-image"><img decoding="async" width="800" height="600" src="https://koaramarch.com/wp-content/uploads/2019/12/laptop-2298286_1280.jpg" alt="ブログ用おすすめPCスペックはこれ" class="wp-image-6056" srcset="https://koaramarch.com/wp-content/uploads/2019/12/laptop-2298286_1280.jpg 800w, https://koaramarch.com/wp-content/uploads/2019/12/laptop-2298286_1280-300x225.jpg 300w, https://koaramarch.com/wp-content/uploads/2019/12/laptop-2298286_1280-768x576.jpg 768w" sizes="(max-width: 800px) 100vw, 800px" /></figure>



<p>もう一度ご要望の整理をしておきましょう。</p>



<ul><li>ブログ用PCにおすすめのPCスペック</li><li>動画や音楽を大量に保存する予定はない</li><li>1台で済ませたい （オールインワンのスペック）</li></ul>



<p></p>



<p>1台で済ませたいということなので、家庭用としても外出用としても使える「<strong>ノートPC」</strong>を前提にご提案します。</p>



<p>　</p>



<p>それでは、僕がブログ用におすすめするPCスペックはこちらになります。</p>



<div>
    <span class="fr-border-titlePlus">ブログ用おすすめPCスペック！</span>
</div>
<div class="fr-border-titlePlus2">
    <ul class="no-border">
        <li>CPU：Core i5</li>
        <li>メモリ：8GB</li>
        <li>SSD：256GB</li>
    </ul>
</div>



<p>　</p>



<p>この3点だけおさえておけば基本的にはOKです！</p>



<p>これはいわゆる、<strong>ミドルスペック</strong>というものになりますね。</p>



<p>　</p>



<p>と言っても、十分性能はいいのでご安心を。</p>



<p>　</p>



<p>この3点は一体何を表すものなのか興味のある方は、以降で簡単に解説します。</p>



<p>　</p>


<div class="supplement border">
もうこれら3つが何なのか分からなくていいよというせっかちさんは、これら3つをメモしてネットや店頭で探してみてください。<br />
</div>



<p><strong>価格は新品に限って言えば、安いものだと5万円代〜、高いものだと20万円近くするものもあります。</strong></p>



<p>メーカーによっても大きく異なりますね。</p>



<h3 class="wp-block-heading">CPUってなに？</h3>



<div class="wp-block-image"><figure class="aligncenter"><img decoding="async" width="300" height="300" src="https://koaramarch.com/wp-content/uploads/2019/12/CPU-300x300.jpg" alt="" class="wp-image-2415" srcset="https://koaramarch.com/wp-content/uploads/2019/12/CPU-300x300.jpg 300w, https://koaramarch.com/wp-content/uploads/2019/12/CPU-150x150.jpg 150w, https://koaramarch.com/wp-content/uploads/2019/12/CPU-768x768.jpg 768w, https://koaramarch.com/wp-content/uploads/2019/12/CPU.jpg 1000w" sizes="(max-width: 300px) 100vw, 300px" /></figure></div>



<p>CPUとは、PCの中核をなす部分です。</p>


<div class="supplement border">
人間でいえば「<strong>脳</strong>」にあたる部分ですね。</p>
<p>このCPUがPCに情報を出力（表示）するために指令を出しています。<br />
</div>



<p>　</p>



<p>人間も人それぞれ脳で考えていることが異なり、残念ながら頭の回転が速い人、遅い人が存在しますよね。</p>



<p>CPUもそれと同じで、CPUが違えば性能に良し悪しがあるということです。</p>



<p>　</p>



<p class="point"><i class="fa fa-check" aria-hidden="true"></i> 最近主流のCPU</p>



<p>最近主流のCPUは以下の3つです。</p>



<ul><li>Core-i3</li><li>Core-i5 </li><li>Core-i7</li></ul>



<p>末尾の数字が増えるほどCPUの性能が良くなります。</p>



<p>　</p>



<p>他にCeleronやPentiumというものがありますが、上記よりも性能が劣ります。</p>



<p>オールインワンを目指すなら、やめておいたほうが無難かと。</p>



<p>　</p>



<p class="point"><i class="fa fa-check" aria-hidden="true"></i> 世代について</p>



<p>「<strong>世代」</strong>の説明をしておきます。</p>



<p>　</p>



<p>下図のようにCPUの表記のあとに数字（ ここでは<strong>8300</strong> ）がついていますよね。</p>



<figure class="wp-block-image"><img decoding="async" width="243" height="106" src="https://koaramarch.com/wp-content/uploads/2019/12/CPU_generation-1.png" alt="" class="wp-image-2318"/></figure>



<p>これは、<strong>CPUの世代</strong>を表します。</p>



<p><strong>先頭の数字が大きいほど新しいもので、もちろん新しいほうが性能は良くなります。</strong></p>



<p>最近だと、8,000番台以降が主流です。</p>



<p>　</p>



<p class="point"><i class="fa fa-check" aria-hidden="true"></i> 僕のおすすめCPU</p>



<ul><li>Core-i5</li><li>世代 8,000番台以降</li></ul>



<p>一般的にブログ用ならCore-i3シリーズでじゅうぶんと言われますが、<strong>僕のおすすめはCore-i5シリーズ。</strong></p>



<p>　　</p>



<p>これならオールインワンの性能を兼ね備えています。</p>



<p>　</p>



<p><strong>世代は8,000番台以降でいいかと。</strong></p>



<p>それ未満の新品はそもそもなくなってきてると思います。</p>



<h3 class="wp-block-heading">メモリってなに？</h3>



<div class="wp-block-image"><figure class="aligncenter"><img decoding="async" width="770" height="513" src="https://koaramarch.com/wp-content/uploads/2019/12/coffee-1276784_1280-1.jpg" alt="SSDとは" class="wp-image-6369" srcset="https://koaramarch.com/wp-content/uploads/2019/12/coffee-1276784_1280-1.jpg 770w, https://koaramarch.com/wp-content/uploads/2019/12/coffee-1276784_1280-1-300x200.jpg 300w, https://koaramarch.com/wp-content/uploads/2019/12/coffee-1276784_1280-1-768x512.jpg 768w" sizes="(max-width: 770px) 100vw, 770px" /></figure></div>



<p>メモリとは、頻繁にアクセスする情報を一時的に保管しておける領域のこと。</p>


<div class="supplement border">
このメモリ領域は高速に処理が可能で、「<strong>作業机</strong>」をイメージしてもらえれば良いかと。</p>
<p>作業机が広いほうが、たくさんモノが置けて作業がはかどりますよね。<br />
</div>



<p>　</p>



<p>メモリも同じで、メモリの容量が多いとたくさん処理しようとしても余裕があるので、性能が良いと言えます。 </p>



<p>　</p>



<p class="point"><i class="fa fa-check" aria-hidden="true"></i> 僕のおすすめメモリ容量</p>



<p>4GBは少ない。</p>



<p>16GBはさすがに冗長。</p>



<p>なのでこれも<strong>中間のスペックである8GBを採用がおすすめ。</strong></p>



<p>　</p>



<p>たとえブログ用と言えど、インターネットで検索しながら作業することもありますので、8GBあるのが望ましいです。</p>



<p>　</p>



<p><strong>インターネットの閲覧は結構メモリの使用量を取られますので。</strong></p>



<h3 class="wp-block-heading">SSDってなに？（HDDとの違いも解説）</h3>



<div class="wp-block-image"><figure class="aligncenter"><img decoding="async" width="770" height="513" src="https://koaramarch.com/wp-content/uploads/2019/12/eliabe-costa-tzsUJD0TGkk-unsplash.jpg" alt="メモリってなに？" class="wp-image-6367" srcset="https://koaramarch.com/wp-content/uploads/2019/12/eliabe-costa-tzsUJD0TGkk-unsplash.jpg 770w, https://koaramarch.com/wp-content/uploads/2019/12/eliabe-costa-tzsUJD0TGkk-unsplash-300x200.jpg 300w, https://koaramarch.com/wp-content/uploads/2019/12/eliabe-costa-tzsUJD0TGkk-unsplash-768x512.jpg 768w" sizes="(max-width: 770px) 100vw, 770px" /></figure></div>



<p>SSDの説明の前にHDD（ハードディスク）の説明を。</p>



<p>　</p>



<p>HDDはデータにアクセスしたり、データを保存したりする領域です。</p>


<div class="supplement border">
ファイルや文具などありとあらゆるものを整理してしまっておく「<strong>収納棚</strong>」のようなものですね。<br />
</div>



<p>　</p>



<p>SSDはHDDに比べて読み書きするスピードが速いです。 </p>


<div class="voice cf r"><figure class="icon"><img src="https://koaramarch.com/wp-content/uploads/2019/10/-e1572438031439.png" width="150" height="150"><figcaption class="name">コアラ</figcaption></figure><div class="voicecomment">これを体感すると、SSDを搭載していないPCにはもう戻れないですね。<br />
</div></div>



<p>　</p>



<p>ただし、HDDに比べて高価なものになります。</p>



<p>容量をやみくもに増やすと値段が高くなってしまうので注意ですね。</p>



<p>　</p>



<p class="point"><i class="fa fa-check" aria-hidden="true"></i> 僕のおすすめSSD容量</p>



<p>ブログ用ですし、動画や音楽を大量に取り込んだりしない限り、<strong>SSD256GB</strong>のみでもじゅうぶんかと思います。</p>


<div class="supplement border">
PCによってはHDDとSSDを両方搭載していて、データによって両者を使い分けできるものもあります。</p>
<p>しかしPC初心者の方は、使い分けとか面倒かと思います。<br />
</div>



<p>　</p>



<p>それに外付けにはなりますが、HDDを用意することもできますので最悪なんとかなりますよ。</p>



<div class="kaerebalink-box" style="text-align:left;padding-bottom:20px;font-size:small;zoom: 1;overflow: hidden;"><div class="kaerebalink-image" style="float:left;margin:0 15px 10px 0;"><a href="//af.moshimo.com/af/c/click?a_id=1687306&amp;p_id=54&amp;pc_id=54&amp;pl_id=616&amp;s_v=b5Rz2P0601xu&amp;url=https%3A%2F%2Fitem.rakuten.co.jp%2Fr-kojima%2F3812751%2F" target="_blank" rel="nofollow noopener noreferrer" class="broken_link"><img decoding="async" src="https://thumbnail.image.rakuten.co.jp/@0_mall/r-kojima/cabinet/344/3812751_01l.jpg?_ex=128x128" style="border: none;"></a><img decoding="async" src="//i.moshimo.com/af/i/impression?a_id=1687306&amp;p_id=54&amp;pc_id=54&amp;pl_id=616" width="1" height="1" style="border:none;"></div><div class="kaerebalink-info" style="line-height:120%;zoom: 1;overflow: hidden;"><div class="kaerebalink-name" style="margin-bottom:10px;line-height:120%"><a href="//af.moshimo.com/af/c/click?a_id=1687306&amp;p_id=54&amp;pc_id=54&amp;pl_id=616&amp;s_v=b5Rz2P0601xu&amp;url=https%3A%2F%2Fitem.rakuten.co.jp%2Fr-kojima%2F3812751%2F" target="_blank" rel="nofollow noopener noreferrer" class="broken_link">バッファロー 外付けHDD　ブラック　［ポータブル型　／1TB］ HD−PCG1．0U3−BBA</a><img decoding="async" src="//i.moshimo.com/af/i/impression?a_id=1687306&amp;p_id=54&amp;pc_id=54&amp;pl_id=616" width="1" height="1" style="border:none;"><div class="kaerebalink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="https://kaereba.com" rel="nofollow noopener noreferrer" target="_blank">カエレバ</a></div></div><div class="kaerebalink-detail" style="margin-bottom:5px;"></div><div class="kaerebalink-link1" style="margin-top:10px;"><div class="shoplinkrakuten" style="display:inline;margin-right:5px"><a href="//af.moshimo.com/af/c/click?a_id=1687306&amp;p_id=54&amp;pc_id=54&amp;pl_id=616&amp;s_v=b5Rz2P0601xu&amp;url=https%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2F%25E5%25A4%2596%25E4%25BB%2598%25E3%2581%2591HDD%2F-%2Ff.1-p.1-s.1-sf.0-st.A-v.2%3Fx%3D0" target="_blank" rel="nofollow noopener noreferrer">楽天市場</a><img decoding="async" src="//i.moshimo.com/af/i/impression?a_id=1687306&amp;p_id=54&amp;pc_id=54&amp;pl_id=616" width="1" height="1" style="border:none;"></div><div class="shoplinkamazon" style="display:inline;margin-right:5px"><a href="//af.moshimo.com/af/c/click?a_id=1687307&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;s_v=b5Rz2P0601xu&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fgp%2Fsearch%3Fkeywords%3D%25E5%25A4%2596%25E4%25BB%2598%25E3%2581%2591HDD%26__mk_ja_JP%3D%25E3%2582%25AB%25E3%2582%25BF%25E3%2582%25AB%25E3%2583%258A" target="_blank" rel="nofollow noopener noreferrer" class="broken_link">Amazon</a><img decoding="async" src="//i.moshimo.com/af/i/impression?a_id=1687307&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062" width="1" height="1" style="border:none;"></div><div class="shoplinkyahoo" style="display:inline;margin-right:5px"><a href="//af.moshimo.com/af/c/click?a_id=1692235&amp;p_id=1225&amp;pc_id=1925&amp;pl_id=18502&amp;s_v=b5Rz2P0601xu&amp;url=http%3A%2F%2Fsearch.shopping.yahoo.co.jp%2Fsearch%3Fp%3D%25E5%25A4%2596%25E4%25BB%2598%25E3%2581%2591HDD" target="_blank" rel="nofollow noopener noreferrer">Yahooショッピング</a><img decoding="async" src="//i.moshimo.com/af/i/impression?a_id=1692235&amp;p_id=1225&amp;pc_id=1925&amp;pl_id=18502" width="1" height="1" style="border:none;"></div></div></div><div class="booklink-footer" style="clear: left"></div></div>



<p>クラウドのストレージサービスというものもありますので、そういったものをうまく活用するのも良いですね。</p>



<h2 class="wp-block-heading">ほかにこだわるとすれば・・・</h2>



<ul><li>画面サイズ &#x27a1; 1台でいくなら大きいほうがいい。15.6型かな。</li><li>キーボード &#x27a1; お好みで。ブログ用だと自分の打ちやすいものを選んでおくとよい。</li><li>ディスプレイ &#x27a1; 光沢がないほうが目には優しいけど、僕は光沢ありに慣れました。</li><li>DVDドライブ &#x27a1; ノートPCだと最近は内蔵無しが主流ですね。</li><li>Microsoft office &#x27a1; ブログ書くだけなら不要では？</li></ul>



<p>まあ正直、このあたりはお好みですね。</p>



<p>挙げだしたらキリがないのでこの辺にしておきます。</p>



<p></p>



<h2 class="wp-block-heading">僕の愛用PC</h2>



<p>僕の愛用PCは<strong>Lenovoのideapad C340 (15) </strong>。<br>※(15)は画面サイズを表し、15.6インチを意味します。  </p>



<div class="wp-block-image"><figure class="aligncenter is-resized"><img decoding="async" src="https://koaramarch.com/wp-content/uploads/2019/12/image-300x226.png" alt="" class="wp-image-2381" width="300" height="226" srcset="https://koaramarch.com/wp-content/uploads/2019/12/image-300x226.png 300w, https://koaramarch.com/wp-content/uploads/2019/12/image-768x578.png 768w, https://koaramarch.com/wp-content/uploads/2019/12/image.png 823w" sizes="(max-width: 300px) 100vw, 300px" /><figcaption>Lenovo ideapad C340 (15)</figcaption></figure></div>



<p>レノボはとにかく安さが売りですね。</p>



<p>このPCも今回おすすめするスペック通りで、<strong>価格は6万円代前半からあります。</strong></p>



<p>　</p>



<p>このPCに興味のある方は、以下のレビュー記事をご覧ください。<br><a href="https://koaramarch.com/lenovo-c340-review-2">&gt;&gt;レノボ ideapad C340(15)レビュー【家庭用に最適】</a></p>



<h2 class="wp-block-heading">ブログ用おすすめPCスペックはこれ！ まとめ</h2>



<p>いかがでしたでしょうか？</p>



<p>　</p>



<p>ブログって始めるのに初期費用があまりかからないのも良いところですよね。</p>



<p>かと言って、スペックを落として作業がはかどらない事態は避けたいですよね。</p>



<p>　 </p>



<p>その両者を解決できるのが今回示した<strong>ミドルスペック</strong>に該当するということが示せたと思います。</p>



<p>　</p>



<p>この記事が、あなたのブログ用のPCを見つけるきっかけになりましたら幸いです。</p>



<div>
    <span class="fr-border-titlePlus">コアラのまとめ</span>
</div>
<div class="fr-border-titlePlus2">
ブログ用おすすめPCスペックはこれ！
    <ul class="no-border">
        <li>CPU：Core i5</li>
        <li>メモリ：8GB</li>
        <li>SSD：256GB</li>
    </ul>
</div>



<p>　</p>


<div class="related_article cf typesimple"><a href="https://koaramarch.com/lenovo-c340-review-2" class="related_article__link"><figure class="eyecatch thum"><img width="486" height="290" src="https://koaramarch.com/wp-content/uploads/2020/01/lenovo-c340-review-486x290.jpg" class="attachment-home-thum size-home-thum wp-post-image" alt="レノボideapadC340レビュー" decoding="async" /></figure><div class="meta inbox"><p class="ttl" data-labeltext="関連記事">レノボ ideapad C340(15)レビュー【家庭用に最適】</p><time class="time__date date gf undo">2021年3月17日</time></div></a></div>



<p>Twitterでも情報発信しております！お気軽にフォローまたは感想をツイートください^^&nbsp; </p>The post <a href="https://koaramarch.com/for-pc-spec">ブログ用おすすめPCスペックはこれ！PC初心者に分かりやすく解説</a> first appeared on <a href="https://koaramarch.com">コアラの行進ブログ</a>.]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
