ブロックエディター対応テーマ「SWELL」でホームページ制作

ブロックエディター対応のテーマとして人気のSWELLを購入しました。

結論から言えば、SWELLは非常に素晴らしいテーマです。

この記事では、前半はSWELLの使い勝手やメリット、後半はSWELLでホームページを制作する方法を紹介します。

なお、記載している内容は個人的な意見になります。テーマに関する最新の正確な情報は、必ず公式サイトをご確認ください。

また、参考としてSWELLで作ったサンプルサイトを掲載していますが、あくまでもデモサイトになります。時間をかけて制作していませんので、正常に動作しない可能性があります。

SWELLとは

ブロックエディター対応のWordPressテーマ「SWELL」

SWELLとは、ブロックエディター(Gutenberg)に完全対応したWordPressのテーマです。※画面キャプチャは公式サイトから引用しています。

ブロックエディターとは、以下のように「ブロック」と呼ばれる部品を組み合わせて記事を書く方法です。

SWELLブロックの使い方

例えば、「SWELLボタン」というブロックをクリックすると、ボタンを設置できます。このように、直感的に記事を書けることがブロックエディターの特徴です。

現在のWordPressはブロックエディターが標準ですが、まだ登場してから日が浅いので、ブロックエディターに対応していないテーマが多くあります。

SWELLは他のテーマに先駆けてブロックエディターに対応しており、SWELL専用の便利なブロックが多く用意されています。

ライセンスは「100%GPL」というもので、複数のサイトに自由に使えます。「一つのサイトでしか利用できない」、「特定のジャンルのサイトでは使えない」といった制限はありません。

SWELLのメリット

ここからは、SWELLのメリットについて詳しく紹介していきます。

サイトの制作時間を短縮できる

SWELLのテーマを使用すると、ブログやホームページの制作時間を短縮できます。それは、豊富なブロックと高機能なカスタマイザーのおかげです。

SWELLのテーマで利用できるブロック

上の画像のように、SWELLには様々な種類のブロックが用意されています。しかも、使用方法は非常に簡単で、利用したいブロックをクリックするだけでページに挿入できます。

ボタン、表、タブ、アコーディオンのように、これまでHTMLやCSS、JavaScriptを使って制作していた部品も、SWELLを使えば一瞬で設置できます。

「投稿リスト」というブロックも非常に便利です。これは、以下のようにブログの記事の一覧を表示できる機能で、特定のカテゴリーや投稿IDで抽出も可能です。

SWELLの投稿リストブロック

SWELLを購入する前は、記事の一覧を表示するためにWP_QueryなどPHPのプログラムを書いていました。

しかし、その必要はありません。ただ単に、投稿リストのブロックをクリックするだけです。

ブロックを単体で使うだけでも便利ですが、ブロックのコピー、再利用ブロック、ブロックパターン、ブログバーツなども使いこなせるようになれば、作業時間をさらに短縮できるでしょう。

SWELLが制作時間を短縮できる理由は、ブロックだけではありません。

SWELLでは、サイト全体で共通の内容を専用のメニューやカスタマイザーから設定できます。例えば、エディター設定のメニューからはSWELLボタンのデザインや色などをカスタマイズできます。

SWELLのエディター設定

また、SWELL設定のメニューからは、高速化や構造化データなどを設定できます。

SWELL設定

専用のメニューやカスタマイザーから様々な内容を設定できるため、自分でCSSを書いたり、プラグインを導入したりといった必要性が減ります。

参考として、私が「Xeory Base」のテーマからSWELLに移行した際に、実際に不要になったプラグインを紹介します。

不要になったプラグイン
・Classic Editor
クラシックエディターで投稿するためのプラグイン。SWELLのブロックエディターはクラシックエディターよりも便利なので、当然ながら不要です。
・Newpost Catch
最新記事の一覧をサムネイル付きで表示するプラグイン。SWELLは新着記事を表示する高機能なウィジェットが用意されています。
・Q2W3 Fixed Widget
サイドバーに追尾するウィジェットを表示するプラグイン。SWELLは追尾サイドバーのウィジェットエリアが用意されています。
・Shortcodes Ultimate
専門知識がなくても簡単にボタンやタブなどのパーツを設置できるプラグイン。SWELLには便利なブロックが用意されているので不要です。しかも、Shortcodes Ultimateと違ってショートコードではないので、さらに使いやすいです。
・WordPress Popular Posts
人気記事の一覧を表示するプラグイン。SWELLは人気記事を表示する高機能なウィジェットが用意されています。
・WordPress Related Posts
関連記事を表示するプラグイン。SWELLは関連記事を表示する機能が用意されています。
・ウィジェットのロジック
ページによってサイドバーのウィジェットを切り替えるプラグイン。SWELLは、トップのみ、スマホのみ、固定ページのみといったウィジェットエリアが用意されています。

以上のように、SWELLのブロックやカスタマイザーを使えば作業時間を大幅に短縮できます。その結果、本当にこだわりたい部分に専念できます。

例えば、「Recruit Company」という求人サイトは、SWELLのブロックやカスタマイザーを使っているので全体のデザインにほとんど時間がかかっておらず、検索処理のコーディングに時間を割きました。

SWELLのテーマで制作した求人サイト

デザインの美しいブログを作れる

WordPressでブログを制作すると、初期状態でトップページに記事の一覧が表示されます。

ヘッダーやフッター、全体の色などを変えることはできても、記事の一覧が表示されていることは同じなので、他のブログとデザインの観点で差別化することは難しいです。

DEMO CAFE」というカフェをイメージしたホームページを制作しました。カスタム投稿タイプを使い、ブログとお知らせの記事を投稿できるようにしています。

SWELLのテーマで制作したカフェサイト

トップページは記事の一覧が表示されるのではなく、SWELLのブロックを使って画像やキャッチコピーなどを大胆に配置しています。

このように、SWELLのブロックを組み合わせれば自由自在にトップページをカスタマイズできるので、他のブログとは似ていない自分だけのブログを制作可能です。

SWELLのブログページへの誘導

トップページをカスタマイズする際は、上のようにブログページへの誘導が大切です。ここでも「投稿リスト」というブロックが大活躍するので、絶対に使い方を理解した方が良いです。

頻繁に行われるアップデート

SWELLは現時点でも最高のテーマの一つですが、アップデートによってさらに進化し続けていることが魅力です。

公式サイトのアップデート情報を見ると、頻繁に機能追加などが行われていることが分かります。

いくつか例を挙げると、「ブロック下の余白量」が細かく設定できるようになりました。

SWELLのブロック下の余白量

以前は「小」「大」といった感じで設定できました。余白量は美しいデザインにとって非常に大切なので、数値で細かく設定できないかと思っていたところ、アップデートされました。

また、タブでコンテンツの表示を切り替える「タブブロック」もアップデートによって追加されました。

SWELLのタブブロック

記事の一覧を表示できる投稿リストブロックは、アップデートによって投稿タイプを選べるようになり、固定ページやカスタム投稿タイプも表示できるようになりました。

SWELLの投稿リストブロックでカスタム投稿タイプを表示

SWELLの公式ホームページには、ユーザーの声を取り入れて進化していくことが記載されています。これは、SWELLを購入すると事実であることが分かります。

SWELLの購入者はフォーラムに参加できます。フォーラムではSWELLに関する質問をしたり、機能の改善要望を投稿したりできます。

もちろん、全ての要望についてテーマに実装されることはなく、要望の多さや工数などは考慮されているようです。しかし、仮に実装されない場合においても、代替のやり方を提案していただけるなど、開発者の誠実さが伝わります。

ちなみに、SWELLのフォーラムでは開発者以外の方が善意で質問に答えていることがあり、とても素敵だなと日々感じています。

SWELLでホームページを作る方法

SWELLはとても高機能なWordPressテーマなので、ブログだけではなく、店舗や企業などのホームページを制作することも可能です。

佐賀県の魅力を紹介する「5分で見つかる佐賀」というサイトをSWELLで作ったので、制作方法を簡単に紹介します。

SWELLのカスタマイズ

最初に表示される巨大なスライドショーは、ブロックではなく、管理画面の「外観」⇒「カスタマイズ」から設定しています。表示したい画像を選択するだけなので、難しくはありません。

ここからは、ブロックの使い方になります。

SWELLボタン

まずは、上のようなカテゴリーボタンの作り方を紹介します。

SWELLフルワイドブロック

横幅いっぱいのデザインにするために、まずは「フルワイド」というブロックを設置します。SWELLでホームページを作るときはこれが大活躍するので、使い方を絶対に覚えておいた方が良いです。

エディターの右側では、ブロックごとに詳細な設定ができます。フルワイドブロックでは背景色や背景画像を選択できて、水色と白色のボーダーは画像を使っています。

SWELLボタンブロック

次に、横に4つのボタンを並べるために、「カラム」というブロックを設置して表示領域を分割します。カラムブロックで4つに分けたら、その中に「SWELLボタン」というブロックを設置します。

ちなみに、SWELLボタンの[icon]の部分はショートコードというもので、アイコンに変換されて表示されます。

SWELLボタンブロックの詳細設定

エディターの右側では、SWELLボタンブロックなら色やサイズなどを選択できて、カラムブロックであれば何分割にするか数字を選べます。

SWELLブロックの入れ子

これまでの流れを整理すると、フルワイドブロックの中にカラムブロックを設置して、カラムブロックの中にSWELLボタンブロックを設置しました。

このように、ブロックは入れ子にして使うこともできます。

SWELLのカラム

次に、カテゴリーごとにおすすめが掲載されている部分の作り方を紹介します。

SWELLのカラムブロック

先ほどと同様に、まずはカラムブロックを設置して横に3分割します。そして、今度は「画像」というブロックを設置して、メディアライブラリから掲載する写真を選択します。

写真の下にある文章やリンクは、色やフォントサイズ、余白などを細かく設定したかったので、「カスタムHTML」というブロックを使っています。

このように、既存のブロックを設置するだけでは難しいところは、カスタムHTMLブロックなどを使って細かくデザインできます。

SWELLのよくある質問

最後に、よくある質問の作り方を紹介します。

SWELLのFAQブロック

「FAQ」というブロックがあるので、背景色をグレーに設定したフルワイドブロックの中にそれを設置して、質問と回答の文章を入力しただけです。

以上でサンプルサイトの説明は終わりです。

ブロックエディターのプラグイン

もしもSWELLのブロックでは足りない場合、プラグインを併用する方法もあります。

Snow Monkey Blocks

Snow Monkey Blocks

ブロックエディターのおすすめプラグインは「Snow Monkey Blocks」です。

こちらは「Snow Monkey」という100%GPLのテーマに最適化されたプラグインですが、それ以外のテーマでも一部の機能を使えます。

Snow Monkey Blocksのスライダーブロック

例えば、スライダーブロックを使えば簡単にスライド画像を表示できます。

Snow Monkey Blocksの価格表ブロック

また、価格表ブロックを使うと、わずか数分で上のような料金プランを表示できます。

Useful Blocks

Useful Blocks

SWELLの開発者が共同で制作したブロックエディター専用のプラグインです。

記載時点では「比較ボックス」「CVボックス」「アイコンボックス」「棒グラフ」というブロックが用意されています。

Useful Blocksには、無料版と有料のPRO版があります。有料といっても価格は非常に安く、しかも買い切りなので、特にブロガーの方におすすめです。

LIQUID BLOCKS

LIQUID BLOCKS

他には「LIQUID BLOCKS」というプラグインもあります。

こちらは、新たなブロックというよりは、既存のブロックを組み合わせたテンプレートが用意されているイメージです。

LIQUID BLOCKSのコールトゥアクション

例えば、コールトゥアクション(CTA:資料請求や商品購入などを促すこと)のテンプレートを設置すれば、自分でブロックを個別に組み合わせる必要はありません。

まとめ

この記事では、SWELLのメリットやSWELLでホームページを作る方法などを紹介しました。

SWELLはブログ向けのテーマとしては価格は少し高めで、そこで迷っている方もいると思います。

しかし、ブログはもちろんのこと、企業やお店のホームページまで様々なタイプのサイトを制作できることを考えれば、値段以上の価値は十分にあると思います。

3 COMMENTS

アバター Orange

デモサイトがどれも素敵で勉強になります!
質問ですが、DEMO CAFEのAboutページやDEMO COMPANYのNEWS表示で
背景と下のボックスが重なっているところはSWELLのデフォルト機能ですか?

それともカスタムHTMLなどでコーディングしたのでしょうか?
教えていただけたら嬉しいです!
宜しくお願いします。

返信する
管理人 管理人

ありがとうございます!

カスタムHTMLではなく、既存のブロックにCSSを使ってデザインしています。

管理画面でブロックを選択すると、右側のサイドバーの「高度な設定」という部分で「追加CSSクラス」を設定できます。

デモサイトの場合は以下のような感じでネガティブマージンを使っています。

.slide-upward {
margin-top: -10em;
z-index: 10 !important;
position: relative;
}

これがベストなやり方かは分かりません。参考にする場合はご自身の責任でお願いします。

返信する
アバター Orange

コードの説明までいただき、ありがとうございます。

SWELLでサイト制作を始めたばかりなので非常に参考になります!

これからも記事楽しみにしています(^ ^)!

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA