WordPressブログの始め方 >>

WordPressテーマ『SWELL』の使い方や設定、カスタマイズまとめ!

当ページのリンクには広告が含まれています。

「SWELLって聞いたことあるけど、実際どうやって使うの?」
「設定が難しそうで不安…」

そんなふうに感じていませんか?

WordPressのテーマ選びは、ブログ運営の成功を左右する大事な一歩。
中でもSWELLは、おしゃれなデザインと直感的な操作性で、今や多くの初心者から支持を集める大人気テーマです。

とはいえ初心者の方にとっては、何から手をつけたらいいか迷うでしょう・・

そこで本記事では、SWELLの基本設定から使いこなし術、収益化のノウハウまでを、初心者にも分かりやすく解説しています。

この記事を読めば、あなたもすぐに「自分らしいブログ」をスムーズに立ち上げ、楽しく発信を続けられるようになります。

ボリュームがあるので、ブックマークしてご活用ください。

目次

SWELLの概要

SWELLを使う大前提とは

WordPressブログ環境

SWELLを導入するには、WordPressをインストールしたブログ環境が必要です。

まだWordPressブログが整ってない方は以下の記事をご覧のうえ、導入してください。

ブロックエディター対応

SWELLはWordPressのブロックエディター(Gutenberg)に最適化されたテーマです。

そのため、クラシックエディターではなく、ブロックエディターを使って記事を作成することが前提となります。

ブロックエディターって何?という方は以下の記事をご覧ください。

SWELLの特徴

項目内容
料金17,600円(税込) ※買い切り
販売元株式会社LOOS
おすすめ度
デザインきれい、シンプル
SEO対策
レスポンシブ対応
グーテンベルグ対応
複数サイトでの利用
おすすめサイトタイプブログ、アフィリエイト
コーポレートサイト
引用元:SWELLダウンロードページ

\初心者でもデザイン性抜群のサイトにできる/

SWELLは、WordPress用の有料テーマで、多くのブロガーやアフィリエイターに愛用されています。
その魅力は「誰でも簡単におしゃれなサイトが作れる」点にあります。

SWELLを使うと、初心者でも簡単にプロのような見た目のブログを作れます。
特に注目すべきは、テンプレートの美しさとカスタマイズの自由度です。

たとえば、SWELLデモサイトにあるような洗練されたトップページや読みやすい記事ページは、クリック操作だけで再現できます。

レイアウトや色、文字の装飾なども管理画面で直感的に設定でき、HTMLやCSSの知識は不要です。

また、ブログのジャンルを問わず応用が利くのもSWELLの強みです。
旅行・グルメ・美容・ビジネス・日記など、どんなテーマでも統一感のあるデザインが作れます。あなたの世界観を表現する場として、理想的なツールといえるでしょう。

さらに、スマートフォンでの表示にも最適化されているため、モバイルユーザーにも美しく見えるサイトが作れます。最近では約8割がスマホからのアクセスといわれる中、この点は大きなメリットです。

SWELLの特徴の詳細は以下をご覧ください。

SWELLの料金・購入方法・ライセンス

SWELLは有料テーマですが、その価格にはそれだけの価値があります。
まず、料金は買い切り型で17,600円(税込)となっており、1度購入すれば追加料金なしで使い続けられます。

最大の魅力は、「1ライセンスで複数サイトに使用可能」な点です。
他の有料テーマでは1サイトごとに料金が必要な場合もありますが、SWELLは購入者が所有・運営するサイトであれば何個でも使えます。これはブロガーや副業で複数メディアを運営したい人にとって、大きなメリットです。

購入方法はとてもシンプル!
SWELL公式サイトから会員登録を行い、ログイン後に決済を済ませることで、すぐにテーマファイルをダウンロードできます。支払い方法はクレジットカードに対応しています。

また、購入後は「SWELLERS’」という会員限定サイトにアクセス可能になり、最新のテーマファイルやアップデート情報、設定マニュアル、フォーラムなど、手厚いサポートを受けられます。

つまりSWELLは、初期投資としては高く感じるかもしれませんが、機能性・拡張性・サポート体制を考慮すれば、長期的に見てコスパの高いテーマといえるでしょう。

SWELLの始め方:インストールと初期設定

続いては、SWELLの始め方を解説します。

SWELLを始めるといっても、

  • 初めてのWordPressサイトをSWELLで始める方
  • 他テーマからSWELLに移行する方

の2パターンがありますよね。

初めてのブログでSWELLを使い始める流れ

WordPressのサイトにWordPressテーマ『SWELL』を新規導入する流れは、

  1. SWELLを購入する
  2. SWELLの初期設定をする

という流れです。

ステップ1:SWELLの購入

SWELLの購入では、

  • SWELLの購入
  • SWELLのダウンロード
  • SWELL会員への登録

といった作業を行います。

詳しくは以下の記事をご覧ください。

ステップ2:SWELLの初期設定

SWELLの初期設定では、

  • SWELLのインストール
  • SWELLのユーザー認証
  • 最低限行うWordPressの設定
  • SWELLに適したプラグイン設定
  • Googleアナリティクスの設定
  • Googleサーチコンソールの設定

といった作業を行います。

詳しくは以下の記事をご覧ください。

他テーマからSWELLに変更するときの流れ

すでに他のテーマを使ってWordPressサイトを運営している方がSWELLにテーマを乗り換える場合、旧テーマの独自機能で文章の装飾などを使っていると 過去記事のデザインが一気に崩れてしまいます。

そこで、旧テーマのショートコードやCSSを一部引き継ぐことができる 乗り換えサポート用プラグイン をSWELLではいくつか用意されています。

このプラグインを使って一時的に記事のデザイン崩れを防ぐことで、全記事リライトをあなたのペースで進めていくことが可能です。

乗り換え用のプラグインが用意されているのは、

  • Cocoon
  • AFFINGER5
  • JIN
  • SANGO
  • STORK
  • THE THOR

乗り換えの手順はSWELL公式サイトの以下の記事をご覧ください。

>>他テーマからSWELLへの「乗り換えサポートプラグイン」一覧

SWELLを始めるときの予備知識

SWELLの公式サポートと学習リソース活用法

SWELLの魅力は、公式のサポート体制と学習リソースが非常に充実していることです。

初心者にとっては、テーマの機能だけでなく「困ったときに頼れる仕組み」があるかどうかも重要です。

SWELLの公式マニュアルでは、SWELLの使い方が詳しく説明されています。

>>SWELL公式サイトのマニュアル

また、購入者限定の「SWELLERS’」という会員サイトでは、公式フォーラムが用意されており、他のユーザーとの情報共有や質問が可能です。
実際に使っている人の声や運営者からの回答も見られるため、リアルタイムで学びを深められます。

また、SWELLはYouTubeやX(旧Twitter)などSNS上でも活発に情報が発信されています。特にYouTubeには設定や操作のハウツー動画が多く、「文章だけでは理解しづらい」という人にも安心です。

これらのリソースを活用することで、SWELLの機能を最大限に引き出すことができ、ブログのクオリティも自然と向上します。

つまり、SWELLは「買って終わり」ではなく、「使いながら学べるテーマ」なのです。

SWELLのアップデート方法

SWELLは定期的にアップデートされます。

機能追加や不具合修正のアップデートが行われており、常に進化し続けているのがSWELLの強み!

SWELL購入後にSWELLがバージョンアップされたときは、WordPressの管理画面からSWELLをアップデートできます。

アップデートの方法は以下の公式マニュアルをご覧ください。

>>SWELLのバージョンアップデートに伴うテーマの更新方法

アップデート前には必ずサイト全体のバックアップを取っておきましょう。
おすすめは「BackWPup」などのプラグインを使ったバックアップです。ファイルとデータベース両方を保存できるよう設定しておくと安心です。
BackWPupのプラグインの使い方は、初期設定の項をご覧ください。

SWELLのユーザー認証方法

ユーザー認証をしないと、ダッシュボードの更新ページからはSWELL本体をアップデートできません。

ユーザー認証の方法は、初めてのブログでSWELLを使い始める流れの項で紹介したSWELLの初期設定を初心者向けにやさしく解説!の記事をご覧ください。

テーマカスタマイザーの使い方

SWELLでは、カスタマイズ項目の多くが「テーマカスタマイザー」機能で行うことができるようになっています。

この「テーマカスタマイザー」機能はリアルタイムで設定が反映される項目がほとんどなので、変更を確認しながら直感的にカスタマイズを行うことが可能です。

ヒデハル

SWELLはテーマカスタマイザーで設定できる項目が多く、カスタマイズがとっても簡単!

テーマカスタマイザーの起動方法

管理画面の左メニューから、「外観」>「カスタマイズ」を選択します。

管理画面

すると、以下のような画面に遷移します。

カスタマイザーの設定項目とプレビュー画面

上記の左側にあるナビゲーションが、SWELLで設定可能な項目のリストです。

右側が、カスタマイザーのプレビュー画面となっており、設定の変更がリアルタイムで反映されます。

項目によっては保存・更新後に反映されます。

左側ナビゲーションの各項目をクリックすると、さらに詳細な設定項目が出てきますので、そちらからお好きなようにカスタマイズしてください。

投稿ページなどからカスタマイザーを起動する方法

上記以外にも、カスタマイザーはお好きなページで起動することもできます。

ログインした状態で、自分のサイトを閲覧すると画面上側に管理用のツールバーが表示されます。

このツールバーに表示されている「カスタマイズ」という項目をクリックすることで、そのページでカスタマイザーが起動します。

管理用ツールバー

このツールバーに表示されている「カスタマイズ」という項目をクリックすることで、そのページでカスタマイザーが起動します。

投稿ページでカスタマイザーが起動

投稿ページに関するカスタマイズなどを行う場合は、このように記事を表示しながら設定していきましょう。

デザインを変更する方法

左側ナビゲーションの各項目をクリックすると、さらに詳細な設定項目が出てきます。

たとえば以下は「ヘッダー設定」をクリックしたときの画面。

ヘッダーの設定画面

上記の設定項目をお好きなようにカスタマイズしてください。

変更したデザインを確認する方法

左メニューで設定を変更すると、右側のプレビュー画面にリアルタイムで反映されます。

項目によっては保存・更新後に反映されます。

左メニューの最下部に、デバイスプレビューボタンがあります。

デバイスプレビューボタン

各ボタンをクリックすると、パソコン、タブレット、スマホそれぞれの端末でどのように表示されるかを確認できます。

たとえば一番右側のモバイルボタンをクリックすると、以下のようにスマホでの表示を確認できます。

スマホでの表示確認

変更したデザインを保存する方法

変更したデザイン設定で良ければ、設定を保存します。

左ナビゲーションの最上部にある「公開」ボタンをクリックすると、設定が保存されます。

カスタマイザーの公開ボタン

ここまで説明したように、SWELLでは「テーマカスタマイザー」という機能を使って、デザインの大部分をカスタマイズしていくってことをご理解ください。

上記に関する公式マニュアルは以下です。

>>【SWELLの設定】「テーマカスタマイザー」の使用方法

SWELLでおしゃれなブログを作るヒント

「見た目がおしゃれなブログ」は、それだけで読者の興味を引き、信頼感も高まります。

SWELLはデザイン性の高いテーマですが、ちょっとした工夫を加えるだけで、さらに洗練された印象を与えるブログに仕上げられます。

おしゃれなブログづくりのポイント
  • 余白
  • 色の統一
  • 画像
  • ブロックの使い方

余白の使い方

まず意識したいのが「余白の使い方」です。
詰め込みすぎず、見やすいスペースを意識することで、読みやすさが大幅にアップします。

SWELLでは、上下の余白の設定が簡単!
カラムブロックでは、上下左右にマージンを設定できるので、コンテンツ同士が窮屈にならないよう調整しましょう。

色の統一感

次に「色の統一感」です。
カラーパレットを3色以内に抑えるなど、一貫性のあるデザインは「プロっぽさ」につながります。

SWELLではあらかじめおしゃれな配色例がデモサイトで紹介されているので、それを参考にすると迷いません。

画像の選び方

また「画像の選び方」にもひと工夫を。
画像サイトで画像を探す場合も、同じトーン・スタイルで揃えることで、ブログ全体の雰囲気がまとまります。

おすすめの画像サイトは以下を参考にどうぞ。

Canvaなどで簡単に加工し、フィルターを統一するのもおすすめです。

ブロックの使い方

最後に「ブロックの使い方」も重要です。
ふきだしやステップブロック、ボックスを適所に配置することで、視覚的にわかりやすく、見た目も華やかなページができます。

ブロックの使い方の詳細は以下をご覧ください。

>>ブロックエディターの使い方

ただし使いすぎるとゴチャつくため、「引き算の美学」を意識して、シンプルで上品なデザインを目指すのがコツです。

SWELLのポテンシャルを活かしつつ、あなたの「好き」や「世界観」を盛り込めば、誰かの心に残る、魅力的でおしゃれなブログに仕上がるはずです。

SWELLデモサイトのデザインに着せ替える

SWELLにはデモサイトが用意されてます。

各設定をひとつずつあなた好みに変えていくよりも、デザインを一気に変えたい場合は、公式で配布しているデモサイトデータへの着せ替えを利用するとよいでしょう。

以下の6種類のデモサイトデザインを一瞬であなたのサイトに適用できます。

デモサイトの例

上記のような洗練されたデモサイトを、クリック操作だけで再現できます。

レイアウトや色、文字の装飾なども管理画面で直感的に設定でき、HTMLやCSSの知識は不要です。

詳しくは以下の公式サイトをご覧ください。

>>SWELLのデモサイト一覧

SWELLカスタマイザーで設定できる項目

前述したように、SWELLでは、カスタマイズ項目の多くが「テーマカスタマイザー」機能で行うことができるようになっています。

テーマカスタマイザーの画面

この「テーマカスタマイザー」機能はリアルタイムで設定が反映される項目がほとんどなので、変更を確認しながら直感的にカスタマイズを行うことが可能です。

コードを書かずに自由にデザインできるので、初心者でも安心して、思いどおりのサイトに近づけられます。

>>テーマカスタマイザーの使い方

テーマカスタマイザーで設定できる項目は以下のとおり。

ヒデハル

では順に詳しくみていきましょう!

サイト全体の基本設定

続いては、サイト全体の基本設定です。

基本設定
  • サイト全体の基本カラーを設定する
  • ヘッダーの設定する
  • グローバルメニューの設定をする
  • フッターの設定をする
  • サイドバーの設定をする
  • スマホメニューの設定をする
  • サイトのベースとなる全体的なデザイン設定をする
  • サイト運営者のSNSアカウント情報を設定する

サイト全体の基本カラーの設定

管理画面から「外観」>「カスタマイズ」>「サイト全体設定」>「基本カラー」をクリックします。

「外観」>「カスタマイズ」>「サイト全体設定」
「基本カラー」をクリック

すると、以下のような設定項目があります。

基本カラーの設定

上記で、メインカラーやテキストカラーを設定できます。

ここではサイト全体の基調色・リンク色・ボタン色・背景色などを細かく調整可能です。
デフォルトでも美しく設計されていますが、ブランドカラーや好みに合わせて配色を変えることで、オリジナル感のあるブログに仕上がります。

配色のコツとしては、以下のようなバランスを意識するのがおすすめです。

  • ベースカラー(70〜80%):背景や本文など、目立たない部分に使う落ち着いた色
  • メインカラー(20〜30%):ロゴや見出しなどに使う、ブログの印象を決める色
  • アクセントカラー(5%程度):ボタンやリンクなどに使う、目を引く色

このように色の「役割」を明確にすることで、視認性が高く読みやすいデザインになります。

詳しくは公式マニュアルをご覧ください。

>>サイト全体の基本カラーの設定方法

ヘッダーの設定

ヘッダー周りは、カスタマイザー内の「ヘッダー」というメニュー内で設定できます。

`「外観」>「カスタマイズ」>「ヘッダー」を選ぶ
「ヘッダー」メニュー内で設定できる項目
  • ヘッダーカラー
  • ヘッダーロゴ
  • ヘッダーのレイアウト・デザイン
  • ヘッダーの追従
  • ヘッダーバー
  • キャッチフレーズ
  • ヘッダーメニュー(グローバルメニュー)
  • 検索ボタン
  • スマホヘッダーに表示するボタン
  • お知らせバー

詳しくは公式マニュアルをご覧ください。

>>「ヘッダー・ロゴ画像」のデザイン・レイアウト設定

グローバルナビとは、PCで表示した時にヘッダーに表示されるナビゲーションのことです。

グローバルメニュー

グローバルメニューは、読者が目的のページへスムーズにアクセスするための大切な要素。
SWELLでは、このグローバルメニューを簡単に設定・カスタマイズできます。

グローバルナビは、カスタマイザーではなく、「外観」>「メニュー」内で行います。

管理画面の左メニューから「外観」>「メニュー」と進んでください。

「外観」 > 「メニュー」を選択

以下の画面で、グローバルメニューを設定していきます。

「外観」>「メニュー」画面

上記の画面で、「グローバルナビ」にチェックを入れる、というのがポイントです。

詳しくは公式マニュアルをご覧ください。

>>グローバルナビ(ヘッダーメニュー)の設定方法

上記公式マニュアルに説明あるように、グローバルメニューには「ドロップダウン形式」でサブメニューを追加することも可能です。

たとえば、「ブログ」というメニューの下に「日常」「グルメ」「旅行」といったカテゴリーをぶら下げることで、訪問者が目的の情報に素早くアクセスできます。

このようにグローバルメニューを工夫することで、サイトの回遊性が向上し、滞在時間やSEO評価にも良い影響を与えます。

ヒデハル

見た目だけでなく「導線設計」という観点からも、メニュー構成を丁寧に考えることが大切だよ!

SWELLでは、このグローバルメニューに対してデザインや挙動の設定も可能です。

「外観」>「カスタマイズ」>「ヘッダー設定」から、メニューの背景色や文字色、固定表示の有無(スクロールしても上部に固定される)などを細かく調整できます。

詳しくは、前述の「ヘッダーの設定」の章をご覧ください。

フッター周りのカスタマイズ項目は、「外観」>「カスタマイズ」>「フッター」にあります。

「外観」>「カスタマイズ」>「フッター」を選ぶ
「フッター」メニュー内で設定できる項目
  • フッターカラー
  • コピーライトの設定
  • 「フッター」と「フッター直前ウィジェット」の間の余白
  • SNSアイコンリストの表示
  • スマホの画面下部の固定フッターメニュー

フッターメニューの設定

フッターメニューとは以下の赤枠で囲まれた部分のことです。

フッターメニュー

このフッターメニューは、「外観」>「メニュー」から設定できます。

「メニュー」画面

上記の画面で、「フッター」にチェックを入れる、というのがポイントです。

ウィジットの設定

SWELLでは、フッター周りのウィジェットは大まかにいうと2種類、細かくいうと5種類のウィジェットを設定できます。

たとえば、当サイトでは、以下の青枠と赤枠の部分がウィジェットエリアです。

青枠:フッター直前、赤枠:フッター内部

上記のウィジットは、管理画面の「外観」>「ウィジェット」から設定します。

「フッター直前」「フッター」で設定する

詳しくはSWELL公式マニュアルをご覧ください。

>>フッター周りの設定方法

サイドバーの設定

サイドバーはサイトの端に表示されるエリアのこと。

サイドバーの例

SWELLでは、記事やページごとにサイドバーの有無や表示位置を柔軟に調整できます。
読者の使いやすさや記事の目的に応じて、最適なレイアウトを選ぶことが重要です。

サイドバーのカスタマイズ項目は、「外観」>「カスタマイズ」>「サイドバー」にあります。

カスタマイザーの「サイドバー」
「サイドバー」メニュー内で設定できる項目
  • トップページにサイドバーを表示するかどうか
  • 投稿ページにサイドバーを表示するかどうか
  • 固定ページにサイドバーを表示するかどうか
  • アーカイブページにサイドバーを表示するかどうか
  • サイドバーを右に表示するか、左に表示するか

サイドバー内のウィジェットタイトルのデザイン設定

さらに、別の場所になりますが、カスタマイザーの「サイトの全体設定」>「タイトルデザイン」の中でサイドバー内に設定するウィジェットのタイトルデザインを設定できます。

サイトの全体設定」>「タイトルデザイン

投稿・固定ページごとの表示設定

上述したとおり、カスタマイザーでは各ページ種別にサイドバーを表示するかどうかを設定できますが、「このページだけ表示させたくない」というようなケースもあるかと思います。

SWELLではそんなケースにも対応できるように、投稿ページ・固定ページのサイドバー内の【SWELL設定】というパネルに以下のような設定欄があります。

ページごとのサイドバーの表示・非表示の設定

上記のセレクトボックスから、そのページ個別でサイドバーを表示するか非表示にするかを設定できます。

このように、記事の内容や導線設計に合わせてサイドバーの構成を調整することで、回遊率や滞在時間の向上にもつながります。

見た目のデザインだけでなく、ユーザビリティの視点からも考えておくと良いでしょう。

ウィジットの設定

サイドバー関連のウィジェットエリアは4つあり、管理画面の「外観」>「ウィジェット」から設定します。

サイドバー関連のウィジェットエリア

ちなみに、SWELLではスマホ閲覧時に、サイドバーを下部に自動的に配置する設計になっており、読みやすさが損なわれません。

スマホ独自のサイドバーを設定するには、「共通サイドバー【スマホ版】」のウィジットを使います。

詳しくはSWELL公式マニュアルをご覧ください。

>>サイドバーに関する設定項目・ウィジェットについて

サイドバーの目次をハイライトさせる

当サイトでは、サイドバーの目次をハイライトさせてます。以下の感じで。

サイドバーの目次をハイライトした例

サイドバーの目次をハイライトすると、今読んでいる記事が全体のなかのどの部分なのか?を把握しやすくなります。

このハイライト機能はSWELLには備わってないので、独自のカスタマイズが必要です。

興味ある方は以下の記事で解説したのでご覧ください。

スマホメニューの設定

スマホメニューとは、ボタンで開閉される以下のようなメニューのことです。

スマホメニューのカスタマイズ項目は、「外観」>「カスタマイズ」>「サイト全体設定」>「スマホ開閉メニュー」から設定できます。

「サイト全体設定」
サイト全体設定」>「スマホ開閉メニュー」
「スマホ開閉」メニュー内で設定できる項目
  • カラー設定
  • メインメニュー上に表示するタイトル

スマホメニュー上部に設置されるナビの設定

デフォルトでは、グローバルナビと同じものが表示されますが、「外観」>「メニュー」で「スマホ開閉メニュー内」という位置に設定されたメニューがあるとそちらが優先して表示されます。

「スマホ開閉メニュー内」で設定されたメニューがあればそちらが優先される

スマホメニュー内にウィジェットを設置する方法

スマホメニュー内のウィジットは、「外観」>「ウィジェット」>「スマホ開閉メニュー下」で設定できます。

「外観」>「ウィジェット」>「スマホ開閉メニュー下」

詳しくはSWELL公式マニュアルをご覧ください。

>>スマホメニューの設定方法

スマホ用の固定フッターメニューの設定

スマホ画面下部に固定表示されるフッターメニューを設定できます。

当サイトの例

スマホ用の固定フッターメニューの例

固定フッターメニューを表示するには、「外観」>「メニュー」から、「固定フッターメニュー(SP)」にチェックを入れて有効化する必要があります。

以下のように、表示したいメニューを作成してから「固定フッターメニュー(SP)」にチェックをいれて保存します。

固定フッターメニューの設定画面

詳しくはSWELL公式マニュアルをご覧ください。

>>スマホ用の固定フッターメニューの設定方法

サイトのベースとなるデザイン・レイアウトの設定

サイト全体に関わる基本的な設定は、「外観」>「カスタマイズ」>「サイトの全体設定」というメニューの中でさらにパネル分けして整理されています。

「サイト全体設定」メニュー
「サイト全体設定」の中身

詳しくはSWELL公式マニュアルをご覧ください。

>>サイトのベースとなるデザイン・レイアウトの設定方法

それぞれ、簡単に紹介します。

基本カラー

前述の「サイト全体の基本カラーの設定」をご覧ください。

基本デザインの設定

「サイトの全体設定」>「基本デザイン」メニューの中にある項目について。

「サイトの全体設定」>「基本デザイン」
「基本デザイン」メニューで設定できること
  • 全体の質感
    • フラットにする
    • 丸みをもたせる
  • フォント
    • 種類
    • サイズ
  • コンテンツ幅の設定
  • サブメニューの表示形式
  • ページ背景

なお、(サイト全体ではなく)記事内の所定の箇所だけフォントサイズを変更する方法は、以下の記事を参考にどうぞ。

NO IMAGE画像

「サイトの全体設定」>「NO IMAGE画像」メニュー内の項目について。

「NO IMAGE画像」設定メニュー

NO IMAGE画像とは、記事一覧リストでアイキャッチ画像が設定されていない投稿を表示する時にその代わりに表示される画像のこと。

このメニューでは、NO IMAGE画像を設定できます。

タイトルデザイン

「サイトの全体設定」>「タイトルデザイン」メニュー内の項目について。

「サイトの全体設定」>「タイトルデザイン」
「タイトルデザイン」で設定できること
  • サブコンテンツのタイトルデザイン
  • ウィジットタイトルのデザイン

サブコンテンツのタイトル」とは記事ページの本文下に表示される「この記事を書いた人」や「関連記事」などのエリアのタイトルのことや、メインコンテンツ内に挿入されるウィジェットのタイトルのこと。

コンテンツヘッダー

「サイトの全体設定」>「コンテンツヘッダー」メニュー内の項目について。

「サイト全体設定」>「コンテンツヘッダー」

「コンテンツヘッダー」とは、タイトルの表示位置を以下のように「コンテンツ上」に設定したときに、

ページのコンテンツ上部に現れるタイトルエリアのことです。

ここがコンテンツヘッダー

このエリアに対して、

  • 表示する画像を設定したり
  • 好きな色を好きな透明度で被せたり
  • ドット上のテクスチャを加えたり

の設定ができます。

お知らせバー

「サイトの全体設定」>「お知らせバー」メニュー内の項目について。

「サイト全体設定」>「お知らせバー」

お知らせバー」とは、以下のようなヘッダーの上下に表示できるエリアのこと。

お知らせバー
「お知らせバー」メニューで設定できること
  • お知らせバーを表示するかどうか
  • お知らせバーの表示位置
  • お知らせバーの表示タイプ
  • お知らせバーの表示テキスト
  • お知らせバーのリンク先URL
  • お知らせバーの背景効果
  • お知らせバーの色

なお、「Pochip Pro」という有料プラグインを導入すると、以下のように、お知らせバーにセール情報を自動表示できます。

お知らせバーにセール情報を自動表示できる

物販でのアフィリエイトを促進したい方は導入するといいですよ。詳しくは以下をご覧ください。

パンくずリスト

「サイトの全体設定」>「パンくずリスト」メニュー内の項目について。

「サイト全体設定」>「パンくずリスト」

パンくずリストとは、ウェブサイト内でユーザーが現在どのページにいるのかを視覚的に示すナビゲーション機能。

SWELLだと以下のように表示されます。

パンくずリスト
「パンくずリスト」メニューで設定できること
  • パンくずリストの表示位置
  • 「ホーム」の文字列を変更するかどうか
  • パンくずリストの背景効果を無くすかどうか

ページャー

「サイトの全体設定」>「ページャー」メニュー内の項目について。

「サイト全体設定」>「ページャー」

ページャーとは、以下のように、投稿リストなどの下に表示されるページ送り用のナビゲーションのこと。

ページャー
「ページャー」メニューで設定できること
  • ページャーの形
  • ページャーのデザイン

スマホ開閉メニュー

「サイトの全体設定」>「スマホ開閉メニュー」メニュー内の項目について。

「サイト全体設定」>「スマホ開閉メニュー」

以下のように、スマホ上部にはハンバーガーメニューがありますよね。

スマホのハンバーガーメニュー

このハンバーガーメニューをタップして表示されるメニューをカスタマイズできます。

「スマホ開閉メニュー」内で設定できること
  • メニューのカラー設定
  • メインメニュー上に表示するタイトル
  • ページャーのデザイン

上記の設定方法は、(前述の公式マニュアルの記事ではなく)以下の記事にありますのでご覧ください。

>>スマホメニューの設定方法

なお、スマホメニュー内にウィジェットを設置することができます。

たとえばこんな感じに

スマホメニュー内にウィジットを設置した例

詳細は以下をご覧ください。

>>スマホメニュー内にウィジェットを設置する方法

下部固定ボタン・メニューの設定

「サイトの全体設定」>「下部固定ボタン・メニュー」メニュー内の項目について。

「サイト全体設定」>「下部固定ボタン・メニュー」

SWELLでは、ページ下部に「目次」「トップに戻る」といったボタンを設定できます。

画面右下のボタン

上記の設定方法は、(前述の公式マニュアルの記事ではなく)以下の記事にありますのでご覧ください。

>>固定目次ボタンの設定方法

SNSアカウント情報の設定

ヘッダーやフッターなどに表示されるSNSのアイコンリストのリンク先を設定できます。

アカウント情報に関する設定は、「外観」>「カスタマイズ」>「SNS情報」というメニューから設定できます。

「SNS情報」の設定画面

詳しくはSWELL公式マニュアルをご覧ください。

>>サイト運営者のSNSアカウント情報を設定する方法

トップページの設定

ブログの第一印象を決めるトップページ。
SWELLでは、このトップページを自由にレイアウトできるのが大きな魅力です。

トップページに関わる設定は、「外観」>「カスタマイズ」>「トップページ」というメニューの中でさらにパネル分けして整理されています。

カスタマイザー 内の「トップページ」
「トップページ」内で説明できる項目
「トップページ」で設定できる項目
  • メインビジュアル
  • 記事スライダー
  • ピックアップバナー
  • コンテンツ上の余白量

メインビジュアル

メインビジュアル」とは、トップページを開いた時に最初に目に飛んでくるエリアのことです。

メインビジュアル

メインビジュアルには画像を使うか動画を使うかを選択できます。

メインビジュアルの設定は、カスタマイザー内の「トップページ」>「メインビジュアル」で行います。

「トップページ」>「メインビジュアル」

詳しくはSWELL公式マニュアルをご覧ください。

>>メインビジュアルの設定方法

記事スライダー

記事スライダーとは、トップページにおいて画像が右から左に流れていく(スライドする)エリアのこと。

記事スライダー

注目記事やコンテンツを視覚的に見せたい場合は、活用してみましょう。

記事スライダーの設定は、カスタマイザー内の「トップページ」>「記事スライダー」で行います。

「トップページ」>「記事スライダー」

詳しくはSWELL公式マニュアルをご覧ください。

>>記事スライダーの設定方法

ピックアップバナー

「ピックアップバナー」とは、トップページに表示できる画像バナー形式のナビゲーションメニューのことです。

ピックアップバナー

注目記事やコンテンツを視覚的に見せたい場合は、活用してみましょう。

メニューの作成

ピックアップバナーを使用するには、まずカスタムメニューを用意します。

外観」>「メニュー」をクリック後、「ピックアップバナー」にチェックを入れ、新規メニューの作成します。

ピックアップバナーのメニュー作成

次に、画面左側の「メニュー項目を追加」からピックアップバナーとしてリンクを設置したいページを選びます。

これで、「ピックアップバナー」が表示されるようになります。

カスタマイズ

ピックアップバナーのカスタマイズは、カスタマイザー内の「トップページ」>「ピックアップバナー」メニュー内にて行います。

「トップページ」>「ピックアップバナー」

ここで、ピックアップバナーのレイアウトやデザインなどを変更できます。

詳しくはSWELL公式マニュアルをご覧ください。

>>ピックアップバナー機能の使い方

記事一覧リストの設定

記事一覧リストに関する設定は、カスタマイザー内の「記事一覧リスト」というメニュー内で行います。

カスタマイザーの「記事一覧リスト」メニュー
「記事一覧リスト」メニュー内で設定できる項目
  • リストのレイアウト設定
  • 投稿情報の表示設定
  • カテゴリーの表示設定
  • サムネイル画像の比率設定
  • マウスホバー時の設定
  • タブ切り替え設定
  • 投稿一覧から除外するカテゴリー・タグ

レイアウトの設定

「リストのレイアウト設定」エリアでは、記事一覧リストのレイアウトをいろいろ設定できます。

レイアウトの例

カード型(3カラム)
リスト型
リスト型(左右交互)
ブログ型
サムネイル型(1カラム)
サムネイル型(2カラム/文字なし)

詳しくはSWELL公式マニュアルをご覧ください。

>>記事一覧リスト(投稿リスト)のデザイン・レイアウト設定

投稿リストに表示する抜粋文の設定方法

投稿リストには記事の抜粋文を表示できます。

抜粋文はこれ

抜粋文

SWELLの投稿リストに表示される抜粋文は、デフォルトの状態では本文の内容から自動でトリミングされます。

しかし、各ページの『抜粋』という設定項目が入力されている場合はそちらが優先されるので、好きな抜粋文に変更できます。

手順は、エディターの右側の投稿設定パネルにて、「抜粋を追加」をクリックし、こちらに好きな抜粋文を入力すればOK。

抜粋文をカスタマイズする方法

詳しくはSWELL公式マニュアルをご覧ください。

>>投稿リストに表示される『抜粋文』に好きな文章を設定する方法

投稿リストの表示件数を変更する方法

トップページやアーカイブページで表示される投稿リストの表示件数は任意の件数に変更できます。

管理メニューの「設定」>「表示設定」に進み、「1ページに表示する最大投稿数」の件数を変更し、保存すればOKです。

投稿リストの表示件数の変更方法

詳しくはSWELL公式マニュアルをご覧ください。

>>トップページ・アーカイブページの投稿リストの表示件数を変更する方法

投稿・固定ページの設定

投稿・固定ページに関する設定は、カスタマイザー内の「投稿・固定ページ」というメニュー内で行います。

投稿・固定ページに関わる設定は、「外観」>「カスタマイズ」>「投稿・固定ページ」というメニューの中でさらにパネル分けして整理されています。

カスタマイザーの「投稿・固定ページ」
「投稿・固定ページ」内の詳細メニュー
「投稿・固定ページ」メニュー内で設定できる項目
  • タイトル
  • PR表記
  • アイキャッチ画像
  • コンテンツのデザイン
  • 目次
  • SNSシェアボタン
  • 記事下エリア

タイトル

投稿・固定ページのタイトルとは、以下の部分のこと。

投稿・固定ページのタイトル

上記のタイトルの表示位置や表示する情報をカスタマイズできます。

タイトルの設定は、カスタマイザー内の「投稿・固定ページ」>「タイトル」で行います。

「投稿・固定ページ」>「タイトル

詳しくはSWELL公式マニュアルをご覧ください。

>>投稿ページ・固定ページの「タイトル」に関する基本設定

PR表記

2023年10月1日施行のステマ規制により、アフィリエイト広告などを貼っている記事内には広告であることを表記する必要があります。

SWELLでは、そのステマ規制への対策として「PR表記」機能が実装されており、以下のような表示ができます。

PR表記

PR表記の設定は、カスタマイザー内の「投稿・固定ページ」>「PR表記」で行います。

PR表記の設定メニュー
「PR表記」メニュー内で設定できる項目
  • 全投稿に対してデフォルトでPR表記を挿入するかどうか
    • 投稿でのPR表記を、小さく表示するか、大きく表示するか
  • 全固定ページに対してデフォルトでPR表記を挿入するかどうか
  • PR表記で表示するテキスト

詳しくはSWELL公式マニュアルをご覧ください。

>>【SWELL – ver. 2.7.9 アップデート情報】

アイキャッチ画像

アイキャッチ画像とは、記事の最初に表示する画像のこと。

アイキャッチ画像

アイキャッチ画像は、ブログ記事の第一印象を左右する重要な要素です。

アイキャッチ画像の設定は、カスタマイザー内の「投稿・固定ページ」>「アイキャッチ画像」で行います。

アイキャッチ画像の設定メニュー
「アイキャッチ画像」メニュー内で設定できる項目
  • 本文の始めにアイキャッチ画像を表示するかどうか
  • アイキャッチ画像がない場合にNO IMAGE画像を表示するかどうか

詳しくはSWELL公式マニュアルをご覧ください。

>>投稿・固定ページでのアイキャッチ画像の表示方法

各記事のアイキャッチ画像の設定

アイキャッチ画像の設定は、各記事投稿画面の右サイドバーにある「アイキャッチ画像」から行います。

アイキャッチ画像の設定

アップロードする画像の推奨サイズは横幅1200px以上・アスペクト比16:9が一般的で、これにより一覧表示やSNSシェア時にも美しく表示されます。

デザインの統一感を出すには、以下に注意すると良いでしょう。

  • サイズとアスペクト比を毎回統一する
     → 不揃いな画像サイズはページ全体の見た目を崩す原因に。
  • 同じフィルターやトーンで編集する
     → CanvaやPhotoshopで明るさ・色味を統一すると、まとまり感が出る。

画像サイズと比率は、以下の記事も参考にどうぞ。

さらに、SWELLでは「アイキャッチなし」の記事でも見栄えが崩れないような設計がされています。

とはいえ、毎回統一感のあるアイキャッチを設定することで、ブランドとしての信頼性や記事のクリック率が大きく向上します。

ヒデハル

ブログの個性を表現する意味でも、ぜひこだわりたいポイントです!

記事コンテンツのデザイン設定

記事コンテンツのデザインのうち、以下に関する設定です。

「コンテンツのデザイン」メニュー内で設定できる項目
  • H2〜H4見出しのデザイン
  • セクション見出しのデザイン
  • 太字の下に点線をつけるかどうか
  • テキストリンクにアンダーラインをつけるかどうか

SWELLでは、見出しや装飾のデザインを細かく調整できるため、読みやすく印象的な記事を作ることが可能です。

H2見出しのデザイン例

H2見出しのデザイン一覧
ヒデハル

見出しの色も変更できるよ!

見出しと装飾のデザインを統一することで、サイト全体に一貫性とプロらしさが生まれます。

記事コンテンツのデザイン設定は、カスタマイザー内の「投稿・固定ページ」>「コンテンツのデザイン」で行います。

「コンテンツのデザイン」設定メニュー

詳しくはSWELL公式マニュアルをご覧ください。

>>見出しやマーカーなど、記事内コンテンツのデザイン切り替え方法

目次のデザイン設定

投稿・固定ページの目次とは以下の部分のこと。

投稿・固定ページの目次

SWELLでは、記事中にある一つ目のH2タグの直前に目次が自動生成されます。

目次の設定は、カスタマイザー内の「投稿・固定ページ」>「目次」で行います。

目次の設定メニュー
「目次」メニュー内で設定できる項目
  • 目次を表示するかどうか
  • 目次のタイトル
  • 目次のデザイン
  • どの部分、どの階層まで目次として表示するか
  • 目次の直前に広告を表示させるかどうか

詳しくはSWELL公式マニュアルをご覧ください。

>>目次に関する設定

SNSシェアボタン

SWELLではブログ記事を簡単にSNSで拡散できる「シェアボタン」を設置することできます。

SNSシェアボタン

SNSシェアボタンの設定は、カスタマイザー内の「投稿・固定ページ」>「SNSシェアボタン」で行います。

SNSシェアボタンの設定メニュー
「SNSシェアボタン」メニュー内で設定できる項目
  • シェアボタンの表示位置
  • 表示するシェアボタンの種類
  • シェアボタンのデザイン
  • 「記事下部シェアボタン」の上に表示するメッセージ
  • Twitter用の追加設定

詳しくはSWELL公式マニュアルをご覧ください。

>>「SNSシェアボタン」の設定方法

記事下エリア

記事下エリアの設定は、カスタマイザー内の「投稿・固定ページ」>「記事下エリア」で行います。

記事下エリアの設定メニュー
「記事下エリア」メニュー内で設定できる項目
  • SNSアクションエリア設定
  • 前後記事へのページリンク設定
  • 著者情報エリアの設定
  • 関連記事エリアの設定
  • コメントエリアの設定

詳しくはSWELL公式マニュアルをご覧ください。

>>投稿・固定ページに表示される各パーツのカスタマイズ方法

記事・固定ページごとの表示・非表示設定

ここまで説明してきた各パーツのサイト全体での共通設定はカスタマイザーにて設定可能ですが、これらの設定をページ個別で上書き設定できます。

たとえば「特定のページでサイドバーを非表示にする」などということがSWELLでは可能です。

各投稿・各固定ページごとに、エディターの右側に【SWELL設定】と書かれた設定パネルがあり、そこで上書き設定できます。

投稿ページごとの設定項目
固定ページごとの設定項目

詳しくはSWELL公式マニュアルをご覧ください。

>>記事・固定ページごとに表示・非表示を設定できるパーツ一覧

カテゴリーやタグの設定

ブログを運営するうえで、記事をカテゴリーやタグで整理することはとても重要です。

SWELLでは、この整理機能を活用することで、読者が目的の記事にスムーズにたどり着ける構造を作ることができます。

まず「カテゴリー」は、大きな分類を作るために使います。
たとえば、「ライフスタイル」「旅行」「グルメ」などが該当します。

記事投稿画面の右サイドバーで、既存のカテゴリーを選択したり、新たに追加したりできます。

カテゴリーの設定

カテゴリーの一覧は、WordPress管理画面の「投稿」>「カテゴリー」で確認できますよ。

SWELLでは、カテゴリーにアイキャッチ画像や説明文を設定できます。そうすることで、見た目の印象や情報の分かりやすさもアップします。

特にカテゴリー一覧ページでは、画像付きで表示することで訪問者のクリック率が高まります。

詳しくは後述する「アーカイブページの設定」ご覧ください。

タグの使い方

一方、タグは記事に関連する「キーワード」を補足的に追加するための機能です。

1記事に複数のタグを設定でき、同じタグの記事をまとめて表示できるようになります。
たとえば、「カフェ」「おすすめ店」「東京」など、より具体的な分類に使えます。

タグの追加は、WordPress管理画面の「投稿」>「タグ」で行います。

「投稿」>「タグ」の画面

記事投稿画面の右サイドバーで、既存のタグを選択します。

投稿画面でタグを設定する

SWELLでは、タグにアイキャッチ画像や説明文を設定できます。そうすることで、見た目の印象や情報の分かりやすさもアップします。

詳しくは後述する「アーカイブページの設定」ご覧ください。

カテゴリーとタグの使い方のポイント

整理のポイントとしては、カテゴリーは少なめに、タグは自由に使うのが基本です。

カテゴリーが多すぎるとサイト全体が散らかって見えるため、5〜7個に絞り、それぞれの中でタグを活用していくのが効果的です。

SWELLでは、タグやカテゴリーの一覧ページのデザインも美しく整っており、整理された構造をしっかりと活かすことができます。

アーカイブページの設定

アーカイブページとは、WordPressサイト内の投稿を「カテゴリー」「タグ」「日付」などの特定の条件でまとめて一覧表示するページのこと。

たとえば当サイトだと、「SEO」というカテゴリーページは以下の感じ。

カテゴリーページの例

カスタマイザーでの基本設定

アーカイブページに関する基本設定は、カスタマイザー内の「アーカイブページ」というメニュー内で行います。

カスタマイザー>「アーカイブページ」
「アーカイブページ」メニュー内で設定できる項目
  • 「タームアーカイブページ」のタイトル表示位置の設定
  • 「コンテンツ内」に設定されているページのタイトルデザイン
  • 「タームナビゲーション」をカテゴリーページに表示するかどうか

詳しくはSWELL公式マニュアルをご覧ください。

>>アーカイブページに関する基本的な設定項目

個別の設定

カテゴリー・タグなどの「タームアーカイブページ」については、それぞれのページで個別に表示をカスタマイズできます。

カテゴリーページの場合

WordPressダッシュボードの「投稿」>「カテゴリー」をクリックし、任意のカテゴリーの「編集」をクリックします。

「投稿」>「カテゴリー」の画面

すると、以下の設定画面があります。

個別設定画面(前半)
個別設定画面(後半)

上記の設定画面で、カテゴリーページをカスタマイズできます。

タグページに関しても、WordPressダッシュボードの「投稿」>「カテゴリ」をクリックし、任意のタグの「編集」をクリックすると、上記の設定画面があります。

詳しくはSWELL公式マニュアルをご覧ください。

>>カテゴリー・タグページごとに個別カスタマイズできる設定項目一覧

ブロックエディターの使い方

ブロックエディターとは

SWELLでは、WordPressの「ブロックエディター(Gutenberg)」を活用して記事を作成します。

このエディターは、テキストや画像などを「ブロック」として配置していく方式で、直感的な操作が特徴です。

たとえば、こんな記事があったとして▼

実際は以下のようなブロックで構成されてます▼

ブロックエディターの基本的な使い方

WordPressの管理画面から「投稿」>「新規追加」をクリックすると、記事の編集画面に入ります。

ブロックの呼び出し方は以下の3とおりあります。

  • 右の+ボタンをクリック
  • 左の+ボタンをクリック
  • /(スラッシュ)を入力

呼び出し方1:右の+ボタンをクリック

STEP
「+(プラス)」ボタンをクリック

本文部分にカーソルを置き、「+(プラス)」ボタンをクリックします。

STEP
希望のブロックを選ぶ

表示された中に希望のブロックがあれば選びます。もし無ければ、「すべて表示」をクリックします。

STEP
希望のブロックを選ぶ

呼び出し方2:左の+ボタンをクリック

STEP
「+(プラス)」ボタンをクリック

本文部分にカーソルを置き、左上の「+(プラス)」ボタンをクリックします。

STEP
希望のブロックを選ぶ

呼び出し方3:/(スラッシュ)を入力

STEP
/(スラッシュ)を入力

本文部分にカーソルを置き、/(スラッシュ)を入力します。すると、ブロックがいくつか表示されます。

STEP
希望のブロック名を入力する

/(スラッシュ)に続き、希望のブロック名を入力します。例:表なら「table」と入力。

ブロック名の詳細は以下をご覧ください。

各ブロックは右側のサイドバーからスタイルを細かく調整できます。

ブロックは右側サイドバーで設定する


文字の太さ・色・余白の調整・背景色の設定なども、コード不要で簡単に行えるのが魅力です。

ブロックの種類

段落・画像・見出し・リストなどの基本ブロックに加え、SWELL独自のブロックも多数用意されています。

SWELL独自ブロックは、ブロックエディター内で「+(プラス)」をクリックし、「SWELLブロック」カテゴリーから選べます。

SWELL独自ブロック一覧

SWELL独自ブロックの中で、よく使われるのが以下のようなブロックです。

  • ふきだし:キャラクターアイコンとセリフを表示できる。レビューやQ&A形式の記事に最適。
  • ブログカード:自サイト内の記事をカード形式で表示。内部リンク強化に役立つ。
  • SWELLボタン:ボタンにリンクを設定して表示。アフィリエイトにも活用可能。
  • ステップ:手順や流れを視覚的に見せる。マニュアルや手順解説に効果的。

これらのブロックは、どれもコード不要で見た目が整っており、使うだけでプロっぽい記事に仕上がります。

また、各ブロックは「スタイル」や「カスタムクラス」などの設定項目もあり、オリジナル感を出すことも可能です。たとえば、ふきだしの色や向きを変えたり、SWELLボタンの見た目を変えたりと細かな調整も自在です。

独自ブロックはただ使うだけでなく、読者の視線を誘導したり、情報を分かりやすく整理するための「設計ツール」として活用する意識を持つと、より効果的です。

ヒデハル

SWELL独自ブロックはまじで神!

ブロックエディターの使い方は以下で詳しく解説したので、そちらをご覧ください。

広告の設定方法

続いては、広告の設定方法をみていきましょう。

ブログで収益を上げる手段のひとつが、アフィリエイト広告の設置です。

SWELLには、初心者でも簡単に広告を設置できる機能が充実しており、効率的に収益化を目指せます。

アフィリエイト広告のリンクコードは、提携しているASP(A8.net、もしもアフィリエイト、Amazonアソシエイトなど)から取得します。

※ASPの提携がまだの方は以下の記事を参考にどうぞ。

目次前に広告を表示させる方法

SWELLでは、投稿ページの目次前(後)に広告を表示するのを、一括して設定できます。

目次前の広告表示位置

上記の広告の設定は、WordPress管理画面の「SWELL設定」>「広告コード」内で行います。

目次前(後)の広告の設定画面

詳しくはSWELL公式マニュアルをご覧ください。

>>目次前に広告を表示させる方法

広告タグ管理機能の使い方

SWELLには、広告タグブロックと、その広告タグブロックを管理する機能とがあります。

広告タグブロックの例

広告タグブロックと広告タグ管理機能を組み合わせると、広告をかんたん設置でき、かつクリック率も計測できて便利です。

広告タグの管理は、WordPress管理メニューの「広告タグ」内で行います。

広告タグメニュー

詳しくは公式マニュアルをご覧ください。

>>広告タグ管理機能・広告タグブロックの使い方

記事内用の広告を[ad]で簡単に呼び出す方法

SWELLでは、あらかじめ登録した特定の広告コードを、ショートコード[ad]で簡単に呼び出せます。

広告コードの設定は、WordPress管理画面の「SWELL設定」>「広告コード」内で行います。

広告コードの設定画面

上記で登録した広告の呼び出し方は非常に簡単で、エディター上で[ad]と入力するだけです。

ショートコードを実際に使うときは、角括弧([ ])は半角にしてください。

詳しくはSWELL公式マニュアルをご覧ください。

>>記事内用の広告を[ad]で簡単に呼び出せるようにする方法

物販のアフィリエイトリンクを作る方法

SWELLでは、物販のアフィリエイトリンクをおしゃれに作れます。

こんな感じ

上記の物販アフィリエイトリンクを作るには、Pochipp(ポチップ)というプラグインを利用します。

詳細な手順は以下の記事をご覧ください。

アフィリエイトリンクをボタンリンクにする方法

SWELLでは、SWELLボタンブロックを使うことで、アフィリエイトリンクのHTMLタグを改変せずにボタンリンクにできます。

STEP
SWELLボタンを呼び出す
STEP
アフィリエイトリンクを貼り付け

サイドバーの「広告タグを直接入力」欄にアフィリエイトリンクを丸ごとコピペします。

上記の設定で、アフィリエイトリンクのボタンを簡単に作れます!

こんな感じ

\レンタルサーバーならmixhostがコスパ最強/

Googleアドセンスの貼り方

SWELLでは、Googleアドセンス広告を簡単に設置できます。

詳しくはSWELL公式マニュアルをご覧ください。

>>Googleアドセンスの貼り付け方【申請コード・広告ウィジェット・目次前広告・自動広告】

>>アドセンス自動広告コードの設定方法

>>投稿リストにインフィード広告を表示する方法【Google AdSense】

>>SWELLで「ads.txtファイル」を編集する方法【Google AdSense対策】

収益化を意識したブログ構成と導線設計

ブログで収益化を目指すなら、ただ記事を増やすだけでは成果につながりません。
読者の行動を促す「導線設計」と「収益ポイントの明確化」がカギになります。

まずはブログ全体の構成を「3階層」で考えてみましょう。

  1. 集客記事:検索からの流入を狙った記事。悩み解決やハウツーが中心。
  2. 教育記事:信頼を獲得し、興味を持たせる記事。比較・レビュー・事例など。
  3. 収益記事:商品の購入やアフィリエイトリンクのクリックを促す記事。

この3層構成を意識して、記事同士を内部リンクでつなぐことで、読者の流れをコントロールできます。

たとえば、「おすすめの英語アプリ10選(集客記事)」→「実際に使ってみたレビュー(教育記事)」→「アフィリエイトリンク付きの登録ガイド(収益記事)」という導線です。

SWELLには、読者を自然に誘導するための便利な機能がそろっています。
たとえば、「投稿リストブロック」で関連記事を一覧表示したり、「ブログカード」で他の記事への導線を視覚的に見せたりできます。

また、「CTAエリア」などを使って、各記事の下部に行動を促すボタンや案内を設置するのも有効です。
これにより、読み終わった読者が「次に何をすればいいか」を迷わず行動に移せます。

さらに、カテゴリー構成も収益導線に影響します。
収益記事に近いカテゴリーを目立つ場所に配置し、回遊しやすいサイト設計にすることで、コンバージョン率を高めることができます。

「収益化」は偶然ではなく、設計次第で実現するものです。
SWELLの機能を活かして、訪問者を自然にゴールへ導くブログ構成を意識しましょう。

ウィジットの使い方と設定

ウィジェットとは、Webサイトのサイドバー、フッター、ヘッダーなど特定のエリアに設置できる「パーツ」や「部品」のこと。

SWELLでは、ウィジェットエリアが非常に柔軟に設計されており、目的に応じて多彩な活用ができます。

ウィジェットの設定は、WordPress管理画面の「外観」>「ウィジェット」で行います。

「外観」>「ウィジェット」

SWELLで使用できるウィジット一覧

SWELLには、20個のウィジェットがあります。(2025年6月時点)

SWELLで使用できるウィジット一覧

サイドバー・記事下・フッターなど、複数のウィジェットエリアが用意されており、それぞれに任意の項目を追加できます。

たとえば、以下のようなウィジェットの使い方があります。

  • サイドバーに「検索窓」「プロフィール」「人気記事一覧」を表示
  • 記事下に「関連記事」「CTA(行動喚起ボタン)」を設置
  • フッターに「カテゴリ一覧」「お問い合わせページへのリンク」「SNSボタン」などを配置

SWELLでは、ウィジェットブロックの装飾もデザイン性が高く、デフォルトのままでも美しく整っています。
また、ウィジェットの中にはSWELL専用のものもあり、よりおしゃれなボックスやボタンも簡単に追加できます。

さらに、ウィジェットの「表示条件設定」も強力です。
たとえば、「特定のカテゴリーだけに表示」「スマホでは非表示にする」といった設定が可能で、ユーザーの閲覧環境に応じた最適な表示ができます。

ウィジェットを戦略的に使いこなせば、読者の利便性が上がるだけでなく、回遊率やコンバージョン率の向上も期待できます。

詳しくはSWELL公式マニュアルをご覧ください。

>>SWELLで使用できるウィジェットエリア一覧

人気記事をウィジェット内に表示する方法

SWELLでは、人気記事をウィジェット内に表示できます。

当サイトの姉妹サイトでは、フッター内に表示させてます。以下の感じで。

人気記事の表示例

「外観」>「ウィジェット」からウィジェット編集ページへ移動すると、画面左側に使用できるウィジェットアイテムが整列しています。

この中から、[SWELL]新着記事と表示されているアイテムを、表示したいウィジットエリアにドラッグ&ドロップすれば、ビュー数の多い順に記事をリスト表示できます。

表示させたいウィジェットエリアへドラッグ&ドロップしてください

詳しくはSWELL公式マニュアルをご覧ください。

>>人気順に記事をリスト表示できるウィジェット機能

新着記事をウィジェット内に表示する方法

SWELLでは、新着記事をウィジェット内に表示できます。

当サイトの姉妹サイトでは、サイドバー内に表示させてます。以下の感じで。

新着記事の表示例

「外観」>「ウィジェット」からウィジェット編集ページへ移動すると、画面左側に使用できるウィジェットアイテムが整列しています。

この中から、[SWELL]新着記事と表示されているアイテムを、表示したいウィジットエリアにドラッグ&ドロップすれば、サムネイル画像付きで最新記事をリスト表示できます。

表示させたいウィジェットエリアへドラッグ&ドロップしてください

詳しくはSWELL公式マニュアルをご覧ください。

>>新着記事をサムネイル画像付きでリスト表示できるウィジェット機能

プロフィールの設定方法

プロフィールページは、ブログの信頼性を高め、読者との関係を築くうえで欠かせない存在です。

SWELLでは、プロフィールをウィジェット内に表示できます。簡単かつオシャレに!

当サイトでは、サイドバー内に表示させてます。以下の感じで。

プロフィールの設置例

「外観」>「ウィジェット」からウィジェット編集ページへ移動すると、画面左側に使用できるウィジェットアイテムが整列しています。

この中から、[SWELL]プロフィールと表示されているアイテムを、表示したいウィジットエリアにドラッグ&ドロップすれば、プロフィールを表示できます。

表示させたいウィジェットエリアへドラッグ&ドロップしてください

詳しくはSWELL公式マニュアルをご覧ください。

>>プロフィールを表示できるウィジェットの設定方法

プロフィールをウィジット以外で設定する方法

プロフィールをウィジット以外で設定することもできます。

まず、WordPress管理画面で「固定ページ」>「新規追加」からページを作成します。

次に、「外観」>「メニュー」で、そのページをグローバルメニューフッターメニューに追加すればOK。

当サイトではフッターメニューにプロフィールを設置しています。

フッターメニューにプロフィールを設置した例

ウィジットに設定するよりも、上記方法のほうが、より詳細で柔軟なプロフィールを作成できます。

ちなみに、「お問い合わせ」や「プライバシーポリシー」のページをまだ設置してないなら、この機に作っておきましょう。以下の記事を参考にどうぞ。

>>SWELLの初期設定を初心者向けにやさしく解説!

これにより、「どんな人が書いているか分からない」「質問したいけど連絡先がない」といった不安を解消できます。

訪問者に安心感を与え、信頼されるブログへと育てていくためにも、これらのページはぜひ早めに設置しておきましょう。

ショートコードの使い方

ショートコードとは、WordPress独自の仕組みで、角括弧([ ])で囲まれた短いコードを記事やページに挿入することで、特定の機能やコンテンツを簡単に呼び出せる機能です。

よく使う定型文や機能(フォーム、ボタン、動画埋め込みなど)を、難しいプログラミング知識なしで何度でも呼び出せます。

SWELLにも便利なショートコードがたくさん!

ショートコードを実際に使うときは、角括弧([ ])は半角にしてください。

記事内広告 – ad

記事の間に表示させる広告呼び出すときは、[ad]を使います。

詳しくは前述の「記事内用の広告を[ad]で簡単に呼び出す方法」をご覧ください。

目次 – swell_toc

[swell_toc]を本文中に設置することで、その位置に目次を生成するできます。

評価用スター – review_stars

評価用スターを表示するには、[review_stars 4.5/5]のような記載をします。
すると、以下の表示になります。

詳しくは以下の記事をご覧ください。

デバイス別改行コード – pcbr / spbr

デバイス別に改行するには以下の記載をします。

  • [pcbr]というショートコードでPCサイズでのみ改行
  • [spbr]というショートコードでSPサイズでのみ改行

ログイン制限コンテンツ – only_login / only_logout

「ログインしている人にだけ」or「ログインしていない人にだけ」コンテンツを表示したい時用のショートコードは以下の記載をします。

[only_login]

ログイン中ユーザーにだけ表示したいコンテンツをここに

[/only_login]
[only_logout]

非ログインユーザーにだけ表示したいコンテンツをここに

[/only_logout]

まだ公開はしたくないけど実際にサイト上で確かめてみたい場合に便利です。

詳しくはSWELL公式マニュアルをご覧ください。

>>ログイン限定コンテンツ用ショートコードの使い方

アイコン用ショートコード

SWELLでは、数種類のアイコンをフォントとして読み込んでいます。(例://)

これらのアイコンを文中で簡単に呼び出すためのショートコードがあります。

[icon ここにアイコンクラス名]

または

[アイコン ここにアイコンクラス名]

もしくは、Font Awesomeのアイコンを使うときなどにクラス名が複数必要な場合、

[icon class="ここにアイコンのクラス名"]

または

[アイコン class="ここにアイコンのクラス名"]

としてもクラスを指定できます。

詳しくはSWELL公式マニュアルをご覧ください。

>>アイコンを簡単に呼び出せるショートコードの使い方

ブロック化もされているショートコード

ここから紹介するショートコードは、ブロックエディターでは個別のブロックとして使用できるようになっています。

ブログパーツ – blog_parts

SWELLではエディター機能のほとんどをショートコードなしで使用できますが、その反面、ウィジェットなどで装飾アイテムが使いにくくなります。

しかし、そのデメリットを完全にカバーできる機能として、「ブログパーツ」機能があります。

SWELLでは「ブログパーツ」として登録したコンテンツを、ショートコードで簡単に呼び出すことができます。

[blog_parts id="投稿ID"]        //IDから呼び出す場合
[blog_parts name="ブログパーツ名"] //パーツ名から呼び出す場合

ブログパーツの登録は、WordPress管理画面の「ブログパーツ」内で行います。

ブログパーツ一覧画面

ブログパーツについては以下の記事でまとめています。

>>ブログパーツ

カスタムバナー – custom_banner

好きな画像、好きな文章で、好きなページへのバナーを作成できる便利なショートコードがあります。

[custom_banner title="タイトル" text="テキスト" link="リンク先" img_url="画像"]

詳しくはSWELL公式マニュアルをご覧ください。

>>画像編集の必要なし!便利なカスタムバナー機能の使い方

バナーリンクブロックについては以下の記事でまとめています。

>>バナーリンクブロック

関連記事ブログカード – post_link

関連記事の投稿IDを指定することで、そのページへのブログカードを挿入できるショートコードがあります。

[post_link id="投稿ID"]

詳しくはSWELL公式マニュアルをご覧ください。

>>ブログカードを表示できるショートコードの使い方

関連記事ブロックについては以下の記事でまとめています。

>>関連記事ブロック

ふきだし

SWELLでは会話形式のような表現ができるふきだしがあります。

ヒデハル

これがふきだし

このふきだしを挿入できるショートコードがあります。

[ふきだし set="セット名"]テキストをここに[/ふきだし]

または、SWELL ver.2.3.0以降は以下の形式でも呼び出し可能です。

[ふきだし id="セットID"]テキストをここに[/ふきだし]

詳しくはSWELL公式マニュアルをご覧ください。

>>管理も簡単!SWELLのふきだし機能の使い方

ふきだしブロックについては以下の記事でまとめています。

>>ふきだしブロック

フルワイドコンテンツ

ページ幅一杯に背景を広げるフルワイドコンテンツを挿入できるショートコードがあります。

[full_wide_content]

ここにコンテンツを自由に配置

[/full_wide_content]

詳しくはSWELL公式マニュアルをご覧ください。

>>フルワイドコンテンツ用ショートコードの使い方

フルワイドブロックについては以下の記事でまとめています。

>>フルワイドブロック

投稿リスト

投稿リストを挿入できるショートコードがあります。

[post_list]

実際に上記のコードを使用してみます。

こんな感じ

詳しくはSWELL公式マニュアルをご覧ください。

>>投稿リストを簡単に呼び出せるショートコードの使い方

投稿リストブロックについては以下の記事でまとめています。

>>投稿リストブロック

SWELL設定(高速化/ 機能停止/ エディター)

WordPress管理画面の「SWELL設定」でカスタマイズできる項目を紹介します。

管理画面>SWELL設定

高速化設定

SWELLには、サイトの表示速度を高める機能が備わっているので、その設定を最適化しましょう。

WordPress管理画面で、「SWELL設定」>「高速化」タブをクリックします。

SWELL設定>高速化

キャッシュ機能

チェックをすべてオンにします。

キャッシュの設定例

上記に関する公式マニュアルは以下です。

>>SWELLで使用できるキャッシュ機能について

ファイルの読み込み

「SWELLのCSSをインラインで読み込む」&「コンテンツに合わせて必要なCSSのを読み込む」を両方オンにします。

「ファイルの読み込み」の設定例

このCSSの読み込みに関する機能追加については、以下の公式アップデート情報内で解説されています。

>>ver. 2.5.3 アップデート情報

遅延読み込み機能

「記事下コンテンツを遅延読み込みさせる」にオンにします。

「遅延読み込み機能」の設定例

上記に関する公式マニュアルは以下です。

>>SWELLで使用できる「パーツの後読み込み機能」について

「スクリプトを遅延読み込みさせる」をオンにします。

「スクリプトの遅延読み込み」の設定例

上記のスクリプトの遅延読み込み機能については、以下の公式マニュアルで解説されています。
基本は上記のように、スイッチをオンにするだけでよいかと。

>>「スクリプトの遅延読み込み」機能の使い方について

ページ遷移高速化

「Prefetch」をオンにします。

「ページ遷移高速化」の設定例

上記で「Prefetch」をオンにする理由は以下の公式マニュアルで解説されています。

>>ページ遷移高速化機能(pjax)の使い方と注意点

最後に「変更を保存」をクリックします。

機能停止

「機能停止」タブでは、機能を停止するかどうかを設定できます。

管理画面>SWELL設定>機能停止

いくつか例を紹介します。

セルフピンバック機能を停止

セルフピンバックとは、WordPressをやっている者同士で、お互いの記事を紹介するのを促進するためのもの。

でも、自分のサイト内で内部リンクを貼っているだけなのに、WordPressから「セルフピンバックしませんか?」というメールがきて、うざいだけ。この機能を停止するのがおすすめ。

先ほどと同じ「機能停止」のタブの中に、「WordPressの機能」というカテゴリがあります。「セルフピンバックを停止する」をオンしましょう。

セルフピンバックの停止

「変更を保存」ボタンをクリックして完了です。

参考:他のテーマであれば、「No Self Pings」というプラグインでセルフピンバックを防止できます。でもSWELLな上記設定だけで完了。楽ちん!

画像の拡大表示機能を停止

SWELLのデフォルト設定では、記事内の画像をクリックすると、拡大表示されます。

便利だなと思う方はそのままでよいですが、「いまいち…」と思う方は、この機能をオフしましょう。

「投稿画像をクリックで拡大表示する機能を停止する」にチェックを入れて、「変更を保存」ボタンをクリックすればOK。

画像の拡大表示の停止

SWELLのエディター設定

エディターの設定は、WordPress管理画面の「SWELL設定」>「エディター設定」内で行います。

SWELL設定>エディター設定

以下のように、「カラーセット」や「ボーダーセット」などのタブをクリックし、デザインをお好みに設定します。

エディター設定

記事コンテンツのデザイン設定」で前述したように、見出しなどは、カスタマイザー内の「投稿・固定ページ」 > 「コンテンツのデザイン」メニューから設定します。
このように、デザインのカスタマイズは、
・カスタマイザー
・SWELL設定>エディター設定
の2箇所で設定していきます。

詳しくはSWELL公式マニュアルをご覧ください。

>>見出しやマーカーなど、記事内コンテンツのデザイン切り替え方法

SWELLの使い方「その他」

ページ内リンクの貼り方

ページ内リンクとは、同じページ内の任意の箇所にリンクを設置できる機能です。アンカーリンクとも言われます。

たとえば、以下のリンクをクリックしてみてください。記事の最後のまとめまでジャンプします。

「まとめ」にジャンプ

詳しくは以下の記事をご覧ください。

headタグ内/body閉じタグ直前にコードを出力する方法

headタグ内へのコードの出力方法

SWELLのheadタグ内に任意のコードを出力する場合は、カスタマイザー内の「高度な設定」から行います。

カスタマイザー>高度な設定

広告やアクセス解析用のコードを挿入したり、Font Awesomeなどの外部ファイルを読み込んだり、に使います。

詳しくはSWELL公式マニュアルをご覧ください。

>>headタグ内にコードを出力する方法

body閉じタグ直前へのコードの出力方法

SWELLのbody閉じタグの直前に任意のコードを出力する場合も、headタグ内と同様、カスタマイザー内の「高度な設定」から行います。

追加で自作のスクリプトを記述したり、外部ファイルを読み込んだり、に使います。

詳しくはSWELL公式マニュアルをご覧ください。

>>body閉じタグ直前にコードを出力する方法

SWELLでよくある悩み・トラブルの対処法

表示が崩れたときの原因と解決方法

ブログの表示が突然崩れたり、レイアウトが意図しない形になると、焦ってしまいますよね。

SWELLでは滅多に大きなトラブルは起こりませんが、テーマの機能が多機能な分、細かな設定ミスや外部要因で崩れる可能性はあります。

ブロックエディターの不具合

まず最も多い原因は「ブロックエディターの不具合」です。

旧エディター(クラシックエディター)や互換性の低いプラグインを使用していると、ブロックの表示が乱れることがあります。

対処法としては、SWELLと相性の良い最新のGutenberg(ブロックエディター)環境を保つことが第一です。

CSSの競合

次に考えられるのが「CSSの競合」です。

外部プラグインが独自のスタイルを読み込んで、SWELLのレイアウトとぶつかる場合があります。
この場合、対象プラグインを一時停止し、どれが原因かを絞り込んでいきましょう。

キャッシュの影響

その他、キャッシュの影響も見逃せません。
ブラウザキャッシュやサーバーキャッシュが古いデータを表示していることが原因の場合は、キャッシュを削除し再読込してください。

キャッシュのクリアは、WordPress管理画面の「SWELL」>「リセット」から行います。

「SWELL」>「リセット」

私がキャッシュクリアで問題解決した以下の記事も参考にどうぞ。

「表示崩れ」は焦らず、原因を一つずつ切り分けて確認すれば、必ず解決できます。
特に設定を変更した直後は、何が変わったかをメモしておくと、復元や対処がしやすくなります。

プラグインとの相性問題と対処方法

WordPressの自由度の高さはプラグインによって支えられていますが、SWELLと一部プラグインとの相性によって不具合が起きることもあります。
特に、表示崩れやエラー、動作が重くなるといったトラブルの原因になることがあります。

よくあるのが、「機能が重複しているプラグイン」の使用です。

たとえば、目次機能を持つ「Table of Contents Plus」や、レイアウトを操作する「Elementor」などは、SWELLの標準機能と競合しやすいとされています。

SWELLは目次・カラム・吹き出し・CTAなど多くの機能を内蔵しているため、それらと似た機能を持つプラグインは基本的に不要です。

また、CSSやJavaScriptを最適化するプラグイン(AutoptimizeやLiteSpeed Cacheなど)を使っている場合、設定によってはSWELLの表示に影響することもあります。

このようなときは、設定を一度OFFにする、または個別に除外設定を行うことで改善が可能です。

プラグインの相性トラブルを回避するためには、以下のポイントを意識すると良いでしょう。

  • SWELL公式が推奨しているプラグインのみ導入する
  • 一度に複数のプラグインを入れず、一つずつ動作確認を行う
  • 不具合が起きたら、まずすべてのプラグインを停止し、一つずつ有効化して原因を特定する

プラグインの設定は初期設定の章で説明済みですが、トラブルが生じたときは、以下の記事をご覧いただき、プラグインを見直してみてください。

>>SWELLの初期設定を初心者向けにやさしく解説!

万が一不具合が起きた場合は、「SWELLERS’フォーラム」や「X(旧Twitter)」などで同じ事例がないかを調べるのも有効です。
同じテーマを使っているユーザーの声は、トラブル解決の大きな手がかりになりますから。

プラグインは便利ですが、使いすぎや機能の重複はトラブルの元になることも。SWELLの強力な標準機能を活かしつつ、必要最小限でシンプルな構成を意識しましょう。

テーマが重い?表示速度を改善するテクニック

SWELLは表示速度が早いテーマですが、「表示が重い」と感じることもあります。

これはSWELL自体の問題というより、画像サイズやプラグイン、サーバー環境など複合的な要因が関係しているケースがほとんどです。

以下を見直してみましょう。

  • SWELLの高速化設定
  • 画像の最適化
  • 不要なプラグインの整理
  • 高速サーバーの利用

SWELLの高速化設定

前述した SWELLの高速化設定 をやっているか見直してみましょう。

画像の最適化

まず最初に見直したいのが、画像の最適化です。
高解像度すぎる画像や未圧縮のPNGを多用すると、読み込み速度が大きく低下します。

「Tiny Ping」などを使って画像を軽量化しましょう。以下の記事を参考にどうぞ。

不要なプラグインの整理

また、不要なプラグインの整理も非常に効果的です。
使っていないプラグインを無効化・削除することで、読み込みにかかるリソースが減り、サイトが軽快になります。
特に機能の重複(例:目次やCTA)には注意が必要です。

導入したいプラグインと非推奨のプラグインは以下の記事をご覧ください。

>>SWELLの初期設定を初心者向けにやさしく解説!

高速サーバーの利用

さらに、サーバーの性能も見逃せない要素です。
共用サーバーの中にはアクセスが集中すると極端に遅くなるものもあります。

当サイトで使用しているmixhost なら、表示速度・安定性ともに高評価でおすすめ。以下の記事を参考にどうぞ。

SWELLは適切な設定と運用で、非常に高速なテーマとして活用できます。

定期的にPageSpeed Insightsで速度を測定し、ボトルネックを可視化して改善を続けることが大切です。

当サイトをPageSpeed Insightsで測定した結果は以下の記事にまとめています。参考にどうぞ。

フォーラム・SNSでの情報収集と質問方法

SWELLは国内で非常に人気があるテーマだけに、ユーザーコミュニティも活発で、情報が豊富に共有されています。

テーマの使い方で迷ったときや、ちょっとした疑問を解決したいときは、フォーラムやSNSをうまく活用することで素早く解決できます。

まず最初にチェックすべきなのが、SWELL公式の会員サイト「SWELLERS’」です。

この中にはユーザー同士が質問・回答できる専用フォーラムがあり、テーマの使い方からトラブル対応まで、リアルな情報が集まっています。
検索機能もついているので、過去に似た質問がないかを調べるのが効率的です。

「SWELLERS’」への登録方法は以下をご覧ください。
>>SWELLの購入

また、X(旧Twitter)でも「#SWELL」タグで検索すると、多くのユーザーの設定例や改善報告が見つかります。
公式アカウントの投稿や、SWELL開発者の発信もフォローしておくと、アップデート情報や注意点を見逃しません。

さらに、YouTubeにも設定やカスタマイズに関する解説動画が多数アップされています。
動画は操作手順を目で確認できるため、文章では理解しづらい人にもおすすめです。

フォーラムやSNSを通じて他のユーザーとつながることで、解決策が得られるだけでなく、モチベーションの維持や情報感度の向上にもつながります。

「困ったら調べる・聞く」という姿勢を持つことで、初心者でもスムーズにブログ運営を続けられる環境が整っています。

よくあるエラーと対処のステップ

メインビジュアルの画像が表示されません

SSL化が正常に完了できているかを確認しましょう。「Mixed content」でググってみてください。

カスタマイザーの設定が保存できません。(「何かうまくいかなかったようです。」というエラーがでます。)

サーバー側の「WAF」設定の影響が原因の可能性が高いです。
対処法については以下の記事をご覧ください。
>>カスタマイザーの設定で「何かうまくいかなかったようです。」というエラーが表示される場合の対処法

投稿が保存できません。

こちらも、まずは上記と同じく「WAF」の設定を見直しみましょう。

投稿内の画像が真っ白になって表示されない。

Lazyload(画像の遅延読み込み)系のプラグインの影響の可能性があります。そのプラグインを停止してみてください。
SWELLでは、プラグインを使用せずともあらかじめLazyload機能が備わっています。
>>SWELLの初期設定を初心者向けにやさしく解説!

初心者がつまずきやすい設定ミスと予防策

SWELLは初心者にやさしい設計がされていますが、それでも慣れないうちは「よくある設定ミス」によってデザイン崩れや機能不全が起こることがあります。

ここでは特にありがちなミスと、その防止策を解説します。

  • 子テーマを使わずにカスタマイズしてしまう
  • アイキャッチ画像のサイズがバラバラ
  • プラグインを入れすぎて表示崩れ
  • 投稿のURL構造を途中で変更

子テーマを使わずにカスタマイズしてしまう

もっとも多いミスが、「親テーマを直接編集してしまう」ことです。
親テーマを編集すると、SWELLをアップデートした際に変更内容がすべて消えてしまいます。

対策:インストール時から必ず「子テーマ」を有効化しておくこと。
SWELL公式が提供する「swell_child.zip」をインストール・有効化すれば安心です。

詳しくは「SWELLの初期設定」の章をご覧ください。

アイキャッチ画像のサイズがバラバラ

アイキャッチが不揃いだと、一覧ページやカード型表示で見た目が崩れてしまいます。

対策:アイキャッチ画像は一貫して「横1200px × 縦675px」など、統一された比率に揃える。

画像編集には「Canva」などの無料ツールが便利です。

詳しくは「アイキャッチ画像の設定」の章をご覧ください。

プラグインを入れすぎて表示崩れ

便利そうなプラグインを大量に導入すると、SWELLのCSSと干渉してデザインが乱れる原因になります。

対策:プラグインは「本当に必要なものだけ」インストールし、使わないものは停止・削除する。
SWELLはもともと多機能なので、プラグインは最小限にしましょう。

詳しくは SWELLの初期設定を初心者向けにやさしく解説! をご覧ください。

投稿のURL構造を途中で変更

記事を公開した後にパーマリンクを変更すると、外部リンクが404エラーになる可能性があります。

対策:パーマリンクは初期設定の段階で「投稿名」などに固定し、あとから変えないようにする。

詳しくは SWELLの初期設定を初心者向けにやさしく解説! をご覧ください。

変更する場合はリダイレクト設定を忘れずに。リダイレクト設定は以下の記事を参考にどうぞ。


「知らずにやっていた」ミスほど、あとから修正が大変になることが多いです。
導入初期は面倒でも、マニュアルを確認しながら進めることで、後のトラブルを未然に防げます。

SWELLを使いこなしてあなただけのブログを作ろう

本章では、あなたのブログに個性と魅力を加えるための具体的な工夫や戦略を紹介します。

  • ブログの世界観を作るデザインの考え方
  • 書き手の個性を表現するブログカスタマイズ術
  • ブログを「読まれる」デザインと導線の工夫
  • ブログ運営の目標とKPIの設定方法
  • 中長期で見たブログ戦略と改善のコツ
  • ブログの成長に合わせたSWELL設定の見直し方
  • SWELLを使って発信を楽しく続けるコツ

ブログの世界観を作るデザインの考え方

ブログは単なる情報発信の場ではなく、あなたの価値観や世界観を伝える“メディア”です。
読者はデザインや言葉づかい、写真などから、その世界観を感じ取り、「このブログ好きかも」とファンになっていきます。

デザインの統一感

まず、世界観を作るためには配色・フォント・写真の統一感が欠かせません。

SWELLではカスタマイザーから簡単にカラーフォントの設定ができるため、「ナチュラル」「スタイリッシュ」「ガーリー」など、目指すテイストに合わせて整えていきましょう。

たとえば、

  • ナチュラル系:ベージュ、グリーン、セリフ体フォント、風景写真
  • ガーリー系:ピンク、ホワイト、丸ゴシック、イラスト素材
  • ミニマル系:モノトーン、シンプルなアイコン、余白多めのレイアウト

というように、見せたい印象に合ったデザイン要素を選ぶことで、読者に一貫したメッセージを届けることができます。

イメージがわかないときは、SWELLデモサイトを参考にしてみましょう。

タイトル/ロゴ/プロフィール

また、ブログのタイトルやロゴ、プロフィール写真なども世界観の一部です。
無料のデザインツール「Canva」などを活用して、オリジナルロゴやヘッダー画像を作成するのもおすすめです。

>>ロゴの設定

>>プロフィールの設定

レイアウト

SWELLでは、トップページや記事一覧のレイアウトも自由度が高いため、「どの情報を目立たせるか」「どの順番で見せるか」を意識して設計することで、あなたらしい“空気感”のあるブログが完成します。

>>トップページの設定

>>記事一覧の設定


デザインは文章以上に読者の印象を左右する力を持っています。
妥協せず、あなたが「ここに通いたくなる」と思える空間づくりを目指しましょう。

書き手の個性を表現するブログカスタマイズ術

多くのブログが並ぶ中で、「またこの人の記事を読みたい」と思ってもらうには、書き手としての個性や人柄をブログに表現することがとても重要です。
SWELLにはそのための仕組みが豊富に用意されており、使いこなせば“あなたらしさ”をしっかりと伝えられます。

プロフィールの工夫

まずはプロフィールの工夫です。
SWELLでは、サイドバーや記事下にプロフィールを設置できます。ここに「顔写真(またはイラスト)」「一言キャッチ」「過去のエピソード」などを入れることで、読者の親近感がグッと高まります。

>>プロフィールの設定

表現方法の工夫

次に、文章のトーンや表現方法も個性の一部です。

丁寧な敬語、軽快な会話調、専門性のある語り口など、読み手が「この人っぽいな」と感じる要素を意識的に統一していきましょう。
同じSWELLでも、語り口が変われば印象も大きく変わります。

また、SWELLの「ふきだしブロック」や「ステップブロック」などを活用すると、あなたらしい語りを視覚的にも表現できます。
たとえば、ふきだしに登場キャラクターを設定して、あなたの分身のような存在を作るのもおすすめです。

>>ブロックエディターの使い方

レイアウトの工夫

さらに、「この人の記事は読みやすい」と思わせるレイアウトも個性のひとつ。
見出しや装飾のデザインを統一したり、本文と余白のバランスを整えることで、自然と“あなたのスタイル”が確立されます。

>>全体のカラー設定

>>見出しのデザイン設定

>>ブロックエディターの使い方


ブログは、あなたの思いや価値観を届けるパーソナルメディアです。
SWELLの自由なカスタマイズ機能を活かして、唯一無二の空気感と「あなたらしさ」を表現してみてください。

ブログを「読まれる」デザインと導線の工夫

せっかく良い記事を書いても、読まれなければ意味がありません。

そこで重要なのが、読者の目線を意識したデザインと導線(ナビゲーション)の工夫です。SWELLにはこの部分を改善しやすい仕組みがしっかり整っています。

ファーストビュー

まずは、「第一印象」を決めるファーストビュー(画面を開いて最初に見える範囲)の設計です。

ここにサイトのコンセプトや注目コンテンツへのリンクを配置することで、読者の興味を一気に引きつけられます。
SWELLのトップページでは、ピックアップバナーやCTAエリア、カラムブロックなどを活用して、視覚的に分かりやすい導線が作れます。

>>トップページの設定

見出し構成と装飾

次に、見出し構成と装飾の工夫です。

人は文章を“流し読み”する傾向があるため、h2・h3の見出しをきちんと階層で整理し、要点を太字やマーカーで目立たせましょう。

SWELLは見出しデザインも豊富で、コンテンツの区切りがパッと見て分かるのが特徴です。

>>見出しのデザインの設定

記事下の導線

記事下の導線設計も重要です。

記事を読み終えた直後に、「関連記事一覧」「次に読むべき記事」「登録・購入を促すボタン」などを配置することで、読者の行動を自然に次へと誘導できます。

SWELLの投稿リストブロックやCTA設置機能を活用することで、内部リンクの導線を視覚的にもおしゃれに整理できます。

>>ブロックエディターの使い方

>>ウィジットの使い方

グローバルメニュー/フッターメニュー

また、グローバルメニューやフッターメニューも戦略的に設計しましょう。
アクセスが多いカテゴリーや収益につながるページを上部に配置するだけでも、回遊率が大きく変わります。

>>グローバルメニューの設定

>>フッターメニューの設定


「どうすれば、次に読んでほしい記事にたどり着いてくれるか?」という視点でブログ全体を設計することが、“読まれるブログ”への第一歩です。

SWELLの機能を活用すれば、自然な流れで読者をゴールまで導くブログに仕上げられます。

ブログ運営の目標とKPIの設定方法

ブログを継続し、成果につなげるためには、「目標」と「KPI(重要業績評価指標)」を明確に設定することが欠かせません。

ただ漠然と記事を書き続けるよりも、具体的な数値と期限をもって運営することで、モチベーションと成果の両方を維持できます。

まずは、ブログ運営の「最終ゴール(目標)」を決めましょう。
たとえば、

  • 月1万円の副収入を得たい
  • フォロワーを1,000人増やしたい
  • 1日100PVを安定して得たい
  • 商品やサービスの認知を広めたい

といった具体的な目標を掲げます。ここで大事なのは、「数値」+「期限」をセットで決めることです。

次に、その目標を達成するために必要な行動や成果を、KPI(Key Performance Indicator)として分解していきます。たとえば:

目標主なKPI(中間指標)
月1万円の収益を得たいクリック率3%以上/アフィリエイト記事30本/月1万PV
フォロワー1,000人増やしたいSNS更新週3回/フォロー返し率80%/クリック誘導30回以上
1日100PVを目指す記事更新週2回/検索順位10位以内キーワードを5つ獲得

このように逆算で考えると、「今なにをすべきか」が明確になります。

さらに、GoogleアナリティクスやSearch Consoleを使えば、PV・クリック率・検索順位などを日々確認できます。
定期的にデータを見直し、目標に近づいているかを確認する習慣をつけることで、改善も早くなります。

>>Googleアナリティクス/Search Consoleとの連携

SWELLでは、内部リンクの設計やCTAの配置、SEO対策も強力にサポートしてくれるため、KPI改善にも直結しやすいテーマです。

内部リンクは関連記事ブロックやリンクリストブロックを使います。
>>ブロックエディターの使い方

>>ウィジットの使い方(CTAウィジット)

目標とKPIは、ただ掲げるだけでなく「毎月1回振り返る」ことが重要です。
できたこと・足りなかったことを振り返ることで、PDCAサイクルが自然に回り、成長につながります。

中長期で見たブログ戦略と改善のコツ

ブログ運営は短距離走ではなく、長期的に取り組むことで成果が積み上がる“マラソン型のメディア”です。

一時的なアクセス数や収益に一喜一憂せず、継続的に改善を重ねていく姿勢が、結果的に大きな成果へとつながります。

ブログの役割の定義

まず重要なのが、「ブログの役割」を定義することです。

情報提供なのか、収益化が目的なのか、あなたの考えを発信する場なのか。それによって書く内容や方向性が変わってきます。

「誰に」「どんな価値を」「どう届けるか」を常に見直しながら進めていきましょう。

リライト

次にやるべきは、過去記事の定期的なリライト(修正)です。

公開から数ヶ月経った記事は、検索順位が安定する一方で、競合に抜かれることもあります。

Googleサーチコンソールを活用して、検索キーワード・表示回数・CTR(クリック率)を確認し、「タイトル」「見出し」「内容の深さ」などを調整していきます。

※リライトのやり方は以下の記事を参考にどうぞ。

読者行動の分析

また、読者の反応や滞在時間も見逃せない指標です。

Googleアナリティクスで「直帰率」「平均ページ滞在時間」などを確認し、改善のヒントを探しましょう。
たとえば、滞在時間が短い記事は冒頭文の見直しやデザインの調整が必要かもしれません。

SWELLを使えば、サイトの構造を柔軟に変更できるため、成長段階に合わせてデザインや導線を見直すことが容易です。
たとえば、カテゴリの再編成、トップページの改良、CTAの再設置などもスムーズに対応できます。

>>カテゴリの設定

>>トップページの設定

>>ウィジットの使い方(CTAの設定)

マイルール

最後に大切なのは、あなたなりの運営ルールやスケジュールを持つことです。

週に1本記事を更新する、月末にアクセス解析をするなど、ルーティン化することで継続しやすくなります。


短期で成果が出なくても、確実に積み上がっているという意識を持って、楽しみながら改善を重ねていきましょう。

ブログの成長に合わせたSWELL設定の見直し方

ブログの規模が大きくなってくると、最初に設定したままでは運営に合わなくなることがあります。
そのため、定期的にSWELLの設定を見直し、「今のステージに合った構成」にアップデートしていくことが重要です。

トップページの構成

まず最初に見直したいのが「トップページの構成」です。

記事数が増えてきたら、単純な記事一覧ではなく、「カテゴリ別の投稿リスト」や「人気記事のスライド表示」などを加えることで、読者が情報を探しやすくなります。

SWELLの「投稿リストブロック」や「CTAエリア」などを活用して、成長に合わせた導線を組み直しましょう。

>>トップページの設定

>>ブロックエディターの使い方 (投稿リストブロック)

>>ウィジットの使い方(CTAの設定)

カテゴリー・タグの整理

次に、「カテゴリー・タグの整理」も大切なポイントです。

記事が増えてくると、カテゴリーが細分化しすぎて分かりにくくなる傾向があります。
この場合は、類似カテゴリーを統合したり、タグを再編成することで、回遊性がアップしSEO的にも効果的です。

>>カテゴリの設定

ウィジットやメニュー構成の見直し

また、ウィジェットやメニュー構成の見直しも忘れずに行いましょう。

たとえば、PVが多い記事をサイドバーに固定表示する、アフィリエイト記事への動線を明確にするなど、実際のユーザー行動に合わせて再設計するのが効果的です。

>>ウィジットの使い方

>>グローバルメニューの設定

>>フッターメニューの設定

>>サイドバーの設定

サイト全体のレイアウト

さらに、「SWELLカスタマイザー」の設定項目には、サイト全体の印象を大きく変える要素が多数あります。

ブログの方向性が変わったときには、フォントや配色、記事カードのデザイン、アイキャッチのスタイルなども再検討してみましょう。

>>サイト全体の基本設定

ページ表示速度/ セキュリティ対策

最後に、成長フェーズではページ表示速度やセキュリティ対策の強化も必要になります。

不要なプラグインを整理したり、画像の最適化設定を見直すなどして、快適なページ表示速度を保ちましょう。

>>テーマが重い?表示速度を改善するテクニック

セキュリティ対策としては、

  • WordPress(本体/プラグイン)をこまめにバージョンアップする
  • 不要なプラグインを削除する
  • セキュリティ対策のプラグインを入れる(Akismet Anti-Spamh, Wordfence Securityなど)

>>SWELLの初期設定を初心者向けにやさしく解説!


ブログは成長とともに変化し続けるものです。
SWELLはその変化に柔軟に対応できるテーマなので、定期的な見直しを行い、常に最適な形で情報を届けられるようにしていきましょう。

SWELLを使って発信を楽しく続けるコツ

ブログ運営を長く続けるためにいちばん大切なのは、「楽しむこと」です。

特に初心者のうちは、デザイン・SEO・収益化と学ぶことが多く、疲れたり焦ったりしがちですが、SWELLのような使いやすいテーマを選んだ時点で、あなたはすでに一歩先に進んでいます。

完璧を目指しすぎない

まず、完璧を目指しすぎないことが大切です。

デザインをいじりすぎて記事更新が止まる、1記事に何日もかけて疲れてしまう…。よくあることです。

でも、ブログは「公開してから改善すればいい」メディアです。SWELLなら、あとからいくらでもデザインや構成を見直せる柔軟性があります。

バランスをとる

次におすすめなのが、「書きたいこと」と「読まれるテーマ」のバランスを取ること。

完全に自分のためだけだとモチベーションが続きませんし、逆に読者ばかりを意識しすぎても息が詰まります。
SWELLはどんなジャンルでも映えるデザインなので、「あなたの好き」を発信しやすいのも強みです。

成果を記録に残す

さらに、「成果が出たこと」を記録しておくのも続けるためのコツです。

初めて検索順位がついた、初めてコメントをもらった、初収益が発生した…。
小さな成功体験を積み重ねることで、「もっとやってみよう」と思えるようになります。

仲間とつながる

最後に、仲間とつながることも大きなモチベーションになります。

SWELLユーザー同士のフォーラムやSNS、X(旧Twitter)などで交流することで、情報交換や励まし合いができ、孤独になりがちなブログ運営に良い刺激が加わります。

>>フォーラム・SNSでの情報収集と質問方法


「ブログは一人で黙々とやるもの」ではなく、楽しみながら、変化を記録していく“成長の場”です。

SWELLは、あなたの発信をサポートする心強いパートナー。

ヒデハル

ぜひ、焦らずあなたのペースで、ブログを楽しんで続けていってください!

まとめ:SWELLの使い方は簡単、あなた好みのサイトを作ろう

  • SWELLは初心者でもおしゃれなブログが作れる高機能なWordPressテーマ
  • 初期設定や投稿方法、専用ブロックの使い方も直感的でわかりやすい
  • カスタマイザーやウィジェットで柔軟なデザイン変更が可能
  • ブログの収益化やSEO対策にも対応できる機能が豊富
  • トラブルや疑問も、フォーラムやSNSでサポートが得られる
  • 継続的な改善と設定の見直しで、ブログの成長を後押しできる
  • あなたらしい世界観や発信を楽しみながら、長く続けられるテーマ

SWELLは、デザイン・機能・使いやすさの三拍子がそろった、初心者にとって理想的なWordPressテーマです。
本記事を参考にすれば、設定で迷うことなく、あなたの理想のブログをスムーズに形にできるはずです。

「ブログを始めたいけど難しそう…」と感じていた方こそ、ぜひSWELLを使って一歩をふみ出してみてください。

ヒデハル

きっと、あなたらしい発信の場が楽しく広がっていくはず!

詳しいテーマ機能やアップデート情報は、公式サイトをご確認ください。


ランキングサイト参加中!
応援ポチっとしてもらえたら嬉しいです♪

ブログランキング・にほんブログ村へ 人気ブログランキング

本サイトのブログテーマ SWELL公式サイトはこちらから!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次