SWELL購入後の3ステップ
SWELL購入後、最初にすべきことを3ステップでまとめました。
①テーマをインストールする
最初に、購入済みの親テーマをインストールし、有効化します。
続いて、無料で提供されている子テーマをインストールし、有効化します。
SWELLには、6つのデモサイトが用意されています。
手っ取り早く美しいデザインのサイトを作りたい場合、これらのデモサイトをベースに制作すると便利です。
SWELLフォーラムにログインし、「マイページ」を開き、画面下へスクロールすると、デモサイトの着せ替えデータを配布しているページへのリンクがあります。
①データをダウンロードした後、そのフォルダ内にある拡張子「dat」のファイルを、一旦、Desktopなどへ移します。
②プラグイン「Customizer Export/Import」をインストール・有効化した後、ダッシュボードの「外観」→「カスタマイズ」で「エクスポート/インポート」を開きます。

上記の「dat」ファイルを選択し、「画像ファイルをダウンロードしてインポートしますか?」にチェックをつけ、「インポート」します。
デモと同じデザインへの着せ替えが、これだけで完了します。
以降、SWELLのテーマカスタマイザーを使って設定を行います。
なお、SWELLの使い方の詳細については、公式サイトの「設定マニュアル」に書かれています。
②必要なプラグインをインストールし、有効化する
WordPressの機能を拡張してくれるプラグインは、とても便利なものです。
その一方、多くのトラブルがプラグインによって引き起こされています。
SWELLユーザーは、なるべくSWELL推奨のプラグインを使用しましょう。

プラグイン「SEO SIMPLE PACK」はアクセス分析に便利!
ブログを運用する際は、アクセス分析が欠かせません。
その際、プラグイン「SEO SIMPLE PACK」を活用すると「Google Analytics」の導入が簡単に行なえます。
「SEO SIMPLE PACK」での設定方法は、以下のとおりです。
- プラグイン「SEO SIMPLE PACK」をインストールします。
- ダッシュボードの「SEO PACK」→「一般設定」で「Googleアナリティクス」タブをクリックします。
- Googleアナリティクスで調べた「トラッキングID」を貼り付け、「設定を保存する」をクリックします。

なお、「SEO SIMPLE PACK」の詳細については、SWELLの開発者でもあり、このプラグインの開発者でもある了さんがまとめておられます。
また、「UA」から始まる「トラッキングID」の代わりに、「G」から始まる「測定ID」でも大丈夫です。
その場合、アナリティクスの管理画面を開き、「管理(歯車マーク)」の「データストリーム」をクリックします。

「ウェブ」タブをクリックした後、当該サイトをクリックすると、右上に「G」から始まる「測定ID」が表示されます。
なお、「Google Analytics」へのサイト登録と「Search Console」との関連付けについては、別記事でまとめています。

③アドセンスの広告を貼る(アドセンス利用者のみ)
- アドセンスを使う場合は、ダッシュボードの「SWELL設定」をクリックします。
「広告コード」タブをクリックした後、「記事内広告」と「自動広告」の欄に広告コードを貼り付けます。

「記事内広告コード」 に関しては、記事内でショートコード [ad](※adは小文字で入力)と入力することによって表示させることができます。
また、「目次広告」に広告コードを入れると、目次の直前または直後に広告を貼ることができます。
カスタマイザーの概要

ダッシュボードから起動する場合は、「外観」の「カスタマイズ」をクリックします。
SWELL設定の概要

上記の他、ダッシュボードの「SWELL設定」から、以下の設定が行なえます。
基本的なデザインと各種機能
ここからは、レイアウトや各機能の説明になります。
サイト全体のレイアウトを整える
投稿・固定ページをデザインする
記事内パーツ、役立つ機能
①サイト全体のカラー設定
「外観」→「カスタマイズ」→「サイト全体設定」で「基本カラー」をクリックします。

「メインカラー」「テキストカラー」「リンクの色」「背景色」を好みの色に設定できます。
これがサイト全体のベースカラーになります。
デフォルトのメインカラーは紺色のため、h2、h3などの見出しの色も紺色に統一されています。

メインカラーを紫にすると、上記同様、見出し部分は紫に統一されます。

-
「テキストカラー」の設定では、サイト全体のテキストの色を変更できます。
「リンクカラー」の設定でも同様に、サイト全体のリンクの色を変更できます。
「背景色」の設定では、サイト全体の背景色を変更できます。

デフォルトの「背景色」は「白」になっています。

このように、任意の背景色へ変更することができます。

ただし、「外観」→「カスタマイズ」→「サイト全体設計」→「基本デザイン」で「コンテンツの背景を白にする」が「ON」になっている場合、例えば、背景色を赤に変更してもコンテンツ背景は白のままです。
サイト全体の基本カラーについては、公式ページにも書かれています。

スマホメニューの色
スマホメニューについては、「外観」→「カスタマイズ」→「サイト全体設計」→「スマホ開閉メニュー」で「文字色」と「背景色」を変えることができます。

デフォルトでは、「文字色」は黒色、「背景色」は白色になっています。

「文字色」を黄色、「背景色」を青色にすると、このように変わります。
②カラーパレットの設定
公式サイトの解説ページ:②カラーパレットの配色をカスタマイズする方法
カラーパレットの「文字色」と「背景色」は、ブロックのサイドバーで表示されます。

いずれの一列目も固定で5色になっていますが、それ以外の8色については好きな色に設定できます。

デフォルトでは、赤、青、緑、橙の濃い色と薄い色になっていますが、任意のカラーへ変更可能です。
記事内で実際に使ってみます。

このように、美しい配色にすることができます。
③ヘッダー周りの設定
SWELL公式の解説ページ:③ヘッダーの設定をしよう
ヘッダーロゴ画像の設定
ヘッダーロゴ画像については、「外観」→「カスタマイズ」→「ヘッダー」の「ヘッダーロゴの設定」で行います。
デフォルトでは、テキストでブログタイトル名が文字色が黒、背景色が白で表示されています。
「ロゴ画像」をアップすると、テキストの代わりに画像が表示されます。画像制作時に文字も埋め込みましょう。

「画像サイズ」では、縦のサイズを入れます。縦横比一定で幅も拡大・縮小されます。

スマホでは、ロゴ画像は上のように表示されます。
ロゴ画像の大きさは任意ですが、パソコンの場合は縦が最大120px、スマホの場合は最大80pxのため、縦120px/幅600~1000pxくらいにするのが良いと思えます。
ヘッダーメニューの位置(PC)
【ヘッダーのレイアウト設定(PC)】
ヘッダーメニューの位置については、4つの中から選択できます。
- ロゴ画像(※ロゴ画像は左端)の右側(右寄せ)
- ロゴ画像(※ロゴ画像は左端)の右側(左寄せ)
- ロゴ画像(※ロゴ画像は中央)の下側
- ロゴ画像(※ロゴ画像は中央)の上側
詳細については、公式サイトの解説ページに画像付きで書かれています。
ヘッダーメニューの位置(SP)
【ヘッダーのレイアウト設定(SP)】

スマホの場合、ヘッダーメニューは三本線の中に収まっています。
ヘッダーメニューの位置については、3つの中から選択できます。
- ロゴ画像(※ロゴ画像は左端)の右側(右寄せ)
- ロゴ画像(※ロゴ画像は中央)の右側(右寄せ)
- ロゴ画像(※ロゴ画像は中央)の左側(左寄せ)
詳細については、公式サイトの解説ページに画像付きで書かれています。
メインビジュアルの上にヘッダーメニューをかぶせる
【トップページでの特別設定】
メインビジュアルの上にヘッダーメニューをかぶせることもできます。
ロゴ画像を使っても、テキストのみでもこの設定は行なえます。テキスト色は白色か黒色かを選べます。
ただし、パソコンのヘッダーレイアウトは横並びにする必要があります。
詳細については、公式サイトの解説ページに画像付きで書かれています。
ヘッダーの追従設定

通情は、ヘッダーを追従させるようにしておくと便利です。

上の画像のように、ページを下の方へスクロールしても、ヘッダーがしっかり表示されたままになっています。
スマホの場合も同様です。
「追従ヘッダー(PC)の背景不透明度」のデフォルト値は1です。通常はデフォルトのままで大丈夫です。

この値を例えば「0.1」にすると、上の画像のように、ヘッダーエリア内でも本文が透けて見えるようになります。
ヘッダーバーの設定

ヘッダーバーとは、上の画像の場合、一番上のオレンジ色エリアのことです。デフォルトでは単色(メインカラー)の細いバーが表示されているだけです。

「外観」→「カスタマイズ」→「ヘッダー」で「ヘッダーバー背景色」「ヘッダーバー文字色」を任意のカラーへ変更することもできます。

ヘッダーバーの右端には、デフォルトでは「RSSページ」へのリンクアイコンがついているだけです。

「外観」→「カスタマイズ」→「SNS情報」で、ツイッターへのリンクを貼ってみます。

ヘッダーバーに、ツイッターページへのリンクアイコンが追加されました。
キャッチフレーズ設定
「キャッチフレーズ」は、WordPressのダッシュボードの「設定」→「一般設定」の「キャッチフレーズ」で設定します。

「ヘッダーバーに表示」にすると、ヘッダーバーに表示されます。
その下の欄にチェックを入れると、サイトのタイトルも加えることができます。

また、「ヘッダーロゴの近くに表示」にすると、ヘッダーロゴの右横、もしくは下に表示されます。
その下の欄にチェックを入れると、サイトのタイトルも加えることができます。
ヘッダーメニュー(グローバルナビ)設定

ヘッダーメニュー(グローバルメニュー)とは、上の画像のように、ヘッダーエリアに表示されるメニューのことです。
ヘッダーメニューでマウスをホバーした時のエフェクトには、以下の5種類があります。
- ラインの出現(中央から)
- ラインの出現(左から)
- ブロックの出現
- 背景グレー
- 背景明るく

ヘッダーメニューをロゴの上または下に表示させた時も、同様のエフェクト設定が行えます。

「ラインの出現」にすると、マウスホバー時に、上の画像のような細いラインが出現します。

「ブロックの出現」にすると、マウスホバー時に、上の画像のような太い線が出現します。

「背景グレー」にすると、マウスホバー時に、上の画像のようなグレーが出現します。
「背景明るく」にすると、マウスホバー時に、背景が明るくなります。

また、サブメニューを設定している際は、サブメニューの背景色を「ホワイト」もしくは「メインカラー」にすることができます、

さらに、ヘッダーメニューがヘッダーロゴの上もしくは下にある場合、ヘッダーメニューの色を任意のカラーにすることもできます。
スマホ用ヘッダーメニューの設定

スマホ用のヘッダーメニュー設定としては、「ヘッダーメニューをループさせる」ことができます。
ヘッダーでの「検索ボタン」設置
「検索ボタン」は自サイト内での検索を行うツールです。

パソコンでは、「ヘッダー内のアイコンリストに表示」もしくは「ヘッダーメニューに表示」させることができます。

「ヘッダー内のアイコンリストに表示」させた場合、上の画像のように、アイコン横に「検索ボタン」が設置されます。

「ヘッダーメニューに表示」させた場合、上の画像のように、ヘッダーメニュー横に「検索ボタン」が設置されます。

スマホの場合、「カスタムボタンに設置」させることができます。

「カスタムボタンに設置」した場合、上の画像のように、サイトのタイトル横に「検索ボタン」が設置されます。
スマホヘッダーに表示するボタンの設定
スマホのヘッダーには、「メニューボタン」と「カスタムボタン」の2つを設置することができます。
メニューボタンは「≡」で表示されているメニューのことです。

「アイコン下に表示するテキスト」はデフォルトでは空欄で何も表示されませんが、「≡」の下に「MENU」などの文字を表示させることが可能です。
また、「メニューボタンの背景色」によって、メニューボタンの背景色を変えることができます。

「カスタムメニュー」に関しては、デフォルトで「検索ボタン」が表示されていますが、別のものへ変更することが可能です。
上記の例では、問い合わせページへのリンクボタンに変更しています。アイコンや、アイコン下のテキスト、カスタムボタンの背景色、リンク先を任意のものに変更することが可能です。
ただし、リンク先を任意のものにしたい場合は、「検索ボタンの表示設定(SP)」を「表示しない」に設定してください。
④フッター周りの設定
SWELL公式の解説ページ:④フッター周りの設定方法
フッターのカラー設定
フッター周りの設定に関しては、「外観」→「カスタマイズ」→「フッター」で行います。

「フッター背景色」と「フッター文字色」については任意のカラーへ変更することができます。

こんな感じでアクセントになります。

コピーライトの直前のエリアが、フッターのウィジェットエリアです。
「ウィジェットエリアの背景色」から、カラーの変更が行なえます。
また、「ウィジェットエリアの文字色」を変更することもできます。

「コピーライト設定からは、「コピーライトのテキスト」の変更が行なえます。

「その他の設定」からは、「フッターとフッター直前ウィジェットの間の余白をなくす」設定や、「フッターにSNSアイコンリストを表示する」設定が行なえます。
フッターメニューの設定

ダッシュボードの「外観」→「メニュー」から、フッタメニューを作成することができます。
フッターメニューを初めて作る場合は、「新しいメニューを作成しましょう」をクリックします。

「メニュー名」に「フッターメニュー」と入力し、「メニュー設定」で「フッター」にチェックを入れ、「メニューを作成」をクリックします。

フッターメニューが出来上がると、上の画像のように、SNSアイコンとコピーライトの間に表示されます。
フッター周りで使用できるウィジェット
フッター周りで使用できるウィジェットについては、5種類あります。

ダッシュボードの「外観」の「ウィジェット」から設定を行います。
詳細については、SWELL公式ページの解説を参照してください。
⑤サイドバーの設定
SWELL公式の解説ページ:⑤サイドバーの設定
最初に「外観」→「カスタマイズ」→「サイドバー」を開きます。

サイドバーを表示するかどうか、サイドバーの位置(右・左)をどうするか設定が行えます。
また、「外観」→「カスタマイズ」→「サイト全体設定」→「タイトルデザイン」から、ウィジェットのタイトルのデザインを設定することができます。


例えば、「サイドバーのタイトルデザイン」を「左に縦線」にしてみます。

上の画像のように、ウィジェットのタイトルにメインカラーの縦線が入ります。
⑥スマホメニューの設定
SWELL公式の解説ページ:⑤スマホメニューの設定方法

スマホメニューとは、スマホの「≡」ボタンをタップすることで表示されるメニューのことです。
最初に「外観」→「カスタマイズ」→「サイト全体設計」→「スマホ開閉メニュー」を開きます。
カラー設定
「カラー設定」では、「文字色」「背景色」などを変更することができます。

デフォルトの「文字色」は黒、「背景色」は白ですが、例えば「文字色」を紫、「背景色」を淡黄にすると、上の画像のようになります。
表示設定
「表示設定」では、「メインメニュー上に表示するタイトル」をつけることができます。

例えば「メニュー」とすると、上の画像のように表示されます。
また、「メインメニュー上に表示するタイトル」のデザインを変える場合は、「外観」→「カスタマイズ」→「サイト全体設計」で「タイトルデザイン」をクリックします。

一番下に「スマホメニュー内のタイトルデザイン」という項目があります。


例えば「左に縦線」を選ぶと、上の画像のように表示されます。
スマホメニューの内容をグローバルナビと異なるものにしたい場合は?
デフォルトでは、グローバルナビと同じものがスマホメニューにも表示されるようになっています。
グローバルナビと異なる内容のものをスマホメニューに表示する方法については、公式ページに書かれています。
投稿記事一覧の表示設定|モバイルで投稿リストを2列表示にする方法、カテゴリーを非表示にする方法は?
トップページに投稿記事一覧を表示させるような場合、カード形式で表示させると美しいビジュアルになります。
スマホ画面でも、2列表示にすることが可能です。
「外観」→「カスタマイズ」→「記事一覧リスト」の「リストのレイアウト設定」を開きます。

モバイルで2列表示させたい場合は、「2カラム」を選択します。

カテゴリーの表示・非表示も選択できます。

また、サムネイル画像の縦横比率も変更できます。
SWELLのアップデートで不具合が生じた時の対処法
SWELLアップデートの際、何らかの不具合が生じた時は、再度更新作業が行なえます。
詳細については、公式ページに書かれています。
最新バージョンのテーマを入手する方法
SWELLの最新バージョンについては、通常の更新以外に、入手する方法があります。
次の手順で行います。

「フォーラム」の「マイページ」からログインします。

画面下へスクロールし、「SWELL製品ページへ」をクリックします。

SWELL(最新版)の「zipダウンロード」をクリックすると、最新版のzipファイルをダウンロードできます。
念のためCSSファイルを開き、バージョンを確認します。
問題なければ、このzipファイルをダッシュボードの「外観」→「テーマ」→「新規追加」からインストールします。
テーマ更新時には、念のためバックアップを取る
テーマをバージョンアップする際は、念のため、現在のバージョンのものをバックアップ(FTPなどを使う)しておきます。
テーマ更新後に不具合が発生した時は、ダッシュボードの「外観」→「テーマ」で「新規追加」するだけで簡単にバージョンダウンが行なえます。
その他
上記以外の内容について箇条書きにしています。
サイト名・検索バーの位置
「外観」→「カスタマイズ」 で「ヘッダー」をクリックします。
「レイアウト・デザイン設定」の「ヘッダーナビ」を変更するとブログサイト名・ナビの位置を変更できます。
さらに下へスクロールし、「検索ボタン設定」で検索バーの位置を変更することもできます。
公式ページでは、
「ヘッダーカラーの設定」「ヘッダーロゴ画像の設定」「ヘッダーのレイアウト・デザイン設定」「トップページでの特別設定」「ヘッダーの追従設定」「ヘッダーバーの設定」「SNSアイコンリストについて」「キャッチフレーズ設定」「ヘッダーメニュー(グローバルメニュー)設定」「検索ボタンの設定」「スマホヘッダーに表示するボタンの設定」「お知らせバーの設定」
について詳しく書かれています。
フッター周りの設定についても、公式ページに書かれています。
サイドバーの設定についても、公式ページに書かれています。各ページごとに、表示・非表示にすることも可能です。
スマホメニューの設定についても、公式ページに書かれています。
公式ページの「サイトのベースとなるデザイン・レイアウトの設定方法」の項目では、「基本デザインの設定(「フォント設定」「コンテンツ幅の設定」など)」「NO IMAGE 画像の設定」「タイトルデザインの設定」「コンテンツヘッダーの設定」「お知らせバーの設定(下記も参照)」「パンくずリストの設定(下記も参照)」「ページャーのデザイン設定(下記も参照)」「サイドバーの表示設定」について書かれています。
お知らせバーの表示と設定
「外観」→「カスタマイズ」 の 「サイト全体設計」で「お知らせバー」をクリックします。

バーの配置場所やカラーなどを任意のものへ変更できます。
パンくずリストのレイアウト変更
「外観」→「カスタマイズ」 の 「サイト全体設計」で「パンくずリスト」をクリックします。
パンくずリストの位置や、背景表示などを変更できます。
ページャーのデザイン
「外観」→「カスタマイズ」 の 「サイト全体設計」で「ページャー」をクリックします。

ページャーのデザインを変更できます。
トップページのメインビジュアルと記事スライダー
「外観」→「カスタマイズ」 の「トップページ」で「メインビジュアル」をクリックします。
「メインビジュアルの表示内容」で「表示しない」にチェックを入れると、デフォルトの画像が非表示になります。
また、「トップページ」で「記事スライダー」をクリックすると、記事スライダーの設置・非設置を選択できます。
記事スライダーの詳細については、公式マニュアルに書かれています。
公式マニュアルではピックアップした記事のみを記事スライダーに載せる方法について触れられていません。
しかし、特定「タグ」の記事のみを指定することができるため、このタグ指定を行えば、掲載記事をピックアップすることが可能です。
画面右下の「トップへ戻る」「目次」ボタンの設置
「外観」→「カスタマイズ」 の 「サイト全体設計」 で「下部固定ボタン・メニュー」をクリックします。

パソコンやスマホ画面右下に、トップへ戻るボタンと「目次」ボタンを設置することができます。
Font Awesomeの読み込み
ダッシュボードの「SWELL設定」の「SWELL設定」で「Font Awesome」タブをクリックします。

Font Awesomeの読み込み方法について選択できます。
サイト運営者のSNSアカウント情報を設定する方法
「サイト運営者のSNSアカウント情報を設定する方法」については、公式ページに書かれています。
フォント基本サイズの変更
「外観」→「カスタマイズ」→「サイト全体設計」→「基本デザイン」の中にある「フォント設定」で調整できます。
メニュー画面(グローバルメニュー)のデザイン

グルーバルメニューは、トップページの上部に表示されるナビゲーションメニューのことです。
ここでは「問い合わせ」という文字のみが表示されています。

ダッシュボードの「外観」→「メニュー」で、最初に右上の「表示オプション」パネルを開きます。

「説明」にチェックを入れます。

「説明」欄に英語を書き加えます。

グローバルメニューに英語が併記されるようになりました。
ピックアップバナーの設置
トップページに表示させたいリンクをカード形式で並べることができます。
詳細については、公式マニューアルに書かれています。

ダッシュボードの「外観」で「メニュー」をクリックします。

ピックアップバナーとして表示させたいものを4つまで選択し、保存します。

「外観」→「カスタマイズ」→「トップページ」で「ピックアップバナー」をクリックすします。


ピックアップバナーのカスタマイズを行います。

トップぺーじでを開くと、上の図のようなピックアップバナーが設置されています。
投稿・固定ページのデザイン
投稿・固定ページのデザインに関する主なものをまとめました。
著者情報の表示・非表示
「外観」→「カスタマイズ」 の 「投稿・固定ページ」 の「記事下エリア」をクリックします。
記事下に、著者情報(「この記事を書いた人」)の表示をつけることができます。

著者情報が不要な場合は、「著者情報を表示」のチェックを外します。
記事タイトル上のアイキャッチ画像の表示・非表示

「外観」→「カスタマイズ」 → 「投稿・固定ページ」の 「アイキャッチ画像」を開きます。
「本文の始めにアイキャッチ画像を表示」のチェック有無で表示・非表示の変更が行なえます。
リンクを貼ったテキストにアンダーバーをつけたい時は?
「外観」→「カスタマイズ」 の 「投稿・固定ページ」の「コンテンツのデザイン」から変更が行なえます。

「テキストリンクにアンダーラインを付ける」にチェックをします。
記事に表示されるSNSシェアボタンの変更
「外観」→「カスタマイズ」で「投稿・固定ページ」をクリックします。
「SNSシェアボタン」をクリックすると、シェアボタンの変更が行なえます。

なお、SNSボタンの飛び先については、「外観」→「カスタマイズ」の「SNS情報」で指定することができます。
目次スタイルを変える方法

デフォルトでは、目次に自動で番号が振られるようになっています。

「外観」→「カスタマイズ」 → 「投稿・固定ページ」の「目次」を開きます。
「ulタグ」に変更すると、番号がなくなり、すっきりします。
フロントページに目次を表示する方法は?
「固定ページ」に目次が表示されるよう設定しても、トップページの固定ページには目次が表示されません。
その場合、目次を貼りたい場所へ以下のコードを貼りつけると、そこに目次が表示されます。
<div class="p-toc -simple"><span class="p-toc__ttl">目次</span></div>
また、「ボックス」にする場合は「-simple」の部分を「-capbox」へ、「上下2重線」にする場合は「-double」へ変更します。
前後記事へのページリンク・関連記事の表示・非表示
「外観」→「カスタマイズ」で「投稿・固定ページ」をクリックします。
「前後記事へのページリンクを表示」や「関連記事を表示」のチェックの有無で表示・非表示を変更することができます。
ツイッター・Facebookのフォロワーを増やす方法
投稿ページの末尾に、ツイッターやFacebookへのフォローを促す文言を加えることができます。

「外観」→「カスタマイズ」の「投稿・固定ページ」で「記事下エリア」をクリックします。
「Twitterフォローボタン」や「Facebookいいねボタン」にチェックを入れると、リンク先URLを入力する画面が開きます。

こんな感じでフォローを促すバナーが自動作成されるので便利ですね。
記事内パーツのデザイン
記事内のパーツのデザインについてまとめました。
表デザインのスタイル変更

「スタイル」や「表の設定」から、好みのレイアウトへ変更できます。
ブログカード(リンク)のスタイル変更
SWELLの機能の中で個人的に好きな機能の一つがブログカードです。

他の有料テーマではブログカードをオリジナルコードで作成しているものが多く見られますが、SWELLでは、URLを記事本文にペーストするだけでブログカードが完成します。

また、ブログカードのデザインを変更することもできます。

ダッシュボードの「SWELL設定」の「エディター設定」で「その他」タブをクリックします。
ブログカード(内部)・ブログカード(外部)ともに、デザイン変更が可能です。
ふきだしの作り方
シンプルなふきだしの作り方や、アイコン画像付きのふきだしの作り方については、[マニュアル]に詳しく書かれています。
Q&Aの作り方は?

投稿画面で「+」マークをクリックし、「SWELLブロック」の「FAQ」をクリックします。

本文を入力します。

右端の線上をクリックし、ブロック全体を選択します。

「Q]と「A」の形状や、カラーを変更することができます。
アイコンの使い方は?
SWELLでは、簡単なショートコードでアイコンを使うことができます。
アイコンの使い方については公式ページで説明されています。
SWELLで使えるアイコン一覧についても、公式ページで説明されています。
SWELLボタンの使い方は?
「SWELLボタン」を使用する際は、投稿記事内の「ブロック」で画面下へスクロールし、「SWELLボタン」をクリックします。

画面右に表示される「設定」(表示されていない場合は「歯車」マークをクリック)の「ブロック」から「SWELLボタン」の「スタイル」を選択します。

「設定」画面を下へスクロールすると、「SWELLボタン」の「カラー」「サイズ」などを変更することもできます。
最後にボタン内へテキストを入力し、リンク先のURLをコピペすれば完成です。

なお、ダッシュボード内「SWELL設定」の「ボタン」から、「SWELLボタン」のカスタマイズが可能です。

SWELLボタンを【2カラム】にしたい場合は?
「SWELLボタン」を2カラムにしたい場合は、記事内の「ブロック」で「カラム」を選択します。

画面右の「設定」内で「スマホでの列数設定」などを選択してから、カラムの「パターン」をクリックします。

「+」マークをクリックした後、「ブロック」内の「SWELLボタン」をクリックするとカラム内にボタンを挿入できます。

なお、同様の「SWELLボタン」をすでに作ったボタンの下に追加したい場合、「複製」を利用すると便利です。

プロフィールをサイドバーなどに設置する方法は?
SNSとの連携を考えておられる人に便利なのが、「プロフィール」のウィジェット活用です。

「外観」の「ウィジェット」で「[SWELL]プロフィール」を選択します。

あとは指示に従ってテキストを入力すると、上の画像のようなプロフィールを簡単に作成できます。
リンクボタンや、SNSリンクなども簡単に設置できるため、とても便利です。
投稿リスト

【SWELLブロック】の「投稿リスト」は、下記のように使います。

「表示する投稿数」は、1ページ内に表示させる記事数です。
「レイアウトを選択」では、「カード型(アイキャッチとタイトルが一体)」「リスト型」「リスト型(左右交互)」「サムネイル型(アイキャッチのみ大きく表示)」「テキスト型(アイキャッチなし)」の一つを選択します。
「投稿の表示順序」では、「新着順」「更新日時」「人気順」「ランダム」の一つを選択します。

「各種表示設定」「カテゴリー表示位置」などを設定します。
「カード型」または「サムネイル型」の場合、パソコンとモバイルでの表示列数を設定することが可能です。

抜粋文の文字数を定めることもできます。

「カード型」では、上の画像のように表示されます。
引用
引用の形式は2種類のデザインから選ぶことができます。

ダッシュボードの「SWELL」設定をクリックし、「その他」タブをクリックします。

「シンプル」もしくは「クオーテーションマーク表示」かを選択します。