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

<channel>
	<title>ヨイカゲブログ</title>
	<atom:link href="https://furugrand.online/feed/" rel="self" type="application/rss+xml" />
	<link>https://furugrand.online</link>
	<description>ヨイカゲは、良い加減・41の加減と掛けています。できるだけお金をかけずに、WordPress・figmaを勉強したいと思っています。</description>
	<lastBuildDate>Mon, 12 May 2025 11:32:35 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.1</generator>

<image>
	<url>https://furugrand.online/wp-content/uploads/2025/02/cropped-Frame-8-1-2-32x32.png</url>
	<title>ヨイカゲブログ</title>
	<link>https://furugrand.online</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>40肩経験談：40代で発症！なぜかはじめたダイエット</title>
		<link>https://furugrand.online/forty-shoulders/</link>
		
		<dc:creator><![CDATA[ヨイカゲの主]]></dc:creator>
		<pubDate>Wed, 23 Apr 2025 06:58:51 +0000</pubDate>
				<category><![CDATA[日常]]></category>
		<guid isPermaLink="false">https://furugrand.online/?p=1591</guid>

					<description><![CDATA[40肩とは聞いたことがありますが、「大変な病気もあるんだ～」と人ごとでした。 「まさか自分が40肩になるなんて…」 40肩（四十肩、五十肩とも呼ばれますが、ここでは40代で発症した私の経験に基づき「40肩」と表記します） [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>40肩とは聞いたことがありますが、「大変な病気もあるんだ～」と人ごとでした。</p>



<p>「まさか自分が40肩になるなんて…」</p>



<p>40肩（四十肩、五十肩とも呼ばれますが、ここでは40代で発症した私の経験に基づき「40肩」と表記します）は、その名の通り、40代以降に多く見られる肩の痛みです。</p>



<p>しかし、その症状や進行の度合いは人それぞれ。</p>



<p>この記事では、まさに40代で突然40肩を発症した<span class="fz-20px"><span class="bold">私のリアルな経験談</span></span>をお伝えします。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc1">40代で突然！私の40肩経験談と初期症状</span></h2>



<p>私の初期症状は、「肩の違和感」→「痛みが出現」→「痛みが強くなる」へ変化していきます。</p>



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



<h3 class="wp-block-heading"><span id="toc2">肩の違和感</span></h3>



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="1024" height="576" src="https://furugrand.online/wp-content/uploads/2025/04/40-1024x576.webp" alt="" class="wp-image-4071" srcset="https://furugrand.online/wp-content/uploads/2025/04/40-1024x576.webp 1024w, https://furugrand.online/wp-content/uploads/2025/04/40-300x169.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/40-768x432.webp 768w, https://furugrand.online/wp-content/uploads/2025/04/40-1536x864.webp 1536w, https://furugrand.online/wp-content/uploads/2025/04/40-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/04/40-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/04/40-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/04/40.webp 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>右腕に異変を感じました。</p>



<p>むずむずするのでおかしい。</p>



<p><strong><span class="marker-under">違和感が2週間ぐらい？続いていました</span></strong>。</p>



<p>違和感を擬音語で言うと、「ムズムズ」でした。</p>



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



<h3 class="wp-block-heading"><span id="toc3">痛みが出現</span></h3>



<p>突然右肩腕付近に、「ビキーッ」と骨折のような痛みが走りました。</p>



<p>でも骨折ではなさそう。</p>



<p>ねんざかな？「1ヵ月様子を見てみよう」と思っていました。</p>



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



<h3 class="wp-block-heading"><span id="toc4">痛みが徐々に強くなる</span></h3>



<p>痛みは徐々に増していき、湿布を貼りました。</p>



<p>湿布を貼ると・・普通に生活できますし、熟睡できます。</p>



<p>ですが、湿布を貼らないと無理！</p>



<p><strong><span class="marker-under">毎日湿布を貼る生活が1か月も続きました</span></strong>。</p>



<p>湿布を貼ったままにしすぎたときもあり、</p>



<p>肌が荒れたりしました。（このままではまずい）</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc5">つらい40肩の症状、放置せずに受診！</span></h2>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="576" src="https://furugrand.online/wp-content/uploads/2025/04/hospital-1024x576.webp" alt="" class="wp-image-4073" srcset="https://furugrand.online/wp-content/uploads/2025/04/hospital-1024x576.webp 1024w, https://furugrand.online/wp-content/uploads/2025/04/hospital-300x169.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/hospital-768x432.webp 768w, https://furugrand.online/wp-content/uploads/2025/04/hospital-1536x864.webp 1536w, https://furugrand.online/wp-content/uploads/2025/04/hospital-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/04/hospital-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/04/hospital-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/04/hospital.webp 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>インターネットで「40肩」について調べると、様々な情報が出てきます。</p>



<p>似たような症状の方の体験談も見つかりましたが、</p>



<p>原因や対処法は人それぞれ違うようでした。</p>



<p>「もしかしたら、もっと深刻な病気が隠れているかもしれない」という不安も頭をよぎりました。</p>



<p>自己判断で様子を見るのは危険だと感じ、</p>



<p>思い切って<strong><span class="marker-under">整形外科を受診</span></strong>することにしました。</p>



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



<h3 class="wp-block-heading has-text-align-left"><span id="toc6">腕の check ＆ レントゲン</span></h3>



<p>専門医が右腕のcheckをしました。「あ～40肩ですね、レントゲンも撮ってみましょう。原因は分からないんですよ。人によって<strong><span class="marker-under">半年～1年はかかりますね</span></strong>。」</p>



<p>え？40肩！！！原因は分からない？じゃあ防ぎようがないじゃん。</p>



<p>でも原因不明の病気は多いもんな。と思いながらレントゲン撮影。半年～1年は長いな。</p>



<p>レントゲン撮影中も、手術かな？とドキドキ。</p>



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



<h3 class="wp-block-heading"><span id="toc7">自己判断は危険！専門医に相談して安心</span></h3>



<p>レントゲンの結果、やはり40肩（肩関節周囲炎）であると診断されました。</p>



<p>痛みを和らげる注射も提案されましたが、私は内服薬を選択しました。</p>



<p>今回の経験から、40肩の症状は自己判断せずに、専門医に相談することの重要性を痛感しました。</p>



<p>専門医から診断を受けることで、<strong>やみくもに悩むという</strong>時間を消費しなくなります。</p>



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



<h3 class="wp-block-heading has-text-align-left"><span id="toc8">薬局でのやりとり</span></h3>



<p>「湿布と炎症止め」が処方されたので薬局へ行きます。</p>



<p>薬局では、「なぜ受診したのか？」を聞きます。</p>



<p>そうすることで、医師の処方は間違っていないのか？を2重チェックする仕組みになっているそうです。</p>



<p>「なぜ今回受診されたんですか？」と聞かれたので、はっきりとした声で「40肩です！」と言うと一発で理解してもらえました。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc9">40肩の原因を探る</span></h2>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="576" src="https://furugrand.online/wp-content/uploads/2025/04/shoulder-1024x576.webp" alt="" class="wp-image-4077" srcset="https://furugrand.online/wp-content/uploads/2025/04/shoulder-1024x576.webp 1024w, https://furugrand.online/wp-content/uploads/2025/04/shoulder-300x169.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/shoulder-768x432.webp 768w, https://furugrand.online/wp-content/uploads/2025/04/shoulder-1536x864.webp 1536w, https://furugrand.online/wp-content/uploads/2025/04/shoulder-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/04/shoulder-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/04/shoulder-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/04/shoulder.webp 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>インターネットで40肩の症状・原因を探るとやはり<strong><span class="marker-under">半年～1年</span></strong>はかかるそうなので、それは覚悟しました。</p>



<p>原因は分かりません。「利き腕ではない腕に症状が現れる確率が高い」という記事がありましたが、私は利き腕に症状が現れました。</p>



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



<h3 class="wp-block-heading has-text-align-left"><span id="toc10">初期→中期→後期</span></h3>



<p>個人差がありますが、炎症の出る「初期」、痛みが軽くなる「中期」、痛みがほぼ治まる「後期」があるそうです。</p>



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



<h3 class="wp-block-heading has-text-align-left"><span id="toc11">自分が推測する原因</span></h3>



<p>私が思う40肩になった原因は「運動不足と増量」ではないか？ということです。</p>



<p>子ども2人出産前から比較すると「<strong><span class="marker-under">１２kg増量</span></strong>」していまいた。</p>



<p>私は世の中の旦那さんが言う「痩せれば？」という言葉が大嫌いです。</p>



<p>なので、「<strong><span class="marker-under">意地でも痩せてやるか～い</span></strong>」というスタンスで生きていましたが、本音を言うと痩せる口実を探していたのも事実です。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc12">ダイエット開始</span></h2>



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



<p>まずは、1日1万歩を目指して「Youtubeの運動動画」を見て運動しました。<strong><span class="marker-under">身体がぽかぽか</span></strong>になりました。</p>



<p>それだけでは足りない！と思い、「<strong>夕方17時以降のごはん禁止</strong>」を決行します。そして「<strong>1日1万5千歩</strong>」歩く目標をたてます。</p>



<p>17時以降に食べたくなったら、「明日絶対食べよう～」と心に決めます。※砂糖なしのコーヒー牛乳は飲んでも良いことにしました。</p>



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



<h3 class="wp-block-heading has-text-align-left"><span id="toc13">4ヵ月で5kg減</span></h3>



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



<p>なななんと、4ヵ月で<strong><span class="marker-under">5kgの減量</span></strong>に成功しました。</p>



<p>感覚としては、「なんかガリガリになったな」という感じです。そして、40肩の症状も良くなってきました。時間の経過の可能性も有。</p>



<p>痩せたのは良かったのですが、<strong>「シワ」が目立つようになりました</strong>。</p>


<div class="ad-area no-icon ad-shortcode ad-rectangle ad-label-visible cf" itemscope itemtype="https://schema.org/WPAdBlock">
  <div class="ad-label" itemprop="name" data-nosnippet>スポンサーリンク</div>
  <div class="ad-wrap">
    <div class="ad-responsive ad-usual"><!-- レスポンシブコード -->
<ins class="adsbygoogle"
  style="display:block"
  data-ad-client="ca-pub-7357780737398661"
  data-ad-slot="7494230648"
  data-ad-format="rectangle"
  data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
          </div>

</div>




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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc14">まとめ</span></h2>



<p>今回の記事では、私が40代で突然発症した40肩の経験談と、なぜかダイエットを開始してしまったエピソードをご紹介しました。</p>



<p>初期の違和感から始まり、激痛、そして可動域の制限といったつらい症状を経験し、自己判断の限界を痛感しました。</p>



<p>丁度40肩で半年が経ったところの現在は、痛みは少なくなり、肩の可動域は相変わらずです。</p>



<p>また、肩に変化があれば専門医に相談しようと思っています。</p>



<p>40肩になったショックではじめたダイエットは、なぜか成功しました。「いつからでも変われる」を少しだけ信じてみるのも良いのかもしれませんね。</p>



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



<p></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>ConoHa WINGで「WordPress」をダウンロードする方法</title>
		<link>https://furugrand.online/conoha-wing-wordpress/</link>
		
		<dc:creator><![CDATA[ヨイカゲの主]]></dc:creator>
		<pubDate>Thu, 17 Apr 2025 10:18:46 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://furugrand.online/?p=3621</guid>

					<description><![CDATA[「ConoHa WINGを使って、WordPressサイトを立ち上げたい！」そう思っている方も多いのではないでしょうか。 この記事では、ConoHa WINGで「WordPress」をダウンロードする方法を解説していきま [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>「ConoHa WINGを使って、WordPressサイトを立ち上げたい！」そう思っている方も多いのではないでしょうか。</p>



<p>この記事では、ConoHa WINGで「WordPress」をダウンロードする方法を解説していきます。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc1">WordPress ダウンロード前に知っておくべきこと</span></h2>



<p>この記事では、ConoHa WINGでWordPressを始めるにあたって、「ダウンロード」という言葉に隠された意味と、事前に知っておくべき大切なポイントを解説します。</p>



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



<h3 class="wp-block-heading"><span id="toc2">ConoHa WINGとは？</span></h3>



<center><a rel="nofollow noopener" target="_blank" href="//af.moshimo.com/af/c/click?a_id=3418064&#038;p_id=2312&#038;pc_id=4967&#038;pl_id=38395" referrerpolicy="no-referrer-when-downgrade" attributionsrc><img loading="lazy" decoding="async" src="//image.moshimo.com/af-img/1762/000000038395.png" width="300" height="250" style="border:none;"></a><img decoding="async" src="//i.moshimo.com/af/i/impression?a_id=3418064&#038;p_id=2312&#038;pc_id=4967&#038;pl_id=38395" width="1" height="1" style="border:none;" loading="lazy"></center>



<p>ConoHa WINGは、その高性能と使いやすさから、WordPressユーザーに非常に人気の高いレンタルサーバーです。</p>



<p>ConoHa WINGについてのより詳しい記事はこちらになります。</p>



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

<a target="_self" href="https://furugrand.online/conoha-wing/" title="ConoHa wingとは？ 特徴・セキュリティを解説" 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 loading="lazy" decoding="async" width="160" height="90" src="https://furugrand.online/wp-content/uploads/2025/02/conoha-wing2-160x90.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://furugrand.online/wp-content/uploads/2025/02/conoha-wing2-160x90.jpg 160w, https://furugrand.online/wp-content/uploads/2025/02/conoha-wing2-300x169.jpg 300w, https://furugrand.online/wp-content/uploads/2025/02/conoha-wing2-1024x576.jpg 1024w, https://furugrand.online/wp-content/uploads/2025/02/conoha-wing2-768x432.jpg 768w, https://furugrand.online/wp-content/uploads/2025/02/conoha-wing2-1536x864.jpg 1536w, https://furugrand.online/wp-content/uploads/2025/02/conoha-wing2-120x68.jpg 120w, https://furugrand.online/wp-content/uploads/2025/02/conoha-wing2-320x180.jpg 320w, https://furugrand.online/wp-content/uploads/2025/02/conoha-wing2.jpg 1920w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">ConoHa wingとは？ 特徴・セキュリティを解説</div><div class="blogcard-snippet internal-blogcard-snippet">「ConoHa wing」とは国内レンタルサーバーの1つで、ブログ・サイトを作成するときに使用します。「ConoHa wing」の特徴表示速度国内No.1充実機能と使いやすい管理画面サーバー料金が安い「」の特徴として、①表示速度国内No.1...</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 loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://furugrand.online" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">furugrand.online</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2025.02.25</div></div></div></div></a>
</div>



<p></p>



<h3 class="wp-block-heading"><span id="toc3">WordPressの「ダウンロード」とは？誤解を解消</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="614" src="https://furugrand.online/wp-content/uploads/2025/04/Wireframe-1-1024x614.webp" alt="" class="wp-image-4141" srcset="https://furugrand.online/wp-content/uploads/2025/04/Wireframe-1-1024x614.webp 1024w, https://furugrand.online/wp-content/uploads/2025/04/Wireframe-1-300x180.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/Wireframe-1-768x461.webp 768w, https://furugrand.online/wp-content/uploads/2025/04/Wireframe-1.webp 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>まず、一般的なソフトウェアのように、WordPressのプログラムを自身のパソコンに直接ダウンロードする必要はありません。</p>



<p>ConoHa WINGのようなレンタルサーバーを利用する場合、WordPressは<strong><span class="marker-under">サーバー上にインストールして使用します</span></strong>。</p>



<p>そのため、「WordPressをダウンロードする」というよりも、「ConoHa WINGのサーバーにWordPressをインストールする」というイメージを持つと分かりやすいでしょう。</p>



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



<h3 class="wp-block-heading"><span id="toc4">ConoHa WINGでWordPressを使う際の基本</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="614" src="https://furugrand.online/wp-content/uploads/2025/04/Wireframe-2-1024x614.webp" alt="" class="wp-image-4146" srcset="https://furugrand.online/wp-content/uploads/2025/04/Wireframe-2-1024x614.webp 1024w, https://furugrand.online/wp-content/uploads/2025/04/Wireframe-2-300x180.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/Wireframe-2-768x461.webp 768w, https://furugrand.online/wp-content/uploads/2025/04/Wireframe-2.webp 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>ConoHa WINGは、Webサイトのデータを保管し、インターネットを通じて公開するための<strong><span class="marker-under">「Web上の土地」</span></strong>のようなものです。</p>



<p>一方、WordPressは、その土地の上に建てる<strong><span class="marker-under">「家」のような役割</span></strong>を果たします。</p>



<p>つまり、ConoHa WINGのサーバーという基盤があって初めて、WordPressを利用してWebサイトを構築・運営できるのです。</p>



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



<p class="bold has-cocoon-white-color has-indigo-background-color has-text-color has-background has-link-color is-style-border-double has-border wp-elements-a79089cad617b77a00548c2baed0f8c9">WordPressの簡単にインストールできる機能</p>



<p>ConoHa WINGでは、WordPressを簡単にインストールできる機能が用意されています。</p>



<p>そのため複雑な操作を行うことなく、すぐにWordPressの管理画面にアクセスし、Webサイトの作成に取り掛かることができます。</p>



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



<p class="bold has-cocoon-white-color has-indigo-background-color has-text-color has-background has-link-color is-style-border-double has-border wp-elements-5b30bbc89045be055b16ecacc9bbb9f3">高速性</p>



<p>ConoHa WINGでWordPressを使う際の大きなメリットの一つは、その<strong>高速性</strong>です。</p>



<p>ConoHa WINGは、WordPressの動作に最適化された高速なSSDストレージや高性能なCPUなどのサーバー環境を採用しています。</p>



<p>これにより、Webサイトの表示速度が向上し、ユーザーエクスペリエンスの向上やSEO効果も期待できます。</p>



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



<p class="bold has-cocoon-white-color has-indigo-background-color has-text-color has-background has-link-color is-style-border-double has-border wp-elements-cd3bce2ecf84f37aeddc36b8dbf39c04">運用をサポートする様々な機能</p>



<p>また、ConoHa WINGは、WordPressの運用をサポートする様々な機能を提供しています。</p>



<p>例えば、自動バックアップ機能は、万が一のトラブルに備えてWebサイトのデータを定期的に保存してくれます。</p>



<p>セキュリティ対策も充実していて、不正アクセスからあなたのWordPressサイトを守ってくれます。</p>



<p class="bold has-cocoon-white-color has-light-blue-background-color has-text-color has-background has-link-color is-style-blank-box-blue has-border wp-elements-b80114d5b57ab3c9cf827c11b2a3dba3">ConoHa WINGが提供する便利な機能と高速な環境を理解しておくことで、より快適にWordPressでのWebサイト運営を始めることができるでしょう。</p>



<p>次のセクションでは、実際にConoHa WINGでWordPressをインストールする具体的な方法について解説していきます。</p>



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



<h3 class="wp-block-heading"><span id="toc5">始める前に準備するもの：ConoHa WINGのアカウント</span></h3>



<p>ConoHa WINGでWordPressを始めるにあたって、最初に必ず準備しておきたいのが<strong>ConoHa WINGのアカウント</strong>です。</p>



<p>これは、ConoHa WINGのサービスを利用するための「会員証」のようなもので、ここからサーバーの契約やWordPressのインストールなどの各種手続きを行います。</p>



<h4 class="wp-block-heading">ステップ1：新規登録の手続き</h4>



<p>まだConoHa WINGのアカウントを持っていない場合は、まず「<a rel="noopener" target="_blank" href="//af.moshimo.com/af/c/click?a_id=4922775&p_id=2540&pc_id=5631&pl_id=32722&url=https%3A%2F%2Fwww.conoha.jp%2Fwing%2F%3Fbtn_id%3Dtop--mainvisual_wing-top">ConoHa WING</a><img loading="lazy" decoding="async" width="1" height="1" src="//i.moshimo.com/af/i/impression?a_id=4922775&p_id=2540&pc_id=5631&pl_id=32722" alt="">」の公式サイトにアクセスし、新規登録の手続きを行う必要があります。</p>



<p class="has-text-align-center bold has-cocoon-white-color has-cyan-background-color has-text-color has-background has-link-color wp-elements-25c0e3a5a60a747fa0bb14c5bc1458ce">サイトにアクセス</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="464" src="https://furugrand.online/wp-content/uploads/2025/04/mousikomi-1024x464.webp" alt="" class="wp-image-3719" srcset="https://furugrand.online/wp-content/uploads/2025/04/mousikomi-1024x464.webp 1024w, https://furugrand.online/wp-content/uploads/2025/04/mousikomi-300x136.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/mousikomi-768x348.webp 768w, https://furugrand.online/wp-content/uploads/2025/04/mousikomi.webp 1250w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>「<a rel="noopener" target="_blank" href="//af.moshimo.com/af/c/click?a_id=4922775&p_id=2540&pc_id=5631&pl_id=32722&url=https%3A%2F%2Fwww.conoha.jp%2Fwing%2F%3Fbtn_id%3Dtop--mainvisual_wing-top">ConoHa WING</a><img loading="lazy" decoding="async" width="1" height="1" src="//i.moshimo.com/af/i/impression?a_id=4922775&p_id=2540&pc_id=5631&pl_id=32722" alt="">」の公式サイトから、「お申込み」または「今すぐお申込み」をクリックします。</p>



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



<p class="has-text-align-center bold has-cocoon-white-color has-cyan-background-color has-text-color has-background has-link-color wp-elements-79247e7c1b2bb5cb11d204a5f69328b7">料金プラン設定</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="914" height="779" src="https://furugrand.online/wp-content/uploads/2025/04/wing.webp" alt="" class="wp-image-3722" srcset="https://furugrand.online/wp-content/uploads/2025/04/wing.webp 914w, https://furugrand.online/wp-content/uploads/2025/04/wing-300x256.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/wing-768x655.webp 768w" sizes="(max-width: 914px) 100vw, 914px" /></figure>



<p>料金プランを設定します。</p>



<p>通常料金もありますが、WINGパックは3ヵ月以上契約することで、料金がお得になり、無料独自ドメインを使用できます。</p>



<p class="is-style-alert-box has-box-style">WINGパックのデメリットは、途中解約できないのを覚えておく必要があります。</p>



<p>私は月額料金を比較して、無難な12ヵ月を選択しました。</p>



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



<p class="has-text-align-center bold has-cocoon-white-color has-cyan-background-color has-text-color has-background has-link-color wp-elements-a2ab7a3cdbfad9070587e81a8905e049">初期ドメイン・サーバー名設定</p>



<div class="wp-block-cover aligncenter"><span aria-hidden="true" class="wp-block-cover__background has-dark-grey-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container is-layout-constrained wp-block-cover-is-layout-constrained">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="927" height="500" src="https://furugrand.online/wp-content/uploads/2025/04/domein.webp" alt="" class="wp-image-3737" srcset="https://furugrand.online/wp-content/uploads/2025/04/domein.webp 927w, https://furugrand.online/wp-content/uploads/2025/04/domein-300x162.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/domein-768x414.webp 768w" sizes="(max-width: 927px) 100vw, 927px" /></figure>
</div></div>



<p><strong><span class="marker-under">初期ドメイン</span></strong>を、「2～63文字以内・英数字小文字・ハイフン」で設定します。</p>



<p class="is-style-information-box has-box-style">初期ドメインとは、ブログ・会社・個人事業で使用される「<strong>独自ドメイン</strong>」とは別のドメインです。</p>



<p>初期ドメインは「サーバーにあるドメイン自体の名前」で、メールの送信やサイト開設もできますが、いわばconohaから借りているドメインです。</p>



<p><strong><span class="marker-under">サーバー名</span></strong>は、名前を変更せずにしましたが、2つサーバーを持っている人は名前を変更すると分かりやすくなるそうです。</p>



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



<p class="has-text-align-center bold has-cocoon-white-color has-cyan-background-color has-text-color has-background has-link-color wp-elements-152de94ff7288c224b0259c0f9876324"><strong>情報入力→支払方法選択</strong></p>



<div class="wp-block-cover aligncenter" style="min-height:143px;aspect-ratio:unset;"><span aria-hidden="true" class="wp-block-cover__background has-dark-grey-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container is-layout-constrained wp-block-cover-is-layout-constrained">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="517" height="85" src="https://furugrand.online/wp-content/uploads/2025/04/plan1.webp" alt="" class="wp-image-3749" srcset="https://furugrand.online/wp-content/uploads/2025/04/plan1.webp 517w, https://furugrand.online/wp-content/uploads/2025/04/plan1-300x49.webp 300w" sizes="(max-width: 517px) 100vw, 517px" /></figure>
</div></div>



<p>プラン選択・初期ドメインの設定が終わると、「Wordpress簡単セットアップ」の文言がありますが、これは「ドメイン取得時」に設定しなくてもOKです。※下記に詳細を解説します。</p>



<p>個人情報・支払い方法を入力し、「<strong><span class="marker-under">メールアドレスとパスワード」を設定して完了</span></strong>で、ConoHa WINGのサービスを本格的に利用できるようになります。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc6">ConoHa WINGでWordPressを始める2つの方法【簡単インストール】</span></h2>



<p>ConoHa WINGの大きな魅力である、<strong>WordPressの簡単のインストール方法</strong>を具体的にご紹介します。</p>



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



<h3 class="wp-block-heading"><span id="toc7">方法1:ConoHa申込時に「WordPressかんたんセットアップ」</span></h3>



<p class="has-text-align-center bold has-cocoon-white-color has-pink-background-color has-text-color has-background has-link-color is-style-blank-box-pink has-border wp-elements-902a01d6e597e79ce3134aa8ef8c60c2">新規お申込み画面で設定する</p>



<p>ConoHa WINGのサーバー新規お申し込み画面に進むと、「WordPressかんたんセットアップ」という項目があります。※上記で飛ばした箇所です。</p>



<p>ここで「<strong><span class="marker-under">利用する</span></strong>」を選択すると、WordPressのインストールに必要な情報を入力するフォームが表示されます。</p>



<div class="wp-block-cover aligncenter"><span aria-hidden="true" class="wp-block-cover__background has-dark-grey-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container is-layout-constrained wp-block-cover-is-layout-constrained">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="898" height="715" src="https://furugrand.online/wp-content/uploads/2025/04/word1.webp" alt="" class="wp-image-3757" srcset="https://furugrand.online/wp-content/uploads/2025/04/word1.webp 898w, https://furugrand.online/wp-content/uploads/2025/04/word1-300x239.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/word1-768x611.webp 768w" sizes="(max-width: 898px) 100vw, 898px" /></figure>
</div></div>



<p>入力する主な項目としては、まず<strong>WordPressをインストールするドメイン名</strong>です。新規に独自ドメインを取得することも、すでに持っているドメインを使用することも可能です。</p>



<p class="is-style-alert-box has-box-style">一度設定した独自ドメインは変更できないので、後悔ないドメインにしましょう。</p>



<p>次に、<strong>WordPressのサイト名</strong>、<strong>ユーザー名</strong>、<strong>パスワード</strong>を設定します。これらの情報は、WordPressの管理画面にログインする際に必要となるため、忘れないようにしっかりと控えておきましょう。</p>



<p>テーマは初心者であれば、「cocoon（コクーン）」がおすすめです。</p>



<p>cocoonは無料であるのにも関わらず、充分な機能を備えていて、使用しているユーザーが多いのでネットで情報を取りやすいのがメリットです。</p>



<div class="wp-block-cover aligncenter"><span aria-hidden="true" class="wp-block-cover__background has-dark-grey-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container is-layout-constrained wp-block-cover-is-layout-constrained">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="902" height="773" src="https://furugrand.online/wp-content/uploads/2025/04/word2.webp" alt="" class="wp-image-3763" srcset="https://furugrand.online/wp-content/uploads/2025/04/word2.webp 902w, https://furugrand.online/wp-content/uploads/2025/04/word2-300x257.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/word2-768x658.webp 768w" sizes="(max-width: 902px) 100vw, 902px" /></figure>
</div></div>



<p>また、データベースに関する設定は、通常ConoHa WINGが自動で行ってくれるため、ユーザーが意識する必要はありません。</p>



<p>このように、専門的な知識がなくても、画面の指示に従って必要事項を入力するだけで、ConoHa WINGが自動的にWordPressのインストールと初期設定を行ってくれます。</p>



<p>「WordPressかんたんセットアップ」の最大のメリットは、<strong>サーバー契約、ドメイン取得（希望する場合）、WordPressインストールが一度に完了する</strong>点です。</p>



<p>個別に手続きを行う必要がないため、初心者の方でもスムーズにWordPressの利用を開始できます。</p>



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



<h3 class="wp-block-heading"><span id="toc8">方法2：ConoHa WINGのコントロールパネルからインストール</span></h3>



<p class="has-text-align-center bold has-cocoon-white-color has-pink-background-color has-text-color has-background has-link-color is-style-blank-box-pink has-border wp-elements-bb2600644c90c73228de06f07154cf1c">コントロールパネルから設定</p>



<p>ConoHa WINGでWordPressを始めるもう一つの簡単な方法が、<strong>ConoHa WINGのコントロールパネルからWordPressをインストールする</strong>というものです。</p>



<p>すでにConoHa WINGのサーバーを契約済みで、独自ドメインも取得済みの方や、より詳細な設定を行いたい方におすすめの方法です。</p>



<div class="wp-block-cover aligncenter"><span aria-hidden="true" class="wp-block-cover__background has-dark-grey-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container is-layout-constrained wp-block-cover-is-layout-constrained">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="551" height="737" src="https://furugrand.online/wp-content/uploads/2025/04/login2.webp" alt="" class="wp-image-3775" srcset="https://furugrand.online/wp-content/uploads/2025/04/login2.webp 551w, https://furugrand.online/wp-content/uploads/2025/04/login2-224x300.webp 224w" sizes="(max-width: 551px) 100vw, 551px" /></figure>
</div></div>



<p class="has-text-align-center">ログイン画面→<a rel="noopener" target="_blank" href="https://www.conoha.jp/login/">https://www.conoha.jp/login/</a></p>



<p>まず、ConoHa WINGの公式サイトからコントロールパネルにログインします。</p>



<p>ログイン後、左側のメニューから「<strong><span class="marker-under">サイト管理</span></strong>」を選択し、WordPressをインストールしたいドメインを選択します。</p>



<div class="wp-block-cover aligncenter"><span aria-hidden="true" class="wp-block-cover__background has-dark-grey-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container is-layout-constrained wp-block-cover-is-layout-constrained">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="1120" height="533" src="https://furugrand.online/wp-content/uploads/2025/04/word2-1.webp" alt="" class="wp-image-3780" srcset="https://furugrand.online/wp-content/uploads/2025/04/word2-1.webp 1120w, https://furugrand.online/wp-content/uploads/2025/04/word2-1-300x143.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/word2-1-1024x487.webp 1024w, https://furugrand.online/wp-content/uploads/2025/04/word2-1-768x365.webp 768w" sizes="(max-width: 1120px) 100vw, 1120px" /></figure>
</div></div>



<p><strong><span class="marker-under">「＋Wordpress」のボタン</span></strong>をクリックすると、WordPressのインストールに必要な情報を入力するフォームが表示されます。</p>



<p>ここでは、<strong>WordPressのサイト名</strong>、<strong>ユーザー名</strong>、<strong>パスワード</strong>、そして<strong>メールアドレス</strong>を設定します。</p>



<p class="is-style-alert-box has-box-style">これらの情報は、WordPressの管理画面にログインする際に必要となるため、大切に保管してください。</p>



<p>また、データベースに関する設定項目がありますが、通常はConoHa WINGが自動で最適な設定を行ってくれるため、特別な理由がない限り、ユーザーが手動で設定する必要はありません。</p>



<p>データベースのパスワードも入力する必要があります。データベースの名前とともに忘れないようにしましょう。</p>



<p>全ての設定を入力したら、「保存」ボタンをクリックすることで、ConoHa WINGが自動的にWordPressのインストールを開始します。インストールが完了するまで、しばらく時間がかかる場合がありますので、画面の表示が変わるまでお待ちください。</p>



<p>この方法のメリットは、<strong>すでにサーバーとドメインの準備が整っている場合に、手軽にWordPressをインストールできる</strong>点です。「WordPressかんたんセットアップ」のようにサーバー契約と同時ではありませんが、既存の環境にスムーズにWordPressを導入できます。</p>



<p></p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc9">まとめ</span></h2>



<center><a rel="nofollow noopener" target="_blank" href="//af.moshimo.com/af/c/click?a_id=3418064&#038;p_id=2312&#038;pc_id=4967&#038;pl_id=38395" referrerpolicy="no-referrer-when-downgrade" attributionsrc><img loading="lazy" decoding="async" src="//image.moshimo.com/af-img/1762/000000038395.png" width="300" height="250" style="border:none;"></a><img decoding="async" src="//i.moshimo.com/af/i/impression?a_id=3418064&#038;p_id=2312&#038;pc_id=4967&#038;pl_id=38395" width="1" height="1" style="border:none;" loading="lazy"></center>



<p>この記事では、ConoHa WINGを使ってWordPressを始める方法について、「ダウンロード」という言葉の持つ意味合いから、具体的なインストール手順、そしてその後の初期設定までを解説してきました。</p>



<p>ConoHa WINGの「WordPressかんたんセットアップ」やコントロールパネルからの簡単インストール機能を利用すれば、初心者の方でもスムーズにWordPressの環境をConoHa WINGのサーバー上に構築できます。</p>



<p>WordPressのインストールは、Webサイト運営の第一歩に過ぎません。初期設定をしっかりと行い、魅力的なテーマを選び、必要なプラグインを導入することで、理想とするWebサイトを作り上げることができます。</p>



<p></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>WordPressとは？ブログ・ホームページ作成におすすめ</title>
		<link>https://furugrand.online/what-is-wordpress/</link>
		
		<dc:creator><![CDATA[ヨイカゲの主]]></dc:creator>
		<pubDate>Tue, 15 Apr 2025 02:18:50 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://furugrand.online/?p=3540</guid>

					<description><![CDATA[「自分のブログやホームページを持ちたいけど、何から始めればいいかわからない…」そんな風に悩んでいませんか？ もしかしたら、「WordPress（ワードプレス）」という言葉を耳にしたことがあるかもしれません。 この記事では [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>「自分のブログやホームページを持ちたいけど、何から始めればいいかわからない…」そんな風に悩んでいませんか？ もしかしたら、「WordPress（ワードプレス）」という言葉を耳にしたことがあるかもしれません。</p>



<p>この記事では、<strong>「WordPressとは一体何なのか？」</strong> という基本的な疑問から、</p>



<p>なぜブログやホームページ作成におすすめなのか、その魅力や始め方までを、初心者の方にもわかりやすく解説していきます。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc1">WordPressとは？</span></h2>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://furugrand.online/wp-content/uploads/2025/04/WordPress1-1024x576.webp" alt="" class="wp-image-3556" srcset="https://furugrand.online/wp-content/uploads/2025/04/WordPress1-1024x576.webp 1024w, https://furugrand.online/wp-content/uploads/2025/04/WordPress1-300x169.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/WordPress1-768x432.webp 768w, https://furugrand.online/wp-content/uploads/2025/04/WordPress1-1536x864.webp 1536w, https://furugrand.online/wp-content/uploads/2025/04/WordPress1-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/04/WordPress1-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/04/WordPress1-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/04/WordPress1.webp 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="has-text-align-center">WordPress公式サイト→<a rel="noopener" target="_blank" href="https://ja.wordpress.org/">https://ja.wordpress.org/</a></p>



<p>WordPress（ワードプレス）とは、無料で利用できるソフトウェアのことです。</p>



<p class="has-watery-green-background-color has-background"><strong>個人で運営するブログはもちろん、企業のホームページ、さらには本格的なオンラインショップまで、様々なWebサイトを簡単につくることができるんです。</strong></p>



<p>「なんだか難しそう…」と感じる方もいるかもしれませんが、WordPressは、<strong>専門的な知識がなくても、直感的に操作できる</strong>ように作られています。</p>



<p>まるで、普段使っているブログサービスのように、文章を書いたり、写真をアップロードしたりするだけで、素敵なWebサイトが完成します。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc2">なぜWordPressがブログ・ホームページ作成に最適？7つの理由</span></h2>



<p>数あるWebサイト作成ツールの中で、なぜWordPressが特にブログやホームページの作成において多くの人に選ばれ、おすすめされているのでしょうか？</p>



<p>このセクションでは、WordPressがブログやホームページ作成に最適な理由を、具体的な7つのポイントに絞ってご紹介します。</p>



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



<h3 class="wp-block-heading"><span id="toc3">理由1：低コストで本格サイト構築</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://furugrand.online/wp-content/uploads/2025/04/construction-1024x576.webp" alt="" class="wp-image-3573" srcset="https://furugrand.online/wp-content/uploads/2025/04/construction-1024x576.webp 1024w, https://furugrand.online/wp-content/uploads/2025/04/construction-300x169.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/construction-768x432.webp 768w, https://furugrand.online/wp-content/uploads/2025/04/construction-1536x864.webp 1536w, https://furugrand.online/wp-content/uploads/2025/04/construction-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/04/construction-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/04/construction-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/04/construction.webp 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>「WordPressとは無料のソフトウェアである」という点が、多くの方にとって最初の大きな魅力です。</p>



<p class="is-style-alert-box has-box-style">Webサイトを立ち上げる際、通常はサーバーのレンタル費用やドメインの取得費用がかかります。</p>



<p>しかし、WordPress自体の利用には費用がかかりません。</p>



<p>無料ブログサービスなどと比較すると、WordPressは<strong><span class="marker-under">自由度が高く、将来的な拡張性も期待できます</span></strong>。</p>



<p>初期費用を抑えつつ、本格的なWebサイト構築を目指せるのは大きなメリットと言えるでしょう。</p>



<p>また、WordPressは<strong><span class="marker-under">オープンソースのソフトウェア</span></strong>であり、世界中の開発者によって常に改善が行われています。セキュリティアップデートや新機能の追加なども頻繁に行われるため、安心して長く利用できる点も魅力です。</p>



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



<h3 class="wp-block-heading"><span id="toc4">理由2：デザインが豊富！知識なしでもおしゃれに</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://furugrand.online/wp-content/uploads/2025/04/design-1024x576.webp" alt="" class="wp-image-3574" srcset="https://furugrand.online/wp-content/uploads/2025/04/design-1024x576.webp 1024w, https://furugrand.online/wp-content/uploads/2025/04/design-300x169.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/design-768x432.webp 768w, https://furugrand.online/wp-content/uploads/2025/04/design-1536x864.webp 1536w, https://furugrand.online/wp-content/uploads/2025/04/design-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/04/design-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/04/design-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/04/design.webp 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>「WordPressとは、デザインの自由度が高いツールである」と言えます。無料・有料を含め、数えきれないほどのテーマが存在し、そのデザインは多種多様です。</p>



<p class="is-style-information-box has-box-style">特筆すべきは、<strong><span class="marker-under">専門的な知識がなくても、簡単におしゃれなWebサイトが作成できる</span></strong>点です。</p>



<p class="borderb">多くのテーマでは、カスタマイズ機能も充実しています。</p>



<p>また、レスポンシブデザインに対応したテーマが多いのも嬉しいポイントです。※レスポンシブデザインについては、下記で詳しく解説します。</p>



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



<h3 class="wp-block-heading"><span id="toc5">理由3：プラグインで機能が自由自在！拡張性◎</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://furugrand.online/wp-content/uploads/2025/04/plugins-1024x576.webp" alt="" class="wp-image-3579" srcset="https://furugrand.online/wp-content/uploads/2025/04/plugins-1024x576.webp 1024w, https://furugrand.online/wp-content/uploads/2025/04/plugins-300x169.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/plugins-768x432.webp 768w, https://furugrand.online/wp-content/uploads/2025/04/plugins-1536x864.webp 1536w, https://furugrand.online/wp-content/uploads/2025/04/plugins-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/04/plugins-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/04/plugins-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/04/plugins.webp 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>WordPressの大きな特徴であり、魅力の一つが「プラグイン」の存在です。プラグインとは、WordPressの機能を後から自由に追加・拡張できるツールのことです。</p>



<p>まるでスマートフォンのアプリのように、必要な機能だけをインストールして使えるため、<strong>自分だけのオリジナルなWebサイト</strong>を構築できます。</p>



<p class="bold has-cocoon-white-color has-teal-background-color has-text-color has-background has-link-color is-style-blank-box-gray has-border wp-elements-a84ca81cdaa4f78cfdb1f173edba5201">基本的な機能だけでも十分にブログやホームページを作成できますが、プラグインを活用することで、その可能性は無限に広がります。</p>



<p>例えば、「お問い合わせフォームを設置したい」と思った場合、専用のプラグインをインストールするだけで、簡単に実現できます。SEO対策を強化したいなら、SEOに特化したプラグインを利用することで、専門的な知識がなくても効果的な対策を施すことが可能です。</p>



<p>他にも、SNSとの連携をスムーズにするプラグイン、サイトの表示速度を改善するプラグイン、セキュリティを強化するプラグイン、オンラインショップの機能を追加するプラグインなど、<strong>ありとあらゆる機能がプラグインとして提供されています</strong>。その数は数万種類にも及び、無料のものから有料のものまで様々です。</p>



<div class="wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box has-border-color has-pink-border-color not-nested-style cocoon-block-tab-caption-box tab1" style="--cocoon-custom-border-color:#e95295"><div class="tab-caption-box-label block-box-label box-label fab-thumbs-up"><span class="tab-caption-box-label-text block-box-label-text box-label-text">ポイント</span></div><div class="tab-caption-box-content block-box-content box-content">
<p style="margin-top:var(--wp--preset--spacing--30);margin-right:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30);margin-left:var(--wp--preset--spacing--30)">この拡張性の高さこそが、WordPressが初心者からプロのWeb制作者まで、幅広い層に支持されている理由の一つです。「こんな機能が欲しい」という要望も、きっとプラグインで見つかるはずです。</p>
</div></div>



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



<h3 class="wp-block-heading"><span id="toc6">理由4：SEO対策も簡単！上位表示をサポート</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://furugrand.online/wp-content/uploads/2025/04/seo-1024x576.webp" alt="" class="wp-image-3587" srcset="https://furugrand.online/wp-content/uploads/2025/04/seo-1024x576.webp 1024w, https://furugrand.online/wp-content/uploads/2025/04/seo-300x169.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/seo-768x432.webp 768w, https://furugrand.online/wp-content/uploads/2025/04/seo-1536x864.webp 1536w, https://furugrand.online/wp-content/uploads/2025/04/seo-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/04/seo-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/04/seo-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/04/seo.webp 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>「WordPressとは、SEOに強いプラットフォームである」という点も、ブログやホームページ作成において非常に重要なメリットです。</p>



<p class="has-ex-c-background-color has-background is-style-border-radius-s-convex has-border is-style-checkered-box has-box-style">SEO（Search Engine Optimization）とは、検索エンジンでWebサイトを上位表示させるための対策のこと。多くの人にWebサイトを見てもらうためには、SEO対策が欠かせません。</p>



<p>WordPressは、<strong><span class="marker-under">初期状態でもある程度のSEO対策が施されています</span></strong>。例えば、構造化マークアップという、検索エンジンにWebサイトの情報を正しく伝えるための記述が比較的容易に行えます。また、URLを自由に設定できるパーマリンク機能も、SEOに有利に働きます。</p>



<p></p>



<p class="has-text-align-left is-style-good-box has-box-style"><strong>表示速度の改善</strong>にも取り組みやすい環境</p>



<p>また、WordPressは<strong><span class="marker-under">表示速度の改善</span></strong>にも取り組みやすい環境です。表示速度はSEOの重要な要素の一つですが、キャッシュ系プラグインを利用することで、Webサイトの高速化を比較的簡単に行うことができます。</p>



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



<h3 class="wp-block-heading"><span id="toc7">理由5：情報が多く安心！困った時もすぐ解決</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://furugrand.online/wp-content/uploads/2025/04/information-1024x576.jpg" alt="" class="wp-image-3597" srcset="https://furugrand.online/wp-content/uploads/2025/04/information-1024x576.jpg 1024w, https://furugrand.online/wp-content/uploads/2025/04/information-300x169.jpg 300w, https://furugrand.online/wp-content/uploads/2025/04/information-768x432.jpg 768w, https://furugrand.online/wp-content/uploads/2025/04/information-1536x864.jpg 1536w, https://furugrand.online/wp-content/uploads/2025/04/information-120x68.jpg 120w, https://furugrand.online/wp-content/uploads/2025/04/information-160x90.jpg 160w, https://furugrand.online/wp-content/uploads/2025/04/information-320x180.jpg 320w, https://furugrand.online/wp-content/uploads/2025/04/information.jpg 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>「WordPressとは、世界中で多くの人に利用されているCMSである」という事実は、初心者の方にとって大きな安心材料となります。なぜなら、利用者が多いということは、<strong><span class="marker-under">インターネット上に情報が豊富に存在している</span></strong>ことを意味するからです。</p>



<p class="is-style-information-box has-box-style"><strong>インターネット上にWordpressに関する情報が多い</strong></p>



<p>WordPressの利用中に疑問点が出てきたり、トラブルに遭遇したりした場合でも、検索エンジンで調べれば、<strong><span class="marker-under">解決策やヒントが見つかる可能性が非常に高い</span></strong>です。初心者向けの解説記事から、専門的な技術情報まで、幅広い情報が日々共有されています。</p>



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



<h3 class="wp-block-heading"><span id="toc8">理由6：スマホ対応も簡単！レスポンシブデザイン</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://furugrand.online/wp-content/uploads/2025/04/Responsive-1024x576.webp" alt="" class="wp-image-3604" srcset="https://furugrand.online/wp-content/uploads/2025/04/Responsive-1024x576.webp 1024w, https://furugrand.online/wp-content/uploads/2025/04/Responsive-300x169.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/Responsive-768x432.webp 768w, https://furugrand.online/wp-content/uploads/2025/04/Responsive-1536x864.webp 1536w, https://furugrand.online/wp-content/uploads/2025/04/Responsive-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/04/Responsive-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/04/Responsive-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/04/Responsive.webp 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>現代において、スマートフォンでWebサイトを閲覧する人は非常に多く、Webサイトがスマートフォンに対応していることは必須と言えます。「WordPressとは、スマホ対応が容易なプラットフォームである」という点も、WordPressがブログやホームページ作成におすすめな大きな理由の一つです。</p>



<p class="has-text-align-center has-cocoon-white-color has-light-blue-background-color has-text-color has-background has-link-color is-style-border-solid has-border is-style-light-background-box has-box-style wp-elements-1b0484fa059118b404de2c4284f1aae8"><strong>多くのWordPressのテーマは、レスポンシブデザインに対応</strong></p>



<p>多くのWordPressのテーマ（デザインテンプレート）は、<strong>レスポンシブデザイン</strong>に対応しています。レスポンシブデザインとは、Webサイトのレイアウトが、パソコン、スマートフォン、タブレットなど、様々なデバイスの画面サイズに合わせて自動的に最適化される仕組みのことです。</p>



<p>レスポンシブデザインに対応したテーマを選べば、特別な設定をしなくても、<strong>どのデバイスからアクセスしても見やすく、使いやすいWebサイト</strong>を簡単に作成できます。</p>



<p>これにより、ユーザーエクスペリエンス（顧客体験）が向上し、Webサイトの評価を高めることにも繋がります。</p>



<p class="has-text-align-center has-cocoon-white-color has-light-blue-background-color has-text-color has-background has-link-color is-style-border-solid has-border is-style-light-background-box has-box-style wp-elements-714455c985ac9540403a4fed53c57e78"><strong>管理画面自体もレスポンシブデザインに対応</strong></p>



<p>また、WordPressの管理画面自体もレスポンシブデザインに対応しているため、<strong><span class="marker-under">スマートフォンやタブレットからでも記事の作成や編集、設定の変更などを行うことができます</span></strong>。</p>



<p>これは、外出先や移動中にWebサイトを管理したい場合などに非常に便利です。</p>



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



<h3 class="wp-block-heading"><span id="toc9">理由7：ブログ以外にも多様なサイトが作れる</span></h3>



<p>企業のコーポレートサイトやブランドサイトといったホームページも、WordPressで制作するのに適しています。</p>



<p>固定ページ機能を使えば、会社概要やサービス紹介、お問い合わせフォームなどを簡単に作成・管理できます。豊富なデザインテーマを活用すれば、プロフェッショナルな印象を与えるWebサイトを構築することも可能です。</p>



<p class="has-text-align-center has-key-color-color has-ex-d-background-color has-text-color has-background has-link-color is-style-triangle-box has-box-style wp-elements-16299d04825cb0fa8fc2794229dc09ff"><strong>ECサイトをプラグインで構築できる</strong></p>



<p>さらに、プラグインを利用することで、<strong>ECサイト（オンラインショップ）</strong>の機能もWordPressに追加できます。ECサイト構築プラグインを導入すれば、商品の登録、カート機能、決済システムの連携などを簡単に行うことができ、本格的なオンライン販売を始めることができます。</p>



<p class="has-text-align-center has-key-color-color has-ex-d-background-color has-text-color has-background has-link-color is-style-triangle-box has-box-style wp-elements-63d2add9906adfb36c936f3d9cee6c7d"><strong>ポートフォリオ</strong>・<strong>会員制サイトもOK</strong></p>



<p>その他にも、ポートフォリオサイトで自分の作品やスキルを公開したり、会員制サイトで特定のユーザーに限定コンテンツを提供したり、<strong>ランディングページ（LP）</strong>で特定の商品やサービスを訴求したりすることもWordPressで実現できます。</p>



<p>このように、WordPressはブログ作成だけでなく、多様な種類のWebサイトを構築できるため、個人の趣味からビジネス利用まで、幅広いニーズに対応できる最適な選択肢と言えるでしょう。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc10">まとめ</span></h2>



<p>ここまで、「WordPressとは何か」という基本的な情報から、ブログやホームページ作成におすすめな7つの理由までを詳しく解説してきました。</p>



<p>WordPressは、無料で利用できるにもかかわらず、高機能で自由度の高いソフトウェアです。</p>



<div class="wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box has-border-color has-pink-border-color not-nested-style cocoon-block-tab-caption-box tab1" style="--cocoon-custom-border-color:#e95295"><div class="tab-caption-box-label block-box-label box-label fab-thumbs-up"><span class="tab-caption-box-label-text block-box-label-text box-label-text">ポイント</span></div><div class="tab-caption-box-content block-box-content box-content">
<ul class="wp-block-list is-style-icon-list-check has-list-style">
<li>初心者の方でも扱いやすく、豊富なデザインテーマやプラグインを活用することで、専門知識がなくてもおしゃれで機能的なWebサイトを構築できます。</li>
</ul>
</div></div>



<p>ブログを始めたい方はもちろん、企業のホームページを持ちたい方、オンラインショップを開設したい方まで、WordPressはWebサイト作成の夢を叶える強力なツールとなるでしょう。</p>



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



<p></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>ChatGPTとは？質問応答AIの仕組みとできることを解説</title>
		<link>https://furugrand.online/what-chatgpt/</link>
		
		<dc:creator><![CDATA[ヨイカゲの主]]></dc:creator>
		<pubDate>Wed, 09 Apr 2025 09:24:23 +0000</pubDate>
				<category><![CDATA[IT]]></category>
		<guid isPermaLink="false">https://furugrand.online/?p=3248</guid>

					<description><![CDATA[「最近よく耳にするChatGPTって、一体何ができるの？」 「AIって難しそうだけど、本当に使いこなせるようになるのかな？」 この記事では、ChatGPTとは何かという基本的なことから、どのようにして自然な会話ができるの [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>「最近よく耳にするChatGPTって、一体何ができるの？」</p>



<p>「AIって難しそうだけど、本当に使いこなせるようになるのかな？」</p>



<p>この記事では、ChatGPTとは何かという基本的なことから、<strong><span class="marker-under">どのようにして自然な会話ができるのかといった仕組み</span></strong>、そして実際に<strong><span class="marker-under">どんなことができるのか</span></strong>を、初心者の方にも分かりやすく丁寧に解説していきます。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc1">ChatGPTとは？</span></h2>



<ul class="wp-block-list list bold has-key-color-color has-ex-e-background-color has-text-color has-background has-link-color is-style-border-radius-s-double has-border is-style-numeric-list-enclosed has-list-style wp-elements-4a3133cd268e45432db4b3bc8320a245">
<li><a href="#1">OpenAIが開発した高性能AI</a></li>



<li><a href="#2">人間の言葉を理解し自然な文章で応答</a></li>



<li><a href="#3">様々なタスクをこなせる万能AIアシスタント</a></li>
</ul>



<p>今話題のChatGPTとは何なのか？</p>



<p>3つのポイントについてい解説していきます。</p>



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



<h3 class="wp-block-heading" id="1"><span id="toc2">OpenAIが開発した高性能AI</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="579" src="https://furugrand.online/wp-content/uploads/2025/04/High-performance-AI-1024x579.webp" alt="" class="wp-image-3288" srcset="https://furugrand.online/wp-content/uploads/2025/04/High-performance-AI-1024x579.webp 1024w, https://furugrand.online/wp-content/uploads/2025/04/High-performance-AI-300x170.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/High-performance-AI-768x434.webp 768w, https://furugrand.online/wp-content/uploads/2025/04/High-performance-AI-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/04/High-performance-AI-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/04/High-performance-AI-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/04/High-performance-AI.webp 1472w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>ChatGPTは、<strong><span class="marker-under">アメリカのOpenAIという会社が作った、とっても賢いAI（人工知能）</span></strong>です。</p>



<p>まるで優秀なアシスタントがそばにいてくれるみたいに、色々な作業を手伝ってくれます。</p>



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



<h3 class="wp-block-heading" id="2"><span id="toc3">人間の言葉を理解し自然な文章で応答</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="579" src="https://furugrand.online/wp-content/uploads/2025/04/QA-1024x579.webp" alt="" class="wp-image-3293" srcset="https://furugrand.online/wp-content/uploads/2025/04/QA-1024x579.webp 1024w, https://furugrand.online/wp-content/uploads/2025/04/QA-300x170.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/QA-768x434.webp 768w, https://furugrand.online/wp-content/uploads/2025/04/QA-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/04/QA-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/04/QA-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/04/QA.webp 1472w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>ChatGPTが特にすごいのは、私たちが<strong><span class="marker-under">普段話したり書いたりする言葉（自然言語）を理解できること</span></strong>。</p>



<p>これは、過去の膨大なテキストデータを学習することで、言葉の選び方や文章の構成、文脈の理解といった、高度な言語処理能力を身につけたからです。</p>



<div class="wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box has-text-color has-background has-border-color has-cocoon-black-color has-ex-b-background-color has-indigo-border-color not-nested-style cocoon-block-tab-caption-box tab1" style="--cocoon-custom-background-color:#f8f4e6;--cocoon-custom-text-color:#333333;--cocoon-custom-border-color:#1e50a2"><div class="tab-caption-box-label block-box-label box-label"><span class="tab-caption-box-label-text block-box-label-text box-label-text">使用例</span></div><div class="tab-caption-box-content block-box-content box-content">
<p><strong>「今日の天気は？」</strong>と質問すれば、現在地の天気を教えてくれます。<strong>「〇〇について説明して」</strong>と指示すれば、関連する情報を分かりやすくまとめてくれます。</p>
</div></div>



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



<h3 class="wp-block-heading" id="3"><span id="toc4">様々なタスクをこなせる万能AIアシスタント</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="579" src="https://furugrand.online/wp-content/uploads/2025/04/Universal-AI-assistant-1024x579.webp" alt="" class="wp-image-3291" srcset="https://furugrand.online/wp-content/uploads/2025/04/Universal-AI-assistant-1024x579.webp 1024w, https://furugrand.online/wp-content/uploads/2025/04/Universal-AI-assistant-300x170.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/Universal-AI-assistant-768x434.webp 768w, https://furugrand.online/wp-content/uploads/2025/04/Universal-AI-assistant-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/04/Universal-AI-assistant-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/04/Universal-AI-assistant-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/04/Universal-AI-assistant.webp 1472w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>ChatGPTは、単に自然な会話ができるだけでなく、まるで優秀なアシスタントのように、<strong><span class="marker-under">様々なタスクをこなせる万能なAIです</span></strong>。</p>



<p>例えば、文章作成においては、ブログ記事の草稿、メールの作成、企画書の提案など、多岐にわたる用途で活用できます。</p>



<p class="is-style-information-box has-box-style">アイデア出しに困った時も、ChatGPTにテーマを伝えるだけで、関連する様々なアイデアを提供してくれます。</p>



<p>また、翻訳機能も備わっていて、異なる言語間の翻訳をスムーズに行うことができます。プログラミングのコードに関する質問や、複雑な計算問題に対するアドバイスを求めることも可能です。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc5">ChatGPTとは？驚くほど自然な会話！その仕組みを解説</span></h2>



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



<p>なぜChatGPTはこんなにも自然な会話ができるのでしょうか？ </p>



<p>単に質問に答えるだけでなく、文脈を理解し、時にはユーモアを交えた返答までしてくれる。その裏側には、高度な技術と複雑な仕組みが隠されています。</p>



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



<h3 class="wp-block-heading"><span id="toc6">大量のテキストデータを学習した「大規模言語モデル」</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://furugrand.online/wp-content/uploads/2025/04/text-data-1024x576.webp" alt="" class="wp-image-3355" srcset="https://furugrand.online/wp-content/uploads/2025/04/text-data-1024x576.webp 1024w, https://furugrand.online/wp-content/uploads/2025/04/text-data-300x169.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/text-data-768x432.webp 768w, https://furugrand.online/wp-content/uploads/2025/04/text-data-1536x864.webp 1536w, https://furugrand.online/wp-content/uploads/2025/04/text-data-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/04/text-data-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/04/text-data-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/04/text-data.webp 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>ChatGPTが驚くほど自然な会話を実現できる背景には、<strong><span class="marker-under">「大規模言語モデル」という特別な技術</span></strong>があります。</p>



<p>これは、インターネット上にあるニュース記事、ブログ、書籍、論文など、膨大な量のテキストデータを学習することで、言葉の意味や使い方、文法のルールなどを深く理解するAIの仕組みのことです。</p>



<p class="is-style-information-box has-box-style">また、学習したデータに基づいて、次にどのような言葉が続くかを予測する能力にも長けています。</p>



<p>これにより、人間が話すようなスムーズで自然な会話の流れを作り出すことができるのです。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc7">ChatGPTで何ができる？主要な5つの活用事例を紹介</span></h2>



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



<p>ChatGPTが持つ多様な能力の中から、特に注目すべき主要な活用事例を5つに絞ってご紹介します。</p>



<ul class="wp-block-list list bold has-key-color-color has-ex-e-background-color has-text-color has-background has-link-color is-style-border-radius-s-double has-border is-style-numeric-list-enclosed has-list-style wp-elements-776461452c906317f154808785ad9463">
<li><a rel="noopener" target="_blank" href="http://kuro1">文章作成・ブログ記事の作成</a></li>



<li><a rel="noopener" target="_blank" href="http://kuro2">アイデア出し・ブレインストーミング</a></li>



<li><a rel="noopener" target="_blank" href="http://kuro3">翻訳・多言語コミュニケーション</a></li>



<li><a rel="noopener" target="_blank" href="http://kuro4">プログラミング補助・コード生成</a></li>



<li><a rel="noopener" target="_blank" href="http://kuro5">質問応答・情報収集</a></li>
</ul>



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



<h3 class="wp-block-heading" id="kuro1"><span id="toc8">1、文章作成</span></h3>



<p>ChatGPTは、文章作成において非常に強力なツールとなります。</p>



<p>「文章作成」について、さらに3つに絞りました。</p>



<ul class="wp-block-list list bold has-cocoon-black-color has-ex-e-background-color has-text-color has-background has-link-color is-style-numeric-list-step has-list-style wp-elements-2c3cd0effbb2a43881859e5ed17c5658">
<li><a rel="noopener" target="_blank" href="http://maru1">記事の構成案を提案</a></li>



<li><a rel="noopener" target="_blank" href="http://maru2">文章そのものを生成</a></li>



<li><a rel="noopener" target="_blank" href="http://maru3">既存の記事のリライトや校正</a></li>
</ul>



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



<h4 class="wp-block-heading" id="maru1">①<strong>記事の構成案を提案</strong></h4>



<p>記事のテーマやキーワードを入力するだけで、ChatGPTは<strong><span class="marker-under">記事の構成案を提案してくれます</span></strong>。</p>



<p>見出しの候補や、各見出しでどのような内容に触れるべきかといった、具体的な道筋を示してくれるため、記事の骨組みを効率的に作成できます。</p>



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



<h4 class="wp-block-heading" id="maru2">②<strong>文章そのものを生成</strong></h4>



<p>ChatGPTは<strong><span class="marker-under">文章そのものを生成することも得意</span></strong>としています。</p>



<p>指定したキーワードやトーンに合わせて、段落単位で文章を作成したり、記事全体の下書きを生成したりすることも可能です。</p>



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



<h4 class="wp-block-heading" id="maru3">③<strong>既存の記事のリライトや校正</strong></h4>



<p>既存の記事の<strong><span class="marker-under">リライトや校正にもChatGPTを活用できます</span></strong>。</p>



<p>文章の表現をより自然にしたり、誤字脱字や文法ミスをチェックしたりする際に、その能力を発揮します。</p>



<p class="is-style-alert-box has-box-style">ただし、ChatGPTが生成する文章は、あくまで提案や下書きとして捉え、最終的な確認や修正は必ず自分で行うようにしましょう。</p>



<p>独自の視点や経験を加えることで、よりオリジナリティのある、質の高いブログ記事を作成することができます。</p>



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



<h3 class="wp-block-heading" id="kuro2"><span id="toc9">2、アイデア出し・ブレインストーミング</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://furugrand.online/wp-content/uploads/2025/04/ideas-1024x576.webp" alt="" class="wp-image-3375" srcset="https://furugrand.online/wp-content/uploads/2025/04/ideas-1024x576.webp 1024w, https://furugrand.online/wp-content/uploads/2025/04/ideas-300x169.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/ideas-768x432.webp 768w, https://furugrand.online/wp-content/uploads/2025/04/ideas-1536x864.webp 1536w, https://furugrand.online/wp-content/uploads/2025/04/ideas-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/04/ideas-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/04/ideas-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/04/ideas.webp 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>新しい企画を考えたり、解決策を見つけたりする際のアイデア出しやブレインストーミングは、時に難航することがあります。そんな時、ChatGPTは頼れるブレインストーミングパートナーとして活躍してくれます。</p>



<p>例えば、<strong><span class="marker-under">「新しい記事のテーマについてアイデアを出して」</span></strong>とChatGPTに問いかけるだけで、様々な角度からの提案を受けることができます。特定のキーワードやジャンルを指定すれば、より具体的なアイデアに絞り込むことも可能です。</p>



<p>また、既存のアイデアをさらに発展させたい場合にも、ChatGPTは有効です。<strong><span class="marker-under">「〇〇というアイデアをさらに面白くするにはどうすればいいですか？」</span></strong>といった質問を投げかけることで、新たな視点や発想を得られることがあるでしょう。</p>



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



<h3 class="wp-block-heading" id="kuro3"><span id="toc10">3、翻訳・多言語コミュニケーション</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://furugrand.online/wp-content/uploads/2025/04/translation-1024x576.webp" alt="" class="wp-image-3371" srcset="https://furugrand.online/wp-content/uploads/2025/04/translation-1024x576.webp 1024w, https://furugrand.online/wp-content/uploads/2025/04/translation-300x169.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/translation-768x432.webp 768w, https://furugrand.online/wp-content/uploads/2025/04/translation-1536x864.webp 1536w, https://furugrand.online/wp-content/uploads/2025/04/translation-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/04/translation-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/04/translation-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/04/translation.webp 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>ChatGPTは、高度な翻訳機能を備えているので、多言語コミュニケーションの強力なサポートツールとなります。</p>



<p>例えば、海外のウェブサイトや論文の内容を理解したい時、ChatGPTに文章を入力するだけで、自然な日本語に翻訳してくれます。逆に、自分の考えや作成した文章を外国語で伝えたい場合も、指定した言語に高精度で翻訳してくれるため、コミュニケーションの幅が大きく広がります。</p>



<p>ChatGPTが対応している言語は多岐にわたり、英語、中国語、韓国語はもちろん、フランス語、スペイン語、ドイツ語など、様々な言語間の翻訳が可能です。これにより、ビジネスシーンや個人的な交流において、言語の障壁を感じることなく、スムーズなコミュニケーションを実現できます。</p>



<p>また、単なる直訳だけでなく、文脈やニュアンスを考慮した翻訳ができる点も、ChatGPTの大きな強みです。これにより、誤解を生じにくい、より自然なコミュニケーションが可能になります。</p>



<p>さらに、ChatGPTは翻訳だけでなく、外国語での文章作成のサポートもしてくれます。例えば、<strong><span class="marker-under">「英語で自己紹介のメールを作成して」</span></strong>と指示すれば、英文メールを作成してくれます。</p>



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



<h3 class="wp-block-heading" id="kuro4"><span id="toc11">4、プログラミング補助・コード生成</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://furugrand.online/wp-content/uploads/2025/04/programming-1024x576.webp" alt="" class="wp-image-3378" srcset="https://furugrand.online/wp-content/uploads/2025/04/programming-1024x576.webp 1024w, https://furugrand.online/wp-content/uploads/2025/04/programming-300x169.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/programming-768x432.webp 768w, https://furugrand.online/wp-content/uploads/2025/04/programming-1536x864.webp 1536w, https://furugrand.online/wp-content/uploads/2025/04/programming-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/04/programming-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/04/programming-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/04/programming.webp 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>ChatGPTは、プログラマーの方にとっても非常に強力なツールとなり得ます。プログラミングの学習者から経験豊富なエンジニアまで、幅広い層にとって役立つ機能が備わっています。</p>



<p>例えば、<strong><span class="marker-under">特定のプログラミング言語でのコードの書き方について質問したり、エラーが出たコードの原因を尋ねたりすることができます</span>。</strong>ChatGPTは、学習した豊富なコードの知識に基づいて、的確なアドバイスや解決策を提示してくれるでしょう。</p>



<p>また、ChatGPTは簡単なコードの生成も可能です。<strong><span class="marker-under">「〇〇をするPythonのコードを書いてください」</span></strong>といった具体的な指示を与えることで、基本的なコードの断片を生成してくれます。これにより、プログラミングの効率が大幅に向上する可能性があります。</p>



<p>さらに、既存のコードの解説を求めることもできます。複雑なコードの動作原理や、特定の行の意味について質問することで、理解を深める手助けをしてくれます。これは、新しい技術を学ぶ際や、他者の書いたコードを理解する上で非常に役立ちます。</p>



<p class="is-style-alert-box has-box-style">ChatGPTが生成するコードは、そのまま本番環境で使用する前に、必ず人間による確認とテストが必要です。セキュリティ上のリスクや、意図しない動作を引き起こす可能性も考慮する必要があります。</p>



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



<h3 class="wp-block-heading" id="kuro5"><span id="toc12">5、質問応答・情報収集</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://furugrand.online/wp-content/uploads/2025/04/QA2-1024x576.webp" alt="" class="wp-image-3384" srcset="https://furugrand.online/wp-content/uploads/2025/04/QA2-1024x576.webp 1024w, https://furugrand.online/wp-content/uploads/2025/04/QA2-300x169.webp 300w, https://furugrand.online/wp-content/uploads/2025/04/QA2-768x432.webp 768w, https://furugrand.online/wp-content/uploads/2025/04/QA2-1536x864.webp 1536w, https://furugrand.online/wp-content/uploads/2025/04/QA2-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/04/QA2-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/04/QA2-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/04/QA2.webp 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>ChatGPTの最も基本的な機能の一つが、質問応答です。知りたいことや疑問に思ったことをChatGPTに尋ねるだけで、まるで知識豊富な人に質問しているかのように、様々な情報を提供してくれます。</p>



<p>例えば、「<strong><span class="marker-under">〇〇という歴史上の出来事について教えてください</span></strong>」と質問すれば、関連する情報や背景知識を分かりやすく解説してくれます。最新のニュースやトレンドに関する質問にも、ある程度の情報に基づいて答えてくれるため、手軽に情報収集を行うことができます。</p>



<p>また、複雑な質問や、複数の要素を含む質問にも対応できます。「<strong><span class="marker-under">〇〇という製品のメリットとデメリットを比較して、おすすめの選び方を教えてください</span></strong>」といった具体的な質問をすることで、よりパーソナライズされた情報を得ることが可能です。</p>



<p class="is-style-alert-box has-box-style">ただし、ChatGPTの情報は学習データに基づいていて、必ずしも最新の情報や完全に正確な情報であるとは限りません。</p>



<p>重要な情報については、他の信頼できる情報源と照らし合わせることをお勧めします。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc13">【結論】ChatGPTとはあなたの強力なAIアシスタント！</span></h2>



<p>ChatGPTは単なるAIツールではなく、あなたの日常や仕事を強力にサポートしてくれる、頼れるAIアシスタントと言えます。</p>



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



<h3 class="wp-block-heading"><span id="toc14">日常生活や仕事の効率化に役立つ</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://furugrand.online/wp-content/uploads/2025/04/daily-life-1024x576.jpg" alt="" class="wp-image-3452" srcset="https://furugrand.online/wp-content/uploads/2025/04/daily-life-1024x576.jpg 1024w, https://furugrand.online/wp-content/uploads/2025/04/daily-life-300x169.jpg 300w, https://furugrand.online/wp-content/uploads/2025/04/daily-life-768x432.jpg 768w, https://furugrand.online/wp-content/uploads/2025/04/daily-life-1536x864.jpg 1536w, https://furugrand.online/wp-content/uploads/2025/04/daily-life-120x68.jpg 120w, https://furugrand.online/wp-content/uploads/2025/04/daily-life-160x90.jpg 160w, https://furugrand.online/wp-content/uploads/2025/04/daily-life-320x180.jpg 320w, https://furugrand.online/wp-content/uploads/2025/04/daily-life.jpg 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>ここまで、ChatGPTとは何か、その仕組み、そして様々な活用事例について解説してきました。最後に改めて強調したいのは、ChatGPTが私たちの日常生活や仕事の効率を大きく向上させる強力なAIアシスタントであるということです。</p>



<figure class="wp-block-table table2" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><table class="has-border-color has-dark-grey-border-color" style="border-width:1px"><tbody><tr><td class="has-text-align-center" data-align="center">日常生活</td><td><strong><span class="marker-under">献立のアイデアを尋ねたり</span></strong>、<strong><span class="marker-under">旅行の計画を立てる手助けをしてもらったり</span></strong>、ちょっとした疑問をすぐに解消したりするのに役立ちます。まるで、知識豊富なコンシェルジュが常にそばにいてくれるような感覚で、日々の様々なタスクをサポートしてくれるでしょう。</td></tr><tr><td class="has-text-align-center" data-align="center">仕事</td><td><strong><span class="marker-under">文章作成の時間を大幅に短縮</span></strong>したり、<strong><span class="marker-under">企画のアイデア出し</span></strong>を効率的に行ったり、<strong><span class="marker-under">翻訳業務</span></strong>をスムーズに進めたりすることができます。また、プログラミングの補助やデータ分析のヒントを得るなど、専門的な分野でもその能力を発揮します。</td></tr></tbody></table></figure>



<p>ChatGPTを活用することで、これまで多くの時間を費やしていた作業を効率化し、より創造的な業務や、人間にしかできない重要なタスクに集中できるようになります。</p>



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



<h3 class="wp-block-heading"><span id="toc15">新しい知識やアイデアの発見をサポート</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="576" src="https://furugrand.online/wp-content/uploads/2025/04/knowledge-1024x576.jpg" alt="" class="wp-image-3464" srcset="https://furugrand.online/wp-content/uploads/2025/04/knowledge-1024x576.jpg 1024w, https://furugrand.online/wp-content/uploads/2025/04/knowledge-300x169.jpg 300w, https://furugrand.online/wp-content/uploads/2025/04/knowledge-768x432.jpg 768w, https://furugrand.online/wp-content/uploads/2025/04/knowledge-1536x864.jpg 1536w, https://furugrand.online/wp-content/uploads/2025/04/knowledge-120x68.jpg 120w, https://furugrand.online/wp-content/uploads/2025/04/knowledge-160x90.jpg 160w, https://furugrand.online/wp-content/uploads/2025/04/knowledge-320x180.jpg 320w, https://furugrand.online/wp-content/uploads/2025/04/knowledge.jpg 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>ChatGPTは、単に既存の情報を効率的に処理するだけでなく、私たちがまだ知らない新しい知識や、思いもよらない斬新なアイデアを発見する手助けもしてくれます。</p>



<figure class="wp-block-table table3" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><table class="has-border-color has-dark-grey-border-color" style="border-width:1px"><tbody><tr><td class="has-text-align-center" data-align="center">興味のある分野について質問を投げかけるとき</td><td>関連する様々な情報を提供してくれます。これまで知らなかった専門用語や概念、歴史的な背景などを学ぶきっかけになるでしょう。まるで、博識な先生にいつでも質問できるような環境が手に入ります。</td></tr><tr><td class="has-text-align-center" data-align="center">課題を解決するためのアイデアを探しているとき</td><td>既存の知識を組み合わせたり、異なる分野の情報を結びつけたりすることで、人間には思いつかないようなユニークな発想を提示してくれることがあります。</td></tr></tbody></table></figure>



<p>ChatGPTとの対話を通して、私たちは自分の知識の範囲を広げ、思考の幅を広げることができます。</p>



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



<h3 class="wp-block-heading"><span id="toc16">これからの可能性に期待</span></h3>



<p class="has-ex-d-background-color has-background is-style-border-radius-s-solid has-border">ChatGPTは、現時点でも既に私たちの日常生活や仕事に大きな変革をもたらしていますが、その進化はまだ始まったばかりです。</p>



<p>今後、さらに高度な自然言語処理能力や、より多様なタスクに対応できる能力を獲得していくことが期待されています。</p>



<p>ChatGPTの進化は、私たちの働き方や学び方、コミュニケーションのあり方など、社会の様々な側面に大きな影響を与えるでしょう。AI技術の進歩とともに、ChatGPTが私たちの生活をどのように豊かにしてくれるのか、その可能性に期待が高まります。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>グーグルマップの挿入方法・中央寄せの方法も【WordPress】</title>
		<link>https://furugrand.online/googlemap/</link>
		
		<dc:creator><![CDATA[ヨイカゲの主]]></dc:creator>
		<pubDate>Sat, 08 Mar 2025 10:10:56 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://furugrand.online/?p=2908</guid>

					<description><![CDATA[WordPressサイトに店舗の場所やイベント会場へのアクセスを示すGoogleマップを載せたいけれど、「グーグルマップの挿入方法が分からない…」 「埋め込んだ地図が左に寄ってしまって見栄えが悪い… 中央寄せの方法も知り [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>WordPressサイトに店舗の場所やイベント会場へのアクセスを示すGoogleマップを載せたいけれど、「<strong>グーグルマップの挿入方法</strong>が分からない…」</p>



<p>「埋め込んだ地図が左に寄ってしまって見栄えが悪い… <strong>中央寄せの方法</strong>も知りたい！」、そんなお悩みはありませんか？</p>



<p>地図情報はユーザーにとって非常に重要ですが、いざ設置しようとすると意外と手間取ってしまうことも。</p>



<p class="is-style-blank-box-pink has-border">特に、埋め込んだマップをサイトのデザインに合わせて中央に配置するのは、初心者の方には少し難しく感じるかもしれません。</p>



<p>この記事では、WordPressサイトにGoogleマップを埋め込む基本的な手順から、多くの人がつまずきやすい「<strong>中央寄せ</strong>」表示を実現する具体的な方法まで、画像を交えながら分かりやすく解説します。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc1">「グーグルマップ」とは</span></h2>



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



<ul style="border-width:20px" class="wp-block-list bold has-cocoon-black-color has-light-grey-background-color has-text-color has-background has-link-color has-medium-font-size is-style-icon-list-check has-list-style is-style-bottom-margin-2em has-bottom-margin wp-elements-6928bad74f3048bc9555f056867614a9">
<li>Googleが提供する無料の地図サービス</li>



<li>「ナビゲーション」機能で目的地まで誘導</li>



<li>徒歩・電車などの様々な交通手段での経路を表示</li>



<li>ガソリンスタンドなどの周辺情報を表示</li>



<li>自宅・職場などをお気に入り登録可能</li>
</ul>



<p><strong><span class="marker-under">Googleが提供する地図サービス</span></strong>で、会社の地図などを自分のサイトに簡単に掲載することができます。</p>



<p>目的地までの経路を誘導し、リアルタイムでの交通状況を確認できる「ナビゲーション」機能も利用可能。</p>



<p>世界中の地図の情報、最新の情報が<strong><span class="marker-under">無料で使用できる</span></strong>ので多くの人に利用されているのが理解できますね。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc2">「グーグルマップ」の使い方</span></h2>



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



<center><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.8317691474426!2d139.76448647634302!3d35.68114412997785!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1741347683581!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></center>



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



<p>ここでは、「東京駅」をブログに掲載してみます。</p>



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



<h3 class="wp-block-heading"><span id="toc3">グーグルマップにアクセス</span></h3>



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



<p><strong><span class="marker-under">グーグルマップにアクセス</span></strong>します。</p>



<p>グーグルマップ　→　<a rel="noopener" target="_blank" href="https://www.google.co.jp/maps/@37.4196813,140.3387904,14z?entry=ttu&amp;g_ep=EgoyMDI1MDMwMy4wIKXMDSoASAFQAw%3D%3D">https://www.google.co.jp</a></p>



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



<h3 class="wp-block-heading"><span id="toc4">東京駅を検索</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="396" height="281" src="https://furugrand.online/wp-content/uploads/2025/03/map1.webp" alt="" class="wp-image-3096" srcset="https://furugrand.online/wp-content/uploads/2025/03/map1.webp 396w, https://furugrand.online/wp-content/uploads/2025/03/map1-300x213.webp 300w" sizes="(max-width: 396px) 100vw, 396px" /></figure>
</div>
</div>



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



<p>グーグルマップの「左上」の画面の「検索窓」に「東京駅」と入力します。</p>



<p>※「住所」を入力してもOKです。</p>



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



<h3 class="wp-block-heading"><span id="toc5">共有をクリック</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="404" height="401" src="https://furugrand.online/wp-content/uploads/2025/03/map2.webp" alt="" class="wp-image-3099" srcset="https://furugrand.online/wp-content/uploads/2025/03/map2.webp 404w, https://furugrand.online/wp-content/uploads/2025/03/map2-300x298.webp 300w, https://furugrand.online/wp-content/uploads/2025/03/map2-150x150.webp 150w" sizes="(max-width: 404px) 100vw, 404px" /></figure>
</div>
</div>



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



<p>検索した後に出てきた、「東京駅」をクリックすると情報が出てきます。</p>



<p>その中で、<strong><span class="marker-under">「共有」をクリックします</span></strong>。</p>



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



<h3 class="wp-block-heading"><span id="toc6">「HTMLコード」をコピー</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="631" height="605" src="https://furugrand.online/wp-content/uploads/2025/03/map3.webp" alt="" class="wp-image-3106" srcset="https://furugrand.online/wp-content/uploads/2025/03/map3.webp 631w, https://furugrand.online/wp-content/uploads/2025/03/map3-300x288.webp 300w" sizes="(max-width: 631px) 100vw, 631px" /></figure>
</div>
</div>



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



<p>「共有の画面」が現れますので、①<strong><span class="marker-under">「地図を埋め込む」</span></strong>をクリックします。</p>



<p>次に、②<strong><span class="marker-under">「地図の大きさ」</span></strong>を選択します。ここでは「中」にしておきます。</p>



<p>最後に、③<strong><span class="marker-under">「HTMLをコピー」</span></strong>をクリックです。</p>



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



<p class="has-text-align-center width80 is-style-stitch-box has-box-style">これで、東京駅の「HTMLコード」がコピーされました。</p>



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



<h3 class="wp-block-heading"><span id="toc7">カスタムHTML</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="370" height="281" src="https://furugrand.online/wp-content/uploads/2025/03/map4.webp" alt="" class="wp-image-3113" srcset="https://furugrand.online/wp-content/uploads/2025/03/map4.webp 370w, https://furugrand.online/wp-content/uploads/2025/03/map4-300x228.webp 300w" sizes="(max-width: 370px) 100vw, 370px" /></figure>
</div>
</div>



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



<p class="has-text-align-center width60 is-style-alert-box has-box-style">「Wordpress」での作業に戻ります。</p>



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



<p>WordPressでプラスマークをクリックして、<strong>「カスタム」と検索</strong>します。</p>



<p>※プラスマークは投稿ページ内をクリックすると出現します。</p>



<p>カスタムHTMLをクリックします。</p>



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



<h3 class="wp-block-heading"><span id="toc8">コピペ</span></h3>



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



<p>グーグルマップで「コピーしたHTML」を、貼り付けます。</p>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="482" height="281" src="https://furugrand.online/wp-content/uploads/2025/03/map5.webp" alt="" class="wp-image-3120" srcset="https://furugrand.online/wp-content/uploads/2025/03/map5.webp 482w, https://furugrand.online/wp-content/uploads/2025/03/map5-300x175.webp 300w" sizes="(max-width: 482px) 100vw, 482px" /></figure>
</div>
</div>



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



<p>「プレビュー」をクリックすると、地図が見えるようになります。</p>



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



<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.8317691474426!2d139.76448647634302!3d35.68114412997785!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1741348087924!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>



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



<p class="has-text-align-center width80 is-style-stitch-box has-box-style">東京駅のグーグルマップが、Wordpressに張り付けられました。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc9">中央寄せの仕方</span></h2>



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



<p>グーグルマップのHTMLをそのまま「コピー＆ペースト」すると、「左寄せ」になって表示されます。</p>



<p>ここからは、<strong><span class="marker-under">地図を中央寄せする仕方</span></strong>をご紹介します。</p>



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



<h3 class="wp-block-heading"><span id="toc10">HTMLに&lt;center&gt;を追記</span></h3>



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



<p class="has-text-align-center width80 has-watery-red-background-color has-background is-style-blank-box-pink has-border"><strong>&lt;center&gt;（コピペしたHTML）&lt;/center&gt;</strong></p>



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



<p>地図を中央寄せするには、コピペしたHTMLを、<strong>&lt;center&gt;</strong>と<strong>&lt;/center&gt;</strong>で挟みます。</p>



<p>これで、地図が中央寄せになります。</p>



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



<center><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.8317691474426!2d139.76448647634302!3d35.68114412997785!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1741347683581!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></center>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc11">まとめ</span></h2>



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



<p>今回は、WordPressのサイトにおける「<strong>グーグルマップの挿入方法</strong>」と、デザイン性を高める「<strong>中央寄せの方法</strong>」について、具体的な手順をステップ・バイ・ステップで解説しました。</p>



<p>グーグルマップをサイトに埋め込むと、訪問者が会社の場所を簡単に確認できるようになります。</p>



<p>テキスト情報だけでなく、地図という視覚的な情報でイメージを伝えやすくなりますね。</p>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>テーブルの使い方とCSSカスタマイズ【cocoon】</title>
		<link>https://furugrand.online/table/</link>
		
		<dc:creator><![CDATA[ヨイカゲの主]]></dc:creator>
		<pubDate>Fri, 07 Mar 2025 07:49:56 +0000</pubDate>
				<category><![CDATA[cocoon]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://furugrand.online/?p=2916</guid>

					<description><![CDATA[「WordPressで記事を書いているんだけど、データを表形式で分かりやすく表示させたい。でも、どうやって作ればいいんだろう？デザインももう少しこだわりたいな…」と思っていませんか？ この記事では、WordPressでテ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<p>「WordPressで記事を書いているんだけど、データを表形式で分かりやすく表示させたい。でも、どうやって作ればいいんだろう？デザインももう少しこだわりたいな…」と思っていませんか？</p>



<p>この記事では、WordPressでテーブルを初めて使う方でも安心の基本的な作成方法から、Cocoonテーマのデザインをさらに引き立てるCSSカスタマイズのテクニックまでを詳しく解説します。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc1">「テーブル」とは？</span></h2>



<p>ブログやウェブサイトで情報を効果的に伝えるために、テーブル（表）は非常に役立つツールです。</p>



<p>特に、データの比較や整理、価格表の表示など、多くの場面で活用できます。</p>



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



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%">
<figure class="wp-block-table is-style-regular table3"><table class="has-cocoon-white-background-color has-background has-fixed-layout"><thead><tr><th></th><th class="has-text-align-center" data-align="center"><strong>ふわふわ</strong></th><th class="has-text-align-center" data-align="center"><strong>ピンク色</strong></th></tr></thead><tbody><tr><td>いちご</td><td class="has-text-align-center" data-align="center">×</td><td class="has-text-align-center" data-align="center">×</td></tr><tr><td>綿あめ</td><td class="has-text-align-center" data-align="center">〇</td><td class="has-text-align-center" data-align="center">△（ピンク色もある）</td></tr><tr><td>フラミンゴ</td><td class="has-text-align-center" data-align="center">△</td><td class="has-text-align-center" data-align="center">〇</td></tr></tbody></table></figure>
</div>
</div>



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



<p>HTMLにおいて「テーブル」とは、「表」の意味です。</p>



<p>縦方向が「行」と呼ばれていて、横方向は「列」になります。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc2">テーブルを作成</span></h2>



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



<figure class="wp-block-table is-style-regular"><table class="has-fixed-layout" style="border-style:none;border-width:0px"><thead><tr><th></th><th class="has-text-align-center" data-align="center"><strong>ふわふわ</strong></th><th class="has-text-align-center" data-align="center"><strong>ピンク色</strong></th></tr></thead><tbody><tr><td>いちご</td><td class="has-text-align-center" data-align="center">×</td><td class="has-text-align-center" data-align="center">×</td></tr><tr><td>綿あめ</td><td class="has-text-align-center" data-align="center">〇</td><td class="has-text-align-center" data-align="center">△（ピンク色もある）</td></tr><tr><td>フラミンゴ</td><td class="has-text-align-center" data-align="center">△</td><td class="has-text-align-center" data-align="center">〇</td></tr></tbody></table></figure>



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



<p>cocoonテーマで<strong><span class="marker-under">デフォルトで作成できる「テーブル」</span></strong>を作っていきます。</p>



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



<h3 class="wp-block-heading table1"><span id="toc3">「テーブル」と検索する</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="329" height="254" src="https://furugrand.online/wp-content/uploads/2025/03/table1.webp" alt="" class="wp-image-2956" srcset="https://furugrand.online/wp-content/uploads/2025/03/table1.webp 329w, https://furugrand.online/wp-content/uploads/2025/03/table1-300x232.webp 300w" sizes="(max-width: 329px) 100vw, 329px" /></figure>
</div>
</div>



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



<p>プラスマークをクリックして、<strong><span class="marker-under">「テーブル」と検索</span></strong>します。</p>



<p>※プラスマークは投稿ページ内をクリックすると出現します。</p>



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



<h3 class="wp-block-heading table1"><span id="toc4">「カラム数」「行数」を設定</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="771" height="180" src="https://furugrand.online/wp-content/uploads/2025/03/table2.webp" alt="" class="wp-image-2962" srcset="https://furugrand.online/wp-content/uploads/2025/03/table2.webp 771w, https://furugrand.online/wp-content/uploads/2025/03/table2-300x70.webp 300w, https://furugrand.online/wp-content/uploads/2025/03/table2-768x179.webp 768w" sizes="(max-width: 771px) 100vw, 771px" /></figure>
</div>
</div>



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



<p>「カラム数」と「行数」を設定する画面が現れます。</p>



<p>ここでは、どちらも「3」にして<strong><span class="marker-under">「表を作成」をクリック</span></strong>します。</p>



<p>※「カラム」→横の数、「行数」→縦の数です。</p>



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



<h3 class="wp-block-heading table1"><span id="toc5">ヘッダーセクションON</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="283" height="337" src="https://furugrand.online/wp-content/uploads/2025/03/table3.webp" alt="" class="wp-image-2976" srcset="https://furugrand.online/wp-content/uploads/2025/03/table3.webp 283w, https://furugrand.online/wp-content/uploads/2025/03/table3-252x300.webp 252w" sizes="(max-width: 283px) 100vw, 283px" /></figure>
</div>
</div>



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



<p>ここでは、アレンジしやすいように<strong><span class="marker-under">「ヘッダーセクション」をON</span></strong>にします。</p>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-table"><table class="has-cocoon-white-background-color has-background has-fixed-layout"><thead><tr><th>ヘッダーラベル</th><th>ヘッダーラベル</th><th>ヘッダーラベル</th></tr></thead><tbody><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody></table></figure>
</div>
</div>



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



<p>すると、テーブルに<strong><span class="marker-under">「ヘッダーラベル」が出現</span></strong>します。</p>



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



<h3 class="wp-block-heading table1"><span id="toc6">文字を入力して完了</span></h3>



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



<figure class="wp-block-table is-style-regular"><table class="has-cocoon-white-background-color has-background has-fixed-layout"><thead><tr><th></th><th class="has-text-align-center" data-align="center"><strong>ふわふわ</strong></th><th class="has-text-align-center" data-align="center"><strong>ピンク色</strong></th></tr></thead><tbody><tr><td>いちご</td><td class="has-text-align-center" data-align="center">×</td><td class="has-text-align-center" data-align="center">×</td></tr><tr><td>綿あめ</td><td class="has-text-align-center" data-align="center">〇</td><td class="has-text-align-center" data-align="center">△（ピンク色もある）</td></tr><tr><td>フラミンゴ</td><td class="has-text-align-center" data-align="center">△</td><td class="has-text-align-center" data-align="center">〇</td></tr></tbody></table></figure>



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



<p>テーブルに入れたい文字を入力し、表が完成しました。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc7">CSSを使わないアレンジ</span></h2>



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



<p>CSSを使用しないでできるアレンジをご紹介します。</p>



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



<h3 class="wp-block-heading table1"><span id="toc8">ストライプに変更</span></h3>



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



<figure class="wp-block-table is-style-stripes"><table class="has-cocoon-white-background-color has-background has-fixed-layout"><thead><tr><th></th><th class="has-text-align-center" data-align="center"><strong>ふわふわ</strong></th><th class="has-text-align-center" data-align="center"><strong>ピンク色</strong></th></tr></thead><tbody><tr><td>いちご</td><td class="has-text-align-center" data-align="center">×</td><td class="has-text-align-center" data-align="center">×</td></tr><tr><td>綿あめ</td><td class="has-text-align-center" data-align="center">〇</td><td class="has-text-align-center" data-align="center">△（ピンク色もある）</td></tr><tr><td>フラミンゴ</td><td class="has-text-align-center" data-align="center">△</td><td class="has-text-align-center" data-align="center">〇</td></tr></tbody></table></figure>



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



<p><strong><span class="marker-under">「右側のブロックバー」　→　「スタイル」　→　「ストライプ」を選択</span></strong>すると、デフォルトとは変わった印象になります。</p>



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



<h3 class="wp-block-heading table1"><span id="toc9">背景色・文字色・枠の変更</span></h3>



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



<figure class="wp-block-table is-style-stripes"><table class="has-cocoon-black-color has-light-grey-background-color has-text-color has-background has-link-color has-fixed-layout" style="border-width:10px"><thead><tr><th></th><th class="has-text-align-center" data-align="center"><strong>ふわふわ</strong></th><th class="has-text-align-center" data-align="center"><strong>ピンク色</strong></th></tr></thead><tbody><tr><td>いちご</td><td class="has-text-align-center" data-align="center">×</td><td class="has-text-align-center" data-align="center">×</td></tr><tr><td>綿あめ</td><td class="has-text-align-center" data-align="center">〇</td><td class="has-text-align-center" data-align="center">△（ピンク色もある）</td></tr><tr><td>フラミンゴ</td><td class="has-text-align-center" data-align="center">△</td><td class="has-text-align-center" data-align="center">〇</td></tr></tbody></table></figure>



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



<p>「背景色」「文字色」「枠の色と太さ」を変更できます。</p>



<p>※背景色は全体には適用されません。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc10">CSSを使用したアレンジ</span></h2>



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



<p>ここからは、CSSを使用したアレンジをご紹介します。私は「追加CSS」に記入します。</p>



<p>※CSSを入力するときは、必ずバックアップをとってください。</p>



<p>おすすめのバックアップ用プラグインの記事はこちらです。</p>



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



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

<a target="_self" href="https://furugrand.online/backup/" title="バックアップのプラグイン「All-in-One WP Migration and Backup」がおすすめ【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 loading="lazy" decoding="async" width="160" height="90" src="https://furugrand.online/wp-content/uploads/2025/03/backup-160x90.webp" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://furugrand.online/wp-content/uploads/2025/03/backup-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/03/backup-300x169.webp 300w, https://furugrand.online/wp-content/uploads/2025/03/backup-1024x576.webp 1024w, https://furugrand.online/wp-content/uploads/2025/03/backup-768x432.webp 768w, https://furugrand.online/wp-content/uploads/2025/03/backup-1536x864.webp 1536w, https://furugrand.online/wp-content/uploads/2025/03/backup-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/03/backup-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/03/backup.webp 1920w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">バックアップのプラグイン「All-in-One WP Migration and Backup」がおすすめ【cocoon】</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 loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://furugrand.online" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">furugrand.online</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2025.03.05</div></div></div></div></a>
</div>



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



<p></p>



<h3 class="wp-block-heading table1"><span id="toc11">完成図</span></h3>



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



<figure class="wp-block-table is-style-regular table2"><table class="has-cocoon-white-background-color has-background has-fixed-layout"><thead><tr><th></th><th class="has-text-align-center" data-align="center"><strong>ふわふわ</strong></th><th class="has-text-align-center" data-align="center"><strong>ピンク色</strong></th></tr></thead><tbody><tr><td>いちご</td><td class="has-text-align-center" data-align="center">×</td><td class="has-text-align-center" data-align="center">×</td></tr><tr><td>綿あめ</td><td class="has-text-align-center" data-align="center">〇</td><td class="has-text-align-center" data-align="center">△（ピンク色もある）</td></tr><tr><td>フラミンゴ</td><td class="has-text-align-center" data-align="center">△</td><td class="has-text-align-center" data-align="center">〇</td></tr></tbody></table></figure>



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



<p><strong><span class="marker-under">ヘッダーと、左の項目に背景色が付くテーブル</span></strong>を作成していきます。</p>



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



<h3 class="wp-block-heading table1"><span id="toc12">全体に適用</span></h3>



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



<pre class="wp-block-code"><code>.entry-content thead {
    border-bottom: none;　　/* ヘッダーラベルの下線を消す */
}

.entry-content th {
    padding: 10px 15px; /* 余白 */
    background-color: #f896bd; /* 背景色 */
    color: #fff; /* 文字色 */
    letter-spacing: 0.1em; /* 文字と文字の間隔 */
    text-align: center; /* 中央揃え */
}

.entry-content tr td:first-child{
	background-color: #f896bd;　/* 背景色 */
	color:#fff;　/* 文字色 */
	font-weight:bold; /* 文字を太く */
}</code></pre>



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



<p>サイト全体に適用するコードです。</p>



<p>「背景色」「文字色」など好きなコードに変更してください。</p>



<p>カラーコードはどれが良いかな？と迷う方はこちらの記事をどうぞ</p>



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

<a target="_self" href="https://furugrand.online/color-palette/" title="Wordpressのサイトカラーが決まる！「カラーパレットジェネレーター」ColorMagic" 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 loading="lazy" decoding="async" width="160" height="90" src="https://furugrand.online/wp-content/uploads/2025/02/color-palette-160x90.webp" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://furugrand.online/wp-content/uploads/2025/02/color-palette-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/02/color-palette-300x169.webp 300w, https://furugrand.online/wp-content/uploads/2025/02/color-palette-1024x576.webp 1024w, https://furugrand.online/wp-content/uploads/2025/02/color-palette-768x432.webp 768w, https://furugrand.online/wp-content/uploads/2025/02/color-palette-1536x864.webp 1536w, https://furugrand.online/wp-content/uploads/2025/02/color-palette-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/02/color-palette-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/02/color-palette.webp 1920w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">Wordpressのサイトカラーが決まる！「カラーパレットジェネレーター」ColorMagic</div><div class="blogcard-snippet internal-blogcard-snippet">サイトのカラーは、訪問者に与える印象を大きく左右する、非常に重要な要素です。洗練されたカラーパレットは、サイト全体の雰囲気を格上げし、ブランドイメージを効果的に伝える力を持っています。しかし、色の組み合わせは奥深く、センスに自信がないと悩ん...</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 loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://furugrand.online" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">furugrand.online</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2025.02.23</div></div></div></div></a>
</div>



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



<p></p>



<h3 class="wp-block-heading table1"><span id="toc13">個別に適用（追加CSSクラス）</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="267" height="316" src="https://furugrand.online/wp-content/uploads/2025/03/table4.webp" alt="" class="wp-image-3072" srcset="https://furugrand.online/wp-content/uploads/2025/03/table4.webp 267w, https://furugrand.online/wp-content/uploads/2025/03/table4-253x300.webp 253w" sizes="(max-width: 267px) 100vw, 267px" /></figure>
</div>
</div>



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



<p>この「テーブル」のみの設定にしたい！という場合は、右側の「ブロックバー」の「高度な設定」から<strong><span class="marker-under">「追加CSSクラス」に名前を付けます。</span></strong></p>



<p>ここでは、「<strong>table1</strong>」にします。</p>



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



<pre class="wp-block-code"><code>.entry-content .table1 thead {
    border-bottom: none;　　/* ヘッダーラベルの下線を消す */
}

.entry-content .table1 th {
    padding: 10px 15px; /* 余白 */
    background-color: #f896bd; /* 背景色 */
    color: #fff; /* 文字色 */
    letter-spacing: 0.1em; /* 文字と文字の間隔 */
    text-align: center; /* 中央揃え */
}

.entry-content .table1 tr td:first-child{
	background-color: #f896bd;　/* 背景色 */
	color:#fff;　/* 文字色 */
	font-weight:bold; /* 文字を太く */
}</code></pre>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc14">まとめ</span></h2>



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



<p>この記事では、WordPressでテーブルを作成する基本的な方法から、Cocoonテーマのデザインに合わせたCSSカスタマイズのテクニックまでを解説してきました。</p>



<p>テーブルを使用すると、文章だけでは伝わりにくい情報も一目で伝えることができます。</p>



<p>データを整理して、視覚的に分かりやすく表示するのに効果的ですね。</p>



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



<p></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>バックアップのプラグイン「All-in-One WP Migration and Backup」がおすすめ【cocoon】</title>
		<link>https://furugrand.online/backup/</link>
		
		<dc:creator><![CDATA[ヨイカゲの主]]></dc:creator>
		<pubDate>Wed, 05 Mar 2025 13:11:06 +0000</pubDate>
				<category><![CDATA[cocoon]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://furugrand.online/?p=2828</guid>

					<description><![CDATA[「WordPressでブログやサイトを運営しているけど、もしデータが消えてしまったらどうしよう…」 そんな不安を感じているなら、バックアッププラグインの導入は喫緊の課題です。せっかく作り上げた大切なコンテンツや設定は、何 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<p>「WordPressでブログやサイトを運営しているけど、もしデータが消えてしまったらどうしよう…」</p>



<p>そんな不安を感じているなら、<strong>バックアッププラグインの導入は喫緊の課題</strong>です。せっかく作り上げた大切なコンテンツや設定は、何があっても守り抜きたいもの。</p>



<p>そこで今回は、数あるバックアッププラグインの中でも、おすすめしたい「<strong>All-in-One WP Migration &amp; Backup</strong>」をご紹介します。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc1">なぜWordPressにバックアップが必須？</span></h2>



<p>このセクションでは、なぜWordPressにバックアップが不可欠なのか、具体的なデータ消失のリスクとともに、その対策がいかに重要であるかを解説していきます。</p>



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



<h3 class="wp-block-heading"><span id="toc2">なぜデータは消える？具体的なリスク事例</span></h3>



<figure class="wp-block-image aligncenter size-large is-resized"><img loading="lazy" decoding="async" width="1024" height="1024" src="https://furugrand.online/wp-content/uploads/2025/03/question-1024x1024.webp" alt="" class="wp-image-3815" style="width:569px;height:auto" srcset="https://furugrand.online/wp-content/uploads/2025/03/question-1024x1024.webp 1024w, https://furugrand.online/wp-content/uploads/2025/03/question-300x300.webp 300w, https://furugrand.online/wp-content/uploads/2025/03/question-150x150.webp 150w, https://furugrand.online/wp-content/uploads/2025/03/question-768x768.webp 768w, https://furugrand.online/wp-content/uploads/2025/03/question-1536x1536.webp 1536w, https://furugrand.online/wp-content/uploads/2025/03/question.webp 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>WordPressのデータは、様々な予期せぬ事態によって失われる可能性があります。</p>



<p>例えば、<strong>WordPress</strong>のアップデート時に不具合が発生し、サイトが正常に表示されなくなることがあります。また、利用しているプラグイン同士が干渉し合い、エラーを引き起こすことも少なくありません。</p>



<p>さらに、<strong>バックアップ</strong>を怠っていると、悪意のある第三者からの不正アクセスや、サーバー側のトラブルによって、大切なデータが突然消えてしまう危険性もあります。</p>



<p class="is-style-alert-box has-box-style">これらのリスクに備えるためには、定期的な<strong>WordPress</strong>の<strong>バックアップ</strong>が非常に重要になります。</p>



<p>万が一の事態が発生しても、<strong>バックアップ</strong>があれば迅速に元の状態に戻せるため、被害を最小限に抑えることができるのです。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc3">「All-in-One WP Migration and Backup」とは</span></h2>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full is-resized"><img loading="lazy" decoding="async" width="557" height="268" src="https://furugrand.online/wp-content/uploads/2025/03/backup1.webp" alt="" class="wp-image-2841" style="width:632px;height:auto" srcset="https://furugrand.online/wp-content/uploads/2025/03/backup1.webp 557w, https://furugrand.online/wp-content/uploads/2025/03/backup1-300x144.webp 300w" sizes="(max-width: 557px) 100vw, 557px" /></figure>
</div>
</div>



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



<p>「All-in-One WP Migration and Backup」ダウンロード→<a rel="noopener" target="_blank" href="https://ja.wordpress.org/plugins/all-in-one-wp-migration/">https://ja.wordpress.org/plugins/all-in-one-wp-migration/</a></p>



<p>「All-in-One WP Migration &amp; Backup」は、WordPressサイトの<strong>バックアップ</strong>と復元を簡単に行える、非常に人気の高いプラグインです。</p>



<p>特にWordPress初心者の方でも扱いやすいシンプルな操作性が、多くのユーザーに支持されています。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc4">インストールの仕方</span></h2>



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



<h3 class="wp-block-heading"><span id="toc5">新規プラグインを追加</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full is-resized"><img loading="lazy" decoding="async" width="207" height="205" src="https://furugrand.online/wp-content/uploads/2025/03/backup2.webp" alt="" class="wp-image-2849" style="width:368px;height:auto" srcset="https://furugrand.online/wp-content/uploads/2025/03/backup2.webp 207w, https://furugrand.online/wp-content/uploads/2025/03/backup2-150x150.webp 150w" sizes="(max-width: 207px) 100vw, 207px" /></figure>
</div>
</div>



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



<p>WordPressの「ダッシュボード」から、「プラグイン」→<strong><span class="marker-under">「新規プラグインを追加」をクリック</span></strong>します。</p>



<p class="is-style-stitch-box has-box-style">「<strong>ダッシュボード</strong>」→「<strong>プラグイン</strong>」→「<strong>新規プラグインを追加</strong>」</p>



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



<h3 class="wp-block-heading"><span id="toc6">「All-in-One WP Migration」と検索</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full is-resized"><img loading="lazy" decoding="async" width="471" height="49" src="https://furugrand.online/wp-content/uploads/2025/03/backup5.webp" alt="" class="wp-image-2855" style="width:632px" srcset="https://furugrand.online/wp-content/uploads/2025/03/backup5.webp 471w, https://furugrand.online/wp-content/uploads/2025/03/backup5-300x31.webp 300w" sizes="(max-width: 471px) 100vw, 471px" /></figure>
</div>
</div>



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



<p>右上に「プラグインの検索窓」が表示されるので、そこに<strong><span class="marker-under">「All-in-One WP Migration」と入力して検索</span></strong>します。</p>



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



<h3 class="wp-block-heading"><span id="toc7">インストール</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full is-resized"><img loading="lazy" decoding="async" width="576" height="305" src="https://furugrand.online/wp-content/uploads/2025/03/backup3.webp" alt="" class="wp-image-2854" style="width:632px" srcset="https://furugrand.online/wp-content/uploads/2025/03/backup3.webp 576w, https://furugrand.online/wp-content/uploads/2025/03/backup3-300x159.webp 300w" sizes="(max-width: 576px) 100vw, 576px" /></figure>
</div>
</div>



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



<p>「All-in-One WP Migration and Backup」を見つけて、右上の<strong><span class="marker-under">「今すぐインストール」を押下</span></strong>します。</p>



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



<h3 class="wp-block-heading"><span id="toc8">有効化</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full is-resized"><img loading="lazy" decoding="async" width="570" height="305" src="https://furugrand.online/wp-content/uploads/2025/03/backup4.webp" alt="" class="wp-image-2862" style="width:632px" srcset="https://furugrand.online/wp-content/uploads/2025/03/backup4.webp 570w, https://furugrand.online/wp-content/uploads/2025/03/backup4-300x161.webp 300w" sizes="(max-width: 570px) 100vw, 570px" /></figure>
</div>
</div>



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



<p>インストールが終わり、「有効化」に変化しました。</p>



<p><strong><span class="marker-under">「有効化」をクリック</span></strong>します。</p>



<p>これで「インストール」は完了しました。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc9">使い方</span></h2>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full is-resized"><img loading="lazy" decoding="async" width="160" height="214" src="https://furugrand.online/wp-content/uploads/2025/03/backup6.webp" alt="" class="wp-image-2867" style="width:368px;height:auto"/></figure>
</div>
</div>



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



<p>ダッシュボードに「All-in-One WP Migration」が現れました。</p>



<p>ここから使用していきます。</p>



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



<h3 class="wp-block-heading"><span id="toc10">バックアップの仕方</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full is-resized"><img loading="lazy" decoding="async" width="330" height="165" src="https://furugrand.online/wp-content/uploads/2025/03/backup7.webp" alt="" class="wp-image-2871" style="width:396px;height:auto" srcset="https://furugrand.online/wp-content/uploads/2025/03/backup7.webp 330w, https://furugrand.online/wp-content/uploads/2025/03/backup7-300x150.webp 300w" sizes="(max-width: 330px) 100vw, 330px" /></figure>
</div>
</div>



<p>ダッシュボードの「All-in-One WP Migration」から、「バックアップ」を選択します。</p>



<p>画面に出てくる<strong><span class="marker-under">「バックアップを作成」をクリック</span></strong>します。</p>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full is-resized"><img loading="lazy" decoding="async" width="528" height="202" src="https://furugrand.online/wp-content/uploads/2025/03/backup8.webp" alt="" class="wp-image-2875" style="width:632px" srcset="https://furugrand.online/wp-content/uploads/2025/03/backup8.webp 528w, https://furugrand.online/wp-content/uploads/2025/03/backup8-300x115.webp 300w" sizes="(max-width: 528px) 100vw, 528px" /></figure>
</div>
</div>



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



<p>「エクスポートの準備中」の文言のあとに、<strong><span class="marker-under">「ダウンロード」の文字が出てくると完了</span></strong>です。</p>



<p>「ダウンロード」の文字をクリックすると、すぐさま<strong><span class="marker-under">ファイルがダウンロードされます</span></strong>。</p>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full is-resized"><img loading="lazy" decoding="async" width="223" height="234" src="https://furugrand.online/wp-content/uploads/2025/03/backup9.webp" alt="" class="wp-image-2881" style="width:368px;height:auto"/></figure>
</div>
</div>



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



<p>ダウンロードされたファイルの「縦に3つ並んだドット」からもダウンロードできます。</p>



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



<h3 class="wp-block-heading"><span id="toc11">インポートの仕方</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full is-resized"><img loading="lazy" decoding="async" width="1394" height="337" src="https://furugrand.online/wp-content/uploads/2025/03/backup10.webp" alt="" class="wp-image-2883" style="width:736px;height:auto" srcset="https://furugrand.online/wp-content/uploads/2025/03/backup10.webp 1394w, https://furugrand.online/wp-content/uploads/2025/03/backup10-300x73.webp 300w, https://furugrand.online/wp-content/uploads/2025/03/backup10-1024x248.webp 1024w, https://furugrand.online/wp-content/uploads/2025/03/backup10-768x186.webp 768w" sizes="(max-width: 1394px) 100vw, 1394px" /></figure>
</div>
</div>



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



<p>バックアップしたファイルを使用するときは、ダッシュボードの「All-in-One WP Migration」から、「インポート」を選択します。</p>



<p>「バックアップをドラック＆ドロップしてインポートする」と書かれた場所に、<strong><span class="marker-under">バックアップしたファイルをインポート</span></strong>します。</p>



<p>※バックアップしたときの状態になりますので、最新のバックアップを選ぶようにしてください。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc12">まとめ</span></h2>



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



<p>WordPressサイトの運営は、時に予期せぬトラブルに見舞われる可能性があります。</p>



<p>しかし、適切な<strong>バックアップ</strong>さえあれば、そのような最悪の事態を回避し、迅速にサイトを復旧させることが可能です。</p>



<p>「All-in-One WP Migration &amp; Backup」は、そのシンプルで分かりやすい操作性から、WordPress初心者の方でも簡単に利用できます。</p>



<p>定期的な<strong>バックアップ</strong>を設定しておけば、万が一の事態が発生しても、最小限の被害で済むでしょう。</p>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>「タブ見出しボックス」の使い方・カスタマイズも【cocoon】</title>
		<link>https://furugrand.online/tabh/</link>
		
		<dc:creator><![CDATA[ヨイカゲの主]]></dc:creator>
		<pubDate>Tue, 04 Mar 2025 13:08:57 +0000</pubDate>
				<category><![CDATA[cocoon]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://furugrand.online/?p=2661</guid>

					<description><![CDATA[「ブログ記事で複数の情報を分かりやすく整理したいけど、ページが縦に長くなって読みにくい…」 そんな悩みを抱えていませんか？ WordPressテーマCocoonには、複数の情報をコンパクトにまとめられる便利な機能「タブ見 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>「ブログ記事で複数の情報を分かりやすく整理したいけど、ページが縦に長くなって読みにくい…」</p>



<p>そんな悩みを抱えていませんか？ </p>



<p>WordPressテーマCocoonには、複数の情報をコンパクトにまとめられる便利な機能「タブ見出しボックス」が搭載されています。</p>



<p>この記事では、Cocoonの「タブ見出しボックス」の基本的な使い方から、デザインをさらに魅力的にするためのカスタマイズ方法までを丁寧に解説します。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc1">「タブ見出しボックス」とは？</span></h2>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box has-background has-border-color has-watery-green-background-color has-cyan-border-color not-nested-style cocoon-block-tab-caption-box tab1" style="--cocoon-custom-background-color:#ebf8f4;--cocoon-custom-border-color:#00a3af"><div class="tab-caption-box-label block-box-label box-label fab-comment"><span class="tab-caption-box-label-text block-box-label-text box-label-text">タブ見出しの特徴</span></div><div class="tab-caption-box-content block-box-content box-content">
<ul class="wp-block-list is-style-icon-list-user-man has-list-style">
<li>タブ見出しって見やすいよね～</li>



<li>色も変更できるのが良いな</li>



<li>中身にブロック挿入できるよ</li>
</ul>
</div></div>
</div>
</div>



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



<p>「タブ見出しボックス」とは、あたかも書類のインデックス（タブ）のように、突き出たタブが特徴です。</p>



<p>背景色・文字色も変更でき、タブの中には<strong><span class="marker-under">「カラム」や「リスト」など挿入できる</span></strong>のが使う幅が広がりますね。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc2">「タブ見出しボックス」の使い方</span></h2>



<p>実際にWordPressのCocoonエディター上で、「タブ見出しボックス」をどのように作成し、コンテンツを表示させていくのか、その基本的な使い方をステップごとに解説していきます。</p>



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



<h3 class="wp-block-heading"><span id="toc3">「タブ見出し」と検索する</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="331" height="280" src="https://furugrand.online/wp-content/uploads/2025/03/tab1.webp" alt="" class="wp-image-2722" srcset="https://furugrand.online/wp-content/uploads/2025/03/tab1.webp 331w, https://furugrand.online/wp-content/uploads/2025/03/tab1-300x254.webp 300w" sizes="(max-width: 331px) 100vw, 331px" /></figure>
</div>
</div>



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



<p>プラスマークをクリックして、<strong><span class="marker-under">「タブ見出し」と検索</span></strong>します。</p>



<p>※プラスマークは投稿ページ内をクリックすると出現します。</p>



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



<h3 class="wp-block-heading"><span id="toc4">見出し・中身を入力</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box has-background has-cocoon-white-background-color not-nested-style cocoon-block-tab-caption-box" style="--cocoon-custom-background-color:#ffffff"><div class="tab-caption-box-label block-box-label box-label"><span class="tab-caption-box-label-text block-box-label-text box-label-text">タブ見出しボックス</span></div><div class="tab-caption-box-content block-box-content box-content">
<p>タブ見出しボックスの中身に文字を入れると、見やすくなりますよ。</p>



<p>背景色・文字色・枠線も変更できるのも良いですね。</p>
</div></div>
</div>
</div>



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



<p>「タブ」をクリックして、<strong><span class="marker-under">見出しを入力</span></strong>します。</p>



<p>「ボックス内」をクリックして、<strong><span class="marker-under">文章を入力して完了</span></strong>です。</p>



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



<h3 class="wp-block-heading"><span id="toc5">アイコン設定</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="259" height="502" src="https://furugrand.online/wp-content/uploads/2025/03/tab2.webp" alt="" class="wp-image-2737" srcset="https://furugrand.online/wp-content/uploads/2025/03/tab2.webp 259w, https://furugrand.online/wp-content/uploads/2025/03/tab2-155x300.webp 155w" sizes="(max-width: 259px) 100vw, 259px" /></figure>
</div>
</div>



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



<p>右側の「ブロックバー」から、<strong><span class="marker-under">アイコンを設定</span></strong>することができます。</p>



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



<div class="wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box has-border-color has-cocoon-black-border-color not-nested-style cocoon-block-tab-caption-box" style="--cocoon-custom-border-color:#333333"><div class="tab-caption-box-label block-box-label box-label fab-edit"><span class="tab-caption-box-label-text block-box-label-text box-label-text">タブ見出しボックス</span></div><div class="tab-caption-box-content block-box-content box-content">
<p>タブ見出しボックスの中身に文字を入れると、見やすくなりますよ。</p>



<p>背景色・文字色・枠線も変更できるのも良いですね。</p>
</div></div>



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



<div class="wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box has-border-color has-cocoon-black-border-color not-nested-style cocoon-block-tab-caption-box" style="--cocoon-custom-border-color:#333333"><div class="tab-caption-box-label block-box-label box-label fab-star"><span class="tab-caption-box-label-text block-box-label-text box-label-text">タブ見出しボックス</span></div><div class="tab-caption-box-content block-box-content box-content">
<p>タブ見出しボックスの中身に文字を入れると、見やすくなりますよ。</p>



<p>背景色・文字色・枠線も変更できるのも良いですね。</p>
</div></div>



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



<div class="wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box has-border-color has-cocoon-black-border-color not-nested-style cocoon-block-tab-caption-box" style="--cocoon-custom-border-color:#333333"><div class="tab-caption-box-label block-box-label box-label fab-thumbs-up"><span class="tab-caption-box-label-text block-box-label-text box-label-text">タブ見出しボックス</span></div><div class="tab-caption-box-content block-box-content box-content">
<p>タブ見出しボックスの中身に文字を入れると、見やすくなりますよ。</p>



<p>背景色・文字色・枠線も変更できるのも良いですね。</p>
</div></div>



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



<p>見出しの頭に「アイコン」が付けられますね。</p>



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



<h3 class="wp-block-heading"><span id="toc6">背景色・文字色・枠線変更</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="256" height="180" src="https://furugrand.online/wp-content/uploads/2025/03/tab3.webp" alt="" class="wp-image-2748"/></figure>
</div>
</div>



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



<p>右側の「ブロックバー」から、<strong><span class="marker-under">背景・文字色・枠線を変更できます</span></strong>。</p>



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



<div class="wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box has-text-color has-background has-border-color has-cocoon-black-color has-ex-c-background-color has-pink-border-color not-nested-style cocoon-block-tab-caption-box" style="--cocoon-custom-background-color:#eaf4fc;--cocoon-custom-text-color:#333333;--cocoon-custom-border-color:#e95295"><div class="tab-caption-box-label block-box-label box-label fab-thumbs-up"><span class="tab-caption-box-label-text block-box-label-text box-label-text">タブ見出しボックス</span></div><div class="tab-caption-box-content block-box-content box-content">
<p>タブ見出しボックスの中身に文字を入れると、見やすくなりますよ。</p>



<p>背景色・文字色・枠線も変更できるのも良いですね。</p>
</div></div>



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



<p>どの色を入れようかな？と迷う場合は、こちらを参考にしてみてください。</p>



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

<a target="_self" href="https://furugrand.online/color-palette/" title="Wordpressのサイトカラーが決まる！「カラーパレットジェネレーター」ColorMagic" 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 loading="lazy" decoding="async" width="160" height="90" src="https://furugrand.online/wp-content/uploads/2025/02/color-palette-160x90.webp" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://furugrand.online/wp-content/uploads/2025/02/color-palette-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/02/color-palette-300x169.webp 300w, https://furugrand.online/wp-content/uploads/2025/02/color-palette-1024x576.webp 1024w, https://furugrand.online/wp-content/uploads/2025/02/color-palette-768x432.webp 768w, https://furugrand.online/wp-content/uploads/2025/02/color-palette-1536x864.webp 1536w, https://furugrand.online/wp-content/uploads/2025/02/color-palette-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/02/color-palette-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/02/color-palette.webp 1920w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">Wordpressのサイトカラーが決まる！「カラーパレットジェネレーター」ColorMagic</div><div class="blogcard-snippet internal-blogcard-snippet">サイトのカラーは、訪問者に与える印象を大きく左右する、非常に重要な要素です。洗練されたカラーパレットは、サイト全体の雰囲気を格上げし、ブランドイメージを効果的に伝える力を持っています。しかし、色の組み合わせは奥深く、センスに自信がないと悩ん...</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 loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://furugrand.online" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">furugrand.online</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2025.02.23</div></div></div></div></a>
</div>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc7">「タブ見出し」をCSSカスタマイズ</span></h2>



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



<div class="wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box has-text-color has-background has-border-color has-cocoon-black-color has-ex-b-background-color has-brown-border-color not-nested-style cocoon-block-tab-caption-box tab1" style="--cocoon-custom-background-color:#f8f4e6;--cocoon-custom-text-color:#333333;--cocoon-custom-border-color:#954e2a"><div class="tab-caption-box-label block-box-label box-label fab-bell"><span class="tab-caption-box-label-text block-box-label-text box-label-text">タブ見出しボックス</span></div><div class="tab-caption-box-content block-box-content box-content">
<p>タブ見出しボックスの中身に文字を入れると、見やすくなりますよ。</p>



<p>背景色・文字色・枠線も変更できるのも良いですね。</p>
</div></div>



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



<p>タブ見出しボックスの<strong><span class="marker-under">「見出し」を大きく</span></strong>して、<strong><span class="marker-under">ボックス内の両側の余白を付けてきます</span></strong>。</p>



<p>ここでは、追加CSSに記入していきます。</p>



<p>※CSSを追加するときは、必ずバックアップをしてください。</p>



<p>バックアップのおすすめプラグインはこちら</p>



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

<a target="_self" href="https://furugrand.online/backup/" title="バックアップのプラグイン「All-in-One WP Migration and Backup」がおすすめ【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 loading="lazy" decoding="async" width="160" height="90" src="https://furugrand.online/wp-content/uploads/2025/03/backup-160x90.webp" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://furugrand.online/wp-content/uploads/2025/03/backup-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/03/backup-300x169.webp 300w, https://furugrand.online/wp-content/uploads/2025/03/backup-1024x576.webp 1024w, https://furugrand.online/wp-content/uploads/2025/03/backup-768x432.webp 768w, https://furugrand.online/wp-content/uploads/2025/03/backup-1536x864.webp 1536w, https://furugrand.online/wp-content/uploads/2025/03/backup-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/03/backup-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/03/backup.webp 1920w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">バックアップのプラグイン「All-in-One WP Migration and Backup」がおすすめ【cocoon】</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 loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://furugrand.online" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">furugrand.online</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2025.03.05</div></div></div></div></a>
</div>



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



<h3 class="wp-block-heading"><span id="toc8">サイト全体に設定</span></h3>



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



<pre class="wp-block-code"><code>/* タブ見出し */
.tab-caption-box-label{
	padding:10px 20px;　　/* 上下余白10px　左右余白20px */
	font-weight: bold;　　/* 文字を太く */
        letter-spacing:0.1em;    /* 文字と文字の間隔 */
}

.tab-caption-box-content{
	padding: 20px;    /* 余白20px */
}</code></pre>



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



<p>サイト全体に設定する場合です。追加CSSにコピペします。</p>



<p>※余白など、自分の好きなように調整してください。</p>



<div class="wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box has-text-color has-background has-border-color has-cocoon-black-color has-watery-green-background-color has-light-green-border-color not-nested-style cocoon-block-tab-caption-box tab1" style="--cocoon-custom-background-color:#ebf8f4;--cocoon-custom-text-color:#333333;--cocoon-custom-border-color:#8bc34a"><div class="tab-caption-box-label block-box-label box-label fab-book"><span class="tab-caption-box-label-text block-box-label-text box-label-text">タブ見出しボックス</span></div><div class="tab-caption-box-content block-box-content box-content">
<p>タブ見出しボックスの中身に文字を入れると、見やすくなりますよ。</p>



<p>背景色・文字色・枠線も変更できるのも良いですね。</p>
</div></div>



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



<h3 class="wp-block-heading"><span id="toc9">個別に設定（追加CSSクラス）</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="239" height="301" src="https://furugrand.online/wp-content/uploads/2025/03/tab4.webp" alt="" class="wp-image-2780"/></figure>
</div>
</div>



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



<p>この「タブ見出しボックス」のみの設定にしたい！という場合は、右側の「ブロックバー」の「高度な設定」から<strong><span class="marker-under">「追加CSSクラス」に名前を付けます。</span></strong></p>



<p>ここでは、「<strong>tab1</strong>」にします。</p>



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



<pre class="wp-block-code"><code>/* タブ見出し */
.tab1 .tab-caption-box-label{
	padding:10px 20px;　　/* 上下余白10px　左右余白20px */
	font-weight: bold;　　/* 文字を太く */
        letter-spacing:0.1em;    /* 文字と文字の間隔 */
}

.tab1 .tab-caption-box-content{
	padding: 20px;    /* 余白20px */
}</code></pre>



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



<p>全体に設定するCSSの、出だしを変更するのみでOKです。</p>



<div class="wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box has-text-color has-background has-border-color has-cocoon-black-color has-ex-b-background-color has-orange-border-color not-nested-style cocoon-block-tab-caption-box tab1" style="--cocoon-custom-background-color:#f8f4e6;--cocoon-custom-text-color:#333333;--cocoon-custom-border-color:#f39800"><div class="tab-caption-box-label block-box-label box-label fab-thumbs-up"><span class="tab-caption-box-label-text block-box-label-text box-label-text">タブ見出しボックス</span></div><div class="tab-caption-box-content block-box-content box-content">
<p>タブ見出しボックスの中身に文字を入れると、見やすくなりますよ。</p>



<p>背景色・文字色・枠線も変更できるのも良いですね。</p>
</div></div>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc10">ボックスに入れる</span></h2>



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



<p>「見出しボックス」の<strong><span class="marker-under">ボックス内に「リスト」「カラム」などを挿入</span></strong>することができます。</p>



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



<h3 class="wp-block-heading"><span id="toc11">リストを入れる</span></h3>



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



<div class="wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box has-text-color has-background has-border-color has-cocoon-black-color has-ex-e-background-color has-purple-border-color not-nested-style cocoon-block-tab-caption-box tab1" style="--cocoon-custom-background-color:#e8ecef;--cocoon-custom-text-color:#333333;--cocoon-custom-border-color:#884898"><div class="tab-caption-box-label block-box-label box-label fab-train"><span class="tab-caption-box-label-text block-box-label-text box-label-text">タブ見出しボックス</span></div><div class="tab-caption-box-content block-box-content box-content">
<ul class="wp-block-list is-style-numeric-list-enclosed has-list-style">
<li>タブ見出しって見やすいよね～</li>



<li>色も変更できるのが良いな</li>



<li>中身にブロック挿入できるよ</li>
</ul>
</div></div>



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



<p>ボックス内に<strong><span class="marker-under">「リスト」を入れる</span></strong>こともできます。</p>



<p>リストについての記事はこちらをご覧ください。</p>



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

<a target="_self" href="https://furugrand.online/list/" 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 loading="lazy" decoding="async" width="160" height="90" src="https://furugrand.online/wp-content/uploads/2025/03/list-160x90.webp" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://furugrand.online/wp-content/uploads/2025/03/list-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/03/list-300x169.webp 300w, https://furugrand.online/wp-content/uploads/2025/03/list-1024x576.webp 1024w, https://furugrand.online/wp-content/uploads/2025/03/list-768x432.webp 768w, https://furugrand.online/wp-content/uploads/2025/03/list-1536x864.webp 1536w, https://furugrand.online/wp-content/uploads/2025/03/list-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/03/list-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/03/list.webp 1920w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">「リスト」の使い方【cocoon】</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 loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://furugrand.online" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">furugrand.online</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2025.03.03</div></div></div></div></a>
</div>



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



<h3 class="wp-block-heading"><span id="toc12">カラムを入れる</span></h3>



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



<div class="wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box has-text-color has-background has-border-color has-cocoon-black-color has-ex-c-background-color has-cyan-border-color not-nested-style cocoon-block-tab-caption-box tab1" style="--cocoon-custom-background-color:#eaf4fc;--cocoon-custom-text-color:#333333;--cocoon-custom-border-color:#00a3af"><div class="tab-caption-box-label block-box-label box-label fab-train"><span class="tab-caption-box-label-text block-box-label-text box-label-text">タブ見出しボックス</span></div><div class="tab-caption-box-content block-box-content box-content">
<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)">
<p class="is-style-border-dotted has-border is-style-light-background-box has-box-style">タブ見出しボックスには、様々なブロックをいれることができます。</p>



<p>ここでは、カラムを入れています。左側に「段落」右側に「ボタン」を配置しています。</p>
</div>



<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-cocoon-blocks-button-1 aligncenter button-block"><a target="_self" href="" class="btn btn-m btn-circle has-text-color has-background has-border-color has-cocoon-white-color has-cyan-background-color has-indigo-border-color">ボタンの例</a></div>
</div>
</div>
</div></div>



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



<p>ボックス内に<strong><span class="marker-under">「カラム」を入れる</span></strong>こともできます。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc13">まとめ</span></h2>



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



<p>この記事では、WordPressテーマCocoonに搭載された便利な機能「タブ見出しボックス」の使い方から、さらに見やすくするための基本的なカスタマイズ方法までを解説しました。</p>



<p>「タブ見出しボックス」は「ブロックバー」で<strong><span class="marker-under">自分のサイトに合うようアレンジ</span></strong>することができます。</p>



<p>情報を整理し、読者にとって分かりやすいコンテンツを提供することで、サイトの利便性が向上するでしょう。</p>



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



<p></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>「リスト」の使い方【cocoon】</title>
		<link>https://furugrand.online/list/</link>
		
		<dc:creator><![CDATA[ヨイカゲの主]]></dc:creator>
		<pubDate>Mon, 03 Mar 2025 10:17:44 +0000</pubDate>
				<category><![CDATA[cocoon]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://furugrand.online/?p=2461</guid>

					<description><![CDATA[「ブログ記事で箇条書きを使いたいけど、どうすれば見やすく整理できるんだろう？」 WordPressで文章を作成する際、情報を簡潔に伝え、視覚的に分かりやすくするために「リスト（箇条書き）」は欠かせない要素です。 この記事 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>「ブログ記事で箇条書きを使いたいけど、どうすれば見やすく整理できるんだろう？」</p>



<p>WordPressで文章を作成する際、情報を簡潔に伝え、視覚的に分かりやすくするために「リスト（箇条書き）」は欠かせない要素です。</p>



<p>この記事では、WordPressテーマCocoonを使って、基本的なリストを作成する方法から、アイコンリストの使用方法までを解説します。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc1">「リスト」とは？</span></h2>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list has-cocoon-white-color has-cyan-background-color has-text-color has-background has-link-color is-style-border-radius-s-thin-and-thick has-border is-style-numeric-list-enclosed has-list-style wp-elements-fd52e781ab2c334f42d4893e8431d629">
<li>読みやすい文章になる</li>



<li>理解しやすくなる</li>



<li>誤解を減らせる</li>
</ul>
</div>
</div>



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



<p>「リスト」とは、<strong><span class="marker-under">複数の項目・要素</span></strong>を一定の規則に従って並べた一覧のことです。</p>



<p>箇条書きで記述するよりも、ひとつひとつの項目が視覚的にはっきりするのでアピールポイントが伝わりやすいというメリットがあります。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc2">「リスト」の作り方</span></h2>



<h3 class="wp-block-heading"><span id="toc3">「リスト」と検索する</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="346" height="337" src="https://furugrand.online/wp-content/uploads/2025/02/list1.webp" alt="" class="wp-image-2474" srcset="https://furugrand.online/wp-content/uploads/2025/02/list1.webp 346w, https://furugrand.online/wp-content/uploads/2025/02/list1-300x292.webp 300w" sizes="(max-width: 346px) 100vw, 346px" /></figure>
</div>
</div>



<p>プラスマークをクリックして、<strong><span class="marker-under">「リスト」と検索</span></strong>します。</p>



<p>※プラスマークは投稿ページ内をクリックすると出現します。</p>



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



<h3 class="wp-block-heading"><span id="toc4">リストを入力</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list has-cocoon-white-background-color has-background">
<li>読みやすい文章になる</li>



<li>理解しやすくなる</li>



<li>誤解を減らせる</li>



<li>視覚的にはっきりするので、全体像が把握しやすい</li>



<li>アピールポイントが伝わりやすい</li>
</ul>
</div>
</div>



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



<p>箇条書きにしたいものを入力して完了です。</p>



<p>次のリストを入力するときは「Enter」で次の行になります。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc5">「リスト」の装飾</span></h2>



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



<h3 class="wp-block-heading"><span id="toc6">アイコン変更</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="246" height="445" src="https://furugrand.online/wp-content/uploads/2025/03/list2.webp" alt="" class="wp-image-2505" srcset="https://furugrand.online/wp-content/uploads/2025/03/list2.webp 246w, https://furugrand.online/wp-content/uploads/2025/03/list2-166x300.webp 166w" sizes="(max-width: 246px) 100vw, 246px" /></figure>
</div>
</div>



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



<p>右側の「ブロックバー」から<strong><span class="marker-under">「アイコンのスタイル」を変更</span></strong>できます。</p>



<p>※「ブロックバー」が出現しない人は、「公開」の左隣の四角をクリックしてください。</p>



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



<h3 class="wp-block-heading"><span id="toc7">アイコンスタイル一覧</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list has-cocoon-white-background-color has-background is-style-numeric-list-enclosed has-list-style">
<li>読みやすい文章になる</li>



<li>理解しやすくなる</li>



<li>誤解を減らせる</li>
</ul>
</div>
</div>



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list has-cocoon-white-background-color has-background is-style-icon-list-check has-list-style">
<li>読みやすい文章になる</li>



<li>理解しやすくなる</li>



<li>誤解を減らせる</li>
</ul>
</div>
</div>



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list has-cocoon-white-background-color has-background is-style-numeric-list-step has-list-style">
<li>読みやすい文章になる</li>



<li>理解しやすくなる</li>



<li>誤解を減らせる</li>
</ul>
</div>
</div>



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list has-cocoon-white-background-color has-background is-style-icon-list-check has-list-style">
<li>読みやすい文章になる</li>



<li>理解しやすくなる</li>



<li>誤解を減らせる</li>
</ul>
</div>
</div>



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list has-cocoon-white-background-color has-background is-style-icon-list-heart has-list-style">
<li>読みやすい文章になる</li>



<li>理解しやすくなる</li>



<li>誤解を減らせる</li>
</ul>
</div>
</div>



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list has-cocoon-white-background-color has-background is-style-icon-list-circle has-list-style">
<li>読みやすい文章になる</li>



<li>理解しやすくなる</li>



<li>誤解を減らせる</li>
</ul>
</div>
</div>



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



<p>〇と△と×のアイコンもあります。他にも沢山アイコンがあるので、「cocoon」ってすごいですね。</p>



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



<h3 class="wp-block-heading"><span id="toc8">ボーダー（枠線）を付ける</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="237" height="489" src="https://furugrand.online/wp-content/uploads/2025/03/list4.webp" alt="" class="wp-image-2516" srcset="https://furugrand.online/wp-content/uploads/2025/03/list4.webp 237w, https://furugrand.online/wp-content/uploads/2025/03/list4-145x300.webp 145w" sizes="(max-width: 237px) 100vw, 237px" /></figure>
</div>
</div>



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



<p>右側の「ブロックバー」から<strong><span class="marker-under">「枠線」を変更</span></strong>できます。</p>



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



<h3 class="wp-block-heading"><span id="toc9">ボーダーの種類も豊富</span></h3>



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



<ul class="wp-block-list has-cocoon-white-background-color has-background is-style-border-double has-border is-style-icon-list-thumb-up has-list-style">
<li>読みやすい文章になる</li>



<li>理解しやすくなる</li>



<li>誤解を減らせる</li>
</ul>



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



<ul class="wp-block-list has-cocoon-white-background-color has-background is-style-blank-box-orange has-border is-style-icon-list-ban has-list-style">
<li>読みやすい文章になる</li>



<li>理解しやすくなる</li>



<li>誤解を減らせる</li>
</ul>



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



<ul class="wp-block-list has-cocoon-white-background-color has-background is-style-border-radius-s-dotted has-border is-style-icon-list-info has-list-style">
<li>読みやすい文章になる</li>



<li>理解しやすくなる</li>



<li>誤解を減らせる</li>
</ul>



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



<h3 class="wp-block-heading"><span id="toc10">ボーダーの太さを変更</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="486" height="476" src="https://furugrand.online/wp-content/uploads/2025/03/list5.webp" alt="" class="wp-image-2530" srcset="https://furugrand.online/wp-content/uploads/2025/03/list5.webp 486w, https://furugrand.online/wp-content/uploads/2025/03/list5-300x294.webp 300w" sizes="(max-width: 486px) 100vw, 486px" /></figure>
</div>
</div>



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



<p>右側の「ブロックバー」から<strong><span class="marker-under">「ボーダー（枠線）の太さ」を変更</span></strong>できます。</p>



<p>※ブロックバーの設定マークの隣にある、丸いマークをクリックしてください。</p>



<p>①枠線のとなりの「＋」プラスマークをクリック</p>



<p>②枠線をクリック</p>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="276" height="200" src="https://furugrand.online/wp-content/uploads/2025/03/list6.webp" alt="" class="wp-image-2535"/></figure>
</div>
</div>



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



<p>画面を見ながら、<strong><span class="marker-under">枠線の「太さ」と「色」を変更できます</span></strong>。</p>



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



<ul style="border-width:10px" class="wp-block-list has-border-color has-pale-cyan-blue-border-color has-cocoon-white-background-color has-background is-style-border-radius-s-dotted has-border is-style-icon-list-info has-list-style">
<li>読みやすい文章になる</li>



<li>理解しやすくなる</li>



<li>誤解を減らせる</li>
</ul>



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



<ul style="border-width:20px" class="wp-block-list has-cocoon-white-background-color has-background is-style-blank-box-orange has-border is-style-icon-list-ban has-list-style">
<li>読みやすい文章になる</li>



<li>理解しやすくなる</li>



<li>誤解を減らせる</li>
</ul>



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



<ul style="border-width:20px" class="wp-block-list has-cocoon-white-background-color has-background is-style-border-double has-border is-style-icon-list-thumb-up has-list-style">
<li>読みやすい文章になる</li>



<li>理解しやすくなる</li>



<li>誤解を減らせる</li>
</ul>



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



<h3 class="wp-block-heading"><span id="toc11">ボーダーを角丸に</span></h3>



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



<ul style="border-radius:20px" class="wp-block-list has-cocoon-white-background-color has-background is-style-border-double has-border is-style-icon-list-thumb-up has-list-style">
<li>読みやすい文章になる</li>



<li>理解しやすくなる</li>



<li>誤解を減らせる</li>
</ul>



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



<ul style="border-width:20px;border-radius:20px" class="wp-block-list has-cocoon-white-background-color has-background is-style-blank-box-orange has-border is-style-icon-list-ban has-list-style">
<li>読みやすい文章になる</li>



<li>理解しやすくなる</li>



<li>誤解を減らせる</li>
</ul>



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



<ul style="border-width:20px;border-radius:20px" class="wp-block-list has-cocoon-white-background-color has-background is-style-border-double has-border is-style-icon-list-thumb-up has-list-style">
<li>読みやすい文章になる</li>



<li>理解しやすくなる</li>



<li>誤解を減らせる</li>
</ul>



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



<p>もちろん、<strong><span class="marker-under">ボーダー（枠線）を「角丸」</span></strong>にすることもできます。</p>



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



<h3 class="wp-block-heading"><span id="toc12">背景・テキストを変更</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="249" height="348" src="https://furugrand.online/wp-content/uploads/2025/03/list3.webp" alt="" class="wp-image-2509" srcset="https://furugrand.online/wp-content/uploads/2025/03/list3.webp 249w, https://furugrand.online/wp-content/uploads/2025/03/list3-215x300.webp 215w" sizes="(max-width: 249px) 100vw, 249px" /></figure>
</div>
</div>



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



<p>右側の「ブロックバー」から<strong><span class="marker-under">「背景・テキストカラー」を変更</span></strong>できます。</p>



<p>※ブロックバーの設定マークの隣にある、丸いマークをクリックしてください。</p>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list has-cocoon-white-color has-green-background-color has-text-color has-background has-link-color is-style-icon-list-question has-list-style wp-elements-97d84503ce2da8bfc0e5ac3dddf3ec57">
<li>読みやすい文章になる</li>



<li>理解しやすくなる</li>



<li>誤解を減らせる</li>
</ul>
</div>
</div>



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



<p>背景色を「緑」、文字の色を「白」にしてみました。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc13">「アイコンリスト」とは？</span></h2>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-angle-double-right block-box has-background has-border-color has-icon-color has-cocoon-white-background-color has-orange-border-color has-amber-icon-color"><div class="iconlist-title">アイコンリストの特徴</div>
<ul class="wp-block-list">
<li>リストとは違うアイコンがある</li>



<li>題名を入力できる</li>



<li>背景・文字色・枠を付けることができる</li>
</ul>
</div>
</div>
</div>



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



<p>cocoonテーマには、「アイコンリスト」という機能もあります。</p>



<p>「アイコンリスト」の特徴は、<strong><span class="marker-under">リストの題名が付けられる</span></strong>ということです。</p>



<p>そして、<strong><span class="marker-under">リストと題名を「枠線」で簡単に囲え</span><span class="marker-under">ます</span></strong>。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc14">「アイコンリスト」の使い方</span></h2>



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



<h3 class="wp-block-heading"><span id="toc15">「アイコンリスト」と検索</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="331" height="323" src="https://furugrand.online/wp-content/uploads/2025/03/list7.webp" alt="" class="wp-image-2562" srcset="https://furugrand.online/wp-content/uploads/2025/03/list7.webp 331w, https://furugrand.online/wp-content/uploads/2025/03/list7-300x293.webp 300w" sizes="(max-width: 331px) 100vw, 331px" /></figure>
</div>
</div>



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



<p>プラスマークをクリックして、<strong><span class="marker-under">「アイコンリスト」と検索</span></strong>します。</p>



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



<h3 class="wp-block-heading"><span id="toc16">ブロックバー操作</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="249" height="446" src="https://furugrand.online/wp-content/uploads/2025/03/list8.webp" alt="" class="wp-image-2567" srcset="https://furugrand.online/wp-content/uploads/2025/03/list8.webp 249w, https://furugrand.online/wp-content/uploads/2025/03/list8-167x300.webp 167w" sizes="(max-width: 249px) 100vw, 249px" /></figure>
</div>
</div>



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



<p>右側の「ブロックバー」から<strong><span class="marker-under">「アイコン・背景・テキストカラー・枠線」を変更</span></strong>できます。</p>



<p>題名・リストを入力したら完成です！</p>



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



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-star-o block-box has-text-color has-background has-border-color has-icon-color has-cocoon-white-color has-indigo-background-color has-cocoon-black-border-color has-yellow-icon-color is-style-bottom-margin-0em has-bottom-margin"><div class="iconlist-title">アイコンリストの特徴</div>
<ul class="wp-block-list">
<li>リストとは違うアイコンがある</li>



<li>題名を入力できる</li>



<li>背景・文字色・枠を付けることができる</li>
</ul>
</div>



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



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc17">まとめ</span></h2>



<p>この記事では、WordPressテーマCocoonで利用できる基本的なリストに加え、視覚的に訴求力の高いアイコンリストの使い方までを解説しました。</p>



<p>リスト機能は、情報を整理し、読者に分かりやすく伝えるための基本でありながら非常に強力なツールです。</p>



<p>手順の説明、項目の列挙、メリットの提示など、様々な情報を効果的に伝えることができるでしょう。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>cocoonテーマで「F＆A」を作成</title>
		<link>https://furugrand.online/faq/</link>
		
		<dc:creator><![CDATA[ヨイカゲの主]]></dc:creator>
		<pubDate>Thu, 27 Feb 2025 04:39:37 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[cocoon]]></category>
		<guid isPermaLink="false">https://furugrand.online/?p=2363</guid>

					<description><![CDATA[ブログやウェブサイトを運営していると、読者からの疑問や質問に対応する場面は少なくありません。 そんな時、「F＆A（よくある質問と回答）」のセクションがあれば、読者はすぐに疑問を解決でき、運営者側の負担も軽減されます。 こ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>ブログやウェブサイトを運営していると、読者からの疑問や質問に対応する場面は少なくありません。</p>



<p>そんな時、「F＆A（よくある質問と回答）」のセクションがあれば、読者はすぐに疑問を解決でき、運営者側の負担も軽減されます。</p>



<p>この記事では、WordPressテーマCocoonを使って、この「F＆A」セクションを簡単に作成する方法を解説します。</p>



<p>Cocoonテーマの便利な機能を利用すれば、特別なプラグインを導入することなく、見やすく整理されたF＆Aを記事や固定ページに設置できます。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc1">「F＆A」とは？</span></h2>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-cocoon-blocks-faq faq-wrap blank-box block-box has-background has-cocoon-white-background-color not-nested-style cocoon-block-faq" style="--cocoon-custom-background-color:#ffffff"><dl class="faq"><dt class="faq-question faq-item"><div class="faq-question-label faq-item-label">Q</div><div class="faq-question-content faq-item-content">パンはパンでも食べられないパンはありますか？</div></dt><dd class="faq-answer faq-item"><div class="faq-answer-label faq-item-label">A</div><div class="faq-answer-content faq-item-content">
<p>フライパンですね。</p>
</div></dd></dl></div>
</div>
</div>



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



<p>「F＆A」とは、顧客・社内から<strong><span class="marker-under">よく寄せられる質問をまとめたもの</span></strong>です。</p>



<p>WordPressの「cocoonテーマ」では、<strong><span class="marker-under">ボタンをクリックすると「答え」が出てくる</span></strong>「アコーディオンメニュー」も<strong><span class="marker-under">無料</span></strong>で作成できるので、下記でご紹介していきます。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc2">「F＆A」の作成方法</span></h2>



<p>WordPressテーマCocoonを使って、実際にF＆Aを作成していく具体的な手順を解説します。</p>



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



<h3 class="wp-block-heading"><span id="toc3">FAQと検索する</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="372" height="304" src="https://furugrand.online/wp-content/uploads/2025/02/faq.webp" alt="" class="wp-image-2383" srcset="https://furugrand.online/wp-content/uploads/2025/02/faq.webp 372w, https://furugrand.online/wp-content/uploads/2025/02/faq-300x245.webp 300w" sizes="(max-width: 372px) 100vw, 372px" /></figure>
</div>
</div>



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



<p>プラスマークをクリックして、「FAQ」と検索します。</p>



<p>※プラスマークは投稿ページ内をクリックすると出現します。</p>



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



<h3 class="wp-block-heading"><span id="toc4">質問と答えを入力</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-cocoon-blocks-faq faq-wrap blank-box block-box has-background has-cocoon-white-background-color not-nested-style cocoon-block-faq" style="--cocoon-custom-background-color:#ffffff"><dl class="faq"><dt class="faq-question faq-item"><div class="faq-question-label faq-item-label">Q</div><div class="faq-question-content faq-item-content">英語で「日曜日」を何と言いますか？</div></dt><dd class="faq-answer faq-item"><div class="faq-answer-label faq-item-label">A</div><div class="faq-answer-content faq-item-content">
<p>Sunday</p>
</div></dd></dl></div>
</div>
</div>



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



<p>画面に「Q＆A」が出てくるので、「質問と答え」を入力します。</p>



<p>これで<strong><span class="marker-under">「F＆A」が完成</span></strong>しました！</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc5">スタイル変更</span></h2>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="271" height="304" src="https://furugrand.online/wp-content/uploads/2025/02/faq2.webp" alt="" class="wp-image-2395" srcset="https://furugrand.online/wp-content/uploads/2025/02/faq2.webp 271w, https://furugrand.online/wp-content/uploads/2025/02/faq2-267x300.webp 267w" sizes="(max-width: 271px) 100vw, 271px" /></figure>
</div>
</div>



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



<p>右側の「ブロックバー」から<strong><span class="marker-under">「スタイル」を変更</span></strong>できます。</p>



<p>※「ブロックバー」が出現しない人は、「公開」の左隣の四角をクリックしてください。</p>



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



<h3 class="wp-block-heading"><span id="toc6">角型ラベル</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-cocoon-blocks-faq faq-wrap blank-box block-box has-background has-cocoon-white-background-color not-nested-style cocoon-block-faq is-style-square" style="--cocoon-custom-background-color:#ffffff"><dl class="faq"><dt class="faq-question faq-item"><div class="faq-question-label faq-item-label">Q</div><div class="faq-question-content faq-item-content">英語で「日曜日」を何と言いますか？</div></dt><dd class="faq-answer faq-item"><div class="faq-answer-label faq-item-label">A</div><div class="faq-answer-content faq-item-content">
<p>Sunday</p>
</div></dd></dl></div>
</div>
</div>



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



<p>「Q＆A」のアイコンに<strong><span class="marker-under">四角い背景</span></strong>が付きました。</p>



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



<h3 class="wp-block-heading"><span id="toc7">アコーディオン</span></h3>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-cocoon-blocks-faq faq-wrap blank-box block-box has-background has-cocoon-white-background-color not-nested-style cocoon-block-faq is-style-accordion" style="--cocoon-custom-background-color:#ffffff"><dl class="faq"><dt class="faq-question faq-item"><div class="faq-question-label faq-item-label">Q</div><div class="faq-question-content faq-item-content">英語で「日曜日」を何と言いますか？</div></dt><dd class="faq-answer faq-item"><div class="faq-answer-label faq-item-label">A</div><div class="faq-answer-content faq-item-content">
<p>Sunday</p>
</div></dd></dl></div>
</div>
</div>



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



<p>「質問」をクリックすると「答え」が出現する「<strong><span class="marker-under">アコーディオンメニュー</span></strong>」になりました。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc8">ラベル変更</span></h2>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="259" height="263" src="https://furugrand.online/wp-content/uploads/2025/02/faq3.webp" alt="" class="wp-image-2405"/></figure>
</div>
</div>



<p class="has-text-align-center has-cocoon-black-color has-text-color has-link-color wp-elements-915b76d4b393444dbed65e941b8b868a"><strong>↓</strong></p>



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-cocoon-blocks-faq faq-wrap blank-box block-box has-background has-cocoon-white-background-color not-nested-style cocoon-block-faq" style="--cocoon-custom-background-color:#ffffff"><dl class="faq"><dt class="faq-question faq-item"><div class="faq-question-label faq-item-label">問</div><div class="faq-question-content faq-item-content">英語で「日曜日」を何と言いますか？</div></dt><dd class="faq-answer faq-item"><div class="faq-answer-label faq-item-label">答</div><div class="faq-answer-content faq-item-content">
<p>Sunday</p>
</div></dd></dl></div>
</div>
</div>



<p>右側の「ブロックバー」から、<strong><span class="marker-under">質問ラベルのアイコンを変更</span></strong>できます。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc9">色設定</span></h2>



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



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="259" height="280" src="https://furugrand.online/wp-content/uploads/2025/02/faq4.webp" alt="" class="wp-image-2412"/></figure>
</div>
</div>



<p class="has-text-align-center"><strong>↓</strong></p>



<div class="wp-block-columns has-cocoon-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-b653aba5 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-cocoon-blocks-faq faq-wrap blank-box block-box has-question-color has-answer-color has-text-color has-background has-border-color has-pink-question-color has-light-green-answer-color has-cocoon-white-color has-dark-grey-background-color has-cocoon-black-border-color not-nested-style cocoon-block-faq" style="--cocoon-custom-question-color:#e95295;--cocoon-custom-answer-color:#8bc34a;--cocoon-custom-background-color:#666666;--cocoon-custom-text-color:#ffffff;--cocoon-custom-border-color:#333333"><dl class="faq"><dt class="faq-question faq-item"><div class="faq-question-label faq-item-label">問</div><div class="faq-question-content faq-item-content">英語で「日曜日」を何と言いますか？</div></dt><dd class="faq-answer faq-item"><div class="faq-answer-label faq-item-label">答</div><div class="faq-answer-content faq-item-content">
<p>Sunday</p>
</div></dd></dl></div>
</div>
</div>



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



<p>右側の「ブロックバー」から、<strong><span class="marker-under">「質問ラベル」「背景」など自由に色設定もできて素晴らしい</span></strong>ですね。</p>



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



<h2 class="wp-block-heading has-text-align-center fukidasi"><span id="toc10">まとめ</span></h2>



<p>この記事では、WordPressテーマCocoonを使って、ウェブサイトやブログに効果的な「F＆A（よくある質問と回答）」セクションを作成する方法を解説しました。</p>



<p>読者が抱える疑問に丁寧に答えるF＆Aは、サイトの信頼性を高め、ユーザーエクスペリエンスを向上させる上で非常に重要な役割を果たします。</p>



<p>Cocoonテーマの標準機能を利用すれば、CSSを入力しなくとも、簡単に見やすく整理されたF＆Aを作成し、記事や固定ページに設置することが可能です。</p>



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



<p></p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
