SWELLカスタマイズの必須10項目【記事テンプレート付】

この記事では、WordPressテーマ「SWELL(スウェル)」を簡単にデザインする方法を、画像を用いてわかりやすくご紹介します。

SWELLは、マウス操作だけで、簡単にオリジナルサイトができあがります。(CSSやPHPは必要なし)

デザインを確認するための雛形記事(ダミー記事)を作成してからデザインを始めましょう。

suya

アイコン画像やロゴ画像の準備がまだの場合は、後で設定しましょう。

なるほどくん

なるほど!できるところからやればいいんですね。

この記事でできること
  • 雛形記事(ダミー記事)で外観を確認しながらデザインできる
  • 画像設定ができる(サイトアイコンロゴNO IMAGEOGPなど)
  • タイトルや見出しなどの基本デザインを変更できる
この記事を書いた人

suya

  • 前職は大手IT企業
  • マーケターエンジニアの両方を経験
  • 月1億円のWeb売上
  • セキュリティの専門家(国家資格
  • 前職は大手IT企業
  • マーケターエンジニア
  • 月1億円のWeb売上
  • セキュリティ国家資格

この記事を最後まで読めば、SWELL(スウェル)の基本デザインがすぐ完了します。

ぜひ最後まで進めてみてください。

すでに途中まで進めている人は、目次から該当箇所に飛ぶこともできます。

目次

SWELL(スウェル)」のデザイン設定の特徴

見た目を確認しながらデザイン

SWELL(スウェル)」は、ブロックエディタ(Gutenberg)に完全対応しています。

デザイン設定も、外観カスタマイズ(カスタマイザー)見た目を確認しながら変更できるのが特徴です。

CSS(スタイルシート)PHP(プログラミング)などの面倒なカスタマイズは必要ありません。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズ(カスタマイザー)画面
「カスタマイザー」画面

よく考えられたデフォルト設定

デフォルト設定もよく考えられており、必ず変更しないといけないような設定項目は少ないです。

アイコンやロゴ、基本カラーやトップページなどのブランドに関わる項目だけ変更すれば、オリジナルサイトの出来上がりです。

\ 導入するだけ簡単おしゃれ /

「SWELL(スウェル)」の基本デザインの流れ

まずは全体の流れをステップに分けて見ていきましょう。

STEP
デザイン確認用のダミー記事を作成
  • 雛形(テンプレート)あり
STEP
デザイン確認用の外観メニューを作成
  • グローバルナビフッターを作成
STEP
外観カスタマイズ(カスタマイザー)でデザイン変更
  • 画像設定ができる(サイトアイコンロゴNO IMAGEOGPなど)
  • タイトルや見出しなどの基本デザインを変更できる(重要度別)

大体の流れをつかんだら、あとは手順に従って作業を進めていくだけです。

ここから、具体的な作業が始まります。(画面は基本的にPC版です。)

1) デザイン確認用のダミー記事を作成

デザインを確認するために、SWELLブロックの多くをカバーしたダミー記事(テスト記事)を作成してください。

雛形(テンプレート)からコピペで簡単に作成できます。

雛形からダミー記事を作成

WordPress(ワードプレス)にログインしたら、左メニューの[投稿][新規追加]をクリックします。

WordPressテーマ「SWELL(スウェル)」のダミー記事の投稿を開始
[投稿]→[新規追加]をクリック

初期投稿として「Hello world!」がありますが、見出しやSWELLブロックなどがないため、デザイン確認には使えません。

[投稿一覧]に残っている場合は、「Hello world!」を[ゴミ箱へ移動]してください。

編集画面が開いたら、右上のメニューアイコンを開き、[コードエディター]をクリックします。

WordPressテーマ「SWELL(スウェル)」のダミー記事の編集画面(コードエディター)
右上のメニューアイコンを開き、[コードエディター]をクリック

コードエディターが開いたら、タイトル、本文を次のようにコピペします。

WordPressテーマ「SWELL(スウェル)」のダミー記事の編集画面(タイトル、本文)
タイトル、本文をコピペ

ダミー記事のタイトル

ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。

ダミー記事のテンプレート

<!-- wp:paragraph -->
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>ここにH2見出しが入ります。ここにH2見出しが入ります。ここにH2見出しが入ります。</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>ここにH3見出しが入ります。ここにH3見出しが入ります。ここにH3見出しが入ります。</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>ここにH4見出しが入ります。ここにH4見出しが入ります。ここにH4見出しが入ります。</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"className":"is-style-section_ttl"} -->
<h2 class="is-style-section_ttl">ここにH2セッション用見出しが入ります。</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"className":"is-style-section_ttl"} -->
<h3 class="is-style-section_ttl">ここにH3セッション用見出しが入ります。</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4,"className":"is-style-section_ttl"} -->
<h4 class="is-style-section_ttl">ここにH4セッション用見出しが入ります。</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<!-- /wp:paragraph -->

<!-- wp:loos/full-wide -->
<div class="swell-block-fullWide pc-py-60 sp-py-40 alignfull" style="background-color:#f7f7f7"><div class="swell-block-fullWide__inner l-article"><!-- wp:heading {"className":"is-style-section_ttl"} -->
<h2 class="is-style-section_ttl">ここにフルワイドH2見出しが入ります。</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:loos/full-wide -->

<!-- wp:heading -->
<h2>テキスト</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>テキストリンク</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a rel="noreferrer noopener" href="https://manuon.com/" target="_blank">ここにリンクが入ります。ここにリンクが入ります。ここにリンクが入ります。ここにリンクが入ります。ここにリンクが入ります。</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>標準ブロック</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>画像</h3>
<!-- /wp:heading -->

<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://manuon.com/wp-content/uploads/image-demo.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>リスト</h3>
<!-- /wp:heading -->

<!-- wp:list {"className":"is-style-default"} -->
<ul class="is-style-default"><li>ここにリストが入ります。ここにリストが入ります。ここにリストが入ります。ここにリストが入ります。ここにリストが入ります。</li><li>ここにリストが入ります。ここにリストが入ります。ここにリストが入ります。ここにリストが入ります。ここにリストが入ります。</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3>引用</h3>
<!-- /wp:heading -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>ここに引用が入ります。ここに引用が入ります。ここに引用が入ります。ここに引用が入ります。ここに引用が入ります。</p><cite>ここに引用元が入ります。ここに引用元が入ります。ここに引用元が入ります。ここに引用元が入ります。ここに引用元が入ります。</cite></blockquote>
<!-- /wp:quote -->

<!-- wp:heading {"level":3} -->
<h3>テーブル</h3>
<!-- /wp:heading -->

<!-- wp:table -->
<figure class="wp-block-table"><table><thead><tr><th>ここにヘッダーラベルが入ります。</th><th>ここにヘッダーラベルが入ります。</th></tr></thead><tbody><tr><td>ここにテキストが入ります。</td><td>ここにテキストが入ります。</td></tr><tr><td>ここにテキストが入ります。</td><td>ここにテキストが入ります。</td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:heading -->
<h2>SWELLブロック</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>投稿リスト(カード型)</h3>
<!-- /wp:heading -->

<!-- wp:loos/post-list /-->

<!-- wp:heading {"level":3} -->
<h3>関連記事(ブログカード)</h3>
<!-- /wp:heading -->

<!-- wp:loos/post-link {"externalUrl":"https://manuon.com/"} /-->

<!-- wp:heading {"level":3} -->
<h3>アコーディオン</h3>
<!-- /wp:heading -->

<!-- wp:loos/accordion -->
<div class="swell-block-accordion"><!-- wp:loos/accordion-item -->
<div class="swell-block-accordion__item" aria-expanded="false"><div class="swell-block-accordion__title" data-onclick="toggleAccordion"><span class="swell-block-accordion__label">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</span><span class="swell-block-accordion__icon c-switchIconBtn" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-arrow_drop_down"></i><i class="__icon--opened icon-arrow_drop_up"></i></span></div><div class="swell-block-accordion__body" aria-hidden="true"><!-- wp:paragraph -->
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->

<!-- wp:heading {"level":3} -->
<h3>SWELLボタン</h3>
<!-- /wp:heading -->

<!-- wp:loos/button {"hrefUrl":"https://manuon.com/","isNewTab":true,"iconName":"icon-cart","className":"is-style-btn_normal"} -->
<div class="swell-block-button is-style-btn_normal"><a href="https://manuon.com/" target="_blank" rel="noopener noreferrer" class="swell-block-button__link" data-has-icon="1"><i class="icon-cart __icon"></i><span>ここにテキストが入ります。</span></a></div>
<!-- /wp:loos/button -->

<!-- wp:heading {"level":3} -->
<h3>キャプション付きブロック</h3>
<!-- /wp:heading -->

<!-- wp:loos/cap-block {"iconName":"icon-book"} -->
<div class="swell-block-capbox cap_box"><div class="cap_box_ttl"><i class="icon-book"></i><span>ここにキャプションが入ります。ここにキャプションが入ります。ここにキャプションが入ります。</span></div><div class="cap_box_content"><!-- wp:paragraph -->
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:loos/cap-block -->

<!-- wp:heading {"level":3} -->
<h3>説明リスト(DL)</h3>
<!-- /wp:heading -->

<!-- wp:loos/dl -->
<dl class="swell-block-dl"><!-- wp:loos/dt -->
<dt class="swell-block-dl__dt">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</dt>
<!-- /wp:loos/dt -->

<!-- wp:loos/dd -->
<dd class="swell-block-dl__dd"><!-- wp:paragraph -->
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<!-- /wp:paragraph --></dd>
<!-- /wp:loos/dd -->

<!-- wp:loos/dt -->
<dt class="swell-block-dl__dt">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</dt>
<!-- /wp:loos/dt -->

<!-- wp:loos/dd -->
<dd class="swell-block-dl__dd"><!-- wp:paragraph -->
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<!-- /wp:paragraph --></dd>
<!-- /wp:loos/dd --></dl>
<!-- /wp:loos/dl -->

<!-- wp:heading {"level":3} -->
<h3>FAQ</h3>
<!-- /wp:heading -->

<!-- wp:loos/faq {"qIconStyle":"fill-custom","aIconStyle":"fill-custom"} -->
<dl class="swell-block-faq" data-q="fill-custom" data-a="fill-custom"><!-- wp:loos/faq-item -->
<div class="swell-block-faq__item"><dt class="faq_q">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</dt><dd class="faq_a"><!-- wp:paragraph -->
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<!-- /wp:paragraph --></dd></div>
<!-- /wp:loos/faq-item -->

<!-- wp:loos/faq-item -->
<div class="swell-block-faq__item"><dt class="faq_q">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</dt><dd class="faq_a"><!-- wp:paragraph -->
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<!-- /wp:paragraph --></dd></div>
<!-- /wp:loos/faq-item --></dl>
<!-- /wp:loos/faq -->

<!-- wp:heading {"level":3} -->
<h3>ステップ</h3>
<!-- /wp:heading -->

<!-- wp:loos/step -->
<div class="swell-block-step" data-num-style="circle"><!-- wp:loos/step-item {"stepLabel":"STEP"} -->
<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">ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。</div><div class="swell-block-step__body"><!-- wp:paragraph -->
<p>ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:loos/step-item -->

<!-- wp:loos/step-item {"stepLabel":"STEP"} -->
<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">ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。</div><div class="swell-block-step__body"><!-- wp:paragraph -->
<p>ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:loos/step-item --></div>
<!-- /wp:loos/step -->

<!-- wp:heading {"level":3} -->
<h3>タブ</h3>
<!-- /wp:heading -->

<!-- wp:loos/tab {"tabId":"0","className":"is-style-default"} -->
<div class="swell-block-tab is-style-default" data-width-pc="auto" data-width-sp="auto"><ul class="c-tabList" role="tablist"><li class="c-tabList__item" role="presentation"><button class="c-tabList__button" aria-selected="true" aria-controls="tab-0-0" data-onclick="tabControl">Tab 1</button></li><li class="c-tabList__item" role="presentation"><button class="c-tabList__button" aria-selected="false" aria-controls="tab-0-1" data-onclick="tabControl">Tab 2</button></li></ul><div class="c-tabBody"><!-- wp:loos/tab-body {"tabId":"0"} -->
<div id="tab-0-0" class="c-tabBody__item" aria-hidden="false"><!-- wp:paragraph -->
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:loos/tab-body -->

<!-- wp:loos/tab-body {"id":1,"tabId":"0"} -->
<div id="tab-0-1" class="c-tabBody__item" aria-hidden="true"><!-- wp:paragraph -->
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:loos/tab-body --></div></div>
<!-- /wp:loos/tab -->

右上の[公開]をクリックし、確認画面で再度[公開]をクリックします。

WordPressテーマ「SWELL(スウェル)」のダミー記事の編集画面(公開)
記事を[公開]

[投稿を表示]のリンクから、できあがりを確認できます。

ダミー記事を追加

必要に応じて、ダミー記事(テスト記事)を追加します。

記事一覧などの表示を確認するために、3つほどあるといいです。

すべて完了したら、[コードエディターを終了]してください。

以上で、雛形からテスト記事(ダミー記事)の作成が完了です。

2) デザイン確認用の外観メニューを作成

デザインを確認するための外観メニューを作成します。

ここで設定しておかないと、デザインできない項目もあります。

グローバルナビ(ヘッダーメニュー)を作成

左メニューの[外観][メニュー]をクリックします。

WordPressテーマ「SWELL(スウェル)」の外観メニューを開始
[外観]→[メニュー]をクリック

メニュー名を「グローバルナビ」などと設定して[メニューを保存]します。

WordPressテーマ「SWELL(スウェル)」の外観メニューを作成(グローバルナビ)
メニュー名を「グローバルナビ」などと設定

固定ページ[すべて表示]してから[すべて選択]して[メニューに追加]し、メニューの位置[グローバルナビ]に設定して[メニューを保存]します。

WordPressテーマ「SWELL(スウェル)」の外観メニューを設定(グローバルナビ)
固定ページを[メニューに追加]し、メニューの位置を[グローバルナビ]に設定

ここでは、グローバルナビ(ヘッダーメニュー)を表示させるために、最低限の設定で大丈夫です。

グローバルナビは、記事が増えてきた頃に、また変更できます。

フッターメニューを作成

新しいメニューを作成しましょう」をクリックしてから、メニュー名を「フッター」などと設定して[メニューを保存]します。

WordPressテーマ「SWELL(スウェル)」の外観メニューを作成(フッター)
メニュー名を「フッター」などと設定

固定ページ[すべて表示]してから[すべて選択]して[メニューに追加]し、メニューの位置[フッター]に設定して[メニューを保存]します。

WordPressテーマ「SWELL(スウェル)」の外観メニューを設定(フッター)
固定ページを[メニューに追加]し、メニューの位置を[フッター]に設定

3) 外観カスタマイズ(カスタマイザー)でデザイン変更

ここまで、デザインの事前準備をしてきました。

これからは、いよいよ「SWELL(スウェル)」の基本デザインを進めていきます。

事前)カスタマイザーの見方

左メニューの[外観][カスタマイズ]をクリックして、「カスタマイザー」を開きます。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズ(カスタマイザー)を開始
[外観]→[カスタマイズ]をクリック

カスタマイザー」が起動したら、右画面でデザインを確認しながら、左メニューで設定していきます。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズ(カスタマイザー)画面
「カスタマイザー」画面

左下のボタンで、右画面の表示を切り替えることができます。

[コントロールを非表示]で、左メニューが隠れます。(PC画面でサイドバーが横に表示)

[PC]アイコンで、パソコンビュー表示になります。(デフォルト)

[Tab]アイコンで、タブレットビュー表示になります。

[SP]アイコンで、スマホビュー表示になります。

1) WordPress設定 – サイト基本情報(重要度:

サイトアイコンは、ブックマークやブラウザのタブなどに表示されるアイコン(ファビコン)のことです。

[サイトアイコンを選択]からファビコン(favicon)を設定して[公開]をクリックします。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのWordPress設定-サイト基本情報(サイトアイコン)
[サイトアイコンを選択]からファビコン(favicon)を設定

サイトアイコン(ファビコン)画像の推奨サイズは「512×512px」、推奨形式は「.png」です。

画像の準備がまだの方は、後で設定するために、本ページをブックマークしておきましょう。

[WordPress設定][ホームページ設定]は、サイト型デザインの場合に変更します。

2) サイト全体設定 – 基本カラー(重要度:

メインカラーなどを変更して[公開]をクリックします。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのサイト全体設定-基本カラー(メインカラー)
メインカラーなどを変更
  • メインカラーは、見出しやカテゴリーなどに利用される色です。

トップページダミー記事(テスト記事)などでデザインを確認してください。

3) サイト全体設定 – NO IMAGE画像(重要度:

NO IMAGE画像」は、アイキャッチ画像が設定されていない記事で表示されるデフォルトのサムネイル画像です。

[画像を変更]から「NO IMAGE画像」を設定して[公開]をクリックします。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのサイト全体設定-NO IMAGE画像(変更)
[画像を変更]から「NO IMAGE画像」を設定

NO IMAGE画像の推奨サイズは「1200×630px」です。

画面には「推奨:横幅1600px以上」との表記がありますが、OGP画像の推奨サイズと同じ「1200×630px」を利用することが一般的です。

画像の準備がまだの方は、後で設定するために、本ページをブックマークしておきましょう。

参考)「SEO SIMPLE PACK」でOGP画像を設定(重要度:

OGP画像」は、アイキャッチ画像が設定されていない記事で表示されるデフォルトのSNSシェア画像です。

トップページがSNS(Twitter、Facebookなど)でシェアされた際にも表示されます。

ここでは、プラグイン「SEO SIMPLE PACK」で、OGP画像を設定する方法を解説します。

WordPress管理画面の左メニューの[SEO PACK][OGP設定]を開き、 [画像を選択]から「OGP画像」を設定して[設定を保存する]をクリックします。

WordPressプラグイン「SEO SIMPLE PACK」のOGP設定(変更)
[SEO PACK]→[OGP設定]から「OGP画像」を設定

OGP画像の推奨サイズは「1200×630px」です。

NO IMAGE画像と同じ画像を利用することが一般的です。

画像の準備がまだの方は、後で設定するために、本ページをブックマークしておきましょう。

4) ヘッダー(重要度:

ヘッダー背景色、ヘッダー文字色や「ロゴ画像」を設定して[公開]をクリックします。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのヘッダー(カラー、ロゴ画像)
ヘッダー背景色、ヘッダー文字色や「ロゴ画像」を設定

ロゴ画像の推奨サイズはありませんが、SWELL公式サイトでは「1600×360px」が利用されています。

ただし、デザイン重視よりも速度重視の場合は、「600×135px」程度にしておくのがおすすめです。

ロゴ画像の準備がない場合は、ヘッダー背景色とヘッダー文字色を変更することをおすすめします。

画像の準備がまだの方は、後で設定するために、本ページをブックマークしておきましょう。

5) フッター(重要度:

コピーライトのテキストを変更して[公開]をクリックします。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのフッター(コピーライトのテキスト)
コピーライトのテキストを変更

SWELLの場合、コッピーライトの先頭に必ず「©️」が表示されます。

おすすめ度コピーライト表示の例説明
ש️ 20xx サイト名/企業名.発行年あり
©️ 20xx-20xx サイト名/企業名.発行年-最新年あり
©️ サイト名/企業名.発行年なし
ש️ 20xx サイト名/企業名. All Rights Reserved.発行年あり、権利留保文言あり

発行年だけで最新年の表記がないと、更新がされていないサイト(ブログ)だと勘違いされることがあります。

だからと言って、最新年も記載すると、毎年コピーライトを書き換える手間が生じます。

ちなみに、「All Rights Reserved.」は古い表示です。

6) トップページ – メインビジュアル(重要度:

画像を表示する場合は、スライド画像、メインテキスト、サブテキストなどを変更して[公開]をクリックします。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのトップページ-メインビジュアル(スライド画像、メインテキスト、サブテキスト)
スライド画像、メインテキスト、サブテキストなどを変更

画像ではなく動画を利用することも可能です。

メインビジュアル画像・動画の推奨サイズはありませんが、SWELL公式サイトでは「1600×900px」が利用されています。

ディスプレイ表示を考えて、「横幅1280px以上」にすることをおすすめします。

画像・動画の準備がまだの方は、後で設定するために、本ページをブックマークしておきましょう。

7) 投稿・固定ページ – コンテンツのデザイン(重要度:

見出しのデザインを変更して[公開]をクリックします。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズの投稿・固定ページ-コンテンツのデザイン(見出しのデザイン)
見出しのデザインを変更

ダミー記事(テスト記事)でデザインを確認してください。

テキストリンクにアンダーラインを付ける」のチェックをONにして[公開]をクリックします。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズの投稿・固定ページ-コンテンツのデザイン(テキストリンクにアンダーライン)
「テキストリンクにアンダーラインを付ける」をON

一般的に、テキストリンクは青色でアンダーラインがあることが多いです。

8) 投稿・固定ページ – 記事下エリア(重要度:

記事下の著者情報(この記事を書いた人)を表示しない場合は、「著者情報を表示」のチェックをOFFに変更して[公開]します。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズの投稿・固定ページ-記事下エリア(著者情報)
「著者情報を表示」をOFFに変更

記事下の著者情報(この記事を書いた人)を表示する場合は、WordPressの[ユーザー][プロフィール]でプロフィール写真、プロフィール情報、連絡先情報(SNS)などを設定してください。

9) 記事一覧リスト(重要度:

トップページに「人気記事タブ」を表示したい場合は、追加のチェックをONに変更して[公開]します。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズの記事一覧リスト(トップページの人気記事タブ)
「人気記事タブ」を表示したい場合は、トップページに追加をONに変更

その他のページに「人気記事タブ」を表示したい場合は、追加のチェックをONに変更して[公開]します。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズの記事一覧リスト(その他のページの人気記事タブ)
「人気記事タブ」を表示したい場合は、その他のページに追加をONに変更

10) SNS情報(重要度:

SNS情報は、フォローしてもらうための設定です。シェアボタンとは関係がありません。

SNS情報を入力して[公開]します。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのSNS情報
SNS情報を入力

FeedlyページURLは、以下のように設定してください。

manuon.com」の箇所を自分のサイトのドメイン名に変更します。

https://feedly.com/i/subscription/feed/https%3A%2F%2Fmanuon.com%2Ffeed%2F

参考)外観ウィジェットを変更

外観ウィジェット共通サイドバー追尾サイドバーなどを変更してもいいです。

特に、追尾サイドバーに「[SWELL] 目次」を設定するのはおすすめです。

  • 左メニューの[外観][ウィジェット]から追尾サイドバーに「[SWELL] 目次」を追加

この記事のまとめ

デザインテーマ「SWELL」のデザインカスタマイズのやり方を見てきました。

SWELLは、設定だけで簡単にオリジナルサイトができます。

なるほどくん

自分のサイトができちゃいました。

SWELLの外観カスタマイズ(カスタマイザー)のより詳細の使い方は、以下をご覧ください。

行間の調整をしたい場合は、以下を参考にしてください。

導入するだけでおしゃれ(スタイリッシュ)なデザインになる「SWELL(スウェル)」を、あなたのサイト(ブログ)に導入しましょう。

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』

\ おしゃれで簡単 /

\ 購入から導入まで /

\ 記事テンプレート付き /

デザインを人に頼みたいなら、「ココナラ(coconala) 」でプロにお任せしましょう。

以下のリンクから、SWELLカスタマイズを検索できます。

\ SWELLをカスタマイズ /

よくある質問(FAQ)

CSS(スタイルシート)やPHP(プログラミング)は必要ありませんか?

SWELLは、ブロックエディタ(Gutenberg)に完全対応しています。

デザイン設定も、外観カスタマイズ(カスタマイザー)見た目を確認しながら変更できるのが特徴です。

CSS(スタイルシート)PHP(プログラミング)などの面倒なカスタマイズは必要ありません。

外観カスタマイズ(カスタマイザー)でサイドバーが表示されないのはなぜですか?

左メニュー(コントロール)が表示されているため、表示画面領域が狭くなっているからです。

左下のボタンで、コントロールの表示/非表示を切り替えることができます。

  • [コントロールを非表示]で、左メニューが隠れます。

PC画面でサイドバーが横に表示されるはずです。

なお、サイドバーを横に表示できない場合、ページ下部に移動しているため、スクロールすれば見つかります。

サイトアイコン(ファビコン)とはなんですか?

サイトアイコン(ファビコン)は、ブックマークやブラウザのタブなどに表示されるアイコンのことです。

「NO IMAGE画像」とはなんですか?

NO IMAGE画像」は、アイキャッチ画像が設定されていない記事で表示されるデフォルトのサムネイル画像です。

「OGP画像」とはなんですか?

OGP画像」は、アイキャッチ画像が設定されていない記事で表示されるデフォルトのSNSシェア画像です。

トップページがSNS(Twitter、Facebookなど)でシェアされた際にも表示されます。

テーマの[SWELL設定]を変更する必要はありませんか?

SWELLは、初期設定(デフォルト設定)で、すでに初心者向けの設定になっています。

後でいつでも変更可能ですので、最初のうちは気にしなくて大丈夫です。

[SWELL]設定の[ads.txt編集]を設定する必要はありませんか?

[ads.txt編集]は、Googleアドセンス(Google AdSense)などを利用する際に設定します。

「ads.txt」を設定することで、なりすましサイトによる広告買い付けを防ぐことができます。

アクセスや収益をUPさせるノウハウ紹介

実際の経験を元に、効果のあった施策をまとめました。

よかったら見ていってください。

ドメインパワーUPでSEOに効く被リンク獲得リスト

被リンクというと、ブラックなやり方を想像される方が多いかもしれません。

しかし、多くのサイトを分析してみると、みんな使っている登録サイトが存在することがわかりました。

ドメインパワーがSEOに重要な地位を占める現状では、自然なホワイトリンクの獲得戦略が欠かせません。

実際に既存サイトでも大きな効果を上げることができたので、ここでご紹介したいと思います。

リンクフリー
URLをコピーする
URLをコピーしました!

コメント

コメントする

目次
閉じる