<?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>WordPress  |  ウェブのネタ袋</title>
	<atom:link href="https://webnoneta.com/category/wordpress/feed/" rel="self" type="application/rss+xml" />
	<link>https://webnoneta.com</link>
	<description>ブログ運営＆Webマーケティング情報</description>
	<lastBuildDate>Fri, 12 Jun 2020 02:52:01 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.8.13</generator>

<image>
	<url>https://webnoneta.com/wp-content/uploads/2020/03/cropped-netabukuro-icon-32x32.png</url>
	<title>WordPress  |  ウェブのネタ袋</title>
	<link>https://webnoneta.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>WordPressテーマ「TCD」を使ってみたので、レビュー！</title>
		<link>https://webnoneta.com/tcd-review/</link>
					<comments>https://webnoneta.com/tcd-review/#respond</comments>
		
		<dc:creator><![CDATA[みっちー]]></dc:creator>
		<pubDate>Fri, 12 Jun 2020 01:48:28 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://webnoneta.com/?p=1261</guid>

					<description><![CDATA[「WordPressでオシャレでかっこいいデザインテーマ無いかな〜？」と探した人は、必ずと言っていいほど目にしているサイトがあると思います。 それが、TCD。 TCDというのは、WordPressテーマの名前じゃなくて、 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>「WordPressでオシャレでかっこいいデザインテーマ無いかな〜？」<br>と探した人は、必ずと言っていいほど目にしているサイトがあると思います。</p>



<p>それが、<a rel="noopener" target="_blank" href="https://design-plus1.com/tcd-w/">TCD</a>。</p>



<p>TCDというのは、WordPressテーマの名前じゃなくて、有料テーマを提供しているサイトの名前です。<br>飲食店やホテル、エステサロン、美容クリニック、レストランなどの業種にぴったり合うオシャレなデザインや、ブログやニュースなどのメディア用に使えるテーマなど、多くのWordPressテーマをリリースしてくれています。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">TCDテーマの特徴</a></li><li><a href="#toc2" tabindex="0">TCDテーマの弱点は？</a><ol><li><a href="#toc3" tabindex="0">オシャレな写真がないと、中途半端なWebサイトになってしまう</a></li><li><a href="#toc4" tabindex="0">カスタマイズがほぼできない</a></li><li><a href="#toc5" tabindex="0">プラグインを多めに入れる必要があるかも</a></li></ol></li><li><a href="#toc6" tabindex="0">TCDテーマ　まとめ</a></li></ol>
    </div>
  </div>

<h2><span id="toc1">TCDテーマの特徴</span></h2>



<p>僕は仕事でいくつかTCDテーマを使ったことがあります。<br>それらのテーマは、以下の通り。</p>



<a rel="noopener" target="_blank" href="https://tcdlink.xyz/link.php?i=5b88e7172202e&amp;m=5ee2eb62d5e07"><img loading="lazy" src="https://tcdlink.xyz/data.php?i=5b88e7172202e&amp;m=5ee2eb62d5e07" width="728" height="90" border="0"></a>



<a rel="noopener" target="_blank" href="https://tcdlink.xyz/link.php?i=5d19ad94e3843&amp;m=5ee2eb62d5e07"><img loading="lazy" src="https://tcdlink.xyz/data.php?i=5d19ad94e3843&amp;m=5ee2eb62d5e07" width="728" height="90" border="0"></a>



<a rel="noopener" target="_blank" href="https://tcdlink.xyz/link.php?i=5b85828e66357&amp;m=5ee2eb62d5e07"><img loading="lazy" src="https://tcdlink.xyz/data.php?i=5b85828e66357&amp;m=5ee2eb62d5e07" width="728" height="90" border="0"></a>



<p>これらのテーマはどれもオシャレで、デモ画面を見ているだけでうっとりするような、先進的であり、かつ格好いいWordPressテーマです。</p>



<p>それぞれ、メディア用、美容クリニック、医療系サイト用のテーマになっていますが、僕が作ったのはそれらの業種とは全然関係ないサイトばかりです。</p>



<p>つまり、TCDテーマは各業種用に作られてはいるのですが、全然違う業種のサイト構築にも使えるということです。</p>



<p class="has-text-color has-black-color">僕が考える、TCDテーマの特徴は、ズバリ<span class="bold-red">「デザインが良い」</span>というところです。</p>



<p>TCDテーマに沿って、コンテンツや写真を当てはめていくだけで、洗練されたオシャレなWebサイトが簡単に出来上がります。</p>



<p>このようなデザインを最初から自分で作るとなると、かなりの時間がかかるし、そもそもレベルが違いすぎて、うまく作れないと思います。</p>



<p>だから、簡単にオシャレなデザインのWebサイトを作りたい！という人にお勧めできるWordPressテーマです。<br>料金も2万円台が多いのかな。思ったほど高くはありません。<br>本腰を入れて、オシャレなサイトを作りたい人には、お勧めできます。</p>



<h2><span id="toc2">TCDテーマの弱点は？</span></h2>



<p>デザイン的に素晴らしいTCDテーマですが、弱点もあります。<br>僕が経験して、「これはTCDの弱点かも」と思った点を挙げていきます。</p>



<h3><span id="toc3">オシャレな写真がないと、中途半端なWebサイトになってしまう</span></h3>



<p>TCDのデモ画面は、それもうっとりするほどのオシャレデザインです。<br>でもそれらは「オシャレな写真を使っている」から、とも言えます。</p>



<p>今時のサイトは、写真を大きく見せるデザインが多く、TCDもオシャレな写真を入れています。<br>ところがいざ自分がTCDテーマでサイトを作った時に、しょぼい写真しか持っていなかったら、せっかくの洗練されたデザインがまったく活きず、中途半端な、逆にダサさを感じるWebサイトになってしまいます。</p>



<p>TCDテーマでサイトを作るときは、オシャレとはいかなくても、綺麗な写真を使わないと厳しいと思います。</p>



<h3><span id="toc4">カスタマイズがほぼできない</span></h3>



<p>TCDテーマは、洗練されたデザインにするために綿密に設計されています。<br>テーマを入れてみて分かるのですが、カスタム投稿フィールドが多用されていたり、TOPページの写真を入れる場所や数、サイズが厳格に決められています。</p>



<p>例えばTOPページに写真が3つ横並びで入っているのを、4つにするといったカスタマイズは、非常に難しいです。<br>無理にカスタマイズすると、デザインバランスが崩れて、せっかくのオシャレなデザインが台無しになることも。</p>



<p>独自のビジュアルエディターが使われていたりと、ちょっとクセが強めかな。<br>TCDテーマに慣れていない人は、最初は戸惑うかもしれません。</p>



<p>TCDテーマを使う場合は、決められたルール通りに、忠実に作る方が良いです。<br>変にこだわりを持って、カスタマイズをしようとするとドツボにはまってしまうので、「TCDの設計通り、素直に作ろう」<br>という意識で、ルール通りに作った方が良いです。</p>



<p>そうすると、びっくりするくらい速く、スムーズにオシャレなサイトが出来上がります。</p>



<h3><span id="toc5">プラグインを多めに入れる必要があるかも</span></h3>



<p>最近のWordPressテーマは、無料のものでも多機能になっていて、プラグインに頼らなくても良いものが増えています。</p>



<p>僕が愛用している<a rel="noopener" target="_blank" href="https://wp-cocoon.com/">Cocoon</a>もそうなんですが、SEO関連をはじめとして機能が充実しまくっているので、余分なプラグインを入れる必要がありません。<br>ということはつまり、WordPressサイトが軽くなるわけです。</p>



<p>プラグインは少なければ少ない方が良いのですが、TCDはデザイン機能に注力しているためか、機能的に見ればプラグインに頼らざるを得ない部分があります。</p>



<p>例えば、画像をクリックするとモーダルウィンドウになって、進むや戻るボタンがあって・・・というのは、多くのWordPressテーマでは当たり前のように実装されています。</p>



<p>でもTCDの場合は、WordPressの初期状態のままなので、モーダルウィンドウが開くことがなく、単に画像が拡大表示されるだけです。<br>画像を閉じようとしても出来ないので、ブラウザの戻るボタンで戻るしかないということになってしまい、LightBox系のプラグインを入れざるを得ない、ということも起こってきます。</p>



<h2><span id="toc6">TCDテーマ　まとめ</span></h2>



<p>TCDテーマには、書いてきたような弱点は確かにあります。</p>



<p>でもそれを補って余りあるほどの<span class="marker-under">洗練されたデザインが提供されているのが最大の強み。</span>デザインに自信がない人でも、オシャレなWebサイトがサクッと作れるのが魅力です。</p>



<p>現に僕も、多くのクライアントさんのWebサイトを、TCDテーマで運用していますよ。<br>使い方を選ぶし、カスタマイズ困難な点では、汎用性にかけるところもあるのですが、何回も言うように、とにかくデザインが良い！</p>



<p>綺麗な写真を入れることができるなら、TCDテーマはお勧めできます。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://webnoneta.com/tcd-review/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>WordPressブログのスパムコメント対策はコレ一択だ！</title>
		<link>https://webnoneta.com/spamtaisaku/</link>
					<comments>https://webnoneta.com/spamtaisaku/#respond</comments>
		
		<dc:creator><![CDATA[みっちー]]></dc:creator>
		<pubDate>Tue, 21 Apr 2020 14:17:05 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://webnoneta.com/?p=1149</guid>

					<description><![CDATA[WordPressでブログを運営していると、必ず遭遇するのが「スパムコメント」です。ブログを初めて間もないころにコメント通知が来て、「おお！早くも読者からコメントが！」と喜んだものつかの間。 英語ばかりのスパムコメントを [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>WordPressでブログを運営していると、必ず遭遇するのが「スパムコメント」です。<br>ブログを初めて間もないころにコメント通知が来て、「おお！早くも読者からコメントが！」と喜んだものつかの間。</p>



<p>英語ばかりのスパムコメントを発見して「ムキーッ！」と怒った覚えは誰にでもあると思います。</p>



<p>今回は、そんなスパムコメントをシャットアウトして、快適なWordPressブログライフを楽しむための方法をシェアします。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-4" checked><label class="toc-title" for="toc-checkbox-4">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">WordPressのスパムコメント対策は、reCAPTCHA（リキャプチャ）で決まり！</a></li><li><a href="#toc2" tabindex="0">reCAPTCHA（リキャプチャ）導入手順</a><ol><li><a href="#toc3" tabindex="0">reCAPTCHA（リキャプチャ）画面でサイトを登録</a></li><li><a href="#toc4" tabindex="0">サイトキーとシークレットキーをコピー</a></li><li><a href="#toc5" tabindex="0">WordPressプラグイン「Invisible reCaptcha」をインストール・設定</a></li></ol></li><li><a href="#toc6" tabindex="0">まとめ</a></li></ol>
    </div>
  </div>

<h2><span id="toc1">WordPressのスパムコメント対策は、reCAPTCHA（リキャプチャ）で決まり！</span></h2>



<p>reCAPTCHA（リキャプチャ）って聞いたことありますか？<br>これはWebサイトのフォームなどに入力する時に、悪質なスパム書き込みから守ってくれる仕組みのことです。</p>



<p>フォームやコメントに入力する時に「私はロボットではありません」というのにチェックを入れると、信号機やバスや横断歩道を選ぶ画面になった・・・という経験、あなたもあると思います。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="310" height="86" src="https://webnoneta.com/wp-content/uploads/2020/04/norobot.png" alt="私はロボットではありません" class="wp-image-1151" srcset="https://webnoneta.com/wp-content/uploads/2020/04/norobot.png 310w, https://webnoneta.com/wp-content/uploads/2020/04/norobot-300x83.png 300w" sizes="(max-width: 310px) 100vw, 310px" /><figcaption>こんなやつ↑。私はロボットではありませんにチェックを入れると・・・</figcaption></figure>



<figure class="wp-block-image size-full"><img loading="lazy" width="238" height="342" src="https://webnoneta.com/wp-content/uploads/2020/04/singouki.jpg" alt="信号機を選択" class="wp-image-1152" srcset="https://webnoneta.com/wp-content/uploads/2020/04/singouki.jpg 238w, https://webnoneta.com/wp-content/uploads/2020/04/singouki-209x300.jpg 209w" sizes="(max-width: 238px) 100vw, 238px" /><figcaption>信号機をすべて選択してください。と出てくる。<br>信号機以外にも、バスや横断歩道など、色んなバージョンがある。</figcaption></figure>



<p>これによって、悪質なbotによる自動書き込みをシャットアウトでき、スパムコメントを一掃できます。</p>



<p>でも、ユーザー側の立場になると、正直「ウザい」ですよね？<br>いちいち「私はロボットではありません」にチェックを入れて信号機を選ばされるんです。</p>



<p>「何様？」って感じですよね。<br>これじゃあ、せっかくコメントを書こうと思っていたのに、書く気も失せるってもんです。</p>



<p>ところがこのreCAPTCHA（リキャプチャ）、バージョンが進化してv3になっています。<br>仮面ライダーもv3になって進化したように、reCAPTCHA（リキャプチャ）も進化しました。</p>



<p>あのうざい「私はロボットではありません」の画面が出ずに、さりげなくreCAPTCHA（リキャプチャ）のロゴが表示されるだけになっています。</p>



<p>このブログでもコメント入力欄に導入していますが、さりげなく、ひっそりと表示されていて、ユーザーはいちいちチェックをしたり信号機を選ぶ必要が無くなりました。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="837" height="451" src="https://webnoneta.com/wp-content/uploads/2020/04/recapthagamen.png" alt="リキャプチャ画面" class="wp-image-1154" srcset="https://webnoneta.com/wp-content/uploads/2020/04/recapthagamen.png 837w, https://webnoneta.com/wp-content/uploads/2020/04/recapthagamen-300x162.png 300w, https://webnoneta.com/wp-content/uploads/2020/04/recapthagamen-768x414.png 768w" sizes="(max-width: 837px) 100vw, 837px" /><figcaption>v3では、さりげなくロゴが表示されるだけ。<br>「reCAPTCHAで保護されていますという」一文が安心感を与えてくれる。</figcaption></figure>



<p>reCAPTCHA（リキャプチャ）のAIが、ユーザーのページ内の行動を算出して、スパムかどうかを判定してくれるらしいです。<br>AIって、マジですげえ！です。<br>利用者が増えるとともに、判定精度も上がってきます。</p>



<p><strong><span class="bold-red">僕も実は、このブログにすべて英文のスパムコメントが毎日来てうんざりしていたのですが、reCAPTCHA（リキャプチャ）を導入後は、スパムコメントはパタッと止まりました！</span></strong></p>



<p>reCAPTCHA（リキャプチャ）は、WordPressブログの場合すごく簡単に導入できます。<br>ここからは、その方法を解説しますね。</p>



<h2><span id="toc2">reCAPTCHA（リキャプチャ）導入手順</span></h2>



<p>reCAPTCHA（リキャプチャ）の導入は、次の手順で行います。</p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-check-circle block-box has-background has-icon-color has-watery-blue-background-color has-deep-orange-icon-color waku2"><div class="iconlist-title"></div>
<ul><li>GoogleのreCAPTCHA（リキャプチャ）画面でサイトを登録し、サイトキーとシークレットキーを取得。</li><li>Invisible reCaptchaプラグインをWordPressにインストール。</li><li>Invisible reCaptchaプラグインの設定画面でサイトキーとシークレットキーを登録。</li><li>コメント欄を守る設定をする（チェックを入れるだけ）</li></ul>
</div>



<p>以上です。やってみるとメチャクチャ簡単です。</p>



<h3><span id="toc3">reCAPTCHA（リキャプチャ）画面でサイトを登録</span></h3>



<p>まずはGoogleのreCAPTCHA（リキャプチャ）画面へ行きましょう！</p>




<a rel="noopener" target="_blank" href="https://www.google.com/recaptcha/intro/v3.html" title="reCAPTCHA website security and fraud protection" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://webnoneta.com/wp-content/uploads/cocoon-resources/blog-card-cache/c193befae2b22183db2de37e2c6b61a9.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="320" height="180" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">reCAPTCHA website security and fraud protection</div><div class="blogcard-snippet external-blogcard-snippet">reCAPTCHA is bot protection for your website that prevents online fraudulent activity like scraping, credential stuffing, and account creation.</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain"></div></div></div></div></a>




<p>グーグルアカウントが必要なので、まだの人はアカウントを取得しておきましょう。<br>その上で、下図の赤枠で囲ったボタンをクリックしてください。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1500" height="653" src="https://webnoneta.com/wp-content/uploads/2020/04/recaptchagamen.png" alt="reCAPTCHA（リキャプチャ）画面" class="wp-image-1159" srcset="https://webnoneta.com/wp-content/uploads/2020/04/recaptchagamen.png 1500w, https://webnoneta.com/wp-content/uploads/2020/04/recaptchagamen-300x131.png 300w, https://webnoneta.com/wp-content/uploads/2020/04/recaptchagamen-1024x446.png 1024w, https://webnoneta.com/wp-content/uploads/2020/04/recaptchagamen-768x334.png 768w" sizes="(max-width: 1500px) 100vw, 1500px" /><figcaption>なんでミーアキャットの画像なのか？</figcaption></figure>



<p>右上の「Admin console」をクリック。<br>管理画面になるので、右上の方にある「＋」をクリックします。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1500" height="190" src="https://webnoneta.com/wp-content/uploads/2020/04/re-01.png" alt="リキャプチャ" class="wp-image-1160" srcset="https://webnoneta.com/wp-content/uploads/2020/04/re-01.png 1500w, https://webnoneta.com/wp-content/uploads/2020/04/re-01-300x38.png 300w, https://webnoneta.com/wp-content/uploads/2020/04/re-01-1024x130.png 1024w, https://webnoneta.com/wp-content/uploads/2020/04/re-01-768x97.png 768w" sizes="(max-width: 1500px) 100vw, 1500px" /></figure>



<p>サイト情報を入力します。下の画面を参考にしてください。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1099" height="592" src="https://webnoneta.com/wp-content/uploads/2020/04/re-02.png" alt="リキャプチャ設定" class="wp-image-1161" srcset="https://webnoneta.com/wp-content/uploads/2020/04/re-02.png 1099w, https://webnoneta.com/wp-content/uploads/2020/04/re-02-300x162.png 300w, https://webnoneta.com/wp-content/uploads/2020/04/re-02-1024x552.png 1024w, https://webnoneta.com/wp-content/uploads/2020/04/re-02-768x414.png 768w" sizes="(max-width: 1099px) 100vw, 1099px" /></figure>



<p>「ラベル」はブログ名にしておいたほうが、後の管理がやりやすいです。<br>あとはreCAPTCHAタイプを「v3」にして、ドメイン名を入力。<br>条件に同意して「送信」ボタンを押せば、登録完了です。</p>



<h3><span id="toc4">サイトキーとシークレットキーをコピー</span></h3>



<p>管理画面の右上の方にある歯車をクリックします。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1500" height="189" src="https://webnoneta.com/wp-content/uploads/2020/04/re-03.png" alt="リキャプチャ設定" class="wp-image-1163" srcset="https://webnoneta.com/wp-content/uploads/2020/04/re-03.png 1500w, https://webnoneta.com/wp-content/uploads/2020/04/re-03-300x38.png 300w, https://webnoneta.com/wp-content/uploads/2020/04/re-03-1024x129.png 1024w, https://webnoneta.com/wp-content/uploads/2020/04/re-03-768x97.png 768w" sizes="(max-width: 1500px) 100vw, 1500px" /></figure>



<p>すると、下の画面になります。<br>reCAPTCHAのキーをクリックすると、サイトキーとシークレットキーが表示されます。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1216" height="654" src="https://webnoneta.com/wp-content/uploads/2020/04/re-04.png" alt="リキャプチャのキーを取得" class="wp-image-1164" srcset="https://webnoneta.com/wp-content/uploads/2020/04/re-04.png 1216w, https://webnoneta.com/wp-content/uploads/2020/04/re-04-300x161.png 300w, https://webnoneta.com/wp-content/uploads/2020/04/re-04-1024x551.png 1024w, https://webnoneta.com/wp-content/uploads/2020/04/re-04-768x413.png 768w" sizes="(max-width: 1216px) 100vw, 1216px" /></figure>



<p>後でこのキーを、WordPressのプラグインに設定するので、別タブで開いておくと、作業がしやすいです。</p>



<h3><span id="toc5">WordPressプラグイン「Invisible reCaptcha」をインストール・設定</span></h3>



<p>プラグインの「Invisible reCaptcha」をインストールします。</p>




<a rel="noopener" target="_blank" href="https://ja.wordpress.org/plugins/invisible-recaptcha/" title="Invisible reCaptcha for WordPress" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://ps.w.org/invisible-recaptcha/assets/banner-772x250.png?rev=1560060" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="320" height="180" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Invisible reCaptcha for WordPress</div><div class="blogcard-snippet external-blogcard-snippet">Invisible reCaptcha for WordPress プラグインはあなたのサイトをGoogleの新しい Invisible reCaptcha によって悪意のあるスパムボットから守ります。</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=ja.wordpress.org" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">ja.wordpress.org</div></div></div></div></a>




<p>インストールが完了すると、「設定」のところにInvisible reCaptchaが出るので、それをクリック。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="473" height="264" src="https://webnoneta.com/wp-content/uploads/2020/04/re-05.png" alt="Invisible reCaptcha設定画面" class="wp-image-1167" srcset="https://webnoneta.com/wp-content/uploads/2020/04/re-05.png 473w, https://webnoneta.com/wp-content/uploads/2020/04/re-05-300x167.png 300w, https://webnoneta.com/wp-content/uploads/2020/04/re-05-240x135.png 240w, https://webnoneta.com/wp-content/uploads/2020/04/re-05-320x180.png 320w" sizes="(max-width: 473px) 100vw, 473px" /></figure>



<p>設定画面で、先程取得したサイトキーとシークレットキーをコピペします。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1105" height="709" src="https://webnoneta.com/wp-content/uploads/2020/04/re-06.png" alt="サイトキーとシークレットキーを入力。" class="wp-image-1168" srcset="https://webnoneta.com/wp-content/uploads/2020/04/re-06.png 1105w, https://webnoneta.com/wp-content/uploads/2020/04/re-06-300x192.png 300w, https://webnoneta.com/wp-content/uploads/2020/04/re-06-1024x657.png 1024w, https://webnoneta.com/wp-content/uploads/2020/04/re-06-768x493.png 768w" sizes="(max-width: 1105px) 100vw, 1105px" /></figure>



<p>Langage は「Japenese」を選択。<br>Badge Positionは、reCAPTCHA（リキャプチャ）バッジの表示方法です。<br>Inlineにしておくと、コメント入力欄のすぐ下にインライン表示されますので、無難かと。</p>



<p>入力が終われば「変更を保存」ボタンをポチッと。</p>



<p>次に「WordPress」タブをクリックして、コメントフォームを保護する項目にチェックを入れて保存すれば完了です。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="756" height="771" src="https://webnoneta.com/wp-content/uploads/2020/04/re-07.png" alt="コメントフォームを保護" class="wp-image-1169" srcset="https://webnoneta.com/wp-content/uploads/2020/04/re-07.png 756w, https://webnoneta.com/wp-content/uploads/2020/04/re-07-294x300.png 294w" sizes="(max-width: 756px) 100vw, 756px" /></figure>



<p>念の為、コメント入力フォームにreCAPTCHA（リキャプチャ）のバッジが表示されているか確認してください。</p>



<figure class="wp-block-image size-large is-resized"><img src="https://webnoneta.com/wp-content/uploads/2020/04/recapthagamen.png" alt="コメント入力フォーム" class="wp-image-1154" width="500" srcset="https://webnoneta.com/wp-content/uploads/2020/04/recapthagamen.png 837w, https://webnoneta.com/wp-content/uploads/2020/04/recapthagamen-300x162.png 300w, https://webnoneta.com/wp-content/uploads/2020/04/recapthagamen-768x414.png 768w" sizes="(max-width: 837px) 100vw, 837px" /><figcaption>バッジが表示されたらOK！</figcaption></figure>



<h2><span id="toc6">まとめ</span></h2>



<p>ということで、WordPressブログのスパムコメント対策でした。<br>reCAPTCHA（リキャプチャ）を導入してからは、スパムコメントが無くなりました！<br>無料で手軽に導入できるので、オススメですよ。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://webnoneta.com/spamtaisaku/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>WordPressでネットショップを運営する方法。Welcartプラグインで簡単にECサイトができる！</title>
		<link>https://webnoneta.com/netshop/</link>
					<comments>https://webnoneta.com/netshop/#respond</comments>
		
		<dc:creator><![CDATA[みっちー]]></dc:creator>
		<pubDate>Sat, 28 Mar 2020 06:01:58 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://webnoneta.com/?p=876</guid>

					<description><![CDATA[WordPressといえば、ブログ運営に使われることが多いですが、ネットショップとして使っている人もいます。今回の記事は、 という人のために書きます。では行ってみましょう！ 目次 WordPressのネットショップ用プラ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>WordPressといえば、ブログ運営に使われることが多いですが、ネットショップとして使っている人もいます。<br>今回の記事は、</p>



<div class="wp-block-cocoon-blocks-icon-box question-box common-icon-box block-box">
<p>WordPressでネットショップをやりたいんだけど、どうして良いか分からない。<br>WordPressのネットショップ運営で、良いプラグインを探している。</p>
</div>



<p>という人のために書きます。では行ってみましょう！</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-6" checked><label class="toc-title" for="toc-checkbox-6">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">WordPressのネットショップ用プラグインは、Welcartがおすすめ</a></li><li><a href="#toc2" tabindex="0">Welcartでできることとは？</a></li><li><a href="#toc3" tabindex="0">Welcartでどんなデザインのネットショップができるの？</a></li><li><a href="#toc4" tabindex="0">Welcartでネットショップを始める手順</a><ol><li><a href="#toc5" tabindex="0">１．独自ドメインを取得する</a></li><li><a href="#toc6" tabindex="0">２．サーバーを契約する</a></li><li><a href="#toc7" tabindex="0">３．WordPressをインストールする</a></li><li><a href="#toc8" tabindex="0">４．Welcartをインストールする</a></li><li><a href="#toc9" tabindex="0">５．Welcartテーマをインストールする</a></li></ol></li><li><a href="#toc10" tabindex="0">Welcartのデメリットとは？</a><ol><li><a href="#toc11" tabindex="0">ショップデザインのカスタマイズがやりにくい</a></li><li><a href="#toc12" tabindex="0">独自機能の追加はほぼ不可能</a></li><li><a href="#toc13" tabindex="0">全部自己責任になる</a></li></ol></li><li><a href="#toc14" tabindex="0">まとめ</a></li></ol>
    </div>
  </div>

<h2><span id="toc1">WordPressのネットショップ用プラグインは、Welcartがおすすめ</span></h2>



<figure class="wp-block-image size-full"><img loading="lazy" width="426" height="140" src="https://webnoneta.com/wp-content/uploads/2020/03/Screenshot-2020-03-28-at-12.32.17.png" alt="ウェルカート" class="wp-image-881" srcset="https://webnoneta.com/wp-content/uploads/2020/03/Screenshot-2020-03-28-at-12.32.17.png 426w, https://webnoneta.com/wp-content/uploads/2020/03/Screenshot-2020-03-28-at-12.32.17-300x99.png 300w" sizes="(max-width: 426px) 100vw, 426px" /></figure>



<p>WordPressでネットショップを運営したい時は、Welcart（ウェルカート）というプラグインがおすすめです。<br><strong>ポイントは無料だということと、国産なので日本語環境で使えるということです。</strong></p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-reference-link">












<a rel="noopener" target="_blank" href="https://www.welcart.com/" title="【公式】Welcart |SEOに強い！初めてでも安心の無料ネットショップ作成ツール" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://webnoneta.com/wp-content/uploads/cocoon-resources/blog-card-cache/7d175da4941ecab0267b567cecad674e.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="320" height="180" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">【公式】Welcart |SEOに強い！初めてでも安心の無料ネットショップ作成ツール</div><div class="blogcard-snippet external-blogcard-snippet">ネットショップ作成、リニューアルならWelcart。WordPressのプラグインなのでSEOに強く、無料で簡単に導入できます。専門スタッフのサポートもあり、初めてでも安心して使えます。拡張性が高く、お乗り換えにも対応可能なWelcartで、あなたのネットショップを成功へと導きましょう。</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=www.welcart.com" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">www.welcart.com</div></div></div></div></a>












</div>



<p>これをWordPressにインストールするだけで、なんとショッピングカートの機能が付くんです。<br>クレジット決済や送料設定、会員機能、ポイント機能などなど、ネットショップに必要な機能はほぼ網羅されています。</p>



<p>これってすごいことですよ！<br>普通、ショッピングカートをいちから開発したら何百万円かかかります。<br>実際、僕は仕事でネットショップを運営してて、そのうちのメインになっているショップは、独自にショッピングカートを開発しました。<br>はい、2百万円以上かかりましたよ（汗）。まあ、お金出したのは会社ですが（笑）。</p>



<p>他にも、レンタルショッピングカートという方法もあるのですが、毎月そこそこの費用がかかります。</p>



<p>それに比べてWelcartは、なんと無料です！<br>有料のテーマや、有料の機能拡張はあるのですが、ショッピングカートの基本的な機能はすべて無料で手に入ります。</p>



<p>ということで、Welcartをおすすめできる人は、</p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-check-circle block-box has-background has-icon-color has-watery-blue-background-color has-orange-icon-color waku2"><div class="iconlist-title"></div>
<ul><li>小規模でネットショップを始めたい。</li><li>個人商店や個人で気軽にネットショップを始めたい。</li><li>費用をかけずにネットショップを開設したい。</li></ul>
</div>



<p>という人に向いてます。<br>なにしろ、WordPressもWelcartもタダなんで、初期費用がほぼかかりません。<br>ノーリスクでネットショップを始められますよ！</p>



<h2><span id="toc2">Welcartでできることとは？</span></h2>



<p>Welcartで出来ることをまとめると・・・</p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-check-circle block-box has-background has-icon-color has-watery-blue-background-color has-orange-icon-color waku2"><div class="iconlist-title"></div>
<ul><li><span class="bold">商品登録<br></span>写真や商品スペック、セール文章、価格、割引設定などを登録できます。<br>これだけで販売ページが自動で出来上がります。</li><li><span class="bold">お店情報の登録<br></span>住所や店名などのお店情報の登録。支払い方法や配送設定などができます。</li><li><span class="bold">メール設定<br></span>注文確認メールや会員登録メールなど、各種メールの設定が出来ます。</li><li><span class="bold">クレジット決済機能<br></span>国内15社のクレジット決済を使えます。（クレジット決済会社と要契約）</li><li><span class="bold">クーポン発行<br></span>会員にクーポンを発行して購買率をアップできます。</li><li><span class="bold">送り状連携<br></span>ヤマト便の送り状用のデータ出力が簡単にできます。</li><li><span class="bold">複数配送設定<br></span>ギフト用に複数の配送先を設定できます。</li></ul>
</div>



<p>などなど、普通に有料のショッピングカートシステム出来ることは、Welcartでも全て出来てしまいます！</p>



<h2><span id="toc3">Welcartでどんなデザインのネットショップができるの？</span></h2>



<p>さて、気になるのが</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-13 sbs-line sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://webnoneta.com/wp-content/uploads/2020/02/question.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon has-text-color has-background has-white-color has-green-background-color">
<p>無料のプラグインなんて、ちょっと古くさかったりダサいデザインのショップになるんじゃないの？</p>
</div></div>



<p>という不安だと思います。<br>確かに、数年前までのWelcartはデザイン的に「ちょっと・・・」と思うような古いデザインでした。</p>



<p>でも今は違いますよ！<br>見た目もおしゃれなデザインのネットショップが出来ます。<br>Welcartは、デザインテーマ（有料）がいくつかあって、それをインストールするだけでネットショップのデザインが出来るという仕組みです。<br>これらのテーマは、おしゃれなデザインのものが多いです。</p>



<p>有料じゃなくても、標準で付いてくる<a rel="noopener" target="_blank" href="https://themes.welcart.info/basic/" aria-label="無料のテーマ (opens in a new tab)">無料のテーマ</a>でもシンプルでおしゃれな感じです。</p>



<p>有料テーマは12,000円〜になりますが、洗練されたデザインです。</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-reference-link">












<a rel="noopener" target="_blank" href="https://www.welcart.com/archives/category/item/itemgenre/template/" title="【公式】Welcart公式テーマ一覧 - 安心と信頼の全機能対応！SEOに強い無料ネットショップ作成ツール" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://webnoneta.com/wp-content/uploads/cocoon-resources/blog-card-cache/7d175da4941ecab0267b567cecad674e.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="320" height="180" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">【公式】Welcart公式テーマ一覧 - 安心と信頼の全機能対応！SEOに強い無料ネットショップ作成ツール</div><div class="blogcard-snippet external-blogcard-snippet">Welcart公式テーマ一覧ぺージです。信頼のおける公式テーマで、すべての機能を活かしたオリジナルショップを構築しましょう。</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=www.welcart.com" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">www.welcart.com</div></div></div></div></a>












</div>



<p>有料テーマということで初期費用はかかりますが、最初の投資だけなのでおしゃれなデザインでネットショップを開設したい人はおすすめです。</p>



<h2><span id="toc4">Welcartでネットショップを始める手順</span></h2>



<p>ここからはWelcartでネットショップを始める手順を解説しますね。</p>



<h3><span id="toc5">１．独自ドメインを取得する</span></h3>



<p>まずは独自ドメインを取得します。ちゃんとしたネットショップを運営するのなら、独自ドメインはマストです。</p>



<p>僕は<a rel="nofollow noopener" target="_blank" data-atag-id="3" data-post-id="876" href="https://px.a8.net/svt/ejp?a8mat=3B97DR+9SH0SI+1JUK+I35CY">バリュードメイン</a>
<img border="0" width="1" height="1" src="https://www17.a8.net/0.gif?a8mat=3B97DR+9SH0SI+1JUK+I35CY" alt="">か、<a rel="nofollow noopener" target="_blank" data-atag-id="4" data-post-id="876" href="https://px.a8.net/svt/ejp?a8mat=3B7M8P+CP9B9E+50+2HHVNM">お名前.com</a>
<img border="0" width="1" height="1" src="https://www13.a8.net/0.gif?a8mat=3B7M8P+CP9B9E+50+2HHVNM" alt="">で取得してます。<br>もし、レンタルサーバー契約がまだの場合は、まずは<a rel="nofollow noopener" target="_blank" data-atag-id="2" data-post-id="876" href="https://px.a8.net/svt/ejp?a8mat=2TP8M3+BN5HGI+CO4+609HU">エックスサーバー公式サイト</a>
<img border="0" width="1" height="1" src="https://www14.a8.net/0.gif?a8mat=2TP8M3+BN5HGI+CO4+609HU" alt="">を確認してください。<br>時期によって、「ドメイン無料キャンペーン」をしているので。<br>無料キャンペーン期間なら、エックスサーバーのほうが断然お得です。<br>なにしろ、ドメイン取得代も維持費もずっと無料なので。</p>



<p>ドメインの決め方は、以下を参考にしてくだいね。</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-reference">








<a href="https://webnoneta.com/domain/" title="ドメインの決め方を解説。失敗しない独自ドメインは、こう決めろ！" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img width="320" height="180" src="https://webnoneta.com/wp-content/uploads/2020/03/domain-320x180.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" loading="lazy" srcset="https://webnoneta.com/wp-content/uploads/2020/03/domain-320x180.jpg 320w, https://webnoneta.com/wp-content/uploads/2020/03/domain-240x135.jpg 240w, https://webnoneta.com/wp-content/uploads/2020/03/domain-640x360.jpg 640w, https://webnoneta.com/wp-content/uploads/2020/03/domain-698x393.jpg 698w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">ドメインの決め方を解説。失敗しない独自ドメインは、こう決めろ！</div><div class="blogcard-snippet internal-blogcard-snippet">WordPressでブログ運営をする場合、「独自ドメイン」を取得しなければいけません。独自ドメインとは、世界に一つだけのオリジナルのドメインのことです。一度取得すると、ずっと使い続けることができます。いわば、あなたの資産になりま...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=webnoneta.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">webnoneta.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2020.03.05</div></div></div></div></a>








</div>



<h3><span id="toc6">２．サーバーを契約する</span></h3>



<p>WordPressでネットショップをするなら、処理能力が高いサーバーが必須です。<br>でも高いと運営費が大変になるので、速くて安くて、安定しているサーバーが条件です。<br>その条件を満たしているのが、僕がオススメしている<a rel="nofollow noopener" target="_blank" data-atag-id="6" data-post-id="876" href="https://px.a8.net/svt/ejp?a8mat=2TP8M3+BN5HGI+CO4+609HU">エックスサーバー</a>
<img border="0" width="1" height="1" src="https://www14.a8.net/0.gif?a8mat=2TP8M3+BN5HGI+CO4+609HU" alt="">です。</p>



<a rel="nofollow noopener" target="_blank" data-atag-id="5" data-post-id="876" href="https://px.a8.net/svt/ejp?a8mat=2TP8M3+BN5KJM+CO4+661TT">
<img border="0" width="350" height="160" alt="" src="https://www24.a8.net/svt/bgt?aid=170818779704&wid=019&eno=01&mid=s00000001642001036000&mc=1"></a>
<img border="0" width="1" height="1" src="https://www14.a8.net/0.gif?a8mat=2TP8M3+BN5KJM+CO4+661TT" alt="">



<p>独自ドメインのところでも説明しましたが、このエックスサーバーで無料ドメインキャンペーンをしている時は、サーバー契約後にエックスサーバーのほうでドメイン契約してください。</p>



<p>エックスサーバーは、暗号化通信する時に必要なSSL証明書も無料で使えます。<br>httpsから始まるSSL通信は、個人情報の入力をしてもらうネットショップには絶対必要な機能です。</p>



<p>エックスサーバーで契約した後は、必ずSSL通信の設定をしましょう。</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-reference">





<a href="https://webnoneta.com/ssl/" title="SSL通信をエックスサーバーで設定する方法。WordPressとの組み合わせで、簡単に常時SSL化ができる！" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img width="320" height="180" src="https://webnoneta.com/wp-content/uploads/2020/03/ssl-320x180.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" loading="lazy" srcset="https://webnoneta.com/wp-content/uploads/2020/03/ssl-320x180.jpg 320w, https://webnoneta.com/wp-content/uploads/2020/03/ssl-240x135.jpg 240w, https://webnoneta.com/wp-content/uploads/2020/03/ssl-640x360.jpg 640w, https://webnoneta.com/wp-content/uploads/2020/03/ssl-698x393.jpg 698w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">SSL通信をエックスサーバーで設定する方法。WordPressとの組み合わせで、簡単に常時SSL化ができる！</div><div class="blogcard-snippet internal-blogcard-snippet">SSLとは、ネット通信を暗号化する仕組みのことで、最近のブログやWebサイトでは当たり前のように設定されています。今回の記事は、エックスサーバーでSSL通信を設定する方法を知りたい。WordPressでSSL通信をする時...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=webnoneta.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">webnoneta.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2020.03.22</div></div></div></div></a>





</div>



<p>エックスサーバーは、月額1,000円（税抜）でコスパも良いし、WordPressとの相性がよくサクサク表示してくれるので、おすすめです。</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-reference">





<a href="https://webnoneta.com/blog-server/" title="ブログ運営にオススメのレンタルサーバー。エックスサーバーが最強の理由とは？" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img width="320" height="180" src="https://webnoneta.com/wp-content/uploads/2020/03/server-320x180.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" loading="lazy" srcset="https://webnoneta.com/wp-content/uploads/2020/03/server-320x180.jpg 320w, https://webnoneta.com/wp-content/uploads/2020/03/server-240x135.jpg 240w, https://webnoneta.com/wp-content/uploads/2020/03/server-640x360.jpg 640w, https://webnoneta.com/wp-content/uploads/2020/03/server-698x393.jpg 698w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">ブログ運営にオススメのレンタルサーバー。エックスサーバーが最強の理由とは？</div><div class="blogcard-snippet internal-blogcard-snippet">WordPressでブログ運営をするために必要なレンタルサーバー。レンタルサーバーは、エックスサーバーがおすすめです。スピード、安定度、サポート、価格の安さ、WordPressの運用のしやすさなど、弱点のないレンタルサーバーです。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=webnoneta.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">webnoneta.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2020.03.01</div></div></div></div></a>





</div>



<h3><span id="toc7">３．WordPressをインストールする</span></h3>



<p>サーバー契約できたら、WordPressをインストールします。<br>エックスサーバーは、管理画面（サーバーパネル）から簡単にインストールできますよ。</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-reference">




<a href="https://webnoneta.com/wordpress-blog/" title="【初心者向け】WordPressブログの初め方（エックスサーバー環境）" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img width="320" height="180" src="https://webnoneta.com/wp-content/uploads/2020/03/wp-blog-320x180.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" loading="lazy" srcset="https://webnoneta.com/wp-content/uploads/2020/03/wp-blog-320x180.jpg 320w, https://webnoneta.com/wp-content/uploads/2020/03/wp-blog-240x135.jpg 240w, https://webnoneta.com/wp-content/uploads/2020/03/wp-blog-640x360.jpg 640w, https://webnoneta.com/wp-content/uploads/2020/03/wp-blog-698x393.jpg 698w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">【初心者向け】WordPressブログの初め方（エックスサーバー環境）</div><div class="blogcard-snippet internal-blogcard-snippet">WordPressでブログを初めたいんだけど、どうして良いのかわからない・・・。ブログ開設までの手順を知りたい。今回はそんな方のための記事です。サーバー環境は、エックスサーバーになります。どんな手順でブログを開設するのか説明し...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=webnoneta.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">webnoneta.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2020.03.21</div></div></div></div></a>




</div>



<h3><span id="toc8">４．Welcartをインストールする</span></h3>



<p>いよいよWelcartのインストールです。<br>WordPress管理画面のプラグインから「新規追加」を選び、「Welcart」で検索するとプラグインが表示されますので、インストールしてください。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1392" height="699" src="https://webnoneta.com/wp-content/uploads/2020/03/welcart.png" alt="Welcartプラグイン" class="wp-image-900" srcset="https://webnoneta.com/wp-content/uploads/2020/03/welcart.png 1392w, https://webnoneta.com/wp-content/uploads/2020/03/welcart-300x151.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/welcart-1024x514.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/welcart-768x386.png 768w" sizes="(max-width: 1392px) 100vw, 1392px" /></figure>



<p>たったこれだけの作業で、WordPressがネットショップになります！</p>



<p>インストールに成功したら、管理画面の左側に「Welcart shop」というメニューが出るので、お店の基本設定をします。</p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" src="https://webnoneta.com/wp-content/uploads/2020/03/welcart-set.png" alt="Welcart基本設定" class="wp-image-901" width="570" height="270" srcset="https://webnoneta.com/wp-content/uploads/2020/03/welcart-set.png 760w, https://webnoneta.com/wp-content/uploads/2020/03/welcart-set-300x142.png 300w" sizes="(max-width: 570px) 100vw, 570px" /></figure>



<p>商品追加もこのメニューからできます。</p>



<h3><span id="toc9">５．Welcartテーマをインストールする</span></h3>



<p>次にWelcart専用テーマをインストールします。<br>Welcartをインストールした時点で、「Welcart &nbsp;Default Theme」というデフォルトテーマが入っているのですが、ほかにも無料の「Welcart Basicテーマ」があります。</p>



<p>僕個人的には「Welcart Basic テーマ」のほうがおしゃれな感じがして好きですね。<br>Welcart Basic テーマは、<a rel="noopener" target="_blank" aria-label="ここからダウンロード (opens in a new tab)" href="https://www.welcart.com/archives/4286.html">ここからダウンロード</a>できます。</p>



<p>他にも、有料テーマ（12,000円〜）もあります。費用はかかりますがおしゃれなデザインが揃っていますので、有料テーマを買ってWordPressにインストールするのも良いかも。</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-reference-link">




<a rel="noopener" target="_blank" href="https://www.welcart.com/archives/category/item/itemgenre/template/" title="【公式】Welcart公式テーマ一覧 - 安心と信頼の全機能対応！SEOに強い無料ネットショップ作成ツール" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://webnoneta.com/wp-content/uploads/cocoon-resources/blog-card-cache/7d175da4941ecab0267b567cecad674e.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="320" height="180" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">【公式】Welcart公式テーマ一覧 - 安心と信頼の全機能対応！SEOに強い無料ネットショップ作成ツール</div><div class="blogcard-snippet external-blogcard-snippet">Welcart公式テーマ一覧ぺージです。信頼のおける公式テーマで、すべての機能を活かしたオリジナルショップを構築しましょう。</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=www.welcart.com" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">www.welcart.com</div></div></div></div></a>




</div>



<p>以上、Welcartでネットショップを始める手順でした。</p>



<h2><span id="toc10">Welcartのデメリットとは？</span></h2>



<p>さて、ここまでWelcartのメリットばかり書いてきましたが、もちろんデメリットもあります。<br>そこで僕が使ってみて思ったデメリットを書きます。</p>



<h3><span id="toc11">ショップデザインのカスタマイズがやりにくい</span></h3>



<p>Welcartは、専用のテーマ（例えばWelcart Basic テーマ）をインストールして使うのですが、このデザインをカスタマイズするのがちょっと難しいです。</p>



<p>例えば無料テーマのCocoonなんかだと、カスタマイズしやすいのですが、Welcartテーマは全般的にカスタマイズしにくいですね。</p>



<h3><span id="toc12">独自機能の追加はほぼ不可能</span></h3>



<p>Welcartは、ネットショップに必要な機能はほぼ網羅されているし、さらに機能を追加できる「<a rel="noopener" target="_blank" aria-label="拡張プラグイン (opens in a new tab)" href="https://www.welcart.com/archives/category/item/itemgenre/wcex/">拡張プラグイン</a>」もあります。</p>



<p>でも、そうした機能の他にオリジナルの自分だけの機能が欲しくなる時ってあるんですよね。<br>例えば、料金設定で</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-16 sbs-line sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://webnoneta.com/wp-content/uploads/2020/03/nikoniko.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon has-text-color has-background has-border-color has-white-color has-green-background-color has-green-border-color">
<p>キャンペーン商品と抱合せで買った場合のみ、送料を無料にしたい！</p>
</div></div>



<p>といった時、標準はそうした機能は付いていません。<br>でもそうした新しい機能を追加することは、ほぼ不可能です。というか、僕の力では無理でした（汗）。</p>



<p>ということで、Welcartはデザインにしても機能にしても、自分の思い通りにならないというデメリットがあります。</p>



<p>標準のまま、なにも手を加えずに機能に合わせてショップ運営をするという使い方に合っていますね。</p>



<h3><span id="toc13">全部自己責任になる</span></h3>



<p>僕はWelcartを使ってて、まだ体験していないのですが、万一Welcartにトラブルがあって使えなくなった場合、すべて自己責任で解決しないといけません。</p>



<p>レンタルのショッピングカートだと、カートの保守責任はレンタルカート会社にあるので、自分は何もしなくても良いのですが、Welcartは自分でインストールして使うプラグインなので、そこにちょっと怖さはありますね。</p>



<p>万一トラブルがあって復旧に時間がかかったら、注文の機会損失になってしまうので。</p>



<h2><span id="toc14">まとめ</span></h2>



<p>以上、Welcartの紹介をしてきました。<br>僕は複数のネットショップを仕事で運営しているのですが、その中のひとつでWelcartを使っています。</p>



<p>普通にネットショップとして過不足無いですし、これが無料で使えるなんて信じられないくらいです。金銭的にはほぼノーリスクでネットショップを始めることができます。</p>



<p>無料のネットショップといえばEC CUBEも有名で実績豊富なんですが、ちょっと癖があるというか、僕的には敷居が高く感じられます。</p>



<p>WordPressに普段使い慣れている人は、Welcartを使ってネットショップ運営をするほうがやりやすいと思いますよ。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://webnoneta.com/netshop/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>WordPressでページ内リンクを設定する方法。ブロックエディターは超簡単になっている！</title>
		<link>https://webnoneta.com/anchorlink/</link>
					<comments>https://webnoneta.com/anchorlink/#respond</comments>
		
		<dc:creator><![CDATA[みっちー]]></dc:creator>
		<pubDate>Wed, 25 Mar 2020 13:55:34 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://webnoneta.com/?p=826</guid>

					<description><![CDATA[WordPressでページ内リンク（アンカーリンク）をする時って、少々面倒くさくないですか？今まで僕はリンク先の場所に&#60;a&#62;タグを手作業で入れてたんですが、WordPressのブロックエディターにしてから、超 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>WordPressでページ内リンク（アンカーリンク）をする時って、少々面倒くさくないですか？<br>今まで僕はリンク先の場所に&lt;a&gt;タグを手作業で入れてたんですが、WordPressのブロックエディターにしてから、超簡単な方法を見つけましたので、今回はその方法をシェアしたいと思います。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-8" checked><label class="toc-title" for="toc-checkbox-8">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">今までのページ内リンク設定は面倒くさかった</a></li><li><a href="#toc2" tabindex="0">ブロックエディターのリンク先設定は、超絶簡単！</a></li><li><a href="#toc3" tabindex="0">ページ内リンクを設定する時の注意点</a></li></ol>
    </div>
  </div>

<h2><span id="toc1">今までのページ内リンク設定は面倒くさかった</span></h2>



<p>例えば、下図のようなページ内リンクを貼る場合</p>



<figure class="wp-block-image size-full is-resized"><img src="https://webnoneta.com/wp-content/uploads/2020/03/anker-01.png" alt="ページ内リンクの例" class="wp-image-831" width="500" srcset="https://webnoneta.com/wp-content/uploads/2020/03/anker-01.png 1113w, https://webnoneta.com/wp-content/uploads/2020/03/anker-01-300x189.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/anker-01-1024x646.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/anker-01-768x484.png 768w" sizes="(max-width: 1113px) 100vw, 1113px" /></figure>



<p>リンク元のテキストを、例えば</p>



<pre class="wp-block-code html"><code>&lt;a href="#title">Googleドキュメント&lt;/a></code></pre>



<p>と記述します。<br>WordPressなんで、リンク元は以下のような設定です。</p>



<figure class="wp-block-image size-full is-resized"><img src="https://webnoneta.com/wp-content/uploads/2020/03/anker-02.png" alt="リンク設定" class="wp-image-835" width="500" srcset="https://webnoneta.com/wp-content/uploads/2020/03/anker-02.png 632w, https://webnoneta.com/wp-content/uploads/2020/03/anker-02-300x66.png 300w" sizes="(max-width: 632px) 100vw, 632px" /></figure>



<p>ここまでは手間はかかりませんが、リンク先のテキストのところに</p>



<pre class="wp-block-code html"><code>&lt;a id="title">&lt;/a></code></pre>



<p>と、&lt;a&gt;タグを記述するのが面倒くさかったんですね。<br>実は僕はバカなもんだから、ブロックエディターを使いながらも、上記のソースを手打ちしてたんです。<br>でも、もっと超絶簡単な方法を発見しました！<br>その方法とは・・・</p>



<h2><span id="toc2">ブロックエディターのリンク先設定は、超絶簡単！</span></h2>



<p><strong><span class="marker-under">リンク先のブロックを選択してから、右にあるブロックメニューの「高度な設定」のHTMLアンカーに、アンカーを書けばいいだけ！</span></strong><br>今回の例で言うと、「title」と打てば良いだけです。</p>



<p>リンク元は、「#title」とリンクを貼ればそれでおしまい、という超絶簡単な方法でページ内リンクが出来ます。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="308" src="https://webnoneta.com/wp-content/uploads/2020/03/anker-03-1024x308.png" alt="アンカーの記述" class="wp-image-837" srcset="https://webnoneta.com/wp-content/uploads/2020/03/anker-03-1024x308.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/anker-03-300x90.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/anker-03-768x231.png 768w, https://webnoneta.com/wp-content/uploads/2020/03/anker-03-1536x462.png 1536w, https://webnoneta.com/wp-content/uploads/2020/03/anker-03.png 1577w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>ブロックエディターのほうが、ページ内リンクの方法がめちゃくちゃ簡単になってます。</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-related">


<a href="https://webnoneta.com/gutenberg/" title="WordPressでCocoonテーマを使っている人は、ブロックエディタにしたほうが作業が捗るよ！" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img width="320" height="180" src="https://webnoneta.com/wp-content/uploads/2020/03/blockeditor-320x180.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" loading="lazy" srcset="https://webnoneta.com/wp-content/uploads/2020/03/blockeditor-320x180.jpg 320w, https://webnoneta.com/wp-content/uploads/2020/03/blockeditor-240x135.jpg 240w, https://webnoneta.com/wp-content/uploads/2020/03/blockeditor-640x360.jpg 640w, https://webnoneta.com/wp-content/uploads/2020/03/blockeditor-698x393.jpg 698w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">WordPressでCocoonテーマを使っている人は、ブロックエディタにしたほうが作業が捗るよ！</div><div class="blogcard-snippet internal-blogcard-snippet">WordPress5.0から導入された新しいエディタが、ブロックエディタです。通称、グーテンベルグ（Gutenberg）エディタ。導入当初は賛否両論というか、否定のほうが多かったかな。今まで使い慣れたエディターからガラリと変わった...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=webnoneta.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">webnoneta.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2020.03.17</div></div></div></div></a>


</div>



<h2><span id="toc3">ページ内リンクを設定する時の注意点</span></h2>



<p>一つだけ注意点があります。<br>先にリンク元のテキストでリンク設定しておかないと、「高度な設定」のところに「HTMLアンカー」の入力項目が出てきません。</p>



<p>だから、まずはリンク元でアンカーリンクを設定してから、リンク先でアンカーを書く。<br>この順番で設定してくださいね。</p>



<p>個人ブログではページ内リンクを使うケースは少ないかもしれませんが、企業サイトやネットショップでは意外とよく使います。そんな時に覚えておけば、作業効率がアップすると思います。</p>



<p>ということで、今回の記事は短めでしたが、僕的にちょっとした発見だったので紹介しました！</p>
]]></content:encoded>
					
					<wfw:commentRss>https://webnoneta.com/anchorlink/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【WordPress】おすすめプラグインを紹介します。（Cocoonテーマ環境）</title>
		<link>https://webnoneta.com/plugin/</link>
					<comments>https://webnoneta.com/plugin/#respond</comments>
		
		<dc:creator><![CDATA[みっちー]]></dc:creator>
		<pubDate>Mon, 23 Mar 2020 14:39:20 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://webnoneta.com/?p=783</guid>

					<description><![CDATA[このブログはCocoon（コクーン）というWordPressテーマを使っていますが、その環境でインストールしている、おすすめのプラグインを紹介します。 Cocoonは、今までプラグインがないと出来なかった機能が標準で付い [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>このブログはCocoon（コクーン）というWordPressテーマを使っていますが、その環境でインストールしている、おすすめのプラグインを紹介します。</p>



<p>Cocoonは、今までプラグインがないと出来なかった機能が標準で付いているので、プラグインをたくさんインストールする必要がないのが気に入ってます。</p>



<p>では早速、僕のおすすめするプラグインを紹介しますね！</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-10" checked><label class="toc-title" for="toc-checkbox-10">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">画像を圧縮して軽くしてくれる、EWWW Image Optimizer</a></li><li><a href="#toc2" tabindex="0">Googleサイトマップを自動で作る、Google XML Sitemaps</a></li><li><a href="#toc3" tabindex="0">SSL通信に自動で対応してくれる、Really Simple SSL</a></li><li><a href="#toc4" tabindex="0">ブログの表示を速くするキャッシュ系プラグイン、WP Fastest Cache</a></li><li><a href="#toc5" tabindex="0">WordPressのデータベースを最適化してくれる、WP-Optimize</a></li><li><a href="#toc6" tabindex="0">カテゴリーの並び順を変えられる、Category Order and Taxonomy Terms Order</a></li><li><a href="#toc7" tabindex="0">プラグインのインストール方法（検索してインストール）</a></li><li><a href="#toc8" tabindex="0">プラグインのインストール方法（アップロード）</a></li><li><a href="#toc9" tabindex="0">まとめ</a></li></ol>
    </div>
  </div>

<h2><span id="toc1">画像を圧縮して軽くしてくれる、EWWW Image Optimizer</span></h2>



<p>WordPressにアップロードした画像を、自動的に最適化して軽くしてくれるプラグインです。<br>サイトの表示スピードを上げるためには、画像を軽くするのが一番手っ取り早いので、このプラグインは必須でしょう。</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">

<a rel="noopener" target="_blank" href="https://ja.wordpress.org/plugins/ewww-image-optimizer/" title="EWWW Image Optimizer" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://webnoneta.com/wp-content/uploads/cocoon-resources/blog-card-cache/f70a5140c86d42b2fce94b801140d4a3.jpg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="320" height="180" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">EWWW Image Optimizer</div><div class="blogcard-snippet external-blogcard-snippet">Comprehensive image optimization that doesn&#039;t require a rocket science degree. Optimize images automatically for Faster Sites and Happy Visitors.</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=ja.wordpress.org" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">ja.wordpress.org</div></div></div></div></a>

</div>



<h2><span id="toc2">Googleサイトマップを自動で作る、Google XML Sitemaps</span></h2>



<p>検索エンジン（Google）にサイトを認識してもらいやすくするために、サイトマップは必須です。<br>このプラグインは、サイトマップを自動で生成してくれるので、すごく重宝しています。<br>インストールしたら後は放ったらかしで、記事を追加するごとにサイトマップを自動生成してくれるのが楽ですね。</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">

<a rel="noopener" target="_blank" href="https://ja.wordpress.org/plugins/google-sitemap-generator/" title="XML Sitemap Generator for Google" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://ps.w.org/google-sitemap-generator/assets/banner-772-250.png?rev=2713572" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="320" height="180" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">XML Sitemap Generator for Google</div><div class="blogcard-snippet external-blogcard-snippet">Generate multiple types of sitemaps to improve SEO and get your website indexed quickly.</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=ja.wordpress.org" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">ja.wordpress.org</div></div></div></div></a>

</div>



<h2><span id="toc3">SSL通信に自動で対応してくれる、Really Simple SSL</span></h2>



<p><a href="https://webnoneta.com/ssl/">この記事</a>でも紹介しましたが、SSL通信（暗号化通信）をする時に、ブログ全体をSSLに最適化してくれる便利なプラグインです。</p>



<p><a href="https://webnoneta.com/ssl/">サーバーでSSL通信の設定</a>をした後に、このプラグインを入れて有効化しておくだけで、すべてのページがhttps通信になります。<br>httpでアクセスした時でも、httpsにリダイレクトして表示してくれます。</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">

<a rel="noopener" target="_blank" href="https://ja.wordpress.org/plugins/really-simple-ssl/" title="Really Simple Security – Simple and Performant Security (旧 Really Simple SSL)" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://ps.w.org/really-simple-ssl/assets/banner-772x250.png?rev=3100992" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="320" height="180" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Really Simple Security – Simple and Performant Security (旧 Really Simple SSL)</div><div class="blogcard-snippet external-blogcard-snippet">WordPress 強化、2要素認証 (2FA)、ログイン保護、脆弱性検出、SSL 証明書を使用して、サイトのセキュリティを簡単に向上できます。</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=ja.wordpress.org" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">ja.wordpress.org</div></div></div></div></a>

</div>



<h2><span id="toc4">ブログの表示を速くするキャッシュ系プラグイン、WP Fastest Cache</span></h2>



<p>ブログの表示スピードを上げてくれるのに便利なのが、「キャッシュ系プラグイン」です。<br>サーバー上にページをキャッシュ（一時保存）することで、ページの表示リクエストがあった時に、キャッシュされたページをサッと表示して、スピードを上げてくれます。</p>



<p>Cocoonテーマには元々高速化設定があって、サイト表示スピードを上げてくれるのですが、それにプラスしてキャッシュ系プラグインを入れることで、さらにサイトスピードの改善が見込まれます。</p>



<p>キャッシュ系プラグインには色々あるのですが、人気なのが「WP Fastest Cache」です。<br>設定が簡単だし、効果バツグンなので、おすすめですよ。</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">

<a rel="noopener" target="_blank" href="https://ja.wordpress.org/plugins/wp-fastest-cache/" title="WP Fastest Cache – WordPress Cache Plugin" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://ps.w.org/wp-fastest-cache/assets/banner-772x250.jpg?rev=1064099" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="320" height="180" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">WP Fastest Cache – WordPress Cache Plugin</div><div class="blogcard-snippet external-blogcard-snippet">最もシンプルで速いWP キャッシュシステム</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=ja.wordpress.org" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">ja.wordpress.org</div></div></div></div></a>

</div>



<h2><span id="toc5">WordPressのデータベースを最適化してくれる、WP-Optimize</span></h2>



<p>これもブログの表示スピードを速くしてくれる効果があります。<br>WordPressを運用していると、リビジョンといって下書きで保存されたデータがどんどん溜まっていきます。</p>



<p>WordPressは、MySQLというデータベースにデータを書き込んでいるのですが、余分なデータが書き込まれてどんどんデータベースが重くなるんです。</p>



<p>そうした余分なデータを掃除して、データベースを軽くしてくれるのが、「Wp-Optimize」です。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1410" height="549" src="https://webnoneta.com/wp-content/uploads/2020/03/database.png" alt="データベースの最適化" class="wp-image-788" srcset="https://webnoneta.com/wp-content/uploads/2020/03/database.png 1410w, https://webnoneta.com/wp-content/uploads/2020/03/database-300x117.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/database-1024x399.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/database-768x299.png 768w" sizes="(max-width: 1410px) 100vw, 1410px" /></figure>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">

<a rel="noopener" target="_blank" href="https://ja.wordpress.org/plugins/wp-optimize/" title="WP-Optimize – Cache, Compress images, Minify &amp; Clean database to boost page speed &amp; performance" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://ps.w.org/wp-optimize/assets/banner-772x250.png?rev=2125385" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="320" height="180" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance</div><div class="blogcard-snippet external-blogcard-snippet">この強力なキャッシュプラグインを使ってキャッシュの取得やその他の機能を利用しましょう。キャッシュを作成し、画像を最適化し、データベースをクリーンアップし、縮小化を行い、最大限のパフォーマンスを実現します。</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=ja.wordpress.org" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">ja.wordpress.org</div></div></div></div></a>

</div>



<h2><span id="toc6">カテゴリーの並び順を変えられる、Category Order and Taxonomy Terms Order</span></h2>



<p>ブログのサイドバーにカテゴリを表示している場合、並び順を変えたいと思うことって、多々あります。<br>そんな時に便利なのがこのプラグインです。</p>



<p>ドラッグで直感的に並び順を変えられるので、重宝しています。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="954" height="333" src="https://webnoneta.com/wp-content/uploads/2020/03/kategori.png" alt="カテゴリ順の変更" class="wp-image-790" srcset="https://webnoneta.com/wp-content/uploads/2020/03/kategori.png 954w, https://webnoneta.com/wp-content/uploads/2020/03/kategori-300x105.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/kategori-768x268.png 768w" sizes="(max-width: 954px) 100vw, 954px" /></figure>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">

<a rel="noopener" target="_blank" href="https://ja.wordpress.org/plugins/taxonomy-terms-order/" title="Category Order and Taxonomy Terms Order" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://ps.w.org/taxonomy-terms-order/assets/banner-772x250.png?rev=3300841" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="320" height="180" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Category Order and Taxonomy Terms Order</div><div class="blogcard-snippet external-blogcard-snippet">Drag-and-drop ordering for Categories &amp; any taxonomy (hierarchically) using a Drag and Drop Sortable JavaScript capability.</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=ja.wordpress.org" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">ja.wordpress.org</div></div></div></div></a>

</div>



<h2><span id="toc7">プラグインのインストール方法（検索してインストール）</span></h2>



<p>以上、僕がおすすめするプラグインでした。<br>他にも便利なプラグインはあるのですが、冒頭でも書いたとおり、Cocoonはプラグイン不要で便利な機能があるので、本当に最小限の数で大丈夫なんですね。</p>



<p>プラグインを入れすぎるとブログが重くなるので、入れ過ぎは禁物です。</p>



<p>では最後に、プラグインのインストール方法を解説しますね。といっても、簡単すぎて拍子抜けしますが（笑）。</p>



<p>まずはWordPressの管理画面で「プラグイン」＞「新規追加」をクリックします。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="584" height="284" src="https://webnoneta.com/wp-content/uploads/2020/03/plugin-01.png" alt="プラグインで新規追加" class="wp-image-793" srcset="https://webnoneta.com/wp-content/uploads/2020/03/plugin-01.png 584w, https://webnoneta.com/wp-content/uploads/2020/03/plugin-01-300x146.png 300w" sizes="(max-width: 584px) 100vw, 584px" /></figure>



<p>次に、検索窓にプラグインの名前を入力。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="661" height="163" src="https://webnoneta.com/wp-content/uploads/2020/03/plugin-02.png" alt="プラグインの検索窓" class="wp-image-795" srcset="https://webnoneta.com/wp-content/uploads/2020/03/plugin-02.png 661w, https://webnoneta.com/wp-content/uploads/2020/03/plugin-02-300x74.png 300w" sizes="(max-width: 661px) 100vw, 661px" /></figure>



<p>すると、該当するプラグインが表示されるので、目的のプラグインの「今すぐインストール」ボタンをポチッと。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="778" height="499" src="https://webnoneta.com/wp-content/uploads/2020/03/plugin-03.png" alt="プラグインをインストール" class="wp-image-796" srcset="https://webnoneta.com/wp-content/uploads/2020/03/plugin-03.png 778w, https://webnoneta.com/wp-content/uploads/2020/03/plugin-03-300x192.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/plugin-03-768x493.png 768w" sizes="(max-width: 778px) 100vw, 778px" /></figure>



<p>インストールが完了すると、「有効化」ボタンを押して完了です。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="774" height="516" src="https://webnoneta.com/wp-content/uploads/2020/03/plugin-04.png" alt="プラグイン有効化" class="wp-image-797" srcset="https://webnoneta.com/wp-content/uploads/2020/03/plugin-04.png 774w, https://webnoneta.com/wp-content/uploads/2020/03/plugin-04-300x200.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/plugin-04-768x512.png 768w" sizes="(max-width: 774px) 100vw, 774px" /></figure>



<p>有効化されると、左のメニューバーのところにプラグインの名前が出てきます。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="476" height="452" src="https://webnoneta.com/wp-content/uploads/2020/03/plugin-05.png" alt="プラグインの場所" class="wp-image-798" srcset="https://webnoneta.com/wp-content/uploads/2020/03/plugin-05.png 476w, https://webnoneta.com/wp-content/uploads/2020/03/plugin-05-300x285.png 300w" sizes="(max-width: 476px) 100vw, 476px" /></figure>



<p>上の図では「設定」の中にありますが、「ツール」の中にあるケースや、一番上の階層にあるケースもあります。<br>それぞれ、プラグインの名前をクリックすると、プラグイン設定画面になります。<br>それぞれの設定方法については、また別記事で紹介しますね。</p>



<p>ここまでは、プラグイン名を検索してインストールする方法を紹介しましたが、もう一つの方法があります。<br>プラグインの紹介ページからダウンロードして、それをアップロードする方法です。</p>



<h2><span id="toc8">プラグインのインストール方法（アップロード）</span></h2>



<p>それぞれのプラグインの紹介記事に貼ってあるリンクをクリックして、プラグインのダウンロードページに行きます。<br>そこで「ダウンロード」ボタンをクリック。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1500" height="747" src="https://webnoneta.com/wp-content/uploads/2020/03/download-01.png" alt="プラグインのダウンロード" class="wp-image-799" srcset="https://webnoneta.com/wp-content/uploads/2020/03/download-01.png 1500w, https://webnoneta.com/wp-content/uploads/2020/03/download-01-300x149.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/download-01-1024x510.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/download-01-768x382.png 768w" sizes="(max-width: 1500px) 100vw, 1500px" /></figure>



<p>ダウンロードしたファイルは、こんな感じ↓。<br>zipファイルになっていますが、解凍しないでくださいね。解凍するとインストールできないので。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="896" height="73" src="https://webnoneta.com/wp-content/uploads/2020/03/download-02.png" alt="ダウンロードしたプラグインファイル" class="wp-image-800" srcset="https://webnoneta.com/wp-content/uploads/2020/03/download-02.png 896w, https://webnoneta.com/wp-content/uploads/2020/03/download-02-300x24.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/download-02-768x63.png 768w" sizes="(max-width: 896px) 100vw, 896px" /></figure>



<p>WordPress管理画面のプラグイン新規追加ページに行きます。<br>そこで「プラグインのアップロード」をクリック。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="666" height="81" src="https://webnoneta.com/wp-content/uploads/2020/03/download-03.png" alt="プラグインのダウンロード" class="wp-image-801" srcset="https://webnoneta.com/wp-content/uploads/2020/03/download-03.png 666w, https://webnoneta.com/wp-content/uploads/2020/03/download-03-300x36.png 300w" sizes="(max-width: 666px) 100vw, 666px" /></figure>



<p>ダウンロードしてあったプラグインファイルを選んで、インストールします。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="705" height="229" src="https://webnoneta.com/wp-content/uploads/2020/03/download-04.png" alt="プラグインを今すぐインストール" class="wp-image-802" srcset="https://webnoneta.com/wp-content/uploads/2020/03/download-04.png 705w, https://webnoneta.com/wp-content/uploads/2020/03/download-04-300x97.png 300w" sizes="(max-width: 705px) 100vw, 705px" /></figure>



<p>インストールが完了すると、以下の画面になるので「有効化」をポチッと。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="765" height="483" src="https://webnoneta.com/wp-content/uploads/2020/03/download-05.png" alt="プラグインを有効化" class="wp-image-803" srcset="https://webnoneta.com/wp-content/uploads/2020/03/download-05.png 765w, https://webnoneta.com/wp-content/uploads/2020/03/download-05-300x189.png 300w" sizes="(max-width: 765px) 100vw, 765px" /></figure>



<p>以上で完了です。</p>



<h2><span id="toc9">まとめ</span></h2>



<p>以上、Cocoonテーマで僕が使っているプラグインの紹介でした。<br>必要最小限ですね（笑）。</p>



<p>プラグインの中にはSEO（検索エンジン上位対策）用のものもあるのですが、CocoonはもともとSEO設定が標準で備わっているので、不要なんです。<br>ということで、必要最小限のプラグイン紹介でしたが、逆に言うと「絶対入れておこうね！」というプラグインでもあります。</p>



<p>是非インストールして、あなたのブログをパワーアップさせましょう。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://webnoneta.com/plugin/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【超簡単】Cocoon（コクーン）テーマをインストールする方法</title>
		<link>https://webnoneta.com/cocoon/</link>
					<comments>https://webnoneta.com/cocoon/#respond</comments>
		
		<dc:creator><![CDATA[みっちー]]></dc:creator>
		<pubDate>Sun, 22 Mar 2020 08:55:37 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://webnoneta.com/?p=742</guid>

					<description><![CDATA[このブログは、Cocoon（コクーン）という無料テーマを使っています。僕が思うに、WordPressの無料テーマの中では最強のテーマです。 目次 Cocoonはすごい！最強の無料テーマだ。Cocoonをダウンロード。子テ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>このブログは、Cocoon（コクーン）という無料テーマを使っています。<br>僕が思うに、<span class="bold-red">WordPressの無料テーマの中では最強のテーマです。</span></p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-12" checked><label class="toc-title" for="toc-checkbox-12">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">Cocoonはすごい！最強の無料テーマだ。</a></li><li><a href="#toc2" tabindex="0">Cocoonをダウンロード。子テーマも忘れずにね！</a><ol><li><a href="#toc3" tabindex="0">ちなみに、「子テーマ」とは？</a></li></ol></li><li><a href="#toc4" tabindex="0">CocoonをWordPressにインストール</a><ol><li><a href="#toc5" tabindex="0">まずは親テーマをインストール</a></li><li><a href="#toc6" tabindex="0">続いて子テーマをインストール</a></li></ol></li><li><a href="#toc7" tabindex="0">Cocoonを使い倒して、充実のブログ生活を！</a></li></ol>
    </div>
  </div>

<h2><span id="toc1">Cocoonはすごい！最強の無料テーマだ。</span></h2>



<figure class="wp-block-image size-full"><img loading="lazy" width="1500" height="689" src="https://webnoneta.com/wp-content/uploads/2020/03/cocoonsaikou.jpg" alt="Cocoon最高" class="wp-image-747" srcset="https://webnoneta.com/wp-content/uploads/2020/03/cocoonsaikou.jpg 1500w, https://webnoneta.com/wp-content/uploads/2020/03/cocoonsaikou-300x138.jpg 300w, https://webnoneta.com/wp-content/uploads/2020/03/cocoonsaikou-1024x470.jpg 1024w, https://webnoneta.com/wp-content/uploads/2020/03/cocoonsaikou-768x353.jpg 768w" sizes="(max-width: 1500px) 100vw, 1500px" /></figure>



<p>軽い、速い、使いやすいの三拍子を揃えているし、さらにデザインもシンプルで記事が読みやすく、カスタマイズが簡単で、SEOにも強く、アップデートも頻繁にあり（機能がドンドン強化されていく）と、褒めても褒めても褒め足りないくらいに、素晴らしいテーマです。</p>



<p>ぶっちゃけ、有料テーマでもここまで優れたものは少ないんじゃないかと思いますし、作者のわいひらさんはすごく誠実で（会ったこと無いけど）、サポートも丁寧です（会ったこと無いけど）。</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">
<a rel="noopener" target="_blank" href="https://wp-cocoon.com/" title="Cocoon" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://webnoneta.com/wp-content/uploads/cocoon-resources/blog-card-cache/75b272d5c162b0e3d6c69c9d1f35cb0f.jpg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="320" height="180" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Cocoon</div><div class="blogcard-snippet external-blogcard-snippet">SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=wp-cocoon.com" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">wp-cocoon.com</div></div></div></div></a>
</div>



<p>カスタマイズの柔軟性は特に素晴らしく、僕の場合、個人ブログだけじゃなくて、本格的なネットショップにもWordPress×Cocoonの組み合わせを使っています。<br>一見してCocoonだと思えないほどにカスタマイズしてますが、非常にカスタマイズがしやすいんです。<br>企業サイトとしても使える柔軟性があります。</p>



<p><strong><span class="marker-under">初めてWordPressでブログをする人には、激しくCocoonを推します。</span></strong><br><strong><span class="marker-under">まず、Cocoonにして間違いないです。</span></strong></p>



<p>と、前置きはここまで。<br>今回の記事は、CocoonをWordPressにインストールする方法を解説します。<br>では、行ってみましょう！</p>



<h2><span id="toc2">Cocoonをダウンロード。子テーマも忘れずにね！</span></h2>



<p>Cocoonのサイトに行って、テーマをダウンロードします。</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">


<a rel="noopener" target="_blank" href="https://wp-cocoon.com/downloads/" title="テーマのダウンロード" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://webnoneta.com/wp-content/uploads/cocoon-resources/blog-card-cache/81eb8044b0b582106655d091c08e7a24.jpeg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="320" height="180" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">テーマのダウンロード</div><div class="blogcard-snippet external-blogcard-snippet">Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページです。</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=wp-cocoon.com" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">wp-cocoon.com</div></div></div></div></a>


</div>



<p>Cocoonには親テーマと子テーマの2つがあるので、必ず2つのテーマをダウンロードしましょう。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1192" height="247" src="https://webnoneta.com/wp-content/uploads/2020/03/oya-theme.png" alt="Cocoon親テーマ" class="wp-image-750" srcset="https://webnoneta.com/wp-content/uploads/2020/03/oya-theme.png 1192w, https://webnoneta.com/wp-content/uploads/2020/03/oya-theme-300x62.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/oya-theme-1024x212.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/oya-theme-768x159.png 768w" sizes="(max-width: 1192px) 100vw, 1192px" /><figcaption>まずは親テーマをダウンロード</figcaption></figure>



<figure class="wp-block-image size-full"><img loading="lazy" width="1173" height="264" src="https://webnoneta.com/wp-content/uploads/2020/03/ko-theme.png" alt="Cocoon子テーマ" class="wp-image-751" srcset="https://webnoneta.com/wp-content/uploads/2020/03/ko-theme.png 1173w, https://webnoneta.com/wp-content/uploads/2020/03/ko-theme-300x68.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/ko-theme-1024x230.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/ko-theme-768x173.png 768w" sizes="(max-width: 1173px) 100vw, 1173px" /><figcaption>続いて子テーマをダウンロード</figcaption></figure>



<p>以下の2つのzipファイルがダウンロードされていることを確認してください。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="904" height="194" src="https://webnoneta.com/wp-content/uploads/2020/03/cocoon-theme.png" alt="Cocoonテーマ" class="wp-image-754" srcset="https://webnoneta.com/wp-content/uploads/2020/03/cocoon-theme.png 904w, https://webnoneta.com/wp-content/uploads/2020/03/cocoon-theme-300x64.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/cocoon-theme-768x165.png 768w" sizes="(max-width: 904px) 100vw, 904px" /></figure>



<p>cocoon-masterと名前の付いているのが親テーマ、<br>cocoon-child-masterとなっているのが、子テーマです。</p>



<p><span class="bold-red">zipファイルは解凍せずに、そのままにしておきましょう。</span><br>（解凍するとインストールできません）</p>



<h3><span id="toc3">ちなみに、「子テーマ」とは？</span></h3>



<p>WordPressのテーマには、「親テーマ」と「子テーマ」の2つがある場合があります。<br>Cocoonもそうです。<br>簡単に言うと、<strong>親テーマとはテーマ本体のことで、子テーマとはデザインなどをカスタマイズする時に使うものです。</strong></p>



<p>テーマがアップデートした時は、親テーマを上書きしますが、子テーマは上書きされません。<br>親テーマがアップデートで書き換えられても、子テーマには影響しないのでデザインが変わることがなく、安心してアップデートできるのがメリットです。</p>



<p>これが、子テーマなしに親テーマだけだとすると、せっかくカスタマイズした内容が、アップデートで元に戻ってしまうという、泣くに泣けない状態になってしまいます。<br>そうならないためにも子テーマを入れて、子テーマでカスタマイズしておくほうが良いのです。</p>



<h2><span id="toc4">CocoonをWordPressにインストール</span></h2>



<h3><span id="toc5">まずは親テーマをインストール</span></h3>



<p>WordPress管理画面の「外観」＞「テーマ」の画面を表示して、「新規追加」をクリック。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="963" height="499" src="https://webnoneta.com/wp-content/uploads/2020/03/theme-01.png" alt="WordPress新規テーマ追加" class="wp-image-766" srcset="https://webnoneta.com/wp-content/uploads/2020/03/theme-01.png 963w, https://webnoneta.com/wp-content/uploads/2020/03/theme-01-300x155.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/theme-01-768x398.png 768w" sizes="(max-width: 963px) 100vw, 963px" /></figure>



<p>テーマの追加画面になるので、「テーマのアップロード」をクリック。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="696" height="196" src="https://webnoneta.com/wp-content/uploads/2020/03/theme-02.png" alt="テーマのアップロード" class="wp-image-765" srcset="https://webnoneta.com/wp-content/uploads/2020/03/theme-02.png 696w, https://webnoneta.com/wp-content/uploads/2020/03/theme-02-300x84.png 300w" sizes="(max-width: 696px) 100vw, 696px" /></figure>



<p>次に、「ファイルを選択」ボタンを押します。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1398" height="478" src="https://webnoneta.com/wp-content/uploads/2020/03/theme-03.png" alt="ファイルを選択" class="wp-image-764" srcset="https://webnoneta.com/wp-content/uploads/2020/03/theme-03.png 1398w, https://webnoneta.com/wp-content/uploads/2020/03/theme-03-300x103.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/theme-03-1024x350.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/theme-03-768x263.png 768w" sizes="(max-width: 1398px) 100vw, 1398px" /></figure>



<p>ここで、先程ダウンロードしておいたCocoonの親テーマを選択します。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="906" height="143" src="https://webnoneta.com/wp-content/uploads/2020/03/theme-04.png" alt="Cocoon親テーマ" class="wp-image-763" srcset="https://webnoneta.com/wp-content/uploads/2020/03/theme-04.png 906w, https://webnoneta.com/wp-content/uploads/2020/03/theme-04-300x47.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/theme-04-768x121.png 768w" sizes="(max-width: 906px) 100vw, 906px" /></figure>



<p>「今すぐインストール」をポチッと。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="756" height="237" src="https://webnoneta.com/wp-content/uploads/2020/03/theme-05.png" alt="今すぐインストール" class="wp-image-762" srcset="https://webnoneta.com/wp-content/uploads/2020/03/theme-05.png 756w, https://webnoneta.com/wp-content/uploads/2020/03/theme-05-300x94.png 300w" sizes="(max-width: 756px) 100vw, 756px" /></figure>



<p>インストールが完了すると、下図の画面になります。<br>「テーマのページに戻る」リンクをクリックしてください。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1530" height="331" src="https://webnoneta.com/wp-content/uploads/2020/03/theme-06.png" alt="インストール完了画面" class="wp-image-761" srcset="https://webnoneta.com/wp-content/uploads/2020/03/theme-06.png 1530w, https://webnoneta.com/wp-content/uploads/2020/03/theme-06-300x65.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/theme-06-1024x222.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/theme-06-768x166.png 768w" sizes="(max-width: 1530px) 100vw, 1530px" /></figure>



<p>親テーマがインストールされました！</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1333" height="532" src="https://webnoneta.com/wp-content/uploads/2020/03/theme-07.png" alt="Cocoon親テーマインストール完了" class="wp-image-760" srcset="https://webnoneta.com/wp-content/uploads/2020/03/theme-07.png 1333w, https://webnoneta.com/wp-content/uploads/2020/03/theme-07-300x120.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/theme-07-1024x409.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/theme-07-768x307.png 768w" sizes="(max-width: 1333px) 100vw, 1333px" /></figure>



<h3><span id="toc6">続いて子テーマをインストール</span></h3>



<p>続いて、子テーマをインストールします。<br>手順は、親テーマのインストールとまったく同じ。<br>テーマの「新規追加」から子テーマをファイル選択してインストールしてください。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="947" height="136" src="https://webnoneta.com/wp-content/uploads/2020/03/theme-08.png" alt="子テーマを選ぶ" class="wp-image-759" srcset="https://webnoneta.com/wp-content/uploads/2020/03/theme-08.png 947w, https://webnoneta.com/wp-content/uploads/2020/03/theme-08-300x43.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/theme-08-768x110.png 768w" sizes="(max-width: 947px) 100vw, 947px" /><figcaption>子テーマは、「cocoon-child-master」と名前が付いてます。</figcaption></figure>



<p>子テーマもインストールできました。子テーマは「Cocoon Child」という名前です。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1500" height="484" src="https://webnoneta.com/wp-content/uploads/2020/03/theme-09.png" alt="Cocoon子テーマインストール完了" class="wp-image-758" srcset="https://webnoneta.com/wp-content/uploads/2020/03/theme-09.png 1500w, https://webnoneta.com/wp-content/uploads/2020/03/theme-09-300x97.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/theme-09-1024x330.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/theme-09-768x248.png 768w" sizes="(max-width: 1500px) 100vw, 1500px" /></figure>



<p>最後に、子テーマを「有効化」して完了です。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1067" height="455" src="https://webnoneta.com/wp-content/uploads/2020/03/theme-10.png" alt="Cocoon子テーマ有効化" class="wp-image-757" srcset="https://webnoneta.com/wp-content/uploads/2020/03/theme-10.png 1067w, https://webnoneta.com/wp-content/uploads/2020/03/theme-10-300x128.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/theme-10-1024x437.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/theme-10-768x327.png 768w" sizes="(max-width: 1067px) 100vw, 1067px" /></figure>



<p>テーマの画面で、子テーマが有効になっていたらOKです。ブログを見ると、Cocoonのデザインに変わっています。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1060" height="495" src="https://webnoneta.com/wp-content/uploads/2020/03/theme-11.png" alt="Cocoon子テーマ有効" class="wp-image-774" srcset="https://webnoneta.com/wp-content/uploads/2020/03/theme-11.png 1060w, https://webnoneta.com/wp-content/uploads/2020/03/theme-11-300x140.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/theme-11-1024x478.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/theme-11-768x359.png 768w" sizes="(max-width: 1060px) 100vw, 1060px" /></figure>



<h2><span id="toc7">Cocoonを使い倒して、充実のブログ生活を！</span></h2>



<p>Cocoonの設定画面は以下のとおりです。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1830" height="602" src="https://webnoneta.com/wp-content/uploads/2020/03/theme-12.png" alt="Cocoon設定画面" class="wp-image-775" srcset="https://webnoneta.com/wp-content/uploads/2020/03/theme-12.png 1830w, https://webnoneta.com/wp-content/uploads/2020/03/theme-12-300x99.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/theme-12-1024x337.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/theme-12-768x253.png 768w, https://webnoneta.com/wp-content/uploads/2020/03/theme-12-1536x505.png 1536w" sizes="(max-width: 1830px) 100vw, 1830px" /></figure>



<p>設定内容ごとにタブでまとめてくれているので、設定がやりやすいです。<br>スキン（カスタマイズされたCocoonのデザイン）もたくさんあるし、スキンを選ぶだけでデザインが変わるので、難しいカスタマイズは必要ないです。</p>



<p>Cocoonのスゴイところは、プラグインをたくさん入れなくても、標準で機能が充実しているところです。<br>ブログの表示を高速化したり、SEO機能が充実していたり、SNSシェアボタンが標準で付いていたり、他にも数多くの便利機能が付いています。</p>



<p>これらの設定を使うことで、ブログとしての機能が充実します。<br>ブログは、記事執筆に時間をかけるのが本来ですが、ついついデザインのカスタマイズやプラグインの設定などに時間をかけてしまいがちになります。</p>



<p>でもCocoonの場合は、カスタマイズやプラグインに時間をかけなくても、キレイなデザインのブログが出来上がるので、記事執筆のほうに集中できるのが良いところだと思います。</p>



<p>ということで、Cocoonのインストール方法でした！</p>
]]></content:encoded>
					
					<wfw:commentRss>https://webnoneta.com/cocoon/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【初心者向け】WordPressブログの初め方（エックスサーバー環境）</title>
		<link>https://webnoneta.com/wordpress-blog/</link>
					<comments>https://webnoneta.com/wordpress-blog/#respond</comments>
		
		<dc:creator><![CDATA[みっちー]]></dc:creator>
		<pubDate>Sat, 21 Mar 2020 13:40:50 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://webnoneta.com/?p=627</guid>

					<description><![CDATA[今回はそんな方のための記事です。サーバー環境は、エックスサーバーになります。どんな手順でブログを開設するのか説明します。個人的にブログを始めるのは、エックスサーバーとWordPressの組み合わせが間違いないと思ってます [&#8230;]]]></description>
										<content:encoded><![CDATA[
<div class="wp-block-cocoon-blocks-icon-box question-box common-icon-box block-box">
<p>WordPressでブログを初めたいんだけど、どうして良いのかわからない・・・。<br>ブログ開設までの手順を知りたい。</p>
</div>



<p>今回はそんな方のための記事です。サーバー環境は、エックスサーバーになります。<br>どんな手順でブログを開設するのか説明します。<br>個人的にブログを始めるのは、エックスサーバーとWordPressの組み合わせが間違いないと思ってます。</p>



<p>では早速行ってみましょう！</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-14" checked><label class="toc-title" for="toc-checkbox-14">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">エックスサーバーを契約。独自ドメインを取得。</a><ol><li><a href="#toc2" tabindex="0">エックスサーバー契約</a></li><li><a href="#toc3" tabindex="0">独自ドメインを取ろう！</a></li></ol></li><li><a href="#toc4" tabindex="0">エックスサーバーに独自ドメインを設定</a><ol><li><a href="#toc5" tabindex="0">注意！他社でドメインを取った人はネームサーバーの設定をしましょう！</a></li></ol></li><li><a href="#toc6" tabindex="0">WordPressをインストール</a></li><li><a href="#toc7" tabindex="0">SSLの設定</a></li><li><a href="#toc8" tabindex="0">WordPressの基本設定</a><ol><li><a href="#toc9" tabindex="0">一般設定</a></li><li><a href="#toc10" tabindex="0">更新情報サービス</a></li><li><a href="#toc11" tabindex="0">パーマリンク設定</a></li></ol></li><li><a href="#toc12" tabindex="0">テーマのインストール（Cocoon）</a></li><li><a href="#toc13" tabindex="0">プラグインのインストール</a></li><li><a href="#toc14" tabindex="0">ブログ開設！</a></li></ol>
    </div>
  </div>

<h2><span id="toc1">エックスサーバーを契約。独自ドメインを取得。</span></h2>



<h3><span id="toc2">エックスサーバー契約</span></h3>



<p>まず最初にすることは、エックスサーバーの契約です。<br><a rel="nofollow noopener" target="_blank" href="https://px.a8.net/svt/ejp?a8mat=2TP8M3+BN5HGI+CO4+609HU">エックスサーバー</a> <img loading="lazy" border="0" width="1" height="1" src="https://www14.a8.net/0.gif?a8mat=2TP8M3+BN5HGI+CO4+609HU" alt="">のサイトで新規申し込みます。</p>



<div class="wp-block-cocoon-blocks-button-wrap-1 btn-wrap btn-wrap-block button-block btn-wrap-m has-background has-orange-background-color has-medium-font-size"><a rel="nofollow noopener" target="_blank" href="https://px.a8.net/svt/ejp?a8mat=2TP8M3+BN5HGI+CO4+609HU">エックスサーバー</a>
<img loading="lazy" border="0" width="1" height="1" src="https://www14.a8.net/0.gif?a8mat=2TP8M3+BN5HGI+CO4+609HU" alt=""></div>



<figure class="wp-block-image size-full"><img loading="lazy" width="1374" height="771" src="https://webnoneta.com/wp-content/uploads/2020/03/xserver-01.png" alt="エックスサーバー新規申し込み" class="wp-image-642" srcset="https://webnoneta.com/wp-content/uploads/2020/03/xserver-01.png 1374w, https://webnoneta.com/wp-content/uploads/2020/03/xserver-01-300x168.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/xserver-01-1024x575.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/xserver-01-768x431.png 768w, https://webnoneta.com/wp-content/uploads/2020/03/xserver-01-240x135.png 240w, https://webnoneta.com/wp-content/uploads/2020/03/xserver-01-320x180.png 320w, https://webnoneta.com/wp-content/uploads/2020/03/xserver-01-640x360.png 640w, https://webnoneta.com/wp-content/uploads/2020/03/xserver-01-698x393.png 698w" sizes="(max-width: 1374px) 100vw, 1374px" /></figure>



<p>お申し込みフォームで「新規お申し込み」を選択。<br>エックスサーバーは、10日間の無料お試し期間があります。無料期間内に支払い手続きをするようにしましょう。</p>



<p>プランは一番安い「X10プラン」で十分です。というか、ブログ運営なら十分すぎます。<br>これで月1,000円は、どう考えても安すぎます！</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1308" height="424" src="https://webnoneta.com/wp-content/uploads/2020/03/xserver-02.png" alt="エックスサーバープラン申し込み" class="wp-image-643" srcset="https://webnoneta.com/wp-content/uploads/2020/03/xserver-02.png 1308w, https://webnoneta.com/wp-content/uploads/2020/03/xserver-02-300x97.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/xserver-02-1024x332.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/xserver-02-768x249.png 768w" sizes="(max-width: 1308px) 100vw, 1308px" /></figure>



<p>あとは画面の指示に従って進めていくだけ。<br>契約が完了したら、エックスサーバーからメールが届きます。<br>これは大事に保管しておいてくださいね。僕はGoogleドライブにバックアップしています。</p>



<p><strong>参考）僕がエックスサーバーを勧める理由↓</strong></p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-reference">



<a href="https://webnoneta.com/blog-server/" title="ブログ運営にオススメのレンタルサーバー。エックスサーバーが最強の理由とは？" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img width="320" height="180" src="https://webnoneta.com/wp-content/uploads/2020/03/server-320x180.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" loading="lazy" srcset="https://webnoneta.com/wp-content/uploads/2020/03/server-320x180.jpg 320w, https://webnoneta.com/wp-content/uploads/2020/03/server-240x135.jpg 240w, https://webnoneta.com/wp-content/uploads/2020/03/server-640x360.jpg 640w, https://webnoneta.com/wp-content/uploads/2020/03/server-698x393.jpg 698w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">ブログ運営にオススメのレンタルサーバー。エックスサーバーが最強の理由とは？</div><div class="blogcard-snippet internal-blogcard-snippet">WordPressでブログ運営をするために必要なレンタルサーバー。レンタルサーバーは、エックスサーバーがおすすめです。スピード、安定度、サポート、価格の安さ、WordPressの運用のしやすさなど、弱点のないレンタルサーバーです。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=webnoneta.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">webnoneta.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2020.03.01</div></div></div></div></a>



</div>



<h3><span id="toc3">独自ドメインを取ろう！</span></h3>



<p>サーバー契約が終われば、ドメインの取得です。<br>エックスサーバーは、定期的にドメイン無料キャンペーンをしていますので、その期間中ならエックスサーバーで取得すると、めちゃくちゃお得です。</p>



<p>というのは、エックスサーバーを使い続ける限り、ドメインの維持管理費がずっと無料になるからです。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1426" height="415" src="https://webnoneta.com/wp-content/uploads/2020/03/domein-free.png" alt="ドメインがずっと無料" class="wp-image-645" srcset="https://webnoneta.com/wp-content/uploads/2020/03/domein-free.png 1426w, https://webnoneta.com/wp-content/uploads/2020/03/domein-free-300x87.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/domein-free-1024x298.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/domein-free-768x224.png 768w" sizes="(max-width: 1426px) 100vw, 1426px" /></figure>



<p>無料キャンペーンドメインの申し込み方は、以下を参考にしてください。</p>



<a rel="noopener" target="_blank" href="https://www.xserver.ne.jp/manual/man_order_campaign_domain.php#man_campaign-flow" title="&#29420;&#33258;&#12489;&#12513;&#12452;&#12531;&#27704;&#20037;&#28961;&#26009;&#29305;&#20856;&#65288;&#12461;&#12515;&#12531;&#12506;&#12540;&#12531;&#29305;&#20856;&#65289; | &#12524;&#12531;&#12479;&#12523;&#12469;&#12540;&#12496;&#12540;&#12394;&#12425;&#12456;&#12483;&#12463;&#12473;&#12469;&#12540;&#12496;&#12540;" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://s0.wordpress.com/mshots/v1/https%3A%2F%2Fwww.xserver.ne.jp%2Fmanual%2Fman_order_campaign_domain.php%23man_campaign-flow?w=320&#038;h=180" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="320" height="180" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">&#29420;&#33258;&#12489;&#12513;&#12452;&#12531;&#27704;&#20037;&#28961;&#26009;&#29305;&#20856;&#65288;&#12461;&#12515;&#12531;&#12506;&#12540;&#12531;&#29305;&#20856;&#65289; | &#12524;&#12531;&#12479;&#12523;&#12469;&#12540;&#12496;&#12540;&#12394;&#12425;&#12456;&#12483;&#12463;&#12473;&#12469;&#12540;&#12496;&#12540;</div><div class="blogcard-snippet external-blogcard-snippet">レンタルサーバー「エックスサーバー」のご利用マニュアル｜不定期で実施している「ドメインプレゼントキャンペーン」の適用対象となったユーザー様がキャンペーンを利用するための手順について記載しています。</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=www.xserver.ne.jp" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">www.xserver.ne.jp</div></div></div></div></a>



<p>エックスサーバーは、頻繁にドメイン無料キャンペーンをしているんですが、タイミング的にキャンペーンをやっていない場合は、<a rel="nofollow noopener" target="_blank" href="https://px.a8.net/svt/ejp?a8mat=3B7M8P+CP9B9E+50+2HHVNM">お名前.com</a> <img loading="lazy" border="0" width="1" height="1" src="https://www13.a8.net/0.gif?a8mat=3B7M8P+CP9B9E+50+2HHVNM" alt="">か、<a rel="nofollow noopener" target="_blank" href="https://px.a8.net/svt/ejp?a8mat=3B97DR+9SH0SI+1JUK+I35CY">バリュードメイン</a> <img loading="lazy" border="0" width="1" height="1" src="https://www17.a8.net/0.gif?a8mat=3B97DR+9SH0SI+1JUK+I35CY" alt="">がおすすめです。</p>



<p>ドメインの決め方は、以下を参考にしてください↓。</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-reference">













<a href="https://webnoneta.com/domain/" title="ドメインの決め方を解説。失敗しない独自ドメインは、こう決めろ！" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img width="320" height="180" src="https://webnoneta.com/wp-content/uploads/2020/03/domain-320x180.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" loading="lazy" srcset="https://webnoneta.com/wp-content/uploads/2020/03/domain-320x180.jpg 320w, https://webnoneta.com/wp-content/uploads/2020/03/domain-240x135.jpg 240w, https://webnoneta.com/wp-content/uploads/2020/03/domain-640x360.jpg 640w, https://webnoneta.com/wp-content/uploads/2020/03/domain-698x393.jpg 698w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">ドメインの決め方を解説。失敗しない独自ドメインは、こう決めろ！</div><div class="blogcard-snippet internal-blogcard-snippet">WordPressでブログ運営をする場合、「独自ドメイン」を取得しなければいけません。独自ドメインとは、世界に一つだけのオリジナルのドメインのことです。一度取得すると、ずっと使い続けることができます。いわば、あなたの資産になりま...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=webnoneta.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">webnoneta.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2020.03.05</div></div></div></div></a>













</div>



<h2><span id="toc4">エックスサーバーに独自ドメインを設定</span></h2>



<p>ドメインが取得できたら、エックスサーバーに独自ドメインを設定します。<br>エックスサーバーのサーバーパネル（管理画面）を開きましょう。</p>



<p>右上の方に「ドメイン設定」があるので、クリック。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1545" height="512" src="https://webnoneta.com/wp-content/uploads/2020/03/domain-settei.png" alt="エックスサーバー管理画面" class="wp-image-648" srcset="https://webnoneta.com/wp-content/uploads/2020/03/domain-settei.png 1545w, https://webnoneta.com/wp-content/uploads/2020/03/domain-settei-300x99.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/domain-settei-1024x339.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/domain-settei-768x255.png 768w, https://webnoneta.com/wp-content/uploads/2020/03/domain-settei-1536x509.png 1536w" sizes="(max-width: 1545px) 100vw, 1545px" /></figure>



<p>「ドメイン設定追加」タブをクリック。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="824" height="296" src="https://webnoneta.com/wp-content/uploads/2020/03/domein-shinki.png" alt="ドメイン設定追加" class="wp-image-650" srcset="https://webnoneta.com/wp-content/uploads/2020/03/domein-shinki.png 824w, https://webnoneta.com/wp-content/uploads/2020/03/domein-shinki-300x108.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/domein-shinki-768x276.png 768w" sizes="(max-width: 824px) 100vw, 824px" /></figure>



<p>取得済みのドメイン名を入力して、確認画面に進んで、確定すればこれでOKです。<br>簡単ですね。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1197" height="568" src="https://webnoneta.com/wp-content/uploads/2020/03/domein-nyuryou.png" alt="新規ドメイン設定" class="wp-image-652" srcset="https://webnoneta.com/wp-content/uploads/2020/03/domein-nyuryou.png 1197w, https://webnoneta.com/wp-content/uploads/2020/03/domein-nyuryou-300x142.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/domein-nyuryou-1024x486.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/domein-nyuryou-768x364.png 768w" sizes="(max-width: 1197px) 100vw, 1197px" /></figure>



<h3><span id="toc5">注意！他社でドメインを取った人はネームサーバーの設定をしましょう！</span></h3>



<p>ここで大切な注意点があります。<br>エックスサーバー（エックスドメイン）以外でドメインを取った場合、ネームサーバーの変更を必ずしてください。</p>



<div class="wp-block-cocoon-blocks-icon-box information-box common-icon-box block-box">
<p><strong>ネームサーバーってなに？<br></strong>ネームサーバーとは、ドメイン名をIPアドレスに変換してくれるサーバーのことです。<br>要するに、「ドメインにアクセスしたら、このサーバーの中にあるファイルを見てね！」と、紐付けするようなイメージです。<br>「鈴木さんちは、東京都練馬区〇〇〇〇の1番地」と、名前と住所を紐付けるようなものです。</p>
</div>



<p>例えば、<a rel="nofollow noopener" target="_blank" data-atag-id="3" data-post-id="627" href="https://px.a8.net/svt/ejp?a8mat=3B97DR+9SH0SI+1JUK+I35CY">バリュードメイン</a>
<img border="0" width="1" height="1" src="https://www17.a8.net/0.gif?a8mat=3B97DR+9SH0SI+1JUK+I35CY" alt="">の場合、管理画面に「ネームサーバー変更」があるので、エックスサーバー指定のネームサーバーに変更します。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="777" height="525" src="https://webnoneta.com/wp-content/uploads/2020/03/nameserver.png" alt="ネームサーバー変更" class="wp-image-659" srcset="https://webnoneta.com/wp-content/uploads/2020/03/nameserver.png 777w, https://webnoneta.com/wp-content/uploads/2020/03/nameserver-300x203.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/nameserver-768x519.png 768w" sizes="(max-width: 777px) 100vw, 777px" /><figcaption>バリュードメインの管理画面。ネームサーバーの変更は、ドメインの管理画面で簡単に行なえます。<br>※エックスサーバーの管理画面ではなく、ドメインを取得したところの管理画面で設定しましょう。</figcaption></figure>



<p>エックスサーバーのネームサーバーは、サーバーパネルの「サーバー情報」で確認できますので、そのままコピペしてネームサーバーを変更してください。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="646" height="396" src="https://webnoneta.com/wp-content/uploads/2020/03/server-info.png" alt="サーバー情報" class="wp-image-661" srcset="https://webnoneta.com/wp-content/uploads/2020/03/server-info.png 646w, https://webnoneta.com/wp-content/uploads/2020/03/server-info-300x184.png 300w" sizes="(max-width: 646px) 100vw, 646px" /></figure>



<figure class="wp-block-image size-full"><img loading="lazy" width="1122" height="331" src="https://webnoneta.com/wp-content/uploads/2020/03/nameserver-shitei.png" alt="エックスサーバーのネームサーバー" class="wp-image-662" srcset="https://webnoneta.com/wp-content/uploads/2020/03/nameserver-shitei.png 1122w, https://webnoneta.com/wp-content/uploads/2020/03/nameserver-shitei-300x89.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/nameserver-shitei-1024x302.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/nameserver-shitei-768x227.png 768w" sizes="(max-width: 1122px) 100vw, 1122px" /></figure>



<h2><span id="toc6">WordPressをインストール</span></h2>



<p>ドメイン設定が終われば、WordPressのインストールです。<br>エックスサーバーは、めちゃくちゃ簡単にWordPressをインストールできます。</p>



<p>サーバーパネルの「WordPress簡単インストール」をクリック。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="492" height="268" src="https://webnoneta.com/wp-content/uploads/2020/03/wp-install-1.png" alt="WordPressインストール" class="wp-image-665" srcset="https://webnoneta.com/wp-content/uploads/2020/03/wp-install-1.png 492w, https://webnoneta.com/wp-content/uploads/2020/03/wp-install-1-300x163.png 300w" sizes="(max-width: 492px) 100vw, 492px" /></figure>



<p>「WordPressインストール」タブをクリック。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="808" height="339" src="https://webnoneta.com/wp-content/uploads/2020/03/wp-install-02.png" alt="WordPressインストール" class="wp-image-666" srcset="https://webnoneta.com/wp-content/uploads/2020/03/wp-install-02.png 808w, https://webnoneta.com/wp-content/uploads/2020/03/wp-install-02-300x126.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/wp-install-02-768x322.png 768w" sizes="(max-width: 808px) 100vw, 808px" /></figure>



<p>インストール画面は、以下の通りです。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1105" height="1060" src="https://webnoneta.com/wp-content/uploads/2020/03/wp-installgamen.png" alt="WordPressインストール画面" class="wp-image-668" srcset="https://webnoneta.com/wp-content/uploads/2020/03/wp-installgamen.png 1105w, https://webnoneta.com/wp-content/uploads/2020/03/wp-installgamen-300x288.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/wp-installgamen-1024x982.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/wp-installgamen-768x737.png 768w" sizes="(max-width: 1105px) 100vw, 1105px" /></figure>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-check-circle block-box has-background has-border-color has-icon-color has-watery-blue-background-color has-blue-border-color has-deep-orange-icon-color"><div class="iconlist-title">WordPressインストールの項目について</div>
<ul><li><strong>サイトURL<br></strong>WordPressをインストールする場所。ここがあなたのブログのアドレスになります。<br>普通はここはドメイン名だけでOKです。</li><li><strong>ブログ名</strong><br>あなたのブログ名を入れます。後で変更も出来ます。</li><li><strong>ユーザー名</strong><br>WordPressの管理画面にログインする時に必要です。</li><li><strong>パスワード</strong><br>WordPressの管理画面にログインする時に必要です。</li><li><strong>メールアドレス<br></strong>WordPressのインストールが完了したときなどに、メール通知してくれます。</li></ul>
</div>



<p>あとは確認画面で「インストールする」ボタンを押したら完了。<br>これでWordPressがサーバーにインストールされました。めっちゃ簡単でしょ？</p>



<p>インストールが完了したら、管理画面のログインアドレスが表示されるので、ブックマークするか、必ずメモして保存しておきましょう。</p>



<h2><span id="toc7">SSLの設定</span></h2>



<p><strong>SSLとは、ネット通信を暗号化する仕組みのことです。<br></strong>最近、色んなWebサイトのアドレスが「https://〜」と、なっているでしょう？<br>従来はhttp://だったのですが、そこに「ｓ」が付いてます。<br>これが、SSL通信をやってるよ！という目印になります。<br>今やブログには当たり前の技術なので、SSLの設定をしましょう。</p>



<p>エックスサーバーの場合、SSL証明を無料で使えるんです。これってお得！<br>設定はエックスサーバーのサーバーパネルで簡単に行えます。</p>



<p>まずはエックスサーバーのサーバーパネルのドメインの場所に「SSL設定」があるので、SSL設定を行います。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="537" height="408" src="https://webnoneta.com/wp-content/uploads/2020/03/ssl01.png" alt="SSL設定" class="wp-image-677" srcset="https://webnoneta.com/wp-content/uploads/2020/03/ssl01.png 537w, https://webnoneta.com/wp-content/uploads/2020/03/ssl01-300x228.png 300w" sizes="(max-width: 537px) 100vw, 537px" /></figure>



<p>サーバーでのSSL設定が終わると、WordPressの管理画面にログインしてアドレスを「https」に変更します。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="957" height="232" src="https://webnoneta.com/wp-content/uploads/2020/03/ssl04.png" alt="httpsに変更" class="wp-image-689" srcset="https://webnoneta.com/wp-content/uploads/2020/03/ssl04.png 957w, https://webnoneta.com/wp-content/uploads/2020/03/ssl04-300x73.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/ssl04-768x186.png 768w" sizes="(max-width: 957px) 100vw, 957px" /><figcaption>WordPress管理画面の「設定」＞「一般」を開いて、httpsに変更してください。</figcaption></figure>



<p><strong>SSL設定については、コチラで詳しく解説しています↓</strong></p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-reference">


<a href="https://webnoneta.com/ssl/" title="SSL通信をエックスサーバーで設定する方法。WordPressとの組み合わせで、簡単に常時SSL化ができる！" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img width="320" height="180" src="https://webnoneta.com/wp-content/uploads/2020/03/ssl-320x180.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" loading="lazy" srcset="https://webnoneta.com/wp-content/uploads/2020/03/ssl-320x180.jpg 320w, https://webnoneta.com/wp-content/uploads/2020/03/ssl-240x135.jpg 240w, https://webnoneta.com/wp-content/uploads/2020/03/ssl-640x360.jpg 640w, https://webnoneta.com/wp-content/uploads/2020/03/ssl-698x393.jpg 698w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">SSL通信をエックスサーバーで設定する方法。WordPressとの組み合わせで、簡単に常時SSL化ができる！</div><div class="blogcard-snippet internal-blogcard-snippet">SSLとは、ネット通信を暗号化する仕組みのことで、最近のブログやWebサイトでは当たり前のように設定されています。今回の記事は、エックスサーバーでSSL通信を設定する方法を知りたい。WordPressでSSL通信をする時...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=webnoneta.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">webnoneta.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2020.03.22</div></div></div></div></a>


</div>



<h2><span id="toc8">WordPressの基本設定</span></h2>



<p>次にWordPressの基本設定を行います。<br>設定するところは、以下の項目になります。</p>



<h3><span id="toc9">一般設定</span></h3>



<p>サイトのタイトルは、WordPressをインストールした時のものが入っています。<br>ここはしょっちゅう変更すると、SEO（検索エンジン上位対策）に不利になりますので、できるだけ変更しないようにしてください。<br>（最初の設定時は変更しても大丈夫です）</p>



<p>キャッチフレーズは、あなたのブログでどんなテーマについて書いてあるのかを分かりやすく入力してください。WordPressのテーマにもよりますが、多くはタイトルの近くに表示されます。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="903" height="272" src="https://webnoneta.com/wp-content/uploads/2020/03/Screenshot-2020-03-21-at-22.07.12.png" alt="WordPress一般設定" class="wp-image-709" srcset="https://webnoneta.com/wp-content/uploads/2020/03/Screenshot-2020-03-21-at-22.07.12.png 903w, https://webnoneta.com/wp-content/uploads/2020/03/Screenshot-2020-03-21-at-22.07.12-300x90.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/Screenshot-2020-03-21-at-22.07.12-768x231.png 768w" sizes="(max-width: 903px) 100vw, 903px" /></figure>



<h3><span id="toc10">更新情報サービス</span></h3>



<p>WordPressは、記事を更新すると「更新したで〜」という通知を、更新通知サービスに連絡してくれる便利な機能があります。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="789" height="485" src="https://webnoneta.com/wp-content/uploads/2020/03/Screenshot-2020-03-21-at-22.12.29.png" alt="更新通知サービス" class="wp-image-710" srcset="https://webnoneta.com/wp-content/uploads/2020/03/Screenshot-2020-03-21-at-22.12.29.png 789w, https://webnoneta.com/wp-content/uploads/2020/03/Screenshot-2020-03-21-at-22.12.29-300x184.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/Screenshot-2020-03-21-at-22.12.29-768x472.png 768w" sizes="(max-width: 789px) 100vw, 789px" /></figure>



<p>これを設定しておくと、記事をGoogleに見つけてもらいやすくなり、比較的速くGoogleの検索結果に出てくる可能性があります。<br>（確実じゃないし、順位を上げてくれるものでもないので、あくまで気休め程度に僕は考えてます）</p>



<p>一応、僕が設定している更新通知サービスを下に書いておきます。すでに停止しているものがあるかもしれませんので、ご了承ください。</p>



<div class="wp-block-cocoon-blocks-sticky-box blank-box sticky block-box">
<p>http://rpc.pingomatic.com/<br>
http://rpc.reader.livedoor.com/ping<br>
http://ping.freeblogranking.com/xmlrpc/<br>
http://api.my.yahoo.com/RPC2<br>
http://ping.blo.gs/<br>
http://rpc.weblogs.com/RPC2<br>
http://rpc.pingomatic.com/<br>
http://xping.pubsub.com/ping/<br>
http://ping.ask.jp/xmlrpc.m</p>
</div>



<h3><span id="toc11">パーマリンク設定</span></h3>



<p>パーマリンクとは、記事ページに個別に割り当てられるアドレスのことです。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="440" height="60" src="https://webnoneta.com/wp-content/uploads/2020/03/Screenshot-2020-03-21-at-22.26.14.png" alt="パーマリンク" class="wp-image-715" srcset="https://webnoneta.com/wp-content/uploads/2020/03/Screenshot-2020-03-21-at-22.26.14.png 440w, https://webnoneta.com/wp-content/uploads/2020/03/Screenshot-2020-03-21-at-22.26.14-300x41.png 300w" sizes="(max-width: 440px) 100vw, 440px" /></figure>



<p>WordPressの管理画面の「一般」＞「パーマリンク設定」で、パーマリンクを「投稿名」に変更します。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1302" height="768" src="https://webnoneta.com/wp-content/uploads/2020/03/toukoumei.png" alt="パーマリンクを投稿名に変更" class="wp-image-716" srcset="https://webnoneta.com/wp-content/uploads/2020/03/toukoumei.png 1302w, https://webnoneta.com/wp-content/uploads/2020/03/toukoumei-300x177.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/toukoumei-1024x604.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/toukoumei-768x453.png 768w" sizes="(max-width: 1302px) 100vw, 1302px" /></figure>



<p>これは、記事のアドレスを意味のない数字や「?p=123」などにするのではなく、自分でアドレスを決められるメリットがあります。</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="1500" height="219" src="https://webnoneta.com/wp-content/uploads/2020/03/pamalink.png" alt="パーマリンク" class="wp-image-717" srcset="https://webnoneta.com/wp-content/uploads/2020/03/pamalink.png 1500w, https://webnoneta.com/wp-content/uploads/2020/03/pamalink-300x44.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/pamalink-1024x150.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/pamalink-768x112.png 768w" sizes="(max-width: 1500px) 100vw, 1500px" /></figure>



<p>記事の内容を表す英文にすることで、あなたのブログ見てくれる人にも分かりやすく、SEO対策にもなります。</p>



<h2><span id="toc12">テーマのインストール（Cocoon）</span></h2>



<p>基本設定が終われば、テーマをインストールします。<br>WordPressのテーマとは、ブログのデザインや機能などが入ったテンプレートのことで、このテーマを設定すると、一瞬にしてデザインが変更できます。</p>



<p>普通のWebサイトだと、１回作ったデザインは変更するのが難しいんですが、WordPressの場合はテーマの変更がすごく簡単で、気軽にデザインを変更出来るのがスゴイところです。</p>



<p>テーマには有料・無料のものがたくさんあるんですが、僕のオススメは無料の「Cocoon（コクーン）」というテーマです。</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-reference-link">




<a rel="noopener" target="_blank" href="https://wp-cocoon.com/" title="Cocoon" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://webnoneta.com/wp-content/uploads/cocoon-resources/blog-card-cache/75b272d5c162b0e3d6c69c9d1f35cb0f.jpg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="320" height="180" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Cocoon</div><div class="blogcard-snippet external-blogcard-snippet">SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=wp-cocoon.com" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">wp-cocoon.com</div></div></div></div></a>




</div>



<p>このCocoonはマジですごくて、シンプルなんだけど機能豊富、初心者から上級者まですごく使いやすいテーマです。無料テーマなのに、そんじょそこらの有料テーマよりも良く出来ているので、まずはこのテーマをインストールしましょう。</p>



<p><strong>テーマのインストール方法は、コチラで詳しく解説しています↓。</strong></p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-reference">

<a href="https://webnoneta.com/cocoon/" title="【超簡単】Cocoon（コクーン）テーマをインストールする方法" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img width="320" height="180" src="https://webnoneta.com/wp-content/uploads/2020/03/cocoon-install-320x180.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" loading="lazy" srcset="https://webnoneta.com/wp-content/uploads/2020/03/cocoon-install-320x180.jpg 320w, https://webnoneta.com/wp-content/uploads/2020/03/cocoon-install-240x135.jpg 240w, https://webnoneta.com/wp-content/uploads/2020/03/cocoon-install-640x360.jpg 640w, https://webnoneta.com/wp-content/uploads/2020/03/cocoon-install-698x393.jpg 698w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">【超簡単】Cocoon（コクーン）テーマをインストールする方法</div><div class="blogcard-snippet internal-blogcard-snippet">このブログは、Cocoon（コクーン）という無料テーマを使っています。僕が思うに、WordPressの無料テーマの中では最強のテーマです。Cocoonはすごい！最強の無料テーマだ。軽い、速い、使いやすいの三拍子を揃...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=webnoneta.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">webnoneta.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2020.03.22</div></div></div></div></a>

</div>



<h2><span id="toc13">プラグインのインストール</span></h2>



<p>プラグインとは、WordPressの機能を拡張してくれるツールです。<br>例えば、こんなことが出来たります。</p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-check-circle block-box has-background has-border-color has-icon-color has-watery-blue-background-color has-blue-border-color has-orange-icon-color"><div class="iconlist-title">WordPressプラグインで出来ることの例</div>
<ul><li>画像を自動で圧縮して最適化してくれる。</li><li>Googleサイトマップを自動で作ってくれる。</li><li>WordPressの表示スピードを速くしてくれる。</li><li>データベースを最適化して、WordPressの動きを軽くしてくれる。</li></ul>
</div>



<p>などなど、他にも色んな機能を拡張できます。<br>これらはほとんど無料で追加でき、実際僕もすべて無料のプラグインを使っています。</p>



<p>ただし、プラグインを入れすぎるとブログが重くなることもあるので、出来るなら最低限の数がベストです。<br>実はWordPressテーマの「Cocoon」は、本来プラグインがないと出来なかった機能が標準で付いていて、プラグインを最小限にできるようになっています。<br>（この点も、僕がCocoonを推す理由の一つです）</p>



<p><strong>オススメのプラグインと、インストールの方法はコチラから↓。</strong></p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-reference">
<a href="https://webnoneta.com/plugin/" title="【WordPress】おすすめプラグインを紹介します。（Cocoonテーマ環境）" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img width="320" height="180" src="https://webnoneta.com/wp-content/uploads/2020/03/plugin-catch-320x180.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" loading="lazy" srcset="https://webnoneta.com/wp-content/uploads/2020/03/plugin-catch-320x180.jpg 320w, https://webnoneta.com/wp-content/uploads/2020/03/plugin-catch-240x135.jpg 240w, https://webnoneta.com/wp-content/uploads/2020/03/plugin-catch-640x360.jpg 640w, https://webnoneta.com/wp-content/uploads/2020/03/plugin-catch-698x393.jpg 698w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">【WordPress】おすすめプラグインを紹介します。（Cocoonテーマ環境）</div><div class="blogcard-snippet internal-blogcard-snippet">このブログはCocoon（コクーン）というWordPressテーマを使っていますが、その環境でインストールしている、おすすめのプラグインを紹介します。Cocoonは、今までプラグインがないと出来なかった機能が標準で付いているので、...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=webnoneta.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">webnoneta.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2020.03.23</div></div></div></div></a>
</div>



<h2><span id="toc14">ブログ開設！</span></h2>



<figure class="wp-block-image size-full"><img loading="lazy" width="1500" height="999" src="https://webnoneta.com/wp-content/uploads/2020/03/iwai.jpg" alt="ブログ開設おめでとう" class="wp-image-706" srcset="https://webnoneta.com/wp-content/uploads/2020/03/iwai.jpg 1500w, https://webnoneta.com/wp-content/uploads/2020/03/iwai-300x200.jpg 300w, https://webnoneta.com/wp-content/uploads/2020/03/iwai-1024x682.jpg 1024w, https://webnoneta.com/wp-content/uploads/2020/03/iwai-768x511.jpg 768w" sizes="(max-width: 1500px) 100vw, 1500px" /></figure>



<p>以上でブログ開設完了です！<br>最初は「難しいな〜」と感じるかもしれませんが、今回説明した手順で進めてみてください。<br>案外簡単に設定出来ると思いますよ。</p>



<p>後は自分のペースでブログ執筆を楽しんでください。<br>習慣化すると、毎日なにか書かないと気が済まないほどにハマるかもしれませんよ！</p>
]]></content:encoded>
					
					<wfw:commentRss>https://webnoneta.com/wordpress-blog/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>WordPressでCocoonテーマを使っている人は、ブロックエディタにしたほうが作業が捗るよ！</title>
		<link>https://webnoneta.com/gutenberg/</link>
					<comments>https://webnoneta.com/gutenberg/#respond</comments>
		
		<dc:creator><![CDATA[みっちー]]></dc:creator>
		<pubDate>Mon, 16 Mar 2020 15:19:39 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://webnoneta.com/?p=485</guid>

					<description><![CDATA[WordPress5.0から導入された新しいエディタが、ブロックエディタです。通称、グーテンベルグ（Gutenberg）エディタ。 導入当初は賛否両論というか、否定のほうが多かったかな。今まで使い慣れたエディターからガラ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>WordPress5.0から導入された新しいエディタが、ブロックエディタです。<br>通称、グーテンベルグ（Gutenberg）エディタ。</p>



<p>導入当初は賛否両論というか、否定のほうが多かったかな。<br>今まで使い慣れたエディターからガラリと変わったので、「使いにくい」と感じた人が多かったんじゃないでしょうか。</p>



<p>そういう僕も、「使いにくい」と思って、今までブロックエディタは使っていませんでした。<br>愛用しているWordPressのテーマ「Cocoon（コクーン）」では、プラグインを使わないでも、簡単に旧エディターを使える設定にできるので。</p>



<p>ところがところが！<br><strong><span class="marker-under">ふとした気まぐれでブロックエディタに切り替えたところ、作業が今までよりも捗るじゃないですか！</span></strong></p>



<p>特にCocoonをテーマにしている人は、ブロックエディタにすることを強くオススメします。<br>旧エディタよりも使い勝手が良くなってますから。<br>いや〜、ブロックエディタに対して偏見を持ってましたわ。</p>



<p>ということで今回の記事は、僕がブロックエディタにして「使いやすい！」と思った点を中心に書いていきます。特にCocoon使いの人は注目です。</p>



<p>あ、ブロックエディタの使い方の解説はしません。使い方解説が欲しい人は、僕の記事よりも詳しいブログがたくさんあるので、そっちを見てもらったほうが満足度高いと思います。</p>



<p>今回はあくまで、旧エディタに比べて僕が「便利だな〜」と思った機能を紹介するというスタンスで書きます。では、いってみましょう〜！</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-16" checked><label class="toc-title" for="toc-checkbox-16">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">文字の装飾が使いやすい！</a><ol><li><a href="#toc2" tabindex="0">メニューバーがすぐ近くにあるのは便利だ！</a></li><li><a href="#toc3" tabindex="0">Cocoon専用の文字装飾が分かりやすい。</a></li><li><a href="#toc4" tabindex="0">ボタンやボックスも視覚的で分かりやすい</a></li></ol></li><li><a href="#toc5" tabindex="0">Cocoon専用のブロックエディターが使いやすい！</a></li><li><a href="#toc6" tabindex="0">ブロックエディター全般で、便利だな〜と思った機能</a><ol><li><a href="#toc7" tabindex="0">再利用ブロックで、記事作成が捗る</a></li><li><a href="#toc8" tabindex="0">2列、3列デザイン（カラムデザイン）が出来る</a></li><li><a href="#toc9" tabindex="0">画像アップロードが簡単</a></li><li><a href="#toc10" tabindex="0">画面を上下方向に広く使える</a></li></ol></li><li><a href="#toc11" tabindex="0">結論！これからはブロックエディターの時代だ</a></li></ol>
    </div>
  </div>

<h2><span id="toc1">文字の装飾が使いやすい！</span></h2>



<h3><span id="toc2">メニューバーがすぐ近くにあるのは便利だ！</span></h3>



<p>ブロックエディタにして一番最初に思ったことは、<strong>「文字の装飾がしやすい！」</strong>です。<br>ブロックエディタは、段落ごとにブロックに分けられていて、そのブロックの真上に装飾ボタンが出ます。</p>



<p>コレが便利で、今までの旧エディタに比べると、マウスをエディタ画面の一番上まで移動しなくていいんです。<br>これが、ブロックエディタ↓。</p>



<figure class="wp-block-image size-full waku"><img loading="lazy" width="1132" height="252" src="https://webnoneta.com/wp-content/uploads/2020/03/screenshot-webnoneta.com-2020.03.15-21_34_37.png" alt="ブロックエディタの編集ボタン" class="wp-image-492" srcset="https://webnoneta.com/wp-content/uploads/2020/03/screenshot-webnoneta.com-2020.03.15-21_34_37.png 1132w, https://webnoneta.com/wp-content/uploads/2020/03/screenshot-webnoneta.com-2020.03.15-21_34_37-300x67.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/screenshot-webnoneta.com-2020.03.15-21_34_37-1024x228.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/screenshot-webnoneta.com-2020.03.15-21_34_37-768x171.png 768w" sizes="(max-width: 1132px) 100vw, 1132px" /></figure>



<p>ブロックを選択したときだけ、上のように編集ボタンが出てきます。<br>ブロックの真上に出てくるので、マウスを移動することなく簡単に編集できます。</p>



<p>旧エディタは、下の図のようにエディタの上部にメニューが固定されるので、下の方の文字に装飾する場合、ポインタの移動距離が長くなって、ちょっと面倒くさかったです。</p>



<figure class="wp-block-image size-full waku"><img loading="lazy" width="890" height="577" src="https://webnoneta.com/wp-content/uploads/2020/03/old-edita.png" alt="旧エディタのメニュー" class="wp-image-496" srcset="https://webnoneta.com/wp-content/uploads/2020/03/old-edita.png 890w, https://webnoneta.com/wp-content/uploads/2020/03/old-edita-300x194.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/old-edita-768x498.png 768w" sizes="(max-width: 890px) 100vw, 890px" /></figure>



<h3><span id="toc3">Cocoon専用の文字装飾が分かりやすい。</span></h3>



<p>Cocoonテーマには便利な文字装飾があって、めちゃくちゃ使いやすいのですが、ブロックエディタにすると、視覚的にすごく分かりやすくなります。<br>例えば、<span class="marker-under">アンダーラインマーカー</span>。</p>



<p>旧エディタだと、下の図のように文字だけでしか表現出来ていないので、視覚的に分かりにくかった・・・</p>



<figure class="wp-block-image size-full waku"><img loading="lazy" width="1099" height="410" src="https://webnoneta.com/wp-content/uploads/2020/03/old-underline.png" alt="旧エディタのアンダーラインマーカー" class="wp-image-498" srcset="https://webnoneta.com/wp-content/uploads/2020/03/old-underline.png 1099w, https://webnoneta.com/wp-content/uploads/2020/03/old-underline-300x112.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/old-underline-1024x382.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/old-underline-768x287.png 768w" sizes="(max-width: 1099px) 100vw, 1099px" /></figure>



<p>でも、ブロックエディタでは視覚的に分かりやすいメニューになっています。</p>



<figure class="wp-block-image size-full waku"><img loading="lazy" width="1126" height="266" src="https://webnoneta.com/wp-content/uploads/2020/03/under-line.png" alt="ブロックエディタで文字装飾" class="wp-image-499" srcset="https://webnoneta.com/wp-content/uploads/2020/03/under-line.png 1126w, https://webnoneta.com/wp-content/uploads/2020/03/under-line-300x71.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/under-line-1024x242.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/under-line-768x181.png 768w" sizes="(max-width: 1126px) 100vw, 1126px" /></figure>



<h3><span id="toc4">ボタンやボックスも視覚的で分かりやすい</span></h3>



<p>文字の装飾だけじゃなくて、ボタンやボックスも視覚的にすごく分かりやすくなっています。<br>例えばボタンは、こんな感じで選ぶことが出来ます↓。</p>



<figure class="wp-block-image size-full waku"><img loading="lazy" width="638" height="463" src="https://webnoneta.com/wp-content/uploads/2020/03/button01.png" alt="ボタンの選択" class="wp-image-503" srcset="https://webnoneta.com/wp-content/uploads/2020/03/button01.png 638w, https://webnoneta.com/wp-content/uploads/2020/03/button01-300x218.png 300w" sizes="(max-width: 638px) 100vw, 638px" /></figure>



<p>ボタンのサイズや色も、右側の設定パレットで簡単に変更できます。</p>



<figure class="wp-block-image size-full waku"><img loading="lazy" width="1582" height="276" src="https://webnoneta.com/wp-content/uploads/2020/03/button02.png" alt="ボタンの色設定" class="wp-image-504" srcset="https://webnoneta.com/wp-content/uploads/2020/03/button02.png 1582w, https://webnoneta.com/wp-content/uploads/2020/03/button02-300x52.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/button02-1024x179.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/button02-768x134.png 768w, https://webnoneta.com/wp-content/uploads/2020/03/button02-1536x268.png 1536w" sizes="(max-width: 1582px) 100vw, 1582px" /></figure>



<p>ボックス等も、視覚的に分かりやすく設定できます。<br>ブロックエディタに対応したCocoonの表現は、公式サイトに詳しく載っていますので、見てください。↓</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-reference-link">




<a rel="noopener" target="_blank" href="https://wp-cocoon.com/new-block-editor-features-v2-0-0/" title="Cocoon 2.0でブロックエディターを強化。新しい表現が可能に。" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://webnoneta.com/wp-content/uploads/cocoon-resources/blog-card-cache/29cc179da4210358158749ce6e07c494.jpg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="320" height="180" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Cocoon 2.0でブロックエディターを強化。新しい表現が可能に。</div><div class="blogcard-snippet external-blogcard-snippet">Cocoon2.0で強化されたGutenbergブロックの案内と使用例です。</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=wp-cocoon.com" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">wp-cocoon.com</div></div></div></div></a>




</div>



<h2><span id="toc5">Cocoon専用のブロックエディターが使いやすい！</span></h2>



<p>Cocoonテーマを使うと、Cocoon専用のブロックエディタを使えます。</p>



<figure class="wp-block-image size-full waku"><img loading="lazy" width="626" height="417" src="https://webnoneta.com/wp-content/uploads/2020/03/cocoon-only.png" alt="Cocoon専用ブロクエディタ" class="wp-image-509" srcset="https://webnoneta.com/wp-content/uploads/2020/03/cocoon-only.png 626w, https://webnoneta.com/wp-content/uploads/2020/03/cocoon-only-300x200.png 300w" sizes="(max-width: 626px) 100vw, 626px" /></figure>



<p>このように、Cocoonオリジナルのブロックエディタを使えるので、視覚的にすごく分かりやすいし、作業が捗ります。</p>



<h2><span id="toc6">ブロックエディター全般で、便利だな〜と思った機能</span></h2>



<h3><span id="toc7">再利用ブロックで、記事作成が捗る</span></h3>



<p>一度書いた記事や作ったボタンなどを、他の記事で使いたいと思ったことないですか？<br>旧エディタの時は、作ったボタンなどを他の記事で使いまわしするのって、出来なかったと思います。まあ、プラグインを使ってショートコードを入れるって手はありましたが・・・</p>



<p>ところが<strong><span class="marker-under">ブロックエディタでは、記事やボタン等の使いまわしがとても簡単に出来ます！</span></strong></p>



<p>それが、<span class="bold-red">「再利用ブロック」</span>という機能です。<br>さっそく、試してみましょう。<br>例えば、このようなボタンを作るとします。↓</p>



<div class="wp-block-cocoon-blocks-button-1 button-block"><a href="" class="btn btn-m has-background has-blue-background-color" target="_self">再利用ブロックで使うボタン</a></div>



<p>このボタンを選んで「再利用ブロックに追加」に指定して名前を付けると・・・</p>



<figure class="wp-block-image size-full waku"><img loading="lazy" width="1133" height="473" src="https://webnoneta.com/wp-content/uploads/2020/03/sairiyou01.png" alt="再利用ブロックに追加" class="wp-image-513" srcset="https://webnoneta.com/wp-content/uploads/2020/03/sairiyou01.png 1133w, https://webnoneta.com/wp-content/uploads/2020/03/sairiyou01-300x125.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/sairiyou01-1024x427.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/sairiyou01-768x321.png 768w" sizes="(max-width: 1133px) 100vw, 1133px" /></figure>



<p>登録した「再利用ブロック」を、他の記事で使うことができます！</p>



<figure class="wp-block-image size-full waku"><img loading="lazy" width="592" height="336" src="https://webnoneta.com/wp-content/uploads/2020/03/sairiyou03.png" alt="再利用ボタン" class="wp-image-514" srcset="https://webnoneta.com/wp-content/uploads/2020/03/sairiyou03.png 592w, https://webnoneta.com/wp-content/uploads/2020/03/sairiyou03-300x170.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/sairiyou03-240x135.png 240w" sizes="(max-width: 592px) 100vw, 592px" /></figure>



<p><strong>登録された再利用ブロックは一元管理されていて、修正すると、再利用ブロックを使っているすべての記事が自動的に修正した再利用ブロックに置き換わります。</strong></p>



<p>これがすごく便利。<br>ブログの場合は、そんなに再利用ブロックを使うことは無いかもしれませんが、企業のサイトなんかでは、同じ表現をいろんなページで使い回すことってあると思います。</p>



<p>そんな時に再利用ブロックを使うと、使いまわしのコンテンツが簡単に作れて、修正も一つの再利用ブロックを直すだけで、該当ページが全て置き換わってくれます。</p>



<p>ブロックエディタにして「これは便利だわ！」と一番唸ったのが、この再利用ブロックでした。</p>



<h3><span id="toc8">2列、3列デザイン（カラムデザイン）が出来る</span></h3>



<p>旧エディタでも、Cocoonテーマの場合は2列、3列デザイン（カラムデザイン）は出来ていました。<br>でも、ブロックエディタでは標準でカラムデザインが用意されています。<br>これがすごく便利で、うまく活用することでブログっぽくない、企業サイトのようなデザインにすることもできます。</p>



<figure class="wp-block-image size-full waku"><img loading="lazy" width="581" height="259" src="https://webnoneta.com/wp-content/uploads/2020/03/column01.png" alt="カラムデザイン" class="wp-image-516" srcset="https://webnoneta.com/wp-content/uploads/2020/03/column01.png 581w, https://webnoneta.com/wp-content/uploads/2020/03/column01-300x134.png 300w" sizes="(max-width: 581px) 100vw, 581px" /></figure>



<p>上の図のように、標準でカラムを選べるようになっています。<br><strong><span class="marker-under">すごいのは、カラムの幅を自由に設定できること。</span></strong></p>



<figure class="wp-block-image size-full"><img loading="lazy" width="705" height="283" src="https://webnoneta.com/wp-content/uploads/2020/03/column02.png" alt="レイアウトオプション" class="wp-image-517" srcset="https://webnoneta.com/wp-content/uploads/2020/03/column02.png 705w, https://webnoneta.com/wp-content/uploads/2020/03/column02-300x120.png 300w" sizes="(max-width: 705px) 100vw, 705px" /><figcaption>2カラム、3カラムの比率を選べるようになっている。</figcaption></figure>



<figure class="wp-block-image size-full waku"><img loading="lazy" width="1544" height="356" src="https://webnoneta.com/wp-content/uploads/2020/03/column03.png" alt="カラム幅を変更できる" class="wp-image-518" srcset="https://webnoneta.com/wp-content/uploads/2020/03/column03.png 1544w, https://webnoneta.com/wp-content/uploads/2020/03/column03-300x69.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/column03-1024x236.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/column03-768x177.png 768w, https://webnoneta.com/wp-content/uploads/2020/03/column03-1536x354.png 1536w" sizes="(max-width: 1544px) 100vw, 1544px" /></figure>



<p>上の図のように、<strong><span class="marker-under">カラムを選択して幅を自由に変えることが出来ます。</span></strong><br>デザインの自由度が格段にアップします。これは便利ですよ！</p>



<h3><span id="toc9">画像アップロードが簡単</span></h3>



<figure class="wp-block-image size-full"><img loading="lazy" width="1500" height="999" src="https://webnoneta.com/wp-content/uploads/2020/03/nekocyan458A7201_TP_V.jpg" alt="猫ちゃん" class="wp-image-520" srcset="https://webnoneta.com/wp-content/uploads/2020/03/nekocyan458A7201_TP_V.jpg 1500w, https://webnoneta.com/wp-content/uploads/2020/03/nekocyan458A7201_TP_V-300x200.jpg 300w, https://webnoneta.com/wp-content/uploads/2020/03/nekocyan458A7201_TP_V-1024x682.jpg 1024w, https://webnoneta.com/wp-content/uploads/2020/03/nekocyan458A7201_TP_V-768x511.jpg 768w" sizes="(max-width: 1500px) 100vw, 1500px" /></figure>



<p>画像アップロードも、旧エディタよりひと手間少なくて済みます。<br>旧エディタでは、投稿画面に画像をドラッグすると、メディアライブラリの画面になって、それから画像を挿入するという流れでした。</p>



<figure class="wp-block-image size-full waku"><img loading="lazy" width="1183" height="612" src="https://webnoneta.com/wp-content/uploads/2020/03/library.png" alt="メディアライブラリ" class="wp-image-525" srcset="https://webnoneta.com/wp-content/uploads/2020/03/library.png 1183w, https://webnoneta.com/wp-content/uploads/2020/03/library-300x155.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/library-1024x530.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/library-768x397.png 768w" sizes="(max-width: 1183px) 100vw, 1183px" /><figcaption>旧エディタでは、メディアライブラリを経由して「投稿に挿入」ボタンを押していた。</figcaption></figure>



<p>でも、<strong>ブロックエディタでは画像を投稿画面にドラッグすると、メディアライブラリを開くことなく、そのまま投稿画面に表示されます。</strong></p>



<figure class="wp-block-image size-full waku"><img loading="lazy" width="1327" height="746" src="https://webnoneta.com/wp-content/uploads/2020/03/gazou.png" alt="ブロックエディタの画像挿入" class="wp-image-522" srcset="https://webnoneta.com/wp-content/uploads/2020/03/gazou.png 1327w, https://webnoneta.com/wp-content/uploads/2020/03/gazou-300x169.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/gazou-1024x576.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/gazou-768x432.png 768w, https://webnoneta.com/wp-content/uploads/2020/03/gazou-240x135.png 240w, https://webnoneta.com/wp-content/uploads/2020/03/gazou-320x180.png 320w, https://webnoneta.com/wp-content/uploads/2020/03/gazou-640x360.png 640w, https://webnoneta.com/wp-content/uploads/2020/03/gazou-698x393.png 698w" sizes="(max-width: 1327px) 100vw, 1327px" /><figcaption>Altテキストや画像サイズは、右側の設定パネルで行える。いちいちメディアライブラリで設定する必要なし！</figcaption></figure>



<p>地味〜なように見えて、スムーズに作業できるんですよ、これが。</p>



<h3><span id="toc10">画面を上下方向に広く使える</span></h3>



<p>これも地味〜な話なんですが、ブロックエディタのほうが画面を上下方向に広く使えます。<br>広く使えるということは、記事執筆のためのスペースが広く取れるので作業が捗るんです。</p>



<p>また、必要なときにしか編集のメニューが出てこないので、画面もシンプルでスッキリしてます。<br>こういうのって、地味〜なんですが作業効率がアップするんです。</p>



<p>実際に見てみましょう。下の図が旧エディタです。</p>



<figure class="wp-block-image size-full waku"><img loading="lazy" width="1809" height="826" src="https://webnoneta.com/wp-content/uploads/2020/03/old-gamen.png" alt="旧エディタの画面" class="wp-image-528" srcset="https://webnoneta.com/wp-content/uploads/2020/03/old-gamen.png 1809w, https://webnoneta.com/wp-content/uploads/2020/03/old-gamen-300x137.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/old-gamen-1024x468.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/old-gamen-768x351.png 768w, https://webnoneta.com/wp-content/uploads/2020/03/old-gamen-1536x701.png 1536w" sizes="(max-width: 1809px) 100vw, 1809px" /></figure>



<p>ツールバーが常時表示されているので、肝心の記事執筆エリアが小さいです。<br>画面の小さなノートパソコンでは、ちょっと作業性に劣ります。</p>



<p>次に、ブロックエディタがこれ↓。</p>



<figure class="wp-block-image size-full waku"><img loading="lazy" width="1824" height="866" src="https://webnoneta.com/wp-content/uploads/2020/03/new-gamen.png" alt="ブロックエディタの画面" class="wp-image-529" srcset="https://webnoneta.com/wp-content/uploads/2020/03/new-gamen.png 1824w, https://webnoneta.com/wp-content/uploads/2020/03/new-gamen-300x142.png 300w, https://webnoneta.com/wp-content/uploads/2020/03/new-gamen-1024x486.png 1024w, https://webnoneta.com/wp-content/uploads/2020/03/new-gamen-768x365.png 768w, https://webnoneta.com/wp-content/uploads/2020/03/new-gamen-1536x729.png 1536w" sizes="(max-width: 1824px) 100vw, 1824px" /></figure>



<p>ツールバーはブロックを選択したときだけ出現するので、画面がスッキリしてるし、執筆エリアを広く取れます。</p>



<p>こんな感じで、ブロックエディタのほうが画面を効率よく使えるように工夫されています。</p>



<h2><span id="toc11">結論！これからはブロックエディターの時代だ</span></h2>



<p>ということで、ブロックエディタを紹介してきましたが、これに慣れると旧エディタには戻れませんね。<br>特にCocoonテーマは、ブロックエディタで使える便利な機能が充実してるので。</p>



<p>最初はかなり取っつきにくかったですよ。<br>「なんでいちいち、段落ごとにブロックに分かれるねん！」て思いましたし、ブロックを作る時に、「＋」マークが出るので、それをいちいちクリックして段落を作らないといけないとか思ってましたから。</p>



<p>でもそんなことは誤解で、enterキーを押すだけで自動でブロックが作られました（笑）</p>



<p>今回ご紹介したブロックエディタの機能は、ごくごく一部のものです。<br>WordPressもバージョンアップごとに、ブロックエディタの使い勝手が向上してきてます。</p>



<p>旧エディタに慣れ親しんだ人も、騙されたと思ってブロックエディタを試してください。<br>きっと目からウロコがボロボロ落ちると思いますよ。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://webnoneta.com/gutenberg/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>WordPressとは？WordPressでブログ運営をしてみよう！</title>
		<link>https://webnoneta.com/what-wordpress/</link>
					<comments>https://webnoneta.com/what-wordpress/#respond</comments>
		
		<dc:creator><![CDATA[みっちー]]></dc:creator>
		<pubDate>Sat, 29 Feb 2020 12:29:54 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://webnoneta.com/?p=190</guid>

					<description><![CDATA[このブログは、WordPress（ワードプレス）という無料のブログシステムで運営しています。 正確に言うと、自分でレンタルサーバーを借りて、そこに無料のWordPressというシステムをインストールして、ブログを書いてい [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>このブログは、WordPress（ワードプレス）という無料のブログシステムで運営しています。</p>



<p>正確に言うと、自分でレンタルサーバーを借りて、そこに無料のWordPressというシステムをインストールして、ブログを書いているわけです。</p>



<p>僕はこのブログの他にも、趣味（アウトドア系）ブログも運営していますが、すごく簡単に楽しくブログ運営をやっています。それもこれも、WordPressのおかげなんですね。</p>



<p>今回の記事は、</p>



<div class="question-box common-icon-box">
<ul>
<li>ブログをやってみたいけど、何から手を付けて良いのか分からない。</li>
<li>WordPressと無料ブログの違いを知りたい。</li>
<li>WordPressのことを、まだよく知らない。</li>
</ul>
</div>



<p>という方に向けて書いてあります。</p>



<p>では、WordPressとはどんなものなのか？わかりやすく解説していきます！</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-18" checked><label class="toc-title" for="toc-checkbox-18">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">WordPress（ワードプレス）とは？</a></li><li><a href="#toc2" tabindex="0">無料ブログとWordPressの違いについて。どちらで運営するほうが良いの？</a><ol><li><a href="#toc3" tabindex="0">無料ブログのリスクについて</a></li><li><a href="#toc4" tabindex="0">WordPressで作ったブログは、自分の資産になる</a></li></ol></li><li><a href="#toc5" tabindex="0">WordPressの機能について。どんなことが出来るの？</a><ol><li><a href="#toc6" tabindex="0">記事の執筆・編集</a></li><li><a href="#toc7" tabindex="0">画像の挿入・編集</a></li><li><a href="#toc8" tabindex="0">ブログのデザインは、テーマを適用するだけ</a></li><li><a href="#toc9" tabindex="0">豊富なプラグインで機能を充実できます</a></li></ol></li><li><a href="#toc10" tabindex="0">WordPressのブログ運営に必要なものとは？</a><ol><li><a href="#toc11" tabindex="0">パソコン</a></li><li><a href="#toc12" tabindex="0">レンタルサーバー</a></li><li><a href="#toc13" tabindex="0">独自ドメイン</a></li></ol></li><li><a href="#toc14" tabindex="0">まとめ。WordPressのブログ運営、楽しいよ。</a></li></ol>
    </div>
  </div>

<h2><span id="toc1">WordPress（ワードプレス）とは？</span></h2>



<p>WordPressとは、簡単に言うと無料で使えるブログのシステムのことです。<br>ブログだけじゃなくて、企業の大規模サイトもWordPressで作れるので、サイトを管理・運営できるシステムと言ってもいいでしょう。</p>



<p>こういうのを、CMS（コンテンツ・マネジメント・システム）といいます。</p>



<p>ブログやサイトを簡単に作れて、カスタマイズも楽々で、更新は特別な知識がなくてもできるので、今や世界のWebサイトの35％が、WordPressで作られていると言われています。</p>



<p>WEBサイトを作るためには、HTMLやCSSなどの専門的な知識が必要になりますが、<span class="marker-under"><strong>WordPressの場合は、そうした専門知識がない人でも簡単にブログ運営が出来るのがメリットです。</strong></span></p>



<p>だから、「パソコンは苦手！」という人でも、ブログを書けるわけですね。</p>



<h2><span id="toc2">無料ブログとWordPressの違いについて。どちらで運営するほうが良いの？</span></h2>



<p>簡単にブログを運営する方法として、無料ブログを使う方法もあります。</p>



<p>無料ブログは、</p>



<div class="info-box">
<ul>
<li>はてなブログ</li>
<li>アメーバブログ</li>
<li>ライブドアブログ</li>
<li>FC2ブログ</li>
<li>シーサーブログ</li>
</ul>
</div>



<p>などが有名です。</p>



<p>これらのブログは、サーバーを自分で用意する必要もないですし、アカウントを開設すればすぐに誰でも使えるのが特徴です。</p>



<p>初心者の人でも、めちゃくちゃ簡単に使えるんですね。</p>



<p>でも反面、デメリットもあります。</p>



<h3><span id="toc3">無料ブログのリスクについて</span></h3>



<p>例えば、無料ブログで人気のあったヤフーブログですが、2019年の12月にサービスを終了してしまいました。</p>



<p>その他にも、GMOのヤプログも2020年の1月に終了しています。</p>



<p>無料ブログを提供している会社も、ビジネスでやっているわけですから、利益が出なくなると突然サービス終了してしまうリスクがあるんです。<br>大手だから安心というわけでは、ないです。</p>



<p>こちらとしては、無料で使わせてもらっているので、突然サービス終了されても文句は言えません。</p>



<p>そうなると、今までコツコツ記事を書いてきたブログが、一瞬でパーになるということもあるのです。<br>もちろん、サービス終了前にバックアップをとって、他のブログサービスに引っ越しすれば自分のブログは残るのですが、ドメインが変わってしまいますので、アクセスが急減してしまう恐れもあります。</p>



<p>このように、無料ブログサービスは、無料で使える代わりに、ブログサービス終了などのリスクがあるということを理解しておきましょう。</p>



<h3><span id="toc4">WordPressで作ったブログは、自分の資産になる</span></h3>



<p>WordPressの場合は、自分のブログは自分で止めない限りずっと自分の資産になります。</p>



<p>自分でレンタルサーバーを借りて、独自ドメインをとって、WordPressをインストールしてブログを運営しますので、ブログサービス会社のシステムを使わせてもらってるのではなく、自分が主体となって運営できるのが、大きな特徴であり、メリットです。</p>



<div class="speech-wrap sb-id-13 sbs-line sbp-l sbis-cb cf">
<div class="speech-person">
<figure class="speech-icon">
<figure><img class="speech-icon-image" src="https://webnoneta.com/wp-content/uploads/2020/02/question.png" alt="" /></figure>
</figure>
</div>
<div class="speech-balloon">
<p>え、でもWordPressって無料って言ったよね？無料ブログとどう違うの？</p>
</div>
</div>



<p>と思うかもしれませんが、WordPressというのは「オープンソース※」のシステムで、無料で誰でもダウンロードして、サーバーに入れて使っても良いですよ、というものです。</p>



<p>だから、例えばWordPressの開発がストップしたとしても、すでにサーバーに入れてあるWordPressは、自分の資産として無くなることはありません。<br>（WordPressの開発がストップするのは、現時点では考えられませんが　笑）</p>



<div class="question-box common-icon-box">&nbsp;※<strong>オープンソースって？</strong><br>オープンソースとは、無料で公開されたプログラムやソースのことで、誰でも許可なく利用できます。カスタマイズも自由にやっていいという太っ腹な考えのもとに公開されています。WordPressはオープンソースの代表格です。</div>



<div>そんなわけなので、</div>



<ul><li><span class="bold">ブログを自分の資産として使っていきたい。</span></li><li><span class="bold">独自ドメインで運用したい。</span></li><li><span class="bold">自分で好きなようにカスタマイズしたい。</span></li><li><span class="bold">副業としてブログ運営をしたい。</span></li></ul>



<p>という人は、WordPressをおすすめします。<br>というか、<span class="marker-under"><strong>ブログを本格的に運営したい人は、WordPress一択でしょう！</strong></span></p>



<h2><span id="toc5">WordPressの機能について。どんなことが出来るの？</span></h2>



<p>ではここから、WordPressでどんなことが出来るのか、機能面の紹介をします。</p>



<h3><span id="toc6">記事の執筆・編集</span></h3>



<p>当たり前の話ですが（笑）、記事の執筆・編集ができます。しかも、めちゃくちゃ簡単に。<br>HTMLやCSSといった専門知識がなくても、そんなものを一切触らずに、見たまま直感的に記事を書けます。</p>



<figure class="wp-block-image"><a href="https://webnoneta.com/wp-content/uploads/2020/02/bloggamen.png"><img loading="lazy" width="1832" height="875" src="https://webnoneta.com/wp-content/uploads/2020/02/bloggamen.png" alt="ブログ執筆画面" class="wp-image-197" srcset="https://webnoneta.com/wp-content/uploads/2020/02/bloggamen.png 1832w, https://webnoneta.com/wp-content/uploads/2020/02/bloggamen-300x143.png 300w, https://webnoneta.com/wp-content/uploads/2020/02/bloggamen-1024x489.png 1024w, https://webnoneta.com/wp-content/uploads/2020/02/bloggamen-768x367.png 768w, https://webnoneta.com/wp-content/uploads/2020/02/bloggamen-1536x734.png 1536w, https://webnoneta.com/wp-content/uploads/2020/02/bloggamen-698x333.png 698w" sizes="(max-width: 1832px) 100vw, 1832px" /></a></figure>



<p>下の図がWordPressの記事作成（投稿）画面。<br>直感的に、見たままのレイアウトで記事が書けるので、初心者の人でもすんなり馴染めます<br></p>



<h3><span id="toc7">画像の挿入・編集</span></h3>



<figure class="wp-block-image"><a href="https://webnoneta.com/wp-content/uploads/2020/02/mediagamen.jpg"><img loading="lazy" width="1500" height="716" src="https://webnoneta.com/wp-content/uploads/2020/02/mediagamen.jpg" alt="メディアライブラリ" class="wp-image-201" srcset="https://webnoneta.com/wp-content/uploads/2020/02/mediagamen.jpg 1500w, https://webnoneta.com/wp-content/uploads/2020/02/mediagamen-300x143.jpg 300w, https://webnoneta.com/wp-content/uploads/2020/02/mediagamen-1024x489.jpg 1024w, https://webnoneta.com/wp-content/uploads/2020/02/mediagamen-768x367.jpg 768w, https://webnoneta.com/wp-content/uploads/2020/02/mediagamen-698x333.jpg 698w" sizes="(max-width: 1500px) 100vw, 1500px" /></a></figure>



<p>写真や画像の挿入はめちゃくちゃ簡単！<br>WordPressには、「メディアライブラリ」という画像を管理する専用の画面が用意されています。<br><br>上の図のように、登録された画像を一覧で見ることができます。</p>



<p>画像のアップロードはとても簡単！この画面に画像ファイルをドラッグするだけで、登録できてしまいます。<br>WordPressは、このように画像をどんどんアップロードしておき、あとで記事に自由に入れることができます。</p>



<p>画像の回転やトリミングなど、簡単な編集もWordPressでできてしまいます。</p>



<figure class="wp-block-image alignnone"><a href="https://webnoneta.com/wp-content/uploads/2020/02/trimming.jpg"><img loading="lazy" width="1082" height="716" src="https://webnoneta.com/wp-content/uploads/2020/02/trimming.jpg" alt="画像のトリミング" class="wp-image-207" srcset="https://webnoneta.com/wp-content/uploads/2020/02/trimming.jpg 1082w, https://webnoneta.com/wp-content/uploads/2020/02/trimming-300x199.jpg 300w, https://webnoneta.com/wp-content/uploads/2020/02/trimming-1024x678.jpg 1024w, https://webnoneta.com/wp-content/uploads/2020/02/trimming-768x508.jpg 768w, https://webnoneta.com/wp-content/uploads/2020/02/trimming-698x462.jpg 698w" sizes="(max-width: 1082px) 100vw, 1082px" /></a><figcaption>簡単なトリミングは、WordPressの中でできてしまう。</figcaption></figure>



<h3><span id="toc8">ブログのデザインは、テーマを適用するだけ</span></h3>



<p>Webサイトを自分で作る場合、デザインを一からしなくてはいけません。<br>当然、HTMLやCSSなどの専門知識が必要です。</p>



<p>でもWordPressの場合、有料・無料のテーマがたくさんあって、それを選んで適用するだけで、簡単にレイアウトが出来てしまいます。</p>



<figure class="wp-block-image"><a href="https://webnoneta.com/wp-content/uploads/2020/02/theme.jpg"><img loading="lazy" width="1307" height="740" src="https://webnoneta.com/wp-content/uploads/2020/02/theme.jpg" alt="ブログのテーマ選び" class="wp-image-208" srcset="https://webnoneta.com/wp-content/uploads/2020/02/theme.jpg 1307w, https://webnoneta.com/wp-content/uploads/2020/02/theme-300x170.jpg 300w, https://webnoneta.com/wp-content/uploads/2020/02/theme-1024x580.jpg 1024w, https://webnoneta.com/wp-content/uploads/2020/02/theme-768x435.jpg 768w, https://webnoneta.com/wp-content/uploads/2020/02/theme-240x135.jpg 240w, https://webnoneta.com/wp-content/uploads/2020/02/theme-320x180.jpg 320w, https://webnoneta.com/wp-content/uploads/2020/02/theme-698x395.jpg 698w" sizes="(max-width: 1307px) 100vw, 1307px" /></a></figure>



<p>上の図のように、外観のメニューに様々なテーマを読み込ませ、選択するだけ。<br>これだけで、ブログのレイアウトが出来てしまいます。</p>



<p>ちなみに僕のブログに適用しているテーマは、無料のcocoon（コクーン）というものです。</p>



<a rel="noopener" target="_blank" href="https://wp-cocoon.com/" title="Cocoon" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://webnoneta.com/wp-content/uploads/cocoon-resources/blog-card-cache/75b272d5c162b0e3d6c69c9d1f35cb0f.jpg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="320" height="180" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Cocoon</div><div class="blogcard-snippet external-blogcard-snippet">SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=wp-cocoon.com" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">wp-cocoon.com</div></div></div></div></a>



<p>わいひらさんという方が作った無料テーマですが、使いやすくて機能豊富で、とにかく素晴らしいテーマです。まじで有料にしてもおかしくないほどのクオリティです。<br>というか、このクオリティを無料で提供してくれているわいひらさんには、足を向けて寝られません　笑。</p>



<p><span class="marker-under"><strong>無料テーマを使う場合は、cocoon一択で良いと思います。</strong></span></p>



<h3><span id="toc9">豊富なプラグインで機能を充実できます</span></h3>



<p>WordPressには、「プラグイン」といって、様々な機能を追加できるようになっています。</p>



<p>例えば、こんな機能をどんどん追加できます。</p>



<div class="info-box">
<ul>
<li>画像を自動的に圧縮して、ブログの表示スピードを速くしてくれる。</li>
<li>サイトマップを自動で作ってくれる。</li>
<li>投稿画面をもっと使いやすくしてくれる。</li>
<li>メールフォーム機能を追加できる。</li>
<li>メニューの並び替えが簡単に出来てしまう。</li>
</ul>
</div>



<p>他にもたくさんあるのですが、自分でどんどん機能を追加して、使いやすく出来るのです。</p>



<figure class="wp-block-image alignnone"><a href="https://webnoneta.com/wp-content/uploads/2020/02/plugin.png"><img loading="lazy" width="1813" height="854" src="https://webnoneta.com/wp-content/uploads/2020/02/plugin.png" alt="WordPressのプラグイン画面" class="wp-image-210" srcset="https://webnoneta.com/wp-content/uploads/2020/02/plugin.png 1813w, https://webnoneta.com/wp-content/uploads/2020/02/plugin-300x141.png 300w, https://webnoneta.com/wp-content/uploads/2020/02/plugin-1024x482.png 1024w, https://webnoneta.com/wp-content/uploads/2020/02/plugin-768x362.png 768w, https://webnoneta.com/wp-content/uploads/2020/02/plugin-1536x724.png 1536w, https://webnoneta.com/wp-content/uploads/2020/02/plugin-698x329.png 698w" sizes="(max-width: 1813px) 100vw, 1813px" /></a><figcaption>プラグインの管理画面。ほとんどのプラグインは無料で利用できます。</figcaption></figure>



<p>と、こんな感じでWordPressには、ブログ運営が簡単に気持ちよく出来るために様々な機能があります。</p>



<p>最初は少し「難しいな」と思うかもしれませんが、一度触ると直感的に使えます。<br>初心者でもブログ運営がやりやすいように、よく考えられたシステムですよ。</p>



<h2><span id="toc10">WordPressのブログ運営に必要なものとは？</span></h2>



<p>WordPressでブログ運営をする時に必要なものを説明します。</p>



<h3><span id="toc11">パソコン</span></h3>



<p>当たり前の話ですが、パソコンです（笑）<br>WindowsでもMacでも、僕のように<a href="https://webnoneta.com/whychromebook/">Chromebook</a>でもかまいません。</p>



<p>パソコンが無いなら、タブレットやスマホからでもWordPressを使えます。</p>



<p>というのは、<strong>WordPressはパソコンにインストールするアプリではなく、ブラウザで操作するもの</strong>だからです。<br>ネット環境があって、ブラウザがあれば、端末は何でも良いです。</p>



<p>これはすごく便利で、パソコンを変えてもブラウザでWordPressの管理画面にログインするだけで、すぐにブログを書けます。<br>例えば自宅でパソコンでブログを書き、その続きを外出先でスマホで書く、なんてこともできます。</p>



<p>ただ僕の経験上、モニタはそれなりの大きさがないとブログを書きにくいですね。<br>スマホで書けないことはないですが、やっぱり作業性で劣ってしまいます。</p>



<p>できれば10インチ以上のモニタがあるタブレットか、パソコンが良いですね。<br>WordPressでのブログ執筆だけに限ると、パソコンのスペックは高くなくても大丈夫です。</p>



<p>ハイスペックなMacBookなんかは、宝の持ち腐れになるかもしれません。<br>だから僕のオススメは、格安なのに動作が速いChromebookですね。</p>



<div class="blogcard-type bct-reference">
<a href="https://webnoneta.com/whychromebook/" title="Mac歴25年の僕が、Chromebookを買ってよかった。その理由とは？" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img width="320" height="180" src="https://webnoneta.com/wp-content/uploads/2020/02/IMG_5543-320x180.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" loading="lazy" srcset="https://webnoneta.com/wp-content/uploads/2020/02/IMG_5543-320x180.jpg 320w, https://webnoneta.com/wp-content/uploads/2020/02/IMG_5543-240x135.jpg 240w, https://webnoneta.com/wp-content/uploads/2020/02/IMG_5543-640x360.jpg 640w, https://webnoneta.com/wp-content/uploads/2020/02/IMG_5543-698x393.jpg 698w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">Mac歴25年の僕が、Chromebookを買ってよかった。その理由とは？</div><div class="blogcard-snippet internal-blogcard-snippet">僕は普段、仕事でMacBook Pro15インチを使っています。IntelのCorei7で、メモリは16GB、ストレージは512GBと、フルスペックに近いとっても快適なMacです。ネットショップの運営でデザインをしたり、コーディ...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=webnoneta.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">webnoneta.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2020.02.24</div></div></div></div></a>
</div>



<h3><span id="toc12">レンタルサーバー</span></h3>



<p>WEBサイトを公開して、みんなに見てもらうためにはサーバーが必要です。<br>はてなブログなどの無料ブログサービスは、ブログサービス側でサーバーを用意してくれているので、こちらで用意する必要はありません。</p>



<p>でもWordPressは、自分で運営していくものなので、サーバーを用意する必要があります。<br>といっても、自宅にサーバー機器を置く必要はありませんので、ご安心を。</p>



<p>一般的には、レンタルサーバーを借ります。</p>



<p>レンタルサーバーにも色んなところがあるのですが、僕がおすすめするのは<a rel="nofollow noopener" target="_blank" href="https://px.a8.net/svt/ejp?a8mat=2TP8M3+BN5HGI+CO4+609HU">エックスサーバー</a><br>です。</p>



<p>国内シェアNo．1 で、サーバー速度が日本一（2020年2月14日～2020年2月20日、エックスサーバー調べ）の、一番人気サーバーです。</p>



<p>速度、安定性、WordPressの運用のしやすさなど、まずここにしておけば間違いありません。<br>僕もこのブログを含め、個人ブログはすべてエックスサーバーを使っていますし、本業のネットショップも数サイト仕事で運営しているのですが、すべてエックスサーバーです。</p>



<p>今まで、サーバーがダウンしたこともありません。サクッとWebサイトが表示されますし、抜群の安定感です。<br>それなのに、月額1,000円（年契約）というコスパの良さです。</p>



<div class="btn-wrap btn-wrap-orange btn-wrap-l"><a rel="nofollow noopener" target="_blank" href="https://px.a8.net/svt/ejp?a8mat=2TP8M3+BN5HGI+CO4+609HU">エックスサーバー公式サイト</a><br><figure><img loading="lazy" src="https://www19.a8.net/0.gif?a8mat=2TP8M3+BN5HGI+CO4+609HU" alt="" width="1" height="1" border="0"></figure></div>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-reference">
<a href="https://webnoneta.com/blog-server/" title="ブログ運営にオススメのレンタルサーバー。エックスサーバーが最強の理由とは？" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img width="320" height="180" src="https://webnoneta.com/wp-content/uploads/2020/03/server-320x180.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" loading="lazy" srcset="https://webnoneta.com/wp-content/uploads/2020/03/server-320x180.jpg 320w, https://webnoneta.com/wp-content/uploads/2020/03/server-240x135.jpg 240w, https://webnoneta.com/wp-content/uploads/2020/03/server-640x360.jpg 640w, https://webnoneta.com/wp-content/uploads/2020/03/server-698x393.jpg 698w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">ブログ運営にオススメのレンタルサーバー。エックスサーバーが最強の理由とは？</div><div class="blogcard-snippet internal-blogcard-snippet">WordPressでブログ運営をするために必要なレンタルサーバー。レンタルサーバーは、エックスサーバーがおすすめです。スピード、安定度、サポート、価格の安さ、WordPressの運用のしやすさなど、弱点のないレンタルサーバーです。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=webnoneta.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">webnoneta.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2020.03.01</div></div></div></div></a>
</div>



<h3><span id="toc13">独自ドメイン</span></h3>



<p>独自ドメインとは、自分のブログのアドレスのことです。</p>



<p>例えばこのブログだと</p>



<div class="blank-box bb-blue">https://webnoneta.com/</div>



<p>が、独自ドメインになります。<br>独自ドメインは、世界に一つしか無い自分だけのドメインです。</p>



<p>だから将来、サーバーを変更しても同じドメインで運用できます。</p>



<p>これが無料ブログサービスだと、こんな感じになります。（はてなブログの場合）</p>



<div class="blank-box bb-blue">https://〇〇〇〇.hatenablog.com/</div>



<p>これは独自ドメインではなく、hatenablog.comと、はてなブログのドメインの下で運用することになるので、他のブログサービスに引っ越す時に、ドメイン名が変わってしまうんですね。</p>



<p>自分の資産としてブログ運営をしたい場合は、独自ドメインは必須です。</p>



<p>ちなみに、<a rel="nofollow noopener" target="_blank" href="https://px.a8.net/svt/ejp?a8mat=2TP8M3+BN5HGI+CO4+609HU">エックスサーバー</a>は定期的にキャンペーンをしていて、新規でサーバー契約した人には、独自ドメインを無料で取得できるサービスも行っています。<br>（契約のタイミングで、サービスが無くなっていたらごめんなさい）</p>



<figure class="wp-block-image"><img src="https://www14.a8.net/0.gif?a8mat=3B7M8P+CP9B9E+50+2HHVNM" alt=""/></figure>



<p>他によく使われているが、<a rel="nofollow noopener" target="_blank" href="https://px.a8.net/svt/ejp?a8mat=3B7M8P+CP9B9E+50+2HHVNM">お名前.com</a>ですね。</p>



<p>以上、ネット接続環境のあるパソコン、レンタルサーバー、独自ドメイン。<br>この３つがあれば、WordPressでブログ運営を始めることが出来ます。</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-reference">
<a href="https://webnoneta.com/domain/" title="ドメインの決め方を解説。失敗しない独自ドメインは、こう決めろ！" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img width="320" height="180" src="https://webnoneta.com/wp-content/uploads/2020/03/domain-320x180.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" loading="lazy" srcset="https://webnoneta.com/wp-content/uploads/2020/03/domain-320x180.jpg 320w, https://webnoneta.com/wp-content/uploads/2020/03/domain-240x135.jpg 240w, https://webnoneta.com/wp-content/uploads/2020/03/domain-640x360.jpg 640w, https://webnoneta.com/wp-content/uploads/2020/03/domain-698x393.jpg 698w" sizes="(max-width: 320px) 100vw, 320px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">ドメインの決め方を解説。失敗しない独自ドメインは、こう決めろ！</div><div class="blogcard-snippet internal-blogcard-snippet">WordPressでブログ運営をする場合、「独自ドメイン」を取得しなければいけません。独自ドメインとは、世界に一つだけのオリジナルのドメインのことです。一度取得すると、ずっと使い続けることができます。いわば、あなたの資産になりま...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=webnoneta.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">webnoneta.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2020.03.05</div></div></div></div></a>
</div>



<h2><span id="toc14">まとめ。WordPressのブログ運営、楽しいよ。</span></h2>



<p>以上、WordPressとはなにか？からWordPressでのブログ運営についての解説でした。</p>



<p>具体的な設定方法については、別記事でくわしく書こうと思いますが、これから本格的にブログをやっていこうと思うのなら、WordPressしか無いでしょう！と思います。</p>



<p>特に、ブログに広告を貼ってアフィリエイトブログにしたい場合、無料ブログサービスだと、広告を貼れないところもあります。<br>その点、WordPressなら自分の好きなように広告を貼れます。</p>



<p>アフィリブログじゃなくても、趣味でブログを続けたい場合でも、自分の思うようにデザインをカスタマイズできますし、なにより自分の資産になります。</p>



<p>WordPressでのブログ運営は、本当に楽しいですよ。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://webnoneta.com/what-wordpress/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
