<?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>SWELL &#8211; Kotsu Blog</title>
	<atom:link href="https://kotsublog.org/category/blog/swell/feed/" rel="self" type="application/rss+xml" />
	<link>https://kotsublog.org</link>
	<description></description>
	<lastBuildDate>Sat, 17 Aug 2024 10:51:27 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.3.5</generator>

<image>
	<url>https://kotsublog.org/wp-content/uploads/2024/10/cropped-ファビコン_20241015-32x32.png</url>
	<title>SWELL &#8211; Kotsu Blog</title>
	<link>https://kotsublog.org</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>SWELLでカスタマイズ！トップページをサイト型にする方法を解説します。</title>
		<link>https://kotsublog.org/swell-top-customize/</link>
		
		<dc:creator><![CDATA[こつくん]]></dc:creator>
		<pubDate>Sat, 21 Aug 2021 12:11:08 +0000</pubDate>
				<category><![CDATA[SWELL]]></category>
		<category><![CDATA[ブログ]]></category>
		<guid isPermaLink="false">https://kotsublog.org/?p=2196</guid>

					<description><![CDATA[<p><img src="https://kotsublog.org/wp-content/uploads/2021/08/swell-castam-icatch.jpg" class="webfeedsFeaturedVisual" /></p>本記事想定読者 SWELL購入者 SWELLの購入を迷っている方 SWELLのカスタマイズ方法を知りたい方 本記事では、「SWELLのサイト型トップページ作成方法」について解説していきます。 「SWELLを購入したはいい [&#8230;]]]></description>
										<content:encoded><![CDATA[<p><img src="https://kotsublog.org/wp-content/uploads/2021/08/swell-castam-icatch.jpg" class="webfeedsFeaturedVisual" /></p>
<div class="wp-block-group is-style-crease"><div class="wp-block-group__inner-container">
<p><strong>本記事想定読者</strong></p>



<ul class="is-style-check_list"><li>SWELL購入者</li><li>SWELLの購入を迷っている方</li><li>SWELLのカスタマイズ方法を知りたい方</li></ul>
</div></div>



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



<p>本記事では、<strong>「<span class="swl-marker mark_yellow">SWELLのサイト型トップページ作成方法</span>」</strong>について解説していきます。</p>



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



<p>「SWELLを購入したはいいけど、カスタマイズ方法がわからない…」といった方はぜひ本記事を通してオシャレなトップページを作り込んでみてくださいね。</p>



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



<div class="wp-block-group has-swl-pale-02-background-color has-background"><div class="wp-block-group__inner-container">
<p class="has-text-align-center u-mb-ctrl u-mb-10"><strong>\ 当サイト使用テーマ /</strong></p>



<figure class="wp-block-image size-large is-resized u-mb-ctrl u-mb-0 is-style-shadow"><a href="https://swell-theme.com/download/?id=mtp6wzxc3r21abky"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/01/swell-広告.png" alt="" class="wp-image-1469" width="322" height="269"/></a></figure>



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



<div class="swell-block-button blue_ is-style-btn_shiny"><a href="https://swell-theme.com/download/?id=mtp6wzxc3r21abky" class="swell-block-button__link"><span>SWELL公式サイトへ »</span></a></div>
</div></div>



<h2 class="wp-block-heading">SWELLカスタマイズ | サイト型トップページとは？</h2>



<p class="has-swl-gray-background-color has-background">サイト型トップページとは、簡単に言えば<strong><span class="has-inline-color has-swl-deep-01-color">自分好みのトップページを作成すること</span></strong>を言います。</p>



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



<p>新着記事を並べるだけのデフォルトのトップページとは異なり、オシャレかつ読者がブログを回遊しやすいトップページを作り込めるのが魅力です。</p>



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



<p>例として当ブログの「デフォルトトップページ」と「サイト型トップページ」を比較するとこちら。</p>



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



<div class="wp-block-columns shadow_on">
<div class="wp-block-column">
<ul class="is-style-check_list"><li><meta charset="utf-8">デフォルトトップページ</li></ul>



<figure class="wp-block-image size-full is-resized is-style-desktop"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/08/toppage2.png" alt="" class="wp-image-2191" width="240" height="1926"/></figure>
</div>



<div class="wp-block-column">
<ul class="is-style-check_list"><li><meta charset="utf-8">サイト型トップページ</li></ul>



<figure class="wp-block-image size-full is-resized is-style-desktop"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/08/toppage1.png" alt="" class="wp-image-2188" width="240" height="3608"/></figure>
</div>
</div>



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



<p class="is-style-icon_announce">以下より、当ブログのカスタマイズを例に「サイト型トップページ」作成方法を解説していきます。</p>



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



<h2 class="wp-block-heading">SWELLカスタマイズ | ①ページ上段の設定</h2>



<h3 class="wp-block-heading">(1) ヘッダーロゴの設定 | Canvaでロゴを作成しよう！(任意)</h3>



<figure class="wp-block-image size-full is-style-border"><img decoding="async" width="2526" height="330" src="https://kotsublog.org/wp-content/uploads/2021/08/カスタムLogo.jpg" alt="" class="wp-image-2193" srcset="https://kotsublog.org/wp-content/uploads/2021/08/カスタムLogo.jpg 2526w, https://kotsublog.org/wp-content/uploads/2021/08/カスタムLogo-1536x201.jpg 1536w, https://kotsublog.org/wp-content/uploads/2021/08/カスタムLogo-2048x268.jpg 2048w" sizes="(max-width: 2526px) 100vw, 2526px" /></figure>



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



<p>　まずトップページ上部より「ヘッダーロゴ」の設定していきましょう。</p>



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



<p>　</p>



<h4 class="wp-block-heading">ロゴ作成は「Canva」</h4>



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



<p>ロゴ作成は色々なツールを用いて作成できますが、個人的には「<a href="https://www.canva.com/">Canva</a>」がおすすめ。<br><small class="mininote">※Canvaは無料で利用できます。</small></p>



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



<p>ロゴサイズはお好みで良いですが、決めきれない方は当ブログのロゴサイズと同様<strong>「<span class="has-inline-color has-swl-deep-01-color">950px×250px</span>」</strong>に設定しましょう。</p>



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



<div class="swell-block-capbox cap_box"><div class="cap_box_ttl"><i class="icon-check"></i><span>当ブログのロゴ</span></div><div class="cap_box_content">
<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/04/logp2.jpg" alt="" class="wp-image-1883" width="490" height="128"/></figure></div>
</div></div>



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



<p>お好みのロゴが作成できたら、アップロードして下記設定を行ってください。</p>



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



<p class="is-style-icon_pen">外観→カスタマイズ→ヘッダー→ロゴ画像の設定</p>



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



<div class="swell-block-capbox cap_box is-style-onborder_ttl"><div class="cap_box_ttl"><i class="icon-settings"></i><span><meta charset="utf-8">当ブログの設定例</span></div><div class="cap_box_content">
<p><meta charset="utf-8">画像サイズ(PC)：55<br>画像サイズ(PC追従ヘッダー)：48<br>画像サイズ(SP)：70</p>
</div></div>



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



<h3 class="wp-block-heading">(2) トップページのカスタマイズ </h3>



<p>続いて、<strong>「<span class="has-inline-color has-swl-deep-01-color">外観→カスタマイズ→トップページ</span>」</strong>の設定を行いましょう。</p>



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



<div class="swell-block-capbox cap_box is-style-onborder_ttl"><div class="cap_box_ttl"><i class="icon-settings"></i><span><meta charset="utf-8"><meta charset="utf-8">「外観→カスタマイズ→トップページ」でできる設定</span></div><div class="cap_box_content">
<ul class="is-style-check_list"><li><meta charset="utf-8"><meta charset="utf-8">メインビジュアル</li><li>記事スライダー</li><li>ピックアップバナー</li></ul>
</div></div>



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



<p>それぞれ1つずつ簡単に紹介します。お好みのものを設定してましょう。</p>



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



<h4 class="wp-block-heading">メインビジュアル</h4>



<figure class="wp-block-image size-full is-resized is-style-browser_mac"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/08/main-visual.jpg" alt="" class="wp-image-2189" width="609" height="335" srcset="https://kotsublog.org/wp-content/uploads/2021/08/main-visual.jpg 2560w, https://kotsublog.org/wp-content/uploads/2021/08/main-visual-1536x845.jpg 1536w, https://kotsublog.org/wp-content/uploads/2021/08/main-visual-2048x1126.jpg 2048w" sizes="(max-width: 609px) 100vw, 609px" /></figure>



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



<h4 class="wp-block-heading">記事スライダー</h4>



<figure class="wp-block-image size-full is-resized is-style-browser_mac"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/08/記事スライダー.jpg" alt="" class="wp-image-2194" width="669" height="296" srcset="https://kotsublog.org/wp-content/uploads/2021/08/記事スライダー.jpg 2504w, https://kotsublog.org/wp-content/uploads/2021/08/記事スライダー-1536x682.jpg 1536w, https://kotsublog.org/wp-content/uploads/2021/08/記事スライダー-2048x909.jpg 2048w" sizes="(max-width: 669px) 100vw, 669px" /></figure>



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



<h4 class="wp-block-heading">ピックアップバナー</h4>



<figure class="wp-block-image size-full is-resized is-style-browser_mac"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/08/pick-up-バナー.jpg" alt="" class="wp-image-2190" width="683" height="316" srcset="https://kotsublog.org/wp-content/uploads/2021/08/pick-up-バナー.jpg 2500w, https://kotsublog.org/wp-content/uploads/2021/08/pick-up-バナー-1536x710.jpg 1536w, https://kotsublog.org/wp-content/uploads/2021/08/pick-up-バナー-2048x947.jpg 2048w" sizes="(max-width: 683px) 100vw, 683px" /></figure>



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


<div class="swell-block-postLink">			<a href="https://kotsublog.org/swell-pickup-banner-setting/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">SWELLのピックアップバナー設定方法【画像付きで詳しく解説！】</span>
			</a>
		</div>


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



<h3 class="wp-block-heading">(3) お知らせバーの設置方法</h3>



<figure class="wp-block-image size-full is-resized is-style-browser_mac"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/08/お知らせバー.jpg" alt="" class="wp-image-2192" width="752" height="219" srcset="https://kotsublog.org/wp-content/uploads/2021/08/お知らせバー.jpg 2560w, https://kotsublog.org/wp-content/uploads/2021/08/お知らせバー-1536x448.jpg 1536w, https://kotsublog.org/wp-content/uploads/2021/08/お知らせバー-2048x597.jpg 2048w" sizes="(max-width: 752px) 100vw, 752px" /></figure>



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



<p class="is-style-icon_pen">お知らせバーは、<strong>「<span class="has-inline-color has-swl-deep-01-color">外観→カスタマイズ→サイト全体設定→お知らせバー</span>」</strong>から設定可能です。</p>



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



<p>お知らせバーは、ピックアップしたい記事など読者に読んでもらいたい記事を紹介する際に利用するのがおすすめ。</p>



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



<h2 class="wp-block-heading">SWELLカスタマイズ | ②ページ中段の設定・固定ページ作成</h2>



<figure class="wp-block-image size-full is-resized is-style-browser_mac"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/08/固定ページカスタマイズ.jpg" alt="" class="wp-image-2195" width="671" height="401" srcset="https://kotsublog.org/wp-content/uploads/2021/08/固定ページカスタマイズ.jpg 2536w, https://kotsublog.org/wp-content/uploads/2021/08/固定ページカスタマイズ-1536x918.jpg 1536w, https://kotsublog.org/wp-content/uploads/2021/08/固定ページカスタマイズ-2048x1224.jpg 2048w" sizes="(max-width: 671px) 100vw, 671px" /></figure>



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



<p>ここからは、固定ページを利用してトップページのメイン部分をカスタマイズしていきます。</p>



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



<h3 class="wp-block-heading">(1) 固定ページを作成 </h3>



<p>まずは、カスタマイズする為の必要な固定ページを2つ作成していきます。</p>



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



<div class="wp-block-group has-border -border04 has-swl-gray-background-color has-background"><div class="wp-block-group__inner-container">
<p class="u-mb-ctrl u-mb-20"><strong><span class="swl-marker mark_yellow">必須となる固定ページ</span></strong></p>



<ul class="u-mb-ctrl u-mb-20"><li><strong>新着記事ページ</strong>：新着記事を並べたページ、空ページ</li><li><strong>トップページ</strong>：カスタマイズするための固定ページ</li></ul>
</div></div>



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



<h4 class="wp-block-heading">新着記事ページの作成</h4>



<div class="wp-block-group has-border -border01"><div class="wp-block-group__inner-container">
<ol class="is-style-num_circle"><li>固定ページ→新規追加</li><li>名前：「新着記事」又は「記事一覧」<small class="mininote">※任意の名前でOK</small></li><li>URLスラッグ：「new-post」にする<small class="mininote">※任意のスラッグでOK</small></li></ol>
</div></div>



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



<div class="wp-block-group has-swl-gray-background-color has-background"><div class="wp-block-group__inner-container">
<div class="swell-block-step is-style-small" data-num-style="circle">
<div class="swell-block-step__item"><div class="swell-block-step__number"><span class="__shape u-col-main" role="presentation"></span><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-m">固定ページ→新規追加</div><div class="swell-block-step__body">
<figure class="wp-block-image size-full is-resized"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/08/new-post-step1.jpg" alt="" class="wp-image-2216" width="285" height="268"/></figure>
</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number"><span class="__shape u-col-main" role="presentation"></span><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-m">固定ページ編集→公開</div><div class="swell-block-step__body">
<figure class="wp-block-image size-full is-resized"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/08/new-post-step2.jpg" alt="" class="wp-image-2217" width="584" height="261" srcset="https://kotsublog.org/wp-content/uploads/2021/08/new-post-step2.jpg 2542w, https://kotsublog.org/wp-content/uploads/2021/08/new-post-step2-1536x689.jpg 1536w, https://kotsublog.org/wp-content/uploads/2021/08/new-post-step2-2048x918.jpg 2048w" sizes="(max-width: 584px) 100vw, 584px" /></figure>
</div></div>
</div>
</div></div>



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



<h4 class="wp-block-heading">トップページの作成</h4>



<p>こちらも上記と同様の手順で作成していきます。</p>



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



<div class="wp-block-group has-border -border01"><div class="wp-block-group__inner-container">
<ol class="is-style-num_circle"><li>固定ページ→新規追加</li><li>名前：「Home」又は「トップページ」<small class="mininote">※任意の名前でOK</small></li><li>URLスラッグ：「home」又は「top」にする<small class="mininote">※任意のスラッグでOK</small></li></ol>
</div></div>



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



<h4 class="wp-block-heading">作成後、固定ページの割り当て設定</h4>



<p class="is-style-icon_announce"><strong>「<span class="has-inline-color has-swl-deep-01-color">外観→カスタマイズ→WordPress設定→ホームページ設定</span>」</strong>より、ホームページの表示を固定ページにしましょう。</p>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p><meta charset="utf-8">固定ページにチェックしよう！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<p>それぞれ指定の固定ページを選択し、設定完了・カスタマイズ準備の完了です。</p>



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



<h3 class="wp-block-heading">(2) 固定ページの設定 (※例：当ブログ) </h3>


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>ここからは実際に作成した固定ページを編集し、トップページをカスタマイズしていくよ！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h3 class="wp-block-heading">カテゴリー別ブロックの作り方</h3>



<figure class="wp-block-image size-full is-resized is-style-browser_mac"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/08/カテゴリー.jpg" alt="" class="wp-image-2206" width="659" height="360" srcset="https://kotsublog.org/wp-content/uploads/2021/08/カテゴリー.jpg 2540w, https://kotsublog.org/wp-content/uploads/2021/08/カテゴリー-1536x838.jpg 1536w, https://kotsublog.org/wp-content/uploads/2021/08/カテゴリー-2048x1118.jpg 2048w" sizes="(max-width: 659px) 100vw, 659px" /></figure>



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



<div class="swell-block-capbox cap_box"><div class="cap_box_ttl"><i class="icon-settings"></i><span>設定方法</span></div><div class="cap_box_content">
<div class="swell-block-step is-style-big" data-num-style="vertical">
<div class="swell-block-step__item"><div class="swell-block-step__number u-col-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">「フルワイドブロック」を選択</div><div class="swell-block-step__body">
<figure class="wp-block-image size-full is-resized is-style-border"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/08/step1.png" alt="" class="wp-image-2212" width="646" height="291" srcset="https://kotsublog.org/wp-content/uploads/2021/08/step1.png 2558w, https://kotsublog.org/wp-content/uploads/2021/08/step1-1536x694.png 1536w, https://kotsublog.org/wp-content/uploads/2021/08/step1-2048x926.png 2048w" sizes="(max-width: 646px) 100vw, 646px" /></figure>
</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-col-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">見出しをつける</div><div class="swell-block-step__body">

</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-col-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">「カラムブロック」を選択</div><div class="swell-block-step__body">
<figure class="wp-block-image size-full is-resized is-style-border"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/08/step2.png" alt="" class="wp-image-2213" width="722" height="309" srcset="https://kotsublog.org/wp-content/uploads/2021/08/step2.png 2550w, https://kotsublog.org/wp-content/uploads/2021/08/step2-1536x658.png 1536w, https://kotsublog.org/wp-content/uploads/2021/08/step2-2048x877.png 2048w" sizes="(max-width: 722px) 100vw, 722px" /></figure>
</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-col-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">カラムごとに画像を挿入</div><div class="swell-block-step__body">

</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-col-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">画像ごとにリンクを設定</div><div class="swell-block-step__body">
<figure class="wp-block-image size-full is-resized is-style-border"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/08/picture→link.jpg" alt="" class="wp-image-2211" width="492" height="305"/></figure>
</div></div>
</div>
</div></div>



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



<h3 class="wp-block-heading">SWELL紹介ブロックの作り方</h3>



<figure class="wp-block-image size-full is-resized is-style-browser_mac"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/08/swell紹介.jpg" alt="" class="wp-image-2205" width="730" height="452" srcset="https://kotsublog.org/wp-content/uploads/2021/08/swell紹介.jpg 2546w, https://kotsublog.org/wp-content/uploads/2021/08/swell紹介-1536x951.jpg 1536w, https://kotsublog.org/wp-content/uploads/2021/08/swell紹介-2048x1268.jpg 2048w" sizes="(max-width: 730px) 100vw, 730px" /></figure>



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



<div class="swell-block-capbox cap_box"><div class="cap_box_ttl"><i class="icon-settings"></i><span>設定方法</span></div><div class="cap_box_content">
<div class="swell-block-step is-style-big" data-num-style="vertical">
<div class="swell-block-step__item"><div class="swell-block-step__number u-col-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">「フルワイドブロック」を選択</div><div class="swell-block-step__body">

</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-col-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">見出しをつける</div><div class="swell-block-step__body">

</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-col-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">「カラムブロック」を選択</div><div class="swell-block-step__body">
<figure class="wp-block-image size-full is-resized"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/08/swell-pickup-step1.jpg" alt="" class="wp-image-2218" width="617" height="301" srcset="https://kotsublog.org/wp-content/uploads/2021/08/swell-pickup-step1.jpg 2550w, https://kotsublog.org/wp-content/uploads/2021/08/swell-pickup-step1-1536x752.jpg 1536w, https://kotsublog.org/wp-content/uploads/2021/08/swell-pickup-step1-2048x1002.jpg 2048w" sizes="(max-width: 617px) 100vw, 617px" /></figure>
</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-col-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">それぞれのカラムを編集</div><div class="swell-block-step__body">
<figure class="wp-block-image size-full is-resized"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/08/swell-pickup-step②.jpg" alt="" class="wp-image-2219" width="618" height="403" srcset="https://kotsublog.org/wp-content/uploads/2021/08/swell-pickup-step②.jpg 1974w, https://kotsublog.org/wp-content/uploads/2021/08/swell-pickup-step②-1536x1004.jpg 1536w" sizes="(max-width: 618px) 100vw, 618px" /></figure>
</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-col-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">最下部は「ボタンブロック」＋「リンク」</div><div class="swell-block-step__body">

</div></div>
</div>
</div></div>



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



<h3 class="wp-block-heading">新着記事一覧の作り方</h3>



<figure class="wp-block-image size-full is-resized is-style-browser_mac"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/08/new-post.png" alt="" class="wp-image-2203" width="727" height="428" srcset="https://kotsublog.org/wp-content/uploads/2021/08/new-post.png 2518w, https://kotsublog.org/wp-content/uploads/2021/08/new-post-1536x904.png 1536w, https://kotsublog.org/wp-content/uploads/2021/08/new-post-2048x1205.png 2048w" sizes="(max-width: 727px) 100vw, 727px" /></figure>



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



<div class="swell-block-capbox cap_box"><div class="cap_box_ttl"><i class="icon-settings"></i><span>設定方法</span></div><div class="cap_box_content">
<div class="swell-block-step is-style-big" data-num-style="vertical">
<div class="swell-block-step__item"><div class="swell-block-step__number u-col-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l"><meta charset="utf-8">見出しをつける</div><div class="swell-block-step__body">

</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-col-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">「投稿リストブロック」を選択</div><div class="swell-block-step__body">

</div></div>
</div>
</div></div>



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



<h3 class="wp-block-heading">ピックアップ(人気)記事一覧の作り方</h3>



<figure class="wp-block-image size-full is-resized is-style-browser_mac"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/08/popular.png" alt="" class="wp-image-2204" width="727" height="422" srcset="https://kotsublog.org/wp-content/uploads/2021/08/popular.png 2544w, https://kotsublog.org/wp-content/uploads/2021/08/popular-1536x894.png 1536w, https://kotsublog.org/wp-content/uploads/2021/08/popular-2048x1191.png 2048w" sizes="(max-width: 727px) 100vw, 727px" /></figure>



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



<div class="swell-block-capbox cap_box"><div class="cap_box_ttl"><i class="icon-settings"></i><span>設定方法</span></div><div class="cap_box_content">
<div class="swell-block-step is-style-big" data-num-style="vertical">
<div class="swell-block-step__item"><div class="swell-block-step__number u-col-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l"><meta charset="utf-8">見出しをつける</div><div class="swell-block-step__body">

</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-col-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">「投稿リストブロック」を選択</div><div class="swell-block-step__body">

</div></div>
</div>
</div></div>



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



<h3 class="wp-block-heading">特集記事一覧の作り方</h3>



<figure class="wp-block-image size-full is-resized is-style-browser_mac"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/08/特集記事.png" alt="" class="wp-image-2208" width="750" height="400" srcset="https://kotsublog.org/wp-content/uploads/2021/08/特集記事.png 2534w, https://kotsublog.org/wp-content/uploads/2021/08/特集記事-1536x820.png 1536w, https://kotsublog.org/wp-content/uploads/2021/08/特集記事-2048x1093.png 2048w" sizes="(max-width: 750px) 100vw, 750px" /></figure>



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



<div class="swell-block-capbox cap_box"><div class="cap_box_ttl"><i class="icon-settings"></i><span>設定方法</span></div><div class="cap_box_content">
<div class="swell-block-step is-style-big" data-num-style="vertical">
<div class="swell-block-step__item"><div class="swell-block-step__number u-col-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">各ブロック編集</div><div class="swell-block-step__body">
<figure class="wp-block-image size-full"><img decoding="async" width="2534" height="1352" src="https://kotsublog.org/wp-content/uploads/2021/08/特集記事-step1.jpg" alt="" class="wp-image-2220" srcset="https://kotsublog.org/wp-content/uploads/2021/08/特集記事-step1.jpg 2534w, https://kotsublog.org/wp-content/uploads/2021/08/特集記事-step1-1536x820.jpg 1536w, https://kotsublog.org/wp-content/uploads/2021/08/特集記事-step1-2048x1093.jpg 2048w" sizes="(max-width: 2534px) 100vw, 2534px" /></figure>
</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-col-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">「グループ化」し「枠線」,「背景色」を設定</div><div class="swell-block-step__body">
<figure class="wp-block-image size-full"><img decoding="async" width="2534" height="1352" src="https://kotsublog.org/wp-content/uploads/2021/08/特集記事-step2.jpg" alt="" class="wp-image-2221" srcset="https://kotsublog.org/wp-content/uploads/2021/08/特集記事-step2.jpg 2534w, https://kotsublog.org/wp-content/uploads/2021/08/特集記事-step2-1536x820.jpg 1536w, https://kotsublog.org/wp-content/uploads/2021/08/特集記事-step2-2048x1093.jpg 2048w" sizes="(max-width: 2534px) 100vw, 2534px" /></figure>
</div></div>
</div>
</div></div>



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



<h2 class="wp-block-heading">SWELLカスタマイズ | ③ページ下段の設定</h2>



<figure class="wp-block-image size-full is-resized is-style-border"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/08/フッター.png" alt="" class="wp-image-2207" width="764" height="446" srcset="https://kotsublog.org/wp-content/uploads/2021/08/フッター.png 2554w, https://kotsublog.org/wp-content/uploads/2021/08/フッター-1536x896.png 1536w, https://kotsublog.org/wp-content/uploads/2021/08/フッター-2048x1195.png 2048w" sizes="(max-width: 764px) 100vw, 764px" /></figure>



<p class="has-swl-gray-background-color has-background">ページ下部・フッターの設定は、<strong>「<span class="has-inline-color has-swl-deep-01-color">外観→ウィジェット</span>」</strong>から設定していきます。</p>


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>自分好みに設定していきましょう。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h2 class="wp-block-heading">SWELLカスタマイズ | まとめ </h2>



<p class="has-swl-gray-background-color has-background">以上で<meta charset="utf-8">SWELLでのカスタマイズは終了です。お疲れ様でした！</p>



<p>本記事でお伝えしたカスタマイズはあくまで当サイトのブログデザインを元としています。</p>


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>ぜひ、SWELLの機能を駆使しながら個性あるブログデザインを追い求めてくださいね。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p>では今回は以上となります。最後まで読んでいただきありがとうございました。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>SWELLアフィリエイトの報酬額はいくら？誰でもできるの？【SWELLアフィリエイトをおすすめする4つの理由】</title>
		<link>https://kotsublog.org/swell-affiliate-program/</link>
		
		<dc:creator><![CDATA[こつくん]]></dc:creator>
		<pubDate>Sat, 15 May 2021 11:36:33 +0000</pubDate>
				<category><![CDATA[SWELL]]></category>
		<category><![CDATA[ブログ]]></category>
		<guid isPermaLink="false">https://kotsublog.org/?p=2046</guid>

					<description><![CDATA[<p><img src="https://kotsublog.org/wp-content/uploads/2021/05/swell-affiliate-top.jpg" class="webfeedsFeaturedVisual" /></p>こんなお悩みを解決します。 本記事を書く僕は、Wordpress有料テーマ「SWELL」を利用して2サイト運営しています。 早速結論ですが、SWELLのアフィリエイト報酬は￥3,300。 また、SWELLのアフィリエイト [&#8230;]]]></description>
										<content:encoded><![CDATA[<p><img src="https://kotsublog.org/wp-content/uploads/2021/05/swell-affiliate-top.jpg" class="webfeedsFeaturedVisual" /></p><div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/04/question.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/04/question.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>SWELLのアフィリエイトプログラムって購入者限定？他テーマ利用者でも利用できるの？報酬額はいくら？</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<p>こんなお悩みを解決します。</p>



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



<div class="swell-block-capbox cap_box is-style-onborder_ttl2"><div class="cap_box_ttl"><i class="icon-book"></i><span>本記事の内容</span></div><div class="cap_box_content">
<ul class="is-style-check_list"><li>SWELLアフィリエイトプログラム詳細</li><li>SWELLアフィリエイトプログラムはおすすめ！その理由とは？</li><li>SWELLアフィリエイトの始め方</li></ul>
</div></div>



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



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



<p class="is-style-icon_pen">本記事を書く僕は、Wordpress有料テーマ「SWELL」を利用して2サイト運営しています。</p>



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



<p>早速結論ですが、<strong>SWELLのアフィリエイト報酬は<span class="has-inline-color has-swl-deep-01-color">￥3,300</span>。</strong></p>



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



<p class="is-style-icon_info">また、SWELLのアフィリエイトプログラムについては<strong><span class="swl-marker mark_yellow">SWELL購入者のみ利用可能</span></strong>です。</p>



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



<p>なので他テーマユーザーの方はSWELLのアフィリエイトはできません…</p>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>ですがSWELLは魅力あるテーマなので、他テーマユーザーの方もぜひ最後まで読み進めてくださいね。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<p class="is-style-crease">本記事本編では、<strong><span class="swl-marker mark_yellow">SWELLアフィリエイトプログラムがおすすめな理由、そして始め方</span></strong>について丁寧に解説していきます。</p>



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



<h2 class="wp-block-heading">SWELLアフィリエイトプログラム詳細</h2>



<div class="wp-block-group has-border -border04"><div class="wp-block-group__inner-container">
<figure class="wp-block-image size-large is-resized u-mb-ctrl u-mb-20"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/01/swell-広告.png" alt="" class="wp-image-1469" width="438" height="365"/></figure>



<figure class="wp-block-table td_to_th_ u-mb-ctrl u-mb-20"><table><tbody><tr><td><span class="swl-fz u-fz-s">SWELLアフィリエイトプログラムおすすめ度</span></td><td><span class="c-reviewStars"><i class="icon-star-full"></i><i class="icon-star-full"></i><i class="icon-star-full"></i><i class="icon-star-full"></i><i class="icon-star-half"></i></span></td></tr><tr><td><span class="swl-fz u-fz-s">テーマ購入価格</span></td><td><span class="swl-fz u-fz-s">￥17,600</span></td></tr><tr><td><span class="swl-fz u-fz-s">アフィリエイト報酬額</span></td><td><span class="swl-fz u-fz-s">￥3,300</span></td></tr><tr><td><span class="swl-fz u-fz-s">その他詳細</span></td><td><span class="swl-fz u-fz-s">購入者のみアフィリエイト可能</span></td></tr></tbody></table></figure>



<div class="wp-block-columns">
<div class="wp-block-column">
<div class="swell-block-button is-style-btn_normal blue_ u-mb-ctrl u-mb-10 -size-l"><a href="https://swell-theme.com/" class="swell-block-button__link"><span>公式サイトはこちら »</span></a></div>
</div>



<div class="wp-block-column">
<div class="swell-block-button is-style-btn_normal red_ -size-l"><a href="https://kotsublog.org/swell-review/" class="swell-block-button__link"><span><strong>口コミ・</strong>評判はこちら »</span></a></div>
</div>
</div>
</div></div>



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



<p>まずSWELLアフィリエイトプログラムについてですが、詳細は上記の通り。</p>



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



<p class="is-style-icon_announce">冒頭でもお話しした通り、SWELLアフィリエイトプログラムは<strong><span class="has-inline-color has-swl-deep-01-color">購入者のみ利用可能</span></strong>で、<strong>報酬額は<span class="has-inline-color has-swl-deep-01-color">￥3,300</span></strong>です。</p>



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



<h4 class="wp-block-heading">他テーマのアフィリエイトプログラムと比較</h4>


<div class="c-scrollHint sp_"><span>スクロールできます <i class="icon-more_arrow"></i></span></div>
<figure data-table-scrollable="sp" class="wp-block-table td_to_th_ sp_scroll_"><table style="--table-width:1200px;"><tbody><tr><td><span class="swl-fz u-fz-s"><strong>テーマ</strong></span></td><td><span class="swl-fz u-fz-s"><strong>購入価格</strong></span></td><td><span class="swl-fz u-fz-s"><strong>アフィリエイト報酬額</strong></span></td><td><span class="swl-fz u-fz-s"><strong>その他詳細</strong></span></td></tr><tr><td><span class="swl-fz u-fz-s">SWELL</span></td><td><span class="swl-fz u-fz-s">￥17,600</span></td><td><span class="swl-fz u-fz-s">￥3,300</span></td><td><span class="swl-fz u-fz-s"><span class="has-inline-color has-swl-deep-01-color">購入者のみアフィリエイト可能</span></span></td></tr><tr><td><span class="swl-fz u-fz-s">AFFINGER</span></td><td><span class="swl-fz u-fz-s">￥14,800</span></td><td><span class="swl-fz u-fz-s">￥7,000</span></td><td><span class="swl-fz u-fz-s">ASPでの取り扱いあり<br><span class="swl-marker mark_yellow">購入者でなくてもアフィリエイト可能</span></span></td></tr><tr><td><span class="swl-fz u-fz-s">THE THOR</span></td><td><span class="swl-fz u-fz-s">￥16,280</span></td><td><span class="swl-fz u-fz-s">￥6,512</span></td><td><span class="swl-fz u-fz-s">ASPでの取り扱いあり<br><span class="swl-marker mark_yellow">購入者でなくてもアフィリエイト可能</span></span></td></tr><tr><td><span class="swl-fz u-fz-s">JIN</span></td><td><span class="swl-fz u-fz-s">￥14,800</span></td><td><span class="swl-fz u-fz-s">なし</span></td><td><span class="swl-fz u-fz-s">アフィリエイトなし</span></td></tr><tr><td><span class="swl-fz u-fz-s">SANGO</span></td><td><span class="swl-fz u-fz-s">￥11,000</span></td><td><span class="swl-fz u-fz-s">なし</span></td><td><span class="swl-fz u-fz-s">アフィリエイトなし</span></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>


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>誰もがアフィリエイトできてしまうテーマもある中、<strong>SWELLは購入者のみ</strong>。←これが1つの魅力でもあります。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h2 class="wp-block-heading">SWELLアフィリエイトプログラムはおすすめ！その理由とは？</h2>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/05/swell-recommend-reason.jpg" alt="" class="wp-image-2060" width="800"/></figure>



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



<p>SWELLアフィリエイトプログラムは購入者限定とは言え、とってもおすすめ。</p>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>テーマ買い替え、もしくは2サイト目を立ち上げるタイミングで購入するのに非常におすすめですよ！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<p>理由としては、以下の通り。</p>



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



<div class="swell-block-capbox cap_box is-style-onborder_ttl2"><div class="cap_box_ttl"><i class="icon-swell"></i><span>SWELLアフィリエイトプログラムがおすすめな理由</span></div><div class="cap_box_content">
<ol class="is-style-num_circle"><li>前提として、テーマ自体優秀</li><li>アフィリエイトをする上で競合が少ない</li><li>メールやSNSでのアフィリエイトも可能</li><li>アフィリエイトする上で利用できる機能が優秀</li></ol>
</div></div>



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



<p>では1つずつ解説していきますね。</p>



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



<h3 class="wp-block-heading">① 前提として、テーマ自体優秀</h3>



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



<p>まず前提として、SWELLはとても使いやすく装飾時間を短縮することができるテーマです。</p>



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



<p>なぜなら、<span class="swl-marker mark_yellow">SWELLは<strong><span class="has-inline-color has-swl-deep-01-color">ブロックエディタ対応</span></strong>のテーマ</span>だから。</p>



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



<p>従来のテーマ、または他テーマの場合、クラシックエディタというものを利用しておりHTMLやCSS言語の知識が必要とされています。</p>



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



<p class="is-style-crease">が、ブロックエディタの場合はそのような言語の知識がなくても問題なく、<strong><span class="swl-marker mark_yellow">マウス操作のみでの装飾が可能</span></strong>です。</p>



<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>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="WordPressテーマ『SWELL』でブロックエディターを使う様子" width="500" height="281" src="https://www.youtube.com/embed/j0M8PY6HsUA?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div></figure>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>ということで、SWELLは記事装飾の時短、そして楽しく記事が作れるという点で非常に優れたテーマです。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h3 class="wp-block-heading">②アフィリエイトをする上で競合が少ない</h3>



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



<p>繰り返しになりますが、SWELLのアフィリエイトプログラムは購入者限定のプログラム。ASP会社に登録して誰もがアフィリエイトできるというものではありません。</p>



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



<p>そういった意味で、<strong><span class="swl-marker mark_yellow">他テーマのアフィリエイトに比べ競合が少ない</span></strong>のも魅力です。</p>



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



<h3 class="wp-block-heading">③メールやSNSでのアフィリエイトも可能</h3>



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



<p>また、SWELLはブログのようなWeb媒体でのアフィリエイトに加えて、<strong><span class="swl-marker mark_yellow">メールやSNSでのアフィリエイトも可能</span></strong>です。</p>



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



<p>アフィリエイト方法に関する例を挙げると以下の通り。</p>



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



<figure class="wp-block-table td_to_th_"><table><tbody><tr><td></td><td><span class="swl-fz u-fz-s"><strong>添付URL</strong></span></td></tr><tr><td><span class="swl-fz u-fz-s">SWELL利用サイトの場合</span></td><td><span class="swl-fz u-fz-s">https://swell-theme.com/</span></td></tr><tr><td><span class="swl-fz u-fz-s">SWELL利用サイトでない場合 (SNSやメールなど)</span></td><td><span class="swl-fz u-fz-s">https://swell-theme.com/ <span class="has-inline-color has-swl-deep-01-color">SWELLER&#8217;S ID</span></span></td></tr></tbody></table></figure>



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



<p>注意点として、SWELL利用サイトでない場合には <span class="has-inline-color has-swl-deep-01-color">SWELLER’S ID</span> をURLの後ろにつける必要があります。</p>



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



<p class="is-style-icon_info">SWELLER’S IDについては、SWELL購入後SWELLER’S の会員となる際に配布されます。</p>



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



<h3 class="wp-block-heading">④アフィリエイトする上で利用できる機能が優秀</h3>



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



<p>さらに、SWELLはアフィリエイトする上で利用できる機能が優秀！以下紹介していきます。</p>



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



<div class="wp-block-group is-style-crease"><div class="wp-block-group__inner-container">
<ul class="is-style-check_list"><li>バナー型リンク</li><li>テキスト型リンク</li><li>広告型リンク</li><li>ランキング型リンク</li><li>Useful Block(プラグイン)型リンク</li></ul>
</div></div>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>SWELLは、アフィリエイトもしやすい！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h2 class="wp-block-heading">SWELLアフィリエイトの始め方</h2>



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



<div class="swell-block-capbox cap_box is-style-onborder_ttl2"><div class="cap_box_ttl"><i class="icon-check"></i><span>SWELLアフィリエイトの始め方</span></div><div class="cap_box_content">
<ol class="is-style-num_circle"><li>SWELLを購入する</li><li>SWELLER’S の会員になる</li><li>振込口座を設定する</li><li>アフィリエイトリンクを設置する</li></ol>
</div></div>



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



<p>SWELLアフィリエイトの始め方は上記の手順。以下丁寧に解説していきます。</p>



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



<h3 class="wp-block-heading">① SWELLを購入する</h3>



<div class="wp-block-group has-swl-main-thin-background-color has-background"><div class="wp-block-group__inner-container">
<div class="swell-block-step is-style-default" data-num-style="circle">
<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">SWELL購入ページへ</div><div class="swell-block-step__body">
<p class="u-mb-ctrl u-mb-20"><a href="https://swell-theme.com/download/?id=mtp6wzxc3r21abky"><strong>» SWELL購入ページへ</strong></a></p>



<figure class="wp-block-image size-large is-resized is-style-desktop"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/05/BUY-SWELL-1.jpg" alt="" class="wp-image-2070" width="600"/></figure>
</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">SWELLを購入する</div><div class="swell-block-step__body">
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<figure class="wp-block-image size-large is-resized is-style-shadow"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/05/BUY-SWELL-2.jpg" alt="" class="wp-image-2071" width="600" height="192"/></figure>



<figure class="wp-block-image size-large is-resized is-style-shadow"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/05/BUY-SWELL-3.jpg" alt="" class="wp-image-2072" width="600" height="216"/></figure>
</div></div>
</div>
</div></div>



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



<p class="is-style-icon_pen">WordPressへの導入方法については、<strong><a href="https://kotsublog.org/swell-review/#index_id9">SWELL導入手順</a> </strong>にて解説しているので合わせてご活用ください。</p>



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



<h3 class="wp-block-heading">② SWELLER’S の会員になる</h3>



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



<p>続いて、下記のリンクより「SWELLER&#8217; S」の会員登録を行いましょう。</p>



<p><a href="https://u.swell-theme.com/community/?foro=signup"><strong>» 会員登録ページ</strong></a></p>



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



<p class="is-style-icon_announce">会員登録する際のパスワードは、SWELL購入後に届くメールに記載されています。</p>



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



<h3 class="wp-block-heading">③ 振込口座を設定する</h3>



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



<p>SWELLER&#8217;S 会員登録が済んだら、「振込口座」の設定を済ませておきましょう。</p>



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



<h3 class="wp-block-heading">④ アフィリエイトリンクを設置する</h3>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>上記3つの設定が済んだら、アフィリエイト リンクを設置してアフィリエイト を始めましょう！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h2 class="wp-block-heading">SWELLは使い勝手、アフィリエイトプログラムともに優秀：まとめ</h2>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/05/swell-affiliate-summary.jpg" alt="" class="wp-image-2058" width="800"/></figure>



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



<p>以上、SWELLアフィリエイトプログラムについて解説してきました。</p>



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



<p class="is-style-icon_announce">結論、SWELLアフィリエイトプログラムは<strong><span class="has-inline-color has-swl-deep-01-color">購入者限定プログラム</span></strong>で、<strong>報酬額は<span class="has-inline-color has-swl-deep-01-color">￥3,300</span>。</strong></p>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>使い勝手も優秀ですよ。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<p>SWELLの詳細と感想にについては下記記事でも解説しているので合わせてチェックしてみてくださいね。</p>



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


<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/01/swell-merit-.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kotsublog.org/swell-review/">【本音レビュー】SWELLのメリット・デメリット【評判・導入手順についても解説します！】</a>
						<span class="p-blogCard__excerpt">WordPress有料テーマの導入を考えています。。最近「SWELL」というテーマをよく耳にするんですが、どんなテーマかよく知らないです…メリット・デメリット教えてください&#8230;</span>					</div>
				</div>
			</div>
		</div>


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



<p>では今回は以上となります。<br>最後まで読んでいただきありがとうございました。</p>



<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【SWELLユーザー必見！】サイトスピードを高速化・改善するための解決策4つ</title>
		<link>https://kotsublog.org/sitespeed-up-swell/</link>
		
		<dc:creator><![CDATA[こつくん]]></dc:creator>
		<pubDate>Sun, 18 Apr 2021 11:44:06 +0000</pubDate>
				<category><![CDATA[SWELL]]></category>
		<category><![CDATA[ブログ]]></category>
		<guid isPermaLink="false">https://kotsublog.org/?p=1942</guid>

					<description><![CDATA[<p><img src="https://kotsublog.org/wp-content/uploads/2021/04/sitespeed-blog-top.jpg" class="webfeedsFeaturedVisual" /></p>こんなお悩みを解決します。 本記事では、SWELLユーザー向けにサイトスピードの改善方法, 高速化するための対策を4つ紹介していきます。 事実、今回ご紹介する4つの対策で当ブログのサイトスピードは大幅改善しました。 ぜひ [&#8230;]]]></description>
										<content:encoded><![CDATA[<p><img src="https://kotsublog.org/wp-content/uploads/2021/04/sitespeed-blog-top.jpg" class="webfeedsFeaturedVisual" /></p><div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/04/question.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/04/question.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>・ブログ(サイト)が最近重いな…<br>・サイトスピードを改善して、高速化したい…<br>・サイトスピードで評判の高い「SWELL」へ移行したもののいまいちサイトスピードがよくない…</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></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>



<ul class="is-style-check_list u-mb-ctrl u-mb-10">
<li><strong>本記事の内容</strong></li>
</ul>



<div class="wp-block-group has-swl-gray-background-color has-background"><div class="wp-block-group__inner-container">
<ul class="-list-under-dashed is-style-default">
<li>サイトスピードとは？まずは測定してみよう</li>



<li>【SWELL編】サイトを高速化させる4つの方法</li>



<li>上記方法で改善しなかった場合の対処法</li>
</ul>
</div></div>



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



<p>本記事では、SWELLユーザー向けに<span class="swl-marker mark_yellow"><strong>サイトスピードの改善方法, 高速化</strong>するための対策を4つ紹介</span>していきます。</p>



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



<p>事実、今回ご紹介する4つの対策で当ブログのサイトスピードは大幅改善しました。</p>



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



<figure class="wp-block-image size-large is-style-browser_mac"><img decoding="async" width="1143" height="600" src="https://kotsublog.org/wp-content/uploads/2021/04/sitespeed-mobile-and-pc.jpg" alt="" class="wp-image-1936"/></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>



<p class="is-style-big_icon_memo">ちなみに、当ブログでは「<a href="https://px.a8.net/svt/ejp?a8mat=3BQI73+DUBUVU+50+5SI7RM">ConoHa WING</a>」というサーバー、そして有料テーマ「<a href="https://swell-theme.com/?id=mtp6wzxc3r21abky">SWELL</a>」を使用しています。<br>どちらもサイトスピードに高評価なのでぜひチェックしてみてくださいね。</p>



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



<p class="has-text-align-center u-mb-ctrl u-mb-10">▼当サイト使用テーマ▼</p>



<figure class="wp-block-image size-large is-resized u-mb-ctrl u-mb-0 is-style-shadow"><a href="https://swell-theme.com/download/?id=mtp6wzxc3r21abky"><img decoding="async" width="724" height="604" src="https://kotsublog.org/wp-content/uploads/2021/01/swell-広告.png" alt="" class="wp-image-1469" style="aspect-ratio:322/269"/></a></figure>



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



<div class="swell-block-button blue_ is-style-btn_shiny"><a href="https://swell-theme.com/download/?id=mtp6wzxc3r21abky" class="swell-block-button__link"><span>SWELL公式サイトへ »</span></a></div>



<h2 class="wp-block-heading">【重要】サイトスピードが遅いとSEOに影響します。</h2>



<figure class="wp-block-image size-large is-resized is-style-default"><img decoding="async" width="787" height="600" src="https://kotsublog.org/wp-content/uploads/2021/04/about-sitespeed.jpg" alt="" class="wp-image-1939" style="aspect-ratio:500/471"/></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>



<p class="has-border -border04">結論、<strong><span class="swl-marker mark_yellow">サイトスピードが遅いSEOに影響しますし、読者の離脱率も大幅アップ</span></strong>してしまいます。離脱率に関しては以下のデータがその影響を示しています。</p>



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



<blockquote class="wp-block-quote">
<p>・表示速度が1秒から3秒に落ちると、直帰率は32%上昇</p>



<p>・表示速度が1秒から5秒に落ちると、直帰率は90%上昇</p>



<p>・表示速度が1秒から6秒に落ちると、直帰率は106%上昇</p>



<p>・表示速度が1秒から7秒に落ちると、直帰率は113%上昇</p>



<p>・表示速度が1秒から10秒に落ちると、直帰率は123%上昇</p>
<cite>引用：<a href="https://www.suzukikenichi.com/blog/speed-matters-for-mobile-sites/">海外SEO情報ブログ</a></cite></blockquote>



<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">【まずは確認】実際にサイトスピードを測定してみよう！</h3>



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



<p class="is-style-icon_pen">サイトスピードは、<a href="https://developers.google.com/speed/pagespeed/insights/?hl=JA">PageSpeed Insights </a>で測定可能です。</p>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>まずは上記サイトにアクセスし測定してみよう！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<p>上記サイトでも表記されていますが、サイトスピードは以下のように評価されます。</p>



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



<div class="wp-block-group is-style-crease"><div class="wp-block-group__inner-container">
<ul class="-list-under-dashed is-style-default">
<li><span style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-01-color"><strong>0~49</strong></span>：Low</li>



<li><span style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-04-color"><strong>50~89</strong></span>：Medium</li>



<li><strong><span class="has-inline-color has-swl-deep-03-color">90~100</span></strong>：Good</li>
</ul>
</div></div>



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



<p>モバイルであれば「オレンジ」、PCであれば「緑」の範囲を目指したいところですね。</p>



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



<h2 class="wp-block-heading">【SWELL編】サイトスピードを高速化・改善させる4つの方法</h2>



<figure class="wp-block-image size-large is-resized"><img decoding="async" width="591" height="453" src="https://kotsublog.org/wp-content/uploads/2021/04/sitespeed-setting.jpg" alt="" class="wp-image-1948" style="width:500px"/></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>



<p>改善方法を一気にまとめると以下の通り。</p>



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



<div class="wp-block-group has-border -border01"><div class="wp-block-group__inner-container">
<ol class="is-style-num_circle">
<li>画像圧縮・軽量化</li>



<li>プラグイン：EWWW Image Optimizer 導入</li>



<li>プラグイン：WP Fastest Cache&nbsp; 導入</li>



<li>【SWELL限定】高速化設定</li>
</ol>
</div></div>



<p><small class="mininote">※1~3はテーマ関係なく全ての方が共通。4.のみSWELLの方限定です。</small></p>



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



<p>事実、今回紹介する方法を当ブログで実行したところサイトスピードを大幅改善することが出来ました。<small class="mininote">※詳細は冒頭で記載済み</small></p>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>皆さんもぜひ実行して、サイトスピード改善につとめてみてくださいね。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h3 class="wp-block-heading">改善策①：画像圧縮・軽量化</h3>



<figure class="wp-block-image size-large is-style-shadow"><img decoding="async" width="600" height="315" src="https://kotsublog.org/wp-content/uploads/2021/04/resize-and-upload.jpg" alt="" class="wp-image-1947"/></figure>



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



<p>まずは、<strong><span class="has-inline-color has-swl-deep-01-color">画像の軽量化</span></strong>です。やることは以下2点。</p>



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



<div class="wp-block-group has-border -border01"><div class="wp-block-group__inner-container">
<ol class="is-style-num_circle">
<li><a href="https://bulkresizephotos.com/ja?quality=1">Bulk Resize Photos</a></li>



<li><a href="https://tinypng.com/">Tiny PNG</a></li>
</ol>
</div></div>



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



<p>上記2ステップを行った画像をWordPressへアップロードすればOK！</p>



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



<p class="is-style-big_icon_point">ちなみに、<span class="swl-marker mark_yellow">画像は「<strong>.jpeg</strong>」で保存するとなお良い</span>です。.pngは高画質故にサイトスピードに影響してしまうので。</p>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>重すぎる画像は一旦消去して、アップロードし直しましょう。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h3 class="wp-block-heading">改善策②：EWWW Image Optimizer 導入</h3>



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



<p>続いて、「<a href="https://ja.wordpress.org/plugins/ewww-image-optimizer/">EWWW Image Optimizer</a>」というプラグインを導入です。</p>



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



<p class="is-style-icon_pen">EWWW Image Optimizerとは、画像を劣化させることなく自動で画像を圧縮してくれるプラグインのこと。</p>



<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">改善策③：WP Fastest Cache&nbsp; 導入</h3>



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



<p>高速化対策3点目は、「<a href="https://ja.wordpress.org/plugins/wp-fastest-cache/">WP Fastest Cache</a>」の導入。</p>



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



<p class="is-style-icon_pen">WP Fastest Cacheとは、不要なキャッシュを一括消去してくれるプラグインのこと。</p>



<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>



<blockquote class="wp-block-quote">
<p>キャッシュとは、データを一時的に保存することで、データの処理速度を速める考え方、仕組みのこと。何度も繰り返し利用するデータを読み込み速度の早い記憶装置に保存したり、それらを物理的に近くに置くことで処理速度を上げることができる。</p>
<cite>引用：<a href="https://it-trend.jp/words/cache#:~:text=%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%81%A8%E3%81%AF%E3%80%81%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92,%E9%80%9F%E3%82%81%E3%82%8B%E8%80%83%E3%81%88%E6%96%B9%E3%80%81%E4%BB%95%E7%B5%84%E3%81%BF%E3%81%AE%E3%81%93%E3%81%A8%E3%80%82&amp;text=%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%A7%E4%B8%80%E5%BA%A6%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%93,%E3%81%A8%E3%81%97%E3%81%A6%E5%88%A9%E7%94%A8%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%80%82">ITトレンド</a></cite></blockquote>



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



<p>WP Fastest Cacheを設定することで、サイト高速化がさらに期待できますよ。</p>



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



<h3 class="wp-block-heading">改善策④：【SWELL限定】高速化設定</h3>



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



<p>最後は、SWELLユーザー限定の高速化設定。</p>



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



<p>設定方法については下記に従えばOKです。</p>



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



<p class="is-style-icon_pen"><strong>「SWELL設定 &gt;&gt; 高速化」</strong>より設定していきましょう。</p>



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



<h4 class="wp-block-heading">キャッシュ機能</h4>



<div class="wp-block-columns">
<div class="wp-block-column" style="flex-basis:66.66%">
<figure class="wp-block-image size-large is-style-border"><img decoding="async" width="872" height="600" src="https://kotsublog.org/wp-content/uploads/2021/04/swell-speed-cash.jpg" alt="" class="wp-image-1935"/></figure>
</div>



<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%">
<p>全てにチェック(<img src="https://s.w.org/images/core/emoji/14.0.0/72x72/2714.png" alt="✔" class="wp-smiley" style="height: 1em; max-height: 1em;" />)を入れればOK！</p>
</div>
</div>



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



<h4 class="wp-block-heading">遅延読み込み機能</h4>



<div class="wp-block-columns">
<div class="wp-block-column" style="flex-basis:66.66%">
<figure class="wp-block-image size-large is-style-border"><img decoding="async" width="2560" height="381" src="https://kotsublog.org/wp-content/uploads/2021/04/swell-speed-file-scaled.jpg" alt="" class="wp-image-1934" srcset="https://kotsublog.org/wp-content/uploads/2021/04/swell-speed-file-scaled.jpg 2560w, https://kotsublog.org/wp-content/uploads/2021/04/swell-speed-file-1536x229.jpg 1536w, https://kotsublog.org/wp-content/uploads/2021/04/swell-speed-file-2048x305.jpg 2048w" sizes="(max-width: 2560px) 100vw, 2560px" /></figure>
</div>



<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%">
<p>こちらもチェック(<img src="https://s.w.org/images/core/emoji/14.0.0/72x72/2714.png" alt="✔" class="wp-smiley" style="height: 1em; max-height: 1em;" />)を入れればOK！</p>
</div>
</div>



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



<h4 class="wp-block-heading">ファイルの読み込み</h4>



<div class="wp-block-columns">
<div class="wp-block-column" style="flex-basis:66.66%">
<figure class="wp-block-image size-large is-style-border"><img decoding="async" width="1272" height="600" src="https://kotsublog.org/wp-content/uploads/2021/04/swell-speed-lated.jpg" alt="" class="wp-image-1933"/></figure>
</div>



<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%">
<p>難しい設定ではありますが、画像通りチェック(<img src="https://s.w.org/images/core/emoji/14.0.0/72x72/2714.png" alt="✔" class="wp-smiley" style="height: 1em; max-height: 1em;" />)を入れればOK！</p>



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



<p class="is-style-big_icon_caution">万が一、不具合がみられる場合は随時変更しましょう。</p>
</div>
</div>



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



<h4 class="wp-block-heading">ページ遷移高速化</h4>



<div class="wp-block-columns">
<div class="wp-block-column" style="flex-basis:66.66%">
<figure class="wp-block-image size-large is-resized is-style-border"><img decoding="async" width="860" height="600" src="https://kotsublog.org/wp-content/uploads/2021/04/swell-speed-page.jpg" alt="" class="wp-image-1932" style="aspect-ratio:579/403"/></figure>
</div>



<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%">
<p>最後の設定になりますが、こちらも画像の通り「Prefetch」にチェック(<img src="https://s.w.org/images/core/emoji/14.0.0/72x72/2714.png" alt="✔" class="wp-smiley" style="height: 1em; max-height: 1em;" />)を入れればOK！</p>



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



<blockquote class="wp-block-quote">
<p>Prefetchに対応していないIEやSafariuでは動作しないので高速化しないブラウザには制限がありますが、Pjaxとは違ってプラグインなどで追加するスクリプトに制限がかかりません。</p>
<cite>引用：<a href="https://swell-theme.com/function/5978/#index_id2">SWELL公式サイト</a></cite></blockquote>
</div>
</div>



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



<h2 class="wp-block-heading">上記方法で改善しなかった場合の対処法</h2>



<figure class="wp-block-image size-large is-resized is-style-default"><img decoding="async" width="1039" height="600" src="https://kotsublog.org/wp-content/uploads/2021/04/other-plan.jpg" alt="" class="wp-image-1938" style="width:800px"/></figure>



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



<p>上記対策でサイトスピードに改善がみられなかった場合は、以下2つの対処法をお試しください。</p>



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



<div class="wp-block-group has-border -border01"><div class="wp-block-group__inner-container">
<ol class="is-style-num_circle">
<li>フォント設定・変更</li>



<li>不要なプラグインを消す</li>
</ol>
</div></div>



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



<p>フォントに関しては「Noto sant JP」を使用しているとサイトスピードに影響が出てしまいます…</p>



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



<p>なので、<span class="swl-marker mark_yellow"><strong>「遊ゴシック」</strong>等のフォントに変更するのがベスト</span>。</p>



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



<p class="has-border -border04">また、<strong><span class="swl-marker mark_yellow">不要なプラグインは消去</span></strong>して必要最低限にすることもサイトスピード改善には必須です。</p>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>以上2点について改善し、再度サイトスピードを計測してみてくださいね。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h4 class="wp-block-heading">それでも改善しなかった場合は…</h4>



<p class="is-style-crease">上記2点を試しても尚改善がみられなかった場合は、「サーバー」または「有料テーマ」を変更・購入するのが1つの改善策です。</p>



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



<p class="is-style-big_icon_point">おすすめは当ブログも使用している「サーバー：<a href="https://px.a8.net/svt/ejp?a8mat=3BQI73+DUBUVU+50+5SI7RM">ConoHa WING</a>」、「有料テーマ：<a href="https://swell-theme.com/?id=mtp6wzxc3r21abky">SWELL</a>」。</p>



<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>


<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/01/swell-merit-.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kotsublog.org/swell-review/">【本音レビュー】SWELLのメリット・デメリット【評判・導入手順についても解説します！】</a>
						<span class="p-blogCard__excerpt">WordPress有料テーマの導入を考えています。。最近「SWELL」というテーマをよく耳にするんですが、どんなテーマかよく知らないです…メリット・デメリット教えてください&#8230;</span>					</div>
				</div>
			</div>
		</div>

<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/01/WorPress開設方法-.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kotsublog.org/wordpress-start/">【ブログ初心者必見】WordPress開設方法 | 最短10分で完了</a>
						<span class="p-blogCard__excerpt">ブログ初心者です。。WordPressの基礎知識が何もないんですが、簡単にWordPressを開設できる方法が知りたいです… こんなお悩みを解決します。 本記事の内容 WordPressの&#8230;</span>					</div>
				</div>
			</div>
		</div>


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



<h2 class="wp-block-heading">まとめ：サイトスピードは読者にも、SEOにも関係あり！改善必須！</h2>



<figure class="wp-block-image size-large is-resized is-style-shadow"><img decoding="async" width="1200" height="630" src="https://kotsublog.org/wp-content/uploads/2021/01/Q-A.jpg" alt="" class="wp-image-1654" style="width:800px"/></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>



<p class="has-border -border04">結論、冒頭でも述べたように<strong><span class="swl-marker mark_yellow">サイトの高速化は<span class="has-inline-color has-swl-deep-01-color">読者離脱率</span>に直結しますし、<span class="has-inline-color has-swl-deep-01-color">SEO</span>にも影響してきます。</span></strong></p>



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



<p>なので、随時「<a href="https://developers.google.com/speed/pagespeed/insights/?hl=JA">PageSpeed Insights</a>」でページ速度を確認し改善することが重要です。今後も意識しながらブログ運営に励んでいきましょう。</p>



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



<div class="swell-block-fullWide pc-py-60 sp-py-40 alignfull" style="background-color:#e6f9fc"><div class="swell-block-fullWide__inner l-container">
<h4 class="wp-block-heading has-text-align-left is-style-default u-mb-ctrl u-mb-20"><span class="swl-fz u-fz-s"><span class="swl-marker mark_yellow">本記事のまとめ</span></span></h4>



<p class="has-text-align-left">サイト高速化は下記4点を実行し、改善してみよう！</p>



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



<ol class="-list-under-dashed is-style-num_circle">
<li>画像圧縮・軽量化</li>



<li>プラグイン：EWWW Image Optimizer 導入</li>



<li>プラグイン：WP Fastest Cache&nbsp; 導入</li>



<li>【SWELL限定】高速化設定</li>
</ol>
</div></div>



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



<p>では今回は以上となります。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>SWELLのピックアップバナー設定方法【画像付きで詳しく解説！】</title>
		<link>https://kotsublog.org/swell-pickup-banner-setting/</link>
		
		<dc:creator><![CDATA[こつくん]]></dc:creator>
		<pubDate>Sun, 27 Dec 2020 11:04:25 +0000</pubDate>
				<category><![CDATA[SWELL]]></category>
		<category><![CDATA[ブログ]]></category>
		<guid isPermaLink="false">https://kotsublog.org/?p=1022</guid>

					<description><![CDATA[<p><img src="https://kotsublog.org/wp-content/uploads/2020/12/アイキャッチ-4.jpg" class="webfeedsFeaturedVisual" /></p>SWELLのピックアップバナー設定方法]]></description>
										<content:encoded><![CDATA[<p><img src="https://kotsublog.org/wp-content/uploads/2020/12/アイキャッチ-4.jpg" class="webfeedsFeaturedVisual" /></p>
<div style="height:1px" aria-hidden="true" class="wp-block-spacer"></div>



<div class="wp-block-group is-style-crease"><div class="wp-block-group__inner-container">
<p class="u-mb-ctrl u-mb-20"><strong><span class="swl-marker mark_yellow">本記事想定読者</span></strong></p>



<ul class="is-style-check_list"><li>SWELLのピックアップバナーの設置がしたいけど設定方法がわからない…</li></ul>
</div></div>



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



<p>本記事では、<strong><span class="has-inline-color has-swl-deep-01-color">SWELLのピックアップバナーの設定方法</span></strong>について画像付きで詳しく解説していきます。</p>



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



<p>ちなみに当サイトでもピックアップバナーを取り入れており、<a href="https://kotsublog.org/">Home</a> は下記のような感じです。</p>



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



<div class="wp-block-image is-style-border"><figure class="alignleft size-large is-resized"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2020/12/サイト紹介.png" alt="" class="wp-image-1023" width="614" height="196" srcset="https://kotsublog.org/wp-content/uploads/2020/12/サイト紹介.png 2456w, https://kotsublog.org/wp-content/uploads/2020/12/サイト紹介-1536x490.png 1536w, https://kotsublog.org/wp-content/uploads/2020/12/サイト紹介-2048x654.png 2048w" sizes="(max-width: 614px) 100vw, 614px" /><figcaption>※旧ブログデザインとなります。ご了承ください。</figcaption></figure></div>



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



<p>SWELLでピックアップバナーを設置することで得られる<strong><span class="swl-marker mark_yellow">メリット</span></strong>は以下の通り。</p>



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



<div class="wp-block-group has-border -border04"><div class="wp-block-group__inner-container">
<ul class="is-style-check_list -list-under-dashed"><li>見て欲しい記事をピックアップできる</li><li>クリック率上昇が期待できる</li><li>デザインが整って美しい</li></ul>
</div></div>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>SWELLユーザーの方、ぜひ読み進めて見てくださいね。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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


<div class="swell-block-postLink">			<a href="https://kotsublog.org/swell-review/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【本音レビュー】SWELLのメリット・デメリット【評判・導入手順についても解説します！】</span>
			</a>
		</div>


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



<h2 class="wp-block-heading">ピックアップバナーとは？</h2>



<div class="wp-block-group has-swl-gray-background-color has-background"><div class="wp-block-group__inner-container">
<figure class="wp-block-image size-large is-style-shadow u-mb-ctrl u-mb-20"><img decoding="async" width="2440" height="436" src="https://kotsublog.org/wp-content/uploads/2020/12/ピックアップバナーとは.png" alt="" class="wp-image-1034" srcset="https://kotsublog.org/wp-content/uploads/2020/12/ピックアップバナーとは.png 2440w, https://kotsublog.org/wp-content/uploads/2020/12/ピックアップバナーとは-1536x274.png 1536w, https://kotsublog.org/wp-content/uploads/2020/12/ピックアップバナーとは-2048x366.png 2048w" sizes="(max-width: 2440px) 100vw, 2440px" /><figcaption>ピックアップバナー</figcaption></figure>



<p>「ピックアップバナー」とは、上記画像のように<strong><span class="has-inline-color has-swl-deep-01-color">特定の記事</span></strong>をトップページへピックアップするバナーのことを言います。</p>
</div></div>



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



<p>冒頭の繰り返しにはなってしまいますが、このピックアップバナーを設定することで以下のようなメリットが得られます。</p>



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



<div class="wp-block-group has-border -border04"><div class="wp-block-group__inner-container">
<ul class="is-style-check_list -list-under-dashed"><li>見て欲しい記事をピックアップできる</li><li>クリック率上昇が期待できる</li><li>デザインが整って美しい</li></ul>
</div></div>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>当サイトはもともと記事スライダーをメインに使っていたのですが、ピックアップバナーの方が気に入っています！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<p>実際の、<span class="swl-marker mark_yellow"><strong>記事スライダー</strong>と<strong>ピックアップバナー</strong>のデザイン比較</span>は以下の通りです。</p>



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



<div class="wp-block-group has-border -border03 has-swl-gray-background-color has-background"><div class="wp-block-group__inner-container">
<div class="wp-block-columns">
<div class="wp-block-column">
<ul><li>記事スライダー(過去の当サイト①)</li></ul>



<figure class="wp-block-image size-large is-resized is-style-border"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2020/12/記事スライダー.png" alt="" class="wp-image-1035" width="362" height="157" srcset="https://kotsublog.org/wp-content/uploads/2020/12/記事スライダー.png 2518w, https://kotsublog.org/wp-content/uploads/2020/12/記事スライダー-1536x666.png 1536w, https://kotsublog.org/wp-content/uploads/2020/12/記事スライダー-2048x888.png 2048w" sizes="(max-width: 362px) 100vw, 362px" /></figure>
</div>



<div class="wp-block-column">
<ul><li>ピックアップバナー(過去の当サイト②)</li></ul>



<figure class="wp-block-image size-large is-resized is-style-border"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2020/12/ピックアップバナー.png" alt="" class="wp-image-1036" width="434" height="169" srcset="https://kotsublog.org/wp-content/uploads/2020/12/ピックアップバナー.png 2536w, https://kotsublog.org/wp-content/uploads/2020/12/ピックアップバナー-1536x600.png 1536w, https://kotsublog.org/wp-content/uploads/2020/12/ピックアップバナー-2048x799.png 2048w" sizes="(max-width: 434px) 100vw, 434px" /></figure>
</div>
</div>
</div></div>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>ピックアップバナーの方が好みの方はぜひ、以下より設定していきましょう〜！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h2 class="wp-block-heading">SWELLのピックアップバナー設定方法</h2>



<figure class="wp-block-image size-large is-resized is-style-default"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2020/12/設定方法.png" alt="" class="wp-image-1044" width="332" height="332" srcset="https://kotsublog.org/wp-content/uploads/2020/12/設定方法.png 2000w, https://kotsublog.org/wp-content/uploads/2020/12/設定方法-1536x1536.png 1536w" sizes="(max-width: 332px) 100vw, 332px" /><figcaption>SWELLのピックアップバナー設定方法</figcaption></figure>



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



<p>SWELLのピックアップバナー設定の手順を簡単にまとめると以下の通り。</p>



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



<div class="wp-block-group is-style-emboss_box has-swl-gray-background-color has-background"><div class="wp-block-group__inner-container">
<p><i class="icon-settings"></i>  設定手順</p>



<ol class="is-style-num_circle"><li>事前準備：使用する画像を用意</li><li>ピックアップバナー用のカスタムメニュー作成</li><li>ピックアップバナーデザイン設定</li></ol>
</div></div>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>では以下より早速設定していきましょう。<br>画像付きで詳しく解説していきます！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h3 class="wp-block-heading">① 事前準備：使用する画像を用意</h3>



<p>まず、事前準備として使用する画像を用意します。</p>



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



<p class="is-style-icon_announce"><span class="swl-marker mark_yellow">使用する複数の画像は、<strong><span class="has-inline-color has-swl-deep-01-color">サイズを統一</span></strong>しておきましょう！</span><br>統一にしていないと、下記の画像のように型崩れしてしまいます…</p>



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



<div class="swell-block-capbox cap_box is-style-onborder_ttl" data-colset="col3"><div class="cap_box_ttl"><i class="icon-quill"></i><span>サイズ統一しないで画像を用いた場合</span></div><div class="cap_box_content">
<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2020/12/画像サイズが異なる-1.png" alt="" class="wp-image-1039" width="669" height="263" srcset="https://kotsublog.org/wp-content/uploads/2020/12/画像サイズが異なる-1.png 2512w, https://kotsublog.org/wp-content/uploads/2020/12/画像サイズが異なる-1-1536x604.png 1536w, https://kotsublog.org/wp-content/uploads/2020/12/画像サイズが異なる-1-2048x806.png 2048w" sizes="(max-width: 669px) 100vw, 669px" /></figure>
</div></div>



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



<p>サイズを統一させた画像を用意した後は、<strong><span class="swl-marker mark_yellow">WordPressへ画像をアップロードし、<span class="has-inline-color has-swl-deep-01-color">画像アドレス</span>をメモ・保管</span></strong>しておきましょう。</p>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>画像アドレスは、<strong>②ピックアップバナー用のカスタムメニュー作成</strong>の際に必要です。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h3 class="wp-block-heading">② ピックアップバナー用のカスタムメニュー作成</h3>



<p>ではここから、実際に<strong><span class="swl-marker mark_yellow">ピックアップバナー用のカスタムメニュー作成</span></strong>の設定をしていきます！</p>



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



<p>以下の手順で進めていきましょう。</p>



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



<div class="swell-block-step is-style-big" data-num-style="vertical">
<div class="swell-block-step__item"><div class="swell-block-step__number u-col-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">外観→メニュー</div><div class="swell-block-step__body">
<figure class="wp-block-image size-large is-resized is-style-border"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2020/12/外観→メニュー.png" alt="" class="wp-image-1024" width="390" height="270"/></figure>
</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-col-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">新しいメニューを作成する</div><div class="swell-block-step__body">
<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2020/12/新しいメニュー作成.png" alt="" class="wp-image-1025" width="546" height="255" srcset="https://kotsublog.org/wp-content/uploads/2020/12/新しいメニュー作成.png 2184w, https://kotsublog.org/wp-content/uploads/2020/12/新しいメニュー作成-1536x716.png 1536w, https://kotsublog.org/wp-content/uploads/2020/12/新しいメニュー作成-2048x955.png 2048w" sizes="(max-width: 546px) 100vw, 546px" /></figure>



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



<p class="is-style-icon_pen">①<strong>「新しいメニューを作成しましょう」</strong>をクリック<br>↓<br>②<strong>「ピックアップバナー」</strong>と入力<br>↓<br>③<strong>「メニュー作成」</strong>をクリック</p>



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



<div class="swell-block-step__item"><div class="swell-block-step__number u-col-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">任意のメニュー項目を追加する</div><div class="swell-block-step__body">
<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2020/12/メニュー追加.png" alt="" class="wp-image-1026" width="554" height="253" srcset="https://kotsublog.org/wp-content/uploads/2020/12/メニュー追加.png 2216w, https://kotsublog.org/wp-content/uploads/2020/12/メニュー追加-1536x700.png 1536w, https://kotsublog.org/wp-content/uploads/2020/12/メニュー追加-2048x933.png 2048w" sizes="(max-width: 554px) 100vw, 554px" /></figure>
</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-col-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">カスタムリンク内の設定</div><div class="swell-block-step__body">
<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2020/12/カスタムリンク.png" alt="" class="wp-image-1028" width="404" height="315" srcset="https://kotsublog.org/wp-content/uploads/2020/12/カスタムリンク.png 1616w, https://kotsublog.org/wp-content/uploads/2020/12/カスタムリンク-1536x1196.png 1536w" sizes="(max-width: 404px) 100vw, 404px" /></figure>



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



<div class="wp-block-group has-swl-gray-background-color has-background"><div class="wp-block-group__inner-container">
<p><i class="icon-pen"></i>  入力事項</p>



<div class="wp-block-group"><div class="wp-block-group__inner-container">
<ol class="is-style-num_circle"><li><strong>URL</strong><br>…ピックアップしたい記事 or カテゴリーのURL</li><li><strong>ナビゲーションラベル</strong><br>…ピックアップバナーの名前</li><li><strong>説明</strong><br>…画像アドレス (①事前準備で用意したもの)</li></ol>
</div></div>
</div></div>



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



<div class="wp-block-group is-style-big_icon_caution"><div class="wp-block-group__inner-container">
<div class="wp-block-columns">
<div class="wp-block-column">
<div class="wp-block-group"><div class="wp-block-group__inner-container">
<p><strong><span class="swl-marker mark_yellow">③の説明欄が表記されていない方へ</span></strong><br><br>上部にある<strong><span class="has-inline-color has-swl-deep-01-color">表示オプション</span>をクリック</strong>し、<strong><span class="has-inline-color has-swl-deep-01-color">説明</span>にチェックを入れる</strong>と表記されるようになります。</p>
</div></div>
</div>



<div class="wp-block-column">
<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2020/12/表示オプション.png" alt="" class="wp-image-1030" width="402" height="40" srcset="https://kotsublog.org/wp-content/uploads/2020/12/表示オプション.png 2210w, https://kotsublog.org/wp-content/uploads/2020/12/表示オプション-1536x154.png 1536w, https://kotsublog.org/wp-content/uploads/2020/12/表示オプション-2048x206.png 2048w" sizes="(max-width: 402px) 100vw, 402px" /></figure>
</div>
</div>
</div></div>



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



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



<div class="swell-block-step__item"><div class="swell-block-step__number u-col-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">メニューを保存する</div><div class="swell-block-step__body">
<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2020/12/メニュー保存.png" alt="" class="wp-image-1029" width="550" height="326" srcset="https://kotsublog.org/wp-content/uploads/2020/12/メニュー保存.png 2198w, https://kotsublog.org/wp-content/uploads/2020/12/メニュー保存-1536x911.png 1536w, https://kotsublog.org/wp-content/uploads/2020/12/メニュー保存-2048x1215.png 2048w" sizes="(max-width: 550px) 100vw, 550px" /></figure>



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



<p class="is-style-icon_pen"><strong><span class="swl-marker mark_yellow">ピックアップバナーにチェック</span></strong>をし、メニュー保存します。</p>



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



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>以上で基本事項の設定は完了です！<br>あとはデザインを整えていきましょう！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h3 class="wp-block-heading">③ ピックアップバナーデザイン設定</h3>



<p>ここからは、<strong><span class="swl-marker mark_yellow">ピックアップバナーのデザインを設定</span></strong>です。</p>



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



<p>以下の手順で、ピックアップバナーの<span class="has-inline-color has-swl-deep-01-color">デザイン設定場所</span>へいきます。</p>



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



<div class="wp-block-group is-style-bg_stripe"><div class="wp-block-group__inner-container">
<p><strong>外観<br>↓<br>カスタマイズ<br>↓<br>トップページ<br>↓<br>ピックアップバナー(<span class="has-inline-color has-swl-deep-01-color">デザイン設定場所</span>)<br>↓<br><span class="swl-marker mark_orange">デザイン変更</span></strong></p>
</div></div>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>好みにデザインにして、ピックアップバナーの完成です！<br>設定お疲れ様でした！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h2 class="wp-block-heading">まとめ</h2>



<p>今回は、<strong><span class="swl-marker mark_yellow">SWELLのピックアップバナーの設定方法</span></strong>についてご紹介してきました。</p>



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



<p>ピックアップバナーは見て欲しい記事をピックアップできると同時にデザインもより綺麗に整うので、設定がまだのSWELLユーザーの方はぜひ一度試して見てくださいね。</p>



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



<p>では今回は以上です。<br>最後まで読んでいただきありがとうございました。</p>



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



<div class="swell-block-button is-style-btn_line -size-l"><a href="https://kotsublog.org/" class="swell-block-button__link"><span>記事一覧へ</span></a></div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【本音レビュー】SWELLのメリット・デメリット【評判・導入手順についても解説します！】</title>
		<link>https://kotsublog.org/swell-review/</link>
					<comments>https://kotsublog.org/swell-review/#comments</comments>
		
		<dc:creator><![CDATA[こつくん]]></dc:creator>
		<pubDate>Sun, 15 Nov 2020 06:06:29 +0000</pubDate>
				<category><![CDATA[SWELL]]></category>
		<category><![CDATA[ブログ]]></category>
		<guid isPermaLink="false">https://kotsublog.org/?p=224</guid>

					<description><![CDATA[<p><img src="https://kotsublog.org/wp-content/uploads/2021/01/swell-merit-.jpg" class="webfeedsFeaturedVisual" /></p>こんなお悩みを解決します。 本記事を書く僕は、Wordpress有料テーマ「SWELL」を利用して2サイト運営しています。 SWELL は了さんが開発されたWordPress有料テーマであり、ここ最近では導入される方が多 [&#8230;]]]></description>
										<content:encoded><![CDATA[<p><img src="https://kotsublog.org/wp-content/uploads/2021/01/swell-merit-.jpg" class="webfeedsFeaturedVisual" /></p>
<div style="height:1px" aria-hidden="true" class="wp-block-spacer"></div>


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/04/question.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/04/question.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>WordPress有料テーマの導入を考えています。。<br>最近「SWELL」というテーマをよく耳にするんですが、どんなテーマかよく知らないです…<br>メリット・デメリット教えてください！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<p>こんなお悩みを解決します。</p>



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



<div class="swell-block-capbox cap_box is-style-onborder_ttl2"><div class="cap_box_ttl"><i class="icon-book"></i><span>本記事の内容</span></div><div class="cap_box_content">
<ul id="block-103c76e6-141d-40ef-be12-ac43945a6275" class="is-style-check_list"><li>SWELLのメリット・デメリット</li><li>SWELLの評判は？</li><li>SWELLはどんな人に向いているのか？</li><li>SWELLの導入手順</li></ul>
</div></div>



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



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



<p class="is-style-icon_pen">本記事を書く僕は、Wordpress有料テーマ「SWELL」を利用して2サイト運営しています。</p>



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



<p><a href="https://swell-theme.com/?id=mtp6wzxc3r21abky">SWELL</a> は了さんが開発されたWordPress有料テーマであり、ここ最近では導入される方が多く見受けられます。</p>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>まさに現在人気沸騰中のWPテーマで、当ブログでも愛用中のテーマ！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<p>そこで、今回はWPテーマ「<strong><span class="has-inline-color has-swl-deep-01-color">SWELL</span></strong>」についての<strong>メリット・デメリット、そして評判・導入手順</strong>までを解説していきます。</p>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>有料テーマの選択に迷っている方やSWELLが気になっている方はぜひ本記事を読み進めてみてくださいね。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<p class="has-text-align-center u-mb-ctrl u-mb-10">▼当サイト使用テーマ▼</p>



<figure class="wp-block-image size-large is-resized u-mb-ctrl u-mb-0 is-style-shadow"><a href="https://swell-theme.com/download/?id=mtp6wzxc3r21abky"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/01/swell-広告.png" alt="" class="wp-image-1469" width="322" height="269"/></a></figure>



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



<div class="swell-block-button blue_ is-style-btn_shiny"><a href="https://swell-theme.com/download/?id=mtp6wzxc3r21abky" class="swell-block-button__link"><span>SWELL公式サイトへ »</span></a></div>



<h2 class="wp-block-heading">【本音レビュー】SWELLのメリット・デメリット</h2>



<figure class="wp-block-image size-large is-resized is-style-shadow"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2020/11/SWELL.png" alt="" class="wp-image-255" width="2556" height="1078" srcset="https://kotsublog.org/wp-content/uploads/2020/11/SWELL.png 2556w, https://kotsublog.org/wp-content/uploads/2020/11/SWELL-1536x648.png 1536w, https://kotsublog.org/wp-content/uploads/2020/11/SWELL-2048x864.png 2048w" sizes="(max-width: 2556px) 100vw, 2556px" /><figcaption>WordPress有料テーマ「SWELL」について</figcaption></figure>



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



<p>結論、僕自身SWELLを導入したことで<strong><span class="swl-marker mark_yellow">記事作成の楽しさや記事の執筆速度アップ</span></strong>を痛感しています。</p>



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



<h4 class="wp-block-heading">SWELLの一番の魅力は「ブロックエディタ」！</h4>



<p class="has-swl-gray-background-color has-background">何といっても、SWELLは<strong>「<span class="has-inline-color has-swl-deep-01-color">ブロックエディタ</span>」</strong>での記事作成ができることが一番の魅力です。</p>



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



<div class="wp-block-group is-style-big_icon_memo"><div class="wp-block-group__inner-container">
<p><i class="icon-pen"></i> <strong>ブロックディター</strong>とは…</p>



<p>WordPress5.0から標準搭載となった機能で、Html・CSS言語を利用せずに画像や文章などが<span class="swl-marker mark_yellow">全てブロック単位で管理できるシステム</span>のことを言います。</p>
</div></div>



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



<p>実際の記事作成・装飾イメージは下記の動画を参照してみてください。</p>



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



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="WordPressテーマ『SWELL』でブロックエディターを使う様子" width="500" height="281" src="https://www.youtube.com/embed/j0M8PY6HsUA?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div></figure>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>素晴らしいですよね！CSS言語などのプログラミング知識がなくても抵抗なく記事装飾ができちゃうので特に初心者の方におすすめです (^ ^)</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<p>また、ブロックエディタでの記事作成ができることで、</p>



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



<ul class="is-style-check_list -list-under-dashed"><li><strong><span class="swl-marker mark_yellow">記事作成時間の短縮化</span></strong></li><li><strong><span class="swl-marker mark_yellow">楽しく記事作成ができる</span></strong></li></ul>



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



<p>こういった魅力を僕自身は感じています。</p>



<p>ではそんな<strong><span class="has-inline-color has-swl-deep-01-color">SWELLのメリット・デメリット</span></strong>を以下より紹介していきます。</p>



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



<h2 class="wp-block-heading">SWELLのデメリット</h2>



<figure class="wp-block-image size-large is-resized is-style-shadow"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/02/swell-demerit.jpg" alt="SWELLのデメリット" class="wp-image-1712" width="900" height="473"/><figcaption>SWELLのデメリット</figcaption></figure>



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



<div class="swell-block-capbox cap_box is-style-onborder_ttl2"><div class="cap_box_ttl"><i class="icon-thumb_down"></i><span>SWELLのデメリット</span></div><div class="cap_box_content">
<ol class="is-style-num_circle"><li>他のテーマに比べ値段が高い</li><li>利用者が少なめ</li></ol>
</div></div>



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



<p>では、1つずつ解説していきますね。</p>



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



<h3 class="wp-block-heading">デメリット①：値段が高め</h3>



<p class="has-swl-gray-background-color has-background">SWELLの値段は<strong>「<span class="has-inline-color has-swl-deep-01-color">17,600 円</span> (税込)」</strong>と、少々高めです。</p>



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



<figure class="wp-block-table is-style-regular"><table class="has-fixed-layout"><thead><tr><th>有料テーマ</th><th>値段</th></tr></thead><tbody><tr><td><span class="has-inline-color has-swl-deep-01-color">SWELL</span></td><td><span class="has-inline-color has-swl-deep-01-color">17,600 円</span>(税込)</td></tr><tr><td>AFFINGER</td><td>14,800 円(税込)</td></tr><tr><td>JIN</td><td>14,800 円(税込)</td></tr><tr><td>THE THOR</td><td>14,800 円(税込)</td></tr><tr><td>SANGO</td><td>11,000 円(税込)</td></tr></tbody></table><figcaption>有料テーマの値段一覧表</figcaption></figure>



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



<p>他テーマと比較しても高額ですよね</p>



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



<p class="has-swl-gray-background-color has-background">ただ、作業効率化という観点で見ればクラシックエディタ対応の他テーマよりもブロックエディタ対応のSWELLの方が優れているのは確かです。</p>



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



<p>なので、<strong>「<span class="has-inline-color has-swl-deep-01-color">値段より作業効率を重視したい！</span>」</strong>というのであればSWELLを検討するのは良い判断だと思います。</p>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>僕自身も効率化を重視してSWELL購入を決断しましたよ。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h3 class="wp-block-heading">デメリット②：利用者が少なめ</h3>



<p class="has-swl-gray-background-color has-background">デメリット2点目は、<strong>「利用者が少なめ」</strong>ということ。</p>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>利用者の多いテーマに比べれば、情報量の面で少々劣ってしまいます…</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<p>ですが、ここ最近ではSWELLを導入される方が増えてきているのも確かです。</p>



<p>なので、SWELLのカスタマイズ方法であったりのノウハウも増えてきているので、その点不安を抱える必要はありません。</p>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>また、<strong>SWELL購入者限定のフォーラム</strong>もあるので、不具合等が生じた際は質問対応をしてくださりますよ。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h2 class="wp-block-heading">SWELLのメリット</h2>



<figure class="wp-block-image size-large is-resized is-style-shadow"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/02/swell-merit.jpg" alt="SWELLのメリット" class="wp-image-1713" width="900" height="473"/><figcaption>SWELLのメリット</figcaption></figure>



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



<div class="swell-block-capbox cap_box is-style-onborder_ttl2"><div class="cap_box_ttl"><i class="icon-thumb_up"></i><span>SWELLのメリット</span></div><div class="cap_box_content">
<ol class="is-style-num_circle"><li>ブロックエディタが使いやすい</li><li>サイトスピードが良好</li></ol>
</div></div>



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



<p>こちらも1つずつ解説していきます。</p>



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



<h3 class="wp-block-heading">メリット①：ブロックエディタが使いやすい</h3>



<p class="has-swl-gray-background-color has-background">メリット1点目は<strong>「<span class="swl-marker mark_yellow">ブロックエディターが使いやすい</span>」</strong>ということです。</p>



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



<p>先ほどの動画の通り、ブロックエディタはほぼ<strong><span class="has-inline-color has-swl-deep-01-color">全ての操作がボタン(クリック)1つ</span></strong>でできてしまうのが大きな特徴となります。</p>



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



<p>例をあげると以下の通り。</p>



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



<div class="swell-block-capbox cap_box is-style-onborder_ttl" data-colset="col3"><div class="cap_box_ttl"><i class="icon-swell"></i><span>クリックひとつでできる装飾</span></div><div class="cap_box_content">
<p class="is-style-icon_good">Good！</p>



<p class="is-style-icon_bad">Bad <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/2935.png" alt="⤵" class="wp-smiley" style="height: 1em; max-height: 1em;" />︎</p>



<p class="is-style-icon_info">インフォメーション</p>



<p class="is-style-icon_announce">アナウンス</p>



<p class="is-style-icon_pen">ペン</p>



<p class="is-style-icon_book">本</p>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2020/12/指摘.png" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2020/12/指摘.png" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>吹き出しも！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>

<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2020/12/嬉しい.png" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2020/12/嬉しい.png" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>ワンクリックだよ！！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div></div></div>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>例として以上をあげましたが、他にも様々な装飾ができるのでデザイン性にも優れていますよ！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<p>ということでまとめますと、ブロックエディタが使やすいことで感じるメリットは加えて以下3点です。</p>



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



<div class="wp-block-group"><div class="wp-block-group__inner-container">
<ul class="is-style-check_list -list-under-dashed"><li><span class="swl-marker mark_yellow"><strong>記事作成がサクサク行える</strong></span></li><li><span class="swl-marker mark_yellow"><strong>装飾が簡単！</strong></span></li><li><strong><span class="swl-marker mark_yellow">記事作成が楽しい</span></strong></li></ul>
</div></div>



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



<p>まさに<strong>「<span class="has-inline-color has-swl-deep-01-color">作業効率化</span>」</strong>にはもってこいの有料テーマと言えます。</p>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>楽しんで記事作成できるという点では、長い目で見て非常に嬉しいメリットになりますよ。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h3 class="wp-block-heading">メリット②：サイトスピードが良好</h3>



<p class="has-swl-gray-background-color has-background">メリット2点目は、<strong>「<span class="swl-marker mark_yellow">サイトスピードが良好</span>」</strong>なところです。</p>



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



<p>以下の画像は、僕の当サイトと旧サイト(はてなブログ)のサイトスピードを比較でしたものなります。</p>



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



<div class="wp-block-columns">
<div class="wp-block-column">
<figure class="wp-block-image size-large is-style-border"><img decoding="async" width="2398" height="836" src="https://kotsublog.org/wp-content/uploads/2020/11/「Kotsu-Blog」サイトスピード-1.png" alt="" class="wp-image-231" srcset="https://kotsublog.org/wp-content/uploads/2020/11/「Kotsu-Blog」サイトスピード-1.png 2398w, https://kotsublog.org/wp-content/uploads/2020/11/「Kotsu-Blog」サイトスピード-1-1536x535.png 1536w, https://kotsublog.org/wp-content/uploads/2020/11/「Kotsu-Blog」サイトスピード-1-2048x714.png 2048w" sizes="(max-width: 2398px) 100vw, 2398px" /><figcaption>↑当サイトのサイトスピード</figcaption></figure>
</div>



<div class="wp-block-column">
<figure class="wp-block-image size-large is-style-border"><img decoding="async" width="2508" height="926" src="https://kotsublog.org/wp-content/uploads/2020/11/「こつこつブログ」サイトスピード.png" alt="" class="wp-image-232" srcset="https://kotsublog.org/wp-content/uploads/2020/11/「こつこつブログ」サイトスピード.png 2508w, https://kotsublog.org/wp-content/uploads/2020/11/「こつこつブログ」サイトスピード-1536x567.png 1536w, https://kotsublog.org/wp-content/uploads/2020/11/「こつこつブログ」サイトスピード-2048x756.png 2048w" sizes="(max-width: 2508px) 100vw, 2508px" /><figcaption>↑旧サイト(はてなブログ)のサイトスピード</figcaption></figure>
</div>
</div>



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



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>サイトスピードは、SEO評価や読者の離脱率にも関わってくることなので良好なのは大きなメリットになりますよ。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<p>とはいえですが、高画質な画像などアップロードしすぎるとサイトスピードは落ちてしまいます…。なので、普段から対策することも重要です。</p>



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



<p class="has-swl-gray-background-color has-background"><span class="swl-fz u-fz-xs"><span class="swl-bg-color has-swl-main-background-color">関連記事</span></span><span class="swl-fz u-fz-s"><strong>：<a href="https://kotsublog.org/sitespeed-up-swell/">【SWELLユーザー必見！】ブログを高速化するための解決策4つ | 当ブログで実行し、大幅改善した方法とは !?</a></strong></span></p>



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



<h2 class="wp-block-heading">SWELLの評判は？</h2>



<figure class="wp-block-image size-large is-resized is-style-shadow"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/02/swell-hyoubann.jpg" alt="" class="wp-image-1714" width="900" height="473"/><figcaption>SWELLの評判</figcaption></figure>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>SWELLの評判についても見ていきましょう〜。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h4 class="wp-block-heading">悪い評判</h4>



<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
<blockquote class="twitter-tweet" data-width="500" data-dnt="true"><p lang="ja" dir="ltr">くぅ…SWELL高い…</p>&mdash; てずか (@bouzuyahonpo) <a href="https://twitter.com/bouzuyahonpo/status/1357477216330739712?ref_src=twsrc%5Etfw">February 4, 2021</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div></figure>



<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
<blockquote class="twitter-tweet" data-width="500" data-dnt="true"><p lang="ja" dir="ltr">WordPressのテーマをSWELLにしてからストレス無く記事が書けてブログが楽しくなってきた<img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f633.png" alt="😳" class="wp-smiley" style="height: 1em; max-height: 1em;" />冴えないと思ってた記事も見栄えがよくなってやる気も<img src="https://s.w.org/images/core/emoji/14.0.0/72x72/2934.png" alt="⤴" class="wp-smiley" style="height: 1em; max-height: 1em;" />︎ちょっとお高いけどね。そのうちレビュー書く…！</p>&mdash; もにぃ@4歳<img src="https://s.w.org/images/core/emoji/14.0.0/72x72/2642.png" alt="♂" class="wp-smiley" style="height: 1em; max-height: 1em;" />0歳<img src="https://s.w.org/images/core/emoji/14.0.0/72x72/2640.png" alt="♀" class="wp-smiley" style="height: 1em; max-height: 1em;" />アラフォーママ<img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f337.png" alt="🌷" class="wp-smiley" style="height: 1em; max-height: 1em;" /> (@zazieee3) <a href="https://twitter.com/zazieee3/status/1355863805041860620?ref_src=twsrc%5Etfw">January 31, 2021</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div></figure>



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



<div class="wp-block-group has-swl-gray-background-color has-background"><div class="wp-block-group__inner-container">
<p>■ <span class="swl-marker mark_blue"><strong>悪い評判</strong></span></p>



<ul class="is-style-check_list"><li>値段が高い</li></ul>
</div></div>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>悪い評判についてはあまり見受けられませんでしたが、やはり値段が1つネックとなるポイントになりそうです…</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h4 class="wp-block-heading">良い評判</h4>



<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
https://twitter.com/pandatoblog/status/1359477928715636740
</div></figure>



<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
<blockquote class="twitter-tweet" data-width="500" data-dnt="true"><p lang="ja" dir="ltr">サイトスピードが爆上がりした<img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f633.png" alt="😳" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f633.png" alt="😳" class="wp-smiley" style="height: 1em; max-height: 1em;" /><br>モバイル：23→68<br>PC：76→94<br><br>cocoon→swell移行でまだなーんにもしてないんですけど…<br>ほんとにテーマ変えるだけでもこんな変わるもんなのね<img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f633.png" alt="😳" class="wp-smiley" style="height: 1em; max-height: 1em;" /><br>それにしても画像圧縮とか頑張っても全然変わらなかったあの苦労よ。</p>&mdash; にしきた｜ワーママブロガー (@nishikita12) <a href="https://twitter.com/nishikita12/status/1359740714758799363?ref_src=twsrc%5Etfw">February 11, 2021</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div></figure>



<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
<blockquote class="twitter-tweet" data-width="500" data-dnt="true"><p lang="ja" dir="ltr">SWELLで初めての記事投稿、ちょっと緊張しました<img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f440.png" alt="👀" class="wp-smiley" style="height: 1em; max-height: 1em;" /><br>書くスピードが上がったのは間違いない。ブロックエディタ完全対応の凄さを思い知りました。<br>ブログ楽しい…大変だけど<img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f923.png" alt="🤣" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>&mdash; つきみ<img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f319.png" alt="🌙" class="wp-smiley" style="height: 1em; max-height: 1em;" /> (@tsukiminimal) <a href="https://twitter.com/tsukiminimal/status/1342414656804012033?ref_src=twsrc%5Etfw">December 25, 2020</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div></figure>



<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
https://twitter.com/07kizuku/status/1357825244237467648
</div></figure>



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



<div class="wp-block-group has-swl-gray-background-color has-background"><div class="wp-block-group__inner-container">
<p>■ <span class="swl-marker mark_orange"><strong>良い評判</strong></span></p>



<ul class="is-style-check_list"><li>記事作成が楽しい</li><li>シンプルなデザイン</li><li>サイトスピードが良好</li><li>ブロックエディタ対応で記事作成が楽</li></ul>
</div></div>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>ブログ運営は長期戦になるので、やはり楽しく記事作成ができるのは大きな魅力ですね (^ ^)</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h2 class="wp-block-heading">SWELLはどんな人に向いているのか？</h2>



<figure class="wp-block-image size-large is-resized is-style-shadow"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/02/swell-man.jpg" alt="" class="wp-image-1715" width="900" height="473"/></figure>



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



<p>では、<strong><span class="swl-marker mark_yellow">どんな人が「SWELL」向き</span></strong>なのか解説していきます。早速まとめると以下の通りです。</p>



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



<div class="wp-block-group is-style-emboss_box"><div class="wp-block-group__inner-container">
<p class="u-mb-ctrl u-mb-20"><span class="swl-marker mark_orange"><i class="icon-swell"></i>   SWELLに向いている人</span></p>



<ul class="-list-under-dashed is-style-check_list"><li>ブロックエディターを使ってみたい</li><li>記事作成に時間をかけたくない</li><li>記事作成をサクサク行いたい</li><li>楽しく記事作成がしたい</li></ul>
</div></div>



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



<p>以上の方がSWELLに向いているかなと感じます。</p>



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



<p>「費用面」が少し難点かなとは感じますが、僕はその他メリットの方が優っているテーマだなと思っています。</p>



<p><a href="https://swell-theme.com/download/?id=mtp6wzxc3r21abky">&gt;&gt; SWELL公式サイトをチェックする</a></p>



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



<h2 class="wp-block-heading">SWELLの導入手順</h2>



<figure class="wp-block-image size-large is-resized is-style-shadow"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/02/swell-setting.jpg" alt="swell-setting" class="wp-image-1716" width="900" height="473"/></figure>



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



<p>では、ここから<strong><span class="swl-marker mark_yellow">SWELLの導入方法</span></strong>について解説していきます。</p>



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



<div class="wp-block-group is-style-emboss_box"><div class="wp-block-group__inner-container">
<p class="u-mb-ctrl u-mb-20"><i class="icon-settings"></i>   SWELL導入手順</p>



<ol class="is-style-num_circle -list-under-dashed"><li>公式サイトでテーマを購入</li><li>テーマをダウンロード</li><li>WordPressへ導入</li></ol>
</div></div>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>上記3ステップでできてしまいますので、焦らず一緒に進めていきましょう。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h3 class="wp-block-heading">① <strong>公式サイトでテーマを購入</strong></h3>



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



<p>まずは<strong>「テーマの購入」</strong>です。<br><a href="https://swell-theme.com/download/?id=mtp6wzxc3r21abky">&gt;&gt; 公式サイトでのテーマ「SWELL」の購入はこちらから</a></p>



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



<p>上記リンクから、以下のような画面になります。</p>



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



<figure class="wp-block-image size-large is-resized is-style-shadow"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2020/11/購入画面.png" alt="" class="wp-image-233" width="620" height="317" srcset="https://kotsublog.org/wp-content/uploads/2020/11/購入画面.png 2498w, https://kotsublog.org/wp-content/uploads/2020/11/購入画面-1536x785.png 1536w, https://kotsublog.org/wp-content/uploads/2020/11/購入画面-2048x1046.png 2048w" sizes="(max-width: 620px) 100vw, 620px" /><figcaption>SWELLを購入</figcaption></figure>



<p class="is-style-crease">①利用規約に同意　<img src="https://s.w.org/images/core/emoji/14.0.0/72x72/27a1.png" alt="➡" class="wp-smiley" style="height: 1em; max-height: 1em;" />︎　②「SWELLを購入する」をクリック</p>



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



<p>上記を完了後下記の画面になります。</p>



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



<figure class="wp-block-image size-large is-resized is-style-shadow"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2020/11/お支払い.png" alt="" class="wp-image-234" width="608" height="316" srcset="https://kotsublog.org/wp-content/uploads/2020/11/お支払い.png 2430w, https://kotsublog.org/wp-content/uploads/2020/11/お支払い-1536x798.png 1536w, https://kotsublog.org/wp-content/uploads/2020/11/お支払い-2048x1064.png 2048w" sizes="(max-width: 608px) 100vw, 608px" /><figcaption>必要な情報を入力→お支払い</figcaption></figure>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>必要な情報を入力し購入完了です！<br>次は <span class="swl-marker mark_orange">②テーマのダンロード</span> をしていきましょう。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h3 class="wp-block-heading">② テーマのダウンロード</h3>



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



<p>ここから、<strong>「テーマのダウンロード」</strong>に入ります。</p>



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



<p>購入が完了すると下記のようなメールが届きます。</p>



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



<figure class="wp-block-image size-large is-resized is-style-shadow"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2020/11/メール-1.png" alt="" class="wp-image-238" width="551" height="257" srcset="https://kotsublog.org/wp-content/uploads/2020/11/メール-1.png 1582w, https://kotsublog.org/wp-content/uploads/2020/11/メール-1-1536x717.png 1536w" sizes="(max-width: 551px) 100vw, 551px" /><figcaption>購入完了メール画面</figcaption></figure>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>添付してあるリンクからテーマをダウンロードしましょう！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<p class="is-style-icon_announce">ダウンロードファイルは、自分がわかりやすい場所に保存しておいてくださいね。</p>



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



<p>続いて、<strong><span class="has-inline-color has-swl-deep-01-color">SWELLの子テーマのダウンロード</span></strong>も行います。<br><a href="https://swell-theme.com/download/?id=mtp6wzxc3r21abky">&gt;&gt; こちらからダウンロード</a></p>



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



<p>リンクへ飛ぶと、下記のような子テーマのダウンロードが可能な画面になります。</p>



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



<figure class="wp-block-image size-large is-resized is-style-shadow"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2020/11/子テーマダウンロード-1.png" alt="" class="wp-image-239" width="589" height="306" srcset="https://kotsublog.org/wp-content/uploads/2020/11/子テーマダウンロード-1.png 2124w, https://kotsublog.org/wp-content/uploads/2020/11/子テーマダウンロード-1-1536x798.png 1536w, https://kotsublog.org/wp-content/uploads/2020/11/子テーマダウンロード-1-2048x1064.png 2048w" sizes="(max-width: 589px) 100vw, 589px" /><figcaption>子テーマダウンロード画面</figcaption></figure>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>クリックして、先ほど同様にダウンロードしましょう。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h3 class="wp-block-heading">③ WordPressへ導入</h3>



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



<p>ここまでで必要なファイルのダウンロードが完了したので、<strong><span class="swl-marker mark_yellow">WordPressへの導入</span></strong>をしていきます。</p>



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



<p class="is-style-big_icon_caution"><span class="swl-marker mark_yellow">親テーマ  <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/27a1.png" alt="➡" class="wp-smiley" style="height: 1em; max-height: 1em;" />︎  子テーマ</span>の順で導入していきましょう。</p>



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



<p>まずは、<strong>WordPressで親テーマを導入</strong>します。</p>



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



<figure class="wp-block-image size-large is-resized is-style-shadow"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2020/11/外観→テーマ→新規追加-1.png" alt="" class="wp-image-240" width="632" height="311" srcset="https://kotsublog.org/wp-content/uploads/2020/11/外観→テーマ→新規追加-1.png 2526w, https://kotsublog.org/wp-content/uploads/2020/11/外観→テーマ→新規追加-1-1536x756.png 1536w, https://kotsublog.org/wp-content/uploads/2020/11/外観→テーマ→新規追加-1-2048x1009.png 2048w" sizes="(max-width: 632px) 100vw, 632px" /><figcaption>外観・テーマ → 新規追加</figcaption></figure>



<p class="is-style-crease">①外観・テーマを選択　<img src="https://s.w.org/images/core/emoji/14.0.0/72x72/27a1.png" alt="➡" class="wp-smiley" style="height: 1em; max-height: 1em;" />︎　②新規追加をクリック</p>



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



<p>次に<strong>テーマのインストール</strong>です。</p>



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



<figure class="wp-block-image size-large is-resized is-style-shadow"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2020/11/ファイル選択→インストール.png" alt="" class="wp-image-241" width="575" height="346" srcset="https://kotsublog.org/wp-content/uploads/2020/11/ファイル選択→インストール.png 1892w, https://kotsublog.org/wp-content/uploads/2020/11/ファイル選択→インストール-1536x925.png 1536w" sizes="(max-width: 575px) 100vw, 575px" /><figcaption>ファイル選択 → 今すぐインストール</figcaption></figure>



<p class="is-style-crease">テーマのアップロード　<img src="https://s.w.org/images/core/emoji/14.0.0/72x72/27a1.png" alt="➡" class="wp-smiley" style="height: 1em; max-height: 1em;" />︎　ファイルを選択　<img src="https://s.w.org/images/core/emoji/14.0.0/72x72/27a1.png" alt="➡" class="wp-smiley" style="height: 1em; max-height: 1em;" />︎　今すぐインストール</p>



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



<p>以下のように、SWELLがインストールがされていれば完了です！</p>



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



<figure class="wp-block-image size-large is-resized is-style-shadow"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2020/11/インストール完了.png" alt="" class="wp-image-242" width="549" height="324" srcset="https://kotsublog.org/wp-content/uploads/2020/11/インストール完了.png 1938w, https://kotsublog.org/wp-content/uploads/2020/11/インストール完了-1536x908.png 1536w" sizes="(max-width: 549px) 100vw, 549px" /><figcaption>インストール完了！</figcaption></figure>



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



<p><strong>子テーマについても同様にインストール</strong>を完了させましょう！以下のような画面になればOKです。</p>



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



<figure class="wp-block-image size-large is-resized is-style-shadow"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2020/11/子テーマ導入完了.png" alt="" class="wp-image-243" width="544" height="322" srcset="https://kotsublog.org/wp-content/uploads/2020/11/子テーマ導入完了.png 1948w, https://kotsublog.org/wp-content/uploads/2020/11/子テーマ導入完了-1536x908.png 1536w" sizes="(max-width: 544px) 100vw, 544px" /><figcaption>子テーマ導入完了！</figcaption></figure>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>以上で導入完了です！お疲れ様でした (^ ^)</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<h2 class="wp-block-heading">まとめ：ブログを楽しく継続するなら「SWELL」一択！</h2>



<figure class="wp-block-image size-large is-resized is-style-shadow"><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/02/swell-summary.jpg" alt="" class="wp-image-1717" width="900" height="473"/></figure>



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



<p>以上、SWELLのメリット・デメリットについてでした。</p>



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



<p class="has-swl-gray-background-color has-background">題にもある通り<strong><span class="swl-marker mark_yellow">ブログを楽しんで継続するなら「SWELL」一択！</span></strong></p>



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



<p>僕はこう思います。</p>



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



<p>何かと挫折しやすいブログ運営だからこそ、楽しんで継続することは最も重要です。</p>



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


<div class="swell-block-balloon"><div class="c-balloon -bln-right" data-col="gray"><div class="c-balloon__icon -square"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kotsublog.org/wp-content/uploads/2021/06/student-2.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>ぜひSWELLを利用して楽しいブログLifeを送りましょう~ (^ ^)</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


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



<p>では今回は以上です。</p>



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



<p class="has-text-align-center u-mb-0 u-mb-ctrl" style="line-height:2"><span class="swl-fz u-fz-s"><strong>＼<span class="has-inline-color has-swl-deep-01-color">装飾が簡単</span>で<span class="has-inline-color has-swl-deep-01-color">サイトスピードも良好</span>なWPテーマ！／</strong></span></p>



<div class="swell-block-button blue_ is-style-btn_normal -size-l"><a href="https://swell-theme.com/download/?id=mtp6wzxc3r21abky" class="swell-block-button__link"><span>SWELL公式サイトへ »</span></a></div>
]]></content:encoded>
					
					<wfw:commentRss>https://kotsublog.org/swell-review/feed/</wfw:commentRss>
			<slash:comments>4</slash:comments>
		
		
			</item>
	</channel>
</rss>
