SWELLを買ったはいいけど、「最初に何を設定すればいいの?」「デザインのカスタマイズはどこから手をつける?」と手が止まっていませんか。結論、SWELLは初期設定さえ済ませれば、あとは管理画面のマウス操作だけでプロっぽいサイトが作れます。CSSの知識はいりません。

僕はブログ歴6年、本業では製造業のシステム推進室でWebまわりを担当しています。エンジニア出身ではない総務担当の目線で、自分のサイトをSWELLで5年運用してきた手順をそのまま整理しました。この記事はSWELLの使い方の「目次」になる記事です。各設定の詳しいやり方は個別記事にまとめているので、必要なところへ飛んでください。

  • SWELLを買ってから最初にやる初期設定の全体像
  • つまずきやすいカスタマイズの手順と個別解説への入口
  • SWELLが向いている人・向いていない人の見極め方

全部を一気にやろうとすると挫折します。この記事の順番どおり、上から手をつければ大丈夫です。

SWELLとは?まず知っておきたい基本

SWELLは、ブロックエディター(Gutenberg)に完全対応した国産の有料WordPressテーマです。買い切り17,600円(税込)で、一度購入すれば複数サイトに使い回せます。最大の特徴は、プログラミングの知識がなくても、ボタンや吹き出し、ステップ、FAQといった装飾をマウス操作だけで設置できること。表示速度も速く、操作画面が直感的なので、僕のような非エンジニアでも迷いません。

5年使った正直なメリット・デメリットは別記事で本音を書いています。「そもそも自分に合うテーマなのか」を先に確認したい方は、こちらを読んでから戻ってきてください。

SWELLの始め方|購入からインストールまで

SWELLを使うには、当然ながらWordPressが動くレンタルサーバーが必要です。まだブログ環境がない方は、サーバー契約とWordPress開設を先に済ませておきましょう。僕はエックスサーバーを使っていますが、申し込みからWordPress開設まで10分ほどで終わります。

SWELLを購入する

SWELLは公式サイトから購入できますが、もしもアフィリエイト経由で紹介されている記事から購入するのが分かりやすいです。購入後は会員サイトに登録し、テーマ本体(親テーマ)と子テーマの2つのzipファイルをダウンロードします。

\ 買い切りで複数サイトに使える /SWELLの詳細を見る

SWELLをインストールする

WordPress管理画面の「外観」→「テーマ」→「新規追加」→「テーマのアップロード」から、ダウンロードしたzipをアップします。手順は次の3ステップです。

STEP1
親テーマをアップロードする

「swell-X.X.X.zip」をアップロードしてインストールします。この時点ではまだ有効化しません。

STEP2
子テーマをアップロードして有効化

続けて「swell_child.zip」をアップロード。インストールできたら、子テーマのほうを「有効化」します。

STEP3
ユーザー認証を済ませる

SWELL会員サイトで発行されるメールアドレスを管理画面に登録すると、アップデート通知が届くようになります。

必ず「子テーマ」を有効化してください。親テーマを直接有効化すると、アップデートのたびにカスタマイズが消える原因になります。

子テーマを有効化しておけば、カスタマイズやCSSを追記してもアップデートで消えません。難しく考えず「2つアップロードして、子テーマのほうを有効化する」とだけ覚えておけばOKです。

最初にやるSWELLの初期設定

インストールが終わったら、デザインをいじる前に「土台の設定」を済ませます。ここを後回しにすると、記事が増えてからやり直すハメになります。最低限やっておきたいのは次の5つです。

  • サイトのキャッチコピー・基本情報の入力(外観→カスタマイズ)
  • SWELL設定での高速化・構造化データのオン
  • サイトカラーの決定(メインカラー1色を決めるだけで一気に整う)
  • ヘッダーロゴとファビコンの設定
  • 必要なプラグインの導入と、入れてはいけないプラグインの確認

SWELLはキャッシュ系・目次系の機能をテーマ標準で持っているため、他テーマで定番のプラグインが逆に干渉することがあります。おすすめプラグインと相性の悪いプラグインは個別記事にまとめました。

SWELLのデザインカスタマイズ早見表

ここからが本番です。SWELLのカスタマイズは項目が多いので、「やりたいこと」から逆引きできる早見表にしました。各項目は個別記事で手順を画像つきで解説しています。

やりたいこと設定場所難易度
トップページをサイト型にする固定ページ+カスタマイザー やや手間
メインビジュアルを設定するカスタマイザー かんたん
ヘッダー・フッターを整えるカスタマイザー+メニュー かんたん
見出しデザインを変えるカスタマイザー かんたん
目次の表示・デザイン調整SWELL設定 かんたん
吹き出し・ブログパーツを使うブロックエディター かんたん
表(テーブル・比較表)を作るブロックエディター かんたん
ボタン・追従ボタンを置くブロックエディター+設定 かんたん

各項目の詳しい手順は、以下の個別記事にまとめています。気になるところから読んでください。

まずは「メインカラー1色」と「見出しデザイン」だけ整えれば、それっぽく見えます。最初から全部やらなくて大丈夫です。

SWELLでコーポレートサイトやLPも作れる

SWELLはブログだけのテーマではありません。トップページを固定ページにすれば、会社のコーポレートサイトやランディングページ(LP)も作れます。僕は本業でも社内向けのページをWordPressで作ることがありますが、SWELLの「フルワイド」「リッチカラム」ブロックを使えば、外注しなくてもそれなりの見た目になります。

実際に僕が社内ポータルサイトをSWELLで作った話も交えて、コーポレートサイトの作り方を別記事で詳しく解説しています。

SWELLをおすすめする人・しない人

SWELLが向いている人
  • コードを書かずにきれいなサイトを作りたい人
  • 複数のサイトを運営する予定がある人(買い切りで使い回せる)
  • ブログとコーポレートサイトの両方に1つのテーマで対応したい人

逆に、初期費用をとにかく抑えたい人や、ASPの報酬目的でテーマ自体をアフィリエイトしたい人には、別の選択肢が合うこともあります。乗り換え候補として比較されやすいAFFINGER6・XWRITEとの違いは、それぞれ比較記事にまとめています。

よくある質問(FAQ)

SWELLは初心者でも使えますか?

使えます。CSSやHTMLの知識がなくても、マウス操作で装飾できる設計です。むしろ初心者ほど挫折しにくいテーマだと感じています。

SWELLは複数のサイトで使えますか?

使えます。一度購入すれば、自分が運営する複数のサイトに追加費用なしで利用できます。サイトを増やす予定があるなら、結果的に割安です。

他テーマからSWELLに乗り換えると記事は崩れますか?

テーマ独自のショートコードを使っていた箇所は表示が崩れることがあります。SWELLには主要テーマからの「乗り換えサポートプラグイン」が用意されていますが、移行後は必ず表示を確認しましょう。

まとめ:SWELLは「順番どおり」に設定すれば迷わない

SWELLの使い方は、「インストール→初期設定→デザインカスタマイズ」の順番さえ守れば、非エンジニアでも迷いません。最初にメインカラーと見出しだけ整え、あとは記事を書きながら少しずつカスタマイズしていけば十分です。各設定の詳しい手順は、この記事からリンクしている個別記事を順に読み進めてください。

これからSWELLを導入する方は、まずWordPressが動くサーバー環境を用意してから購入するのがスムーズです。環境さえ整えば、その日のうちにサイトの形になります。

\ 5年使った僕がレビューしています /SWELLの詳細を見る

画像挿入:SWELL管理画面(SWELL設定タブ)のスクリーンショット

この記事は役に立ちましたか?
ご投票ありがとうございます!
理由を教えてください