【SWELLの始め方】初期設定10個をわかりやすく解説

記事内にプロモーションを含む場合があります
【SWELLの始め方】初期設定10個をわかりやすく解説
初心者さん

SWELLの初期設定はどうすればいいの?

このような悩みを解決します。

SWELLの初期設定は10個

本記事を見ながら進めれば、かんたんに初期設定できるのでご安心ください。

なお、記事内容はすでにSWELLを購入している方を前提としています。

SWELLの購入方法をくわしく知りたい方は、「WordPressテーマ『SWELL』の購入方法」からどうぞ。

プロフィールカード

\国内人気No.1/

目次

SWELL初期設定1|親・子テーマのインストール

SWELLの会員サイト(SWELLERS’)で製品をダウンロードし、WordPressにインストールします。

≫ SWELL会員サイトの「マイページ」

STEP
親テーマ(本体)・子テーマのダウンロード
SWELLの製品ダウンロードページ

「SWELL会員サイト」>「フォーラム」>「ログイン」>「マイページ」

STEP
親テーマ・子テーマのインストール

「WordPress」>「外観」>「新規追加」

SWELLの製品インストールページ

「テーマのアップロード」

SWELLの製品インストールページ2

「ファイルを選択」

SWELLの製品インストールページ3

「swell-◯.◯.◯.◯.zip」を選択

SWELLの製品インストールページ3

「今すぐインストール」

SWELLの製品インストールページ4

これでSWELLの親テーマ(本体)がWordPressにインストールできました。

同様に子テーマもインストールします。

子テーマがインストールできたら、子テーマを有効化して完了です。

SWELLの製品インストールページ5

「子テーマ」についてはこちらで解説

SWELL初期設定2|ユーザー認証

SWELLを導入したらすぐ「ユーザー認証」しましょう。

ユーザー認証しないとSWELL本体のアップデートができません。

「ダッシュボード」>「SWELL設定」>「アクティベート」

SWELLのアクティベート設定画面

会員サイト登録時のメールアドレスを入力し、「認証リクエストを送信」をクリック。

「株式会社LOOS」より届いたメールを開き、ワンタイムURLをタップすれば完了です。

SWELLのアクティベート完了画面

SWELL初期設定3|アフィリエイト申請

SWELLのアフィリエイトは購入者限定です。

ユーザー認証したついでに申請しておきましょう。

会員サイト」>「マイページ」>「SWELLのアフィリエイト」

SWELLのアフィリエイト申請画面

SWELLのアフィリエイトについてはこちら

SWELL初期設定4|プラグインの最適化

SWELLのプラグインは最低限でOK

以下では、公式サイトでまとめられている「推奨・非推奨プラグイン」を紹介します。

プラグインはWordPressの機能を拡張するツールのこと。スマホアプリみたいなものです。

推奨プラグイン

スクロールできます
プラグイン名説明重要度
SEO SIMPLE PACKSEOに必要な設定を行える。SWELLと開発元が同じ
XML Sitemap & Google NewsXMLサイトマップ生成プラグイン
WP Revisions Controlリビジョンデータを制御できる
Wordfence Securityログイン系のセキュリティを強化
XO Securityログイン系のセキュリティを強化
BackWPupWordPressのデータを保存、復元できる
Contact Form by WPFormsお問い合わせフォームを設置
Useful Blocksおしゃれで便利なブロックプラグイン
Pochippアフィリエイトリンクを管理できる

非推奨プラグイン

スクロールできます
プラグイン名説明
Gutenbergテーマ開発者がブロックエディターの機能をテストするもの
WooCommerce未対応
ElementorSWELLにページビルダーは不要
Flying ScriptsSWELLに同様の機能あり
Autoptimize不具合が発生する可能性あり
Async JavasScript不具合が発生する可能性あり
Table of Contents PlusSWELLに同様の機能あり
a3 Lazy LoadSWELLに同様の機能あり
Classic Editorブロックエディター推奨のため
AddQuicktagクラシックエディター用のため不要
TinyMCE Advancedクラシックエディター用のため不要
Jetpack不具合が発生する可能性あり
WP Super CacheSWELLに同様の機能あり
SiteGuard WP Plugin不具合が発生する可能性あり
EWWW Image Optimizer不具合が発生する可能性あり

プラグインは便利ですが、入れすぎると不具合の原因にもなります。

ページ速度向上のためにも、プラグインは最小限にしましょう。

プラグインについてはこちら

SWELL初期設定5|解析ツールの導入

ブログ運営に必須の解析ツール「Googleアナリティクス」「Googleサーチコンソール」を導入します。

両者の導入には「SEO SIMPLE PACK」が必要です。

Googleアナリティクス

Googleアナリティクス」は無料アクセス解析ツール。

ウェブサイトへのアクセスに関するデータを幅広く計測できます。

STEP
「測定ID」のコピー
Googleアナリティクスの測定ID

「Googleアナリティクス」>「管理」>「データストリーム」>「対象ブログ」

STEP
一般設定
WordPressダッシュボード画面

「WordPressダッシュボード」>「SEO PACK」>「一般設定」

STEP
測定IDを貼り付け
SWELLの「SEO PACK」設定画面

測定ID(GA4)を貼り付け、最後に「設定を保存する」をクリックすれば完了。

Googleサーチコンソール

Googleサーチコンソール」はウェブサイトのパフォーマンス分析ツールです。

サイトに流入する検索キーワード、検索順位などを解析できます。

STEP
メタタグの一部をコピー
Googleサーチコンソール「所有権」の確認画面

「Googleサーチコンソール」>「設定」>「所有権の確認」>「HTMLタグ」

<meta name=”google-site-verification” content=”このなかだけコピー” />

STEP
一般設定
WordPressダッシュボード画面

「WordPressダッシュボード」>「SEO PACK」>「一般設定」

STEP
メタタグの一部を貼り付け
SWELLの「SEO PACK」設定画面2

メタタグの一部を貼り付け、最後に「設定を保存する」をクリックすれば完了。

SWELL初期設定6|ふきだしの登録

エイタ

このような「ふきだし」を登録できるよ

STEP
新規ふきだし追加
SWELLの「ふきだし」登録画面

「ふきだし」>「新規ふきだし追加」

STEP
ふきだしの登録
SWELLの「ふきだし」登録編集画面
設定項目
  • タイトル
  • 画像
  • アイコンの丸枠
  • ふきだしの形
  • ふきだしの向き
  • ふきだしの線
  • ふきだしの色
  • テキストとアイコンの並び

ふきだしを追加したら「登録」をクリックすれば完了。

ふきだしを使うときは投稿画面で「+」をクリックし、ふきだしブロックを呼び出してください。

SWELL投稿画面の「ふきだし」呼び出し

SWELL初期設定7|エディター設定

エディター設定では、記事装飾に関する設定を行います。

「ダッシュボード」>「SWELL設定」>「エディター設定」

SWELLのエディター設定画面
エイタ

各項目、編集したら「変更を保存」をクリックしてね

カラーセット

カラーセットでは5項目の色を編集できます。

カラーパレット

カラーパレットはテキスト、背景色の変更に使用します。

SWELLのカラーパレット
投稿画面

赤枠内の濃い色4つ、淡い色4つを自由に変更可能。

SWELLのカラーパレット設定画面

カラーパレットのメインカラー、薄いメインカラー、グレー、白、黒は固定されています。

メインカラーの変更はカスタマイザーの「サイト全体設定」>「基本カラー」でどうぞ。

リスト

リストの色も変更できます。

リストのスタイル
右サイドメニュー「スタイル」
カラー変更可能なリストのスタイル
  • チェック
  • マル
  • 三角
  • バツ
  • 丸数字

プレビューを見ながら変更可能です。

SWELLのリストカラー設定画面

キャプションブロック

キャプションブロックは3色設定可能です。

SWELLのキャプションボックス「スタイル」
右サイドメニュー「スタイル」

タイトル、コンテンツの色を別々に設定できます。

SWELL「キャプションブロック設定」の画面

Q&A

Q&Aアイコンはのカラー設定を行います。

SWELLのFAQカラー選択画面
右サイドメニュー「スタイル」

「Q」「A」それぞれの色を設定しましょう。

SWELL「Q&A」のカラー設定

テーブル

テーブル内で使用するアイコンカラーを設定します。

SWELLのテーブル作成画面
投稿画面

プレビューを見ながら編集してください。

SWELLのテーブルアイコンカラー設定画面

テーブルの使い方はこちら

ボーダーセット

ボーダーセット4パターンのデザインを編集できます。

SWELLの「ボーダーセット」スタイル編集画面
右サイドメニュー「スタイル」

線の種類、太さ、色の設定が可能です。

SWELLの「ボーダーセット」編集画面

編集例

SWELLのボーダーセット編集例

マーカー

マーカー4色を設定しましょう。

SWELLの「マーカー」使用画面
投稿画面

マーカーのスタイルは4種類から選択可能。

SWELLの「マーカー設定」画面

編集例

SWELLのマーカー「ストライプ」使用画面

ボタン

SWELLボタンのカラーを設定します。

SWELLボタンのスタイル編集画面
右サイドメニュー「スタイル」

カラー、グラデーションの有無、ボタンの丸みが編集可能。

SWELLボタンの編集画面

編集例

SWELLボタンの編集例画面

SWELLボタン詳細はこちら

アイコンボックス

SWELLのアイコンボックスは大小12個を編集できます。

SWELLのスタイル「アイコンボックス」画面
右サイドメニュー「スタイル」

スタイル、カラーを設定しましょう。

SWELLの「アイコンボックス」編集画面

アイコンボックス(小)の編集例

SWELLのアイコンボックス「塗り(フラット)」画面

アイコンボックス(大)の編集例

SWELLのアイコンボックス「フラット」画面

ふきだし

ふきだしカラー5色の設定を行います。

SWELLの「ふきだし」スタイル編集画面
右サイドメニュー「スタイル」

背景、ボーダーカラーが変更可能です。

SWELLの「ふきだし」カラー編集画面

編集例

SWELLの「ふきだし」カラー編集完了画面

ふきだしの追加をする場合は「ふきだしの登録」をご覧ください。

カスタム書式

カスタム書式を設定すると、設定した装飾を「書式セット」で呼び出せます。

SWELLの書式セット使用例
投稿画面

カスタム書式セットは2つ登録できます。

SWELL「カスタム書式セット」編集画面

編集例

SWELL「カスタム書式セット」編集完了画面

その他ではブログカード、引用のデザインを変更できます。

その他

その他では「ブログカード」「引用」のデザインを設定できます。

ブログカード

内部、外部リンク用のブログカードデザインを設定しましょう。

「プルダウンリスト」よりお好きなタイプ1〜3を選べばOK

SWELLのブログカードデザイン編集画面

編集例

SWELLのブログカードデザイン「タイプ1」

引用

引用のスタイルは2パターンから選択可能。

SWELLの「引用」画面
投稿画面

スタイルの「プルダウンリスト」でデザインを選びます。

SWELLの「引用」パターン編集画面

編集例

SWELLの「引用」スタイル選択画面1

SWELL初期設定8|外観カスタマイズ

外観カスタマイズでは、サイト全体のデザインを設定できます。

「ダッシュボード」>「外観」>「カスタマイズ」

SWELLの外観カスタマイズ
エイタ

右画面でプレビューを見ながら設定できる

各項目の編集が終わったら、画面上の「公開」をクリックするのを忘れずに。

WordPress設定

WordPress設定では2項目を設定します。

サイト基本情報

SWELL「WordPress設定」サイトの基本情報編集画面
サイトのタイトル

ウェブサイト名を入力

キャッチフレーズ

サイト内容の説明

サイトアイコン

512×512pxで作成してください。

ホームページ設定

SWELLのカスタマイザー「ホームページ設定」画面

最初は「最近の投稿」でOK

「固定ページ」を使うのは、サイト型トップページにするときです。

サイト型トップページにする方法はこちら

サイト全体設定

サイト全体設定では10項目を設定します。

基本カラー

基本カラーは、サイト全体に適用される色を設定できます。

SWELL「基本カラー」編集画面
メインカラー

見出しや各種ボタンなど、サイト全体のイメージカラー。

テキストカラー

記事本文など、サイト全体に適用。

リンクカラー

記事本文のリンクカラー。

背景色

サイト全体の背景色。

基本デザイン

基本デザインでは、サイトの見た目に関する設定ができます。

SWELLカスタマイザー「基本デザイン」編集画面
サイト全体の見た目
SWELLカスタマイザー「基本デザイン」内【サイト全体の見た目】編集画面

全体の質感

SWELLカスタマイザー「全体の質感」編集画面

コンテンツの背景を白にする

SWELLカスタマイザー「コンテンツの背景を白にする」編集画面

※わかりやすいよう背景の色を変更しています。

フォント設定
SWELLカスタマイザー「基本デザイン」内【フォント設定】編集画面

ベースとなるフォント

SWELLのフォントパターン1
フォントサイズ

PC、タブレット、スマホのフォントサイズ

字間

文字と文字の間のスペース

コンテンツ幅の設定
SWELLカスタマイザー「基本デザイン」内【コンテンツ幅の設定】編集画面
サイト幅

サイトの横幅

1カラム時の記事コンテンツ幅

1カラムのときのコンテンツ横幅

サブメニューの表示形式
SWELLカスタマイザー「基本デザイン」内【サブメニューの表示形式】編集画面

チェックを入れるとグローバルナビ、スマホメニュー、ウィジェット内のサブメニューがアコーディオン式になります。

使用例

SWELL「サブメニューの表示形式」の使用例
ページ背景
SWELLカスタマイザー「基本デザイン」内【ページ背景】編集画面

任意の画像をページ背景に設定できます。

使用例

SWELLカスタマイザー「ページ背景」編集画面

画像をアップロードすると、ページ背景画像の設定項目が表示。

SWELLカスタマイザー「基本デザイン」内【ページ背景詳細】編集画面
画像サイズ

背景画像の縦横サイズを設定

画像位置(X・Y)

X、Y軸で画像位置を調整

その他の設定

画像のループ、固定表示の選択

NO IMAGE画像

記事にアイキャッチ画像を設定していないときに表示する画像を設定できます。

SWELL「no image」設置画面

タイトルデザイン

タイトルデザインでは、コンテンツのタイトル装飾を設定できます。

SWELLカスタマイザー「タイトルデザイン」編集画面
サブコンテンツのタイトルデザイン
SWELLカスタマイザー「基本デザイン」内【タイトルデザイン】編集画面

記事下「この記事を書いた人」や「関連記事」のタイトル装飾のデザインが設定可能。

使用例

SWELLカスタマイザー「基本デザイン」内【タイトルデザイン】編集例1
ウィジェットタイトル
SWELLカスタマイザー「基本デザイン」内【ウィジェットタイトル】編集画面

サイドバー、フッター、スマホ内のタイトルデザインを設定できます。

サイドバーのタイトルデザイン

SWELL「ウィジェットタイトル」パターン1

コンテンツヘッダー

SWELL「コンテンツヘッダー」編集画面

コンテンツヘッダーはアイキャッチ画像とは別に、「タイトルエリアの背景画像」を設定できます。

デザインを変更するには、「投稿・固定ページ」>「タイトル」からどうぞ。

お知らせバー

ヘッダーの上下にテキストリンクを配置できます。

SWELL「お知らせバー」使用例
お知らせバーの表示位置

ヘッダーの上下に設置可能

表示内容の設定

文字の大きさ、リンク種類、内容を編集

背景効果

お知らせバーの背景にグラデーション、斜めストライプ効果を追加

カラー設定

テキスト、背景色の選択

パンくずリスト

パンくずリストの表示位置を選択しましょう。

SWELL「パンくずリスト」使用例
パンくずリストの位置

記事上部or下部を選択

「ホーム」の文字列

任意のテキストに変更可能

その他の設定

「投稿ページ」への表示、背景効果の有無を設定

ページャー

ページャーの形、デザインを選択します。

SWELLカスタマイザー「ページャー」設定画面

ページャーの形・デザイン例

SWELL「ページャー」デザイン例 四角

スマホ開閉メニュー

スマホ開閉メニューのデザインを設定しましょう。

SWELLカスタマイザー「スマホ開閉メニュー」編集画面
カラー設定

文字色、背景色などお好みで設定

表示設定

メニューのタイトルを変更可能

カスタマイズ例

SWELLカスタマイザー「スマホ開閉メニュー」カスタマイズ例

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

画面右下に表示される「目次ボタン」「上に戻るボタン」を設定できます。

SWELLカスタマイザー「下部固定ボタン・メニュー」設定画面

右下固定ボタン設置例

下部固定ボタン・メニュー「円形」

「スマホ用固定フッターメニューの設定」は、スマホ下部に固定メニューを設定している方のみご利用ください。

固定メニューを設置したい方は「外観」>「メニュー」からどうぞ。

ヘッダー

ヘッダーのカラー、ロゴなどデザインを設定します。

SWELL「カスタマイザー」のヘッダー
カラー設定
SWELLカスタマイザー「ヘッダー」のカラー設定画面

ヘッダー背景色、文字色を変更できます。

変更例

SWELLカスタマイザー「ヘッダー」のカラー変更例
ヘッダーロゴの設定
SWELLカスタマイザー「ヘッダーロゴの設定]
画面

1600×360サイズで作るといい感じです。

設置例

SWELLカスタマイザー「ヘッダーロゴ] 設置画面
レイアウト・デザイン設定
SWELLカスタマイザー【ヘッダー】内「レイアウト・デザイン設定] 画面

ヘッダーナビの位置を変更できます。

変更例(PC)

SWELLカスタマイザー「ヘッダーロゴ] パターン1設置画面

変更例(SP)

SWELLカスタマイザー「ヘッダーロゴ](SP) パターン1設置画面
トップページでの特別設定
SWELLカスタマイザー【ヘッダー】内「トップページでの特別設定] 画面

特別設定を「する」にすると、透過したヘッダーをメインビジュアルの上に被せることができます。

設置例

SWELLカスタマイザー【ヘッダー】内「トップページでの特別設定] 設置画面
ヘッダーの追従設定
SWELLカスタマイザー【ヘッダー】内「ヘッダーの追従設定] 画面

ヘッダーを追従させる場合はチェックを入れましょう。

変更例

SWELLカスタマイザー【ヘッダー】内「ヘッダーの追従設定] 画面

ヘッダーの追従ボタンについてはこちら

ヘッダーバー設定
SWELLカスタマイザー【ヘッダー】内「ヘッダーバー設定] 画面

ヘッダーバーは「SNSアイコンリスト」を表示できます。

設置例

SWELLカスタマイザー【ヘッダー】内「ヘッダーバー] 設置画面
キャッチフレーズ設定
SWELLカスタマイザー【ヘッダー】内「キャッチフレーズ設定] 画面

キャッチフレーズの表示位置を設定しましょう。

設置例

SWELLカスタマイザー【ヘッダー】内「キャッチフレーズ設定] パターン1
ヘッダーメニュー(グローバルナビ)設定
SWELLカスタマイザー【ヘッダー】内「ヘッダーメニュー(グローバルナビ)設定] 画面

ヘッダーメニューにマウスホバーしたときのエフェクト、色を設定できます。

変更例

SWELLカスタマイザー【ヘッダー】内「ヘッダーメニュー(グローバルナビ)設定] パターン1
ヘッダーメニュー(SP)設定
SWELLカスタマイザー【ヘッダー】内「ヘッダーメニュー(SP)設定] 画面

「スマホ用ヘッダー」に指定したメニューがある場合に表示。

カスタマイザーでは、ヘッダーメニューをループさせるか選択できます。

検索ボタン設定
SWELLカスタマイザー【ヘッダー】内「検索ボタン設定] 画面

サイト内検索できる「検索ボタン」を設置しましょう。

設置例

SWELL「検索ボタン] 設置例
メニューボタン設定
SWELLカスタマイザー【ヘッダー】内「メニューボタン設定] 画面

スマホで表示されるメニューに関する設定ができます。

変更例

SWELLメニューボタン設置例(SP)
カスタムボタン設定
SWELLカスタマイザー【ヘッダー】内「カスタムボタン設定] 画面

スマホで表示される「検索ボタン」のアイコンを変更したり、好きなリンク先の「カスタムボタン」を設置できます。

変更例

SWELLカスタムボタン設置例
リンク先はSWELL公式サイト

フッター

フッターのカラー、コピーライト設定をします。

SWELLカスタマイザー「フッター」編集画面
カラー設定
SWELLカスタマイザー【フッター】内「カラー設定] 画面

フッターの背景色、文字色、ウィジェットエリアの色を設定しましょう。

変更例

SWELLカスタマイザー【フッター】カラー変更例
コピーライト設定
SWELLカスタマイザー【フッター】内「カコピーライト設定] 画面

コピーライトは自由に設定できます。

使用例

SWELLカスタマイザー【フッター】内コピーライト設置例
その他の設定
SWELLカスタマイザー【フッター】内「その他の設定] 画面

「フッター」と「フッター直前ウィジェット」の間の余白をなくす、はお好みで。

SNSアイコンリストは表示させましょう。

設置例

SWELLカスタマイザー【フッター】内SNSアイコンリスト設置例

サイドバー

サイドバーをどのページに表示するか設定します。

SWELLカスタマイザー「サイドバー」編集画面
サイドバーを表示できるページ
  • トップページ
  • 投稿ページ
  • 固定ページ
  • アーカイブページ

サイドバーの位置も変更可能(左右)。

変更例

SWELLカスタマイザー「サイドバー」設置例

トップページ

トップページのデザインを設定します。

SWELLカスタマイザー「トップページ」編集画面

メインビジュアル

メインビジュアルはサイトを開くとトップに表示される画像、動画のことです。

SWELLカスタマイザー「トップページ」内【メインビジュアル】編集画面
メインビジュアルの表示内容
SWELLカスタマイザー「メインビジュアル」内【表示】編集画面

表示しない、画像、動画から選択。

表示設定
SWELLカスタマイザー「メインビジュアル」内【表示設定】編集画面

まず「余白」「Scrollボタン」の有無を選択します。

メインビジュアルの高さ

PC、スマホそれぞれ設定可能

画像の上に表示されるボタンの丸み

ボタンの丸さを設定

フィルター処理

メインビジュアルに適用される効果を4種類から選択

オーバーレイカラー

メインビジュアル画像・動画に被せる色を設定

変更例

SWELLカスタマイザー「メインビジュアル」編集例
画像スライダー設定
SWELLカスタマイザー「メインビジュアル」内【画像スライダー】編集画面

画像を2枚以上設定すると、以下のようにスライダーの設定項目が追加されます。

SWELLカスタマイザー「メインビジュアル」内【画像スライダー】編集画面2

新たに追加した画像の「表示」に関する設定が可能です。

各スライドの設定
SWELLカスタマイザー「メインビジュアル」内【各スライドの設定】編集画面
SWELLカスタマイザー「メインビジュアル」内【各スライドの設定】編集画面2

スライド画像やメインテキスト、ボタンの設定ができます。

記事スライダー

記事スライダーは、記事サムネイルが右から左に流れる機能のことです。

SWELLカスタマイザー「記事スライダー」編集例
記事スライダーを設置するかどうか
SWELLカスタマイザー「メインビジュアル」内【記事スライダー】設置するかどうか

記事スライダーを設置するかどうか選択しましょう。

記事のピックアップ方法
SWELLカスタマイザー「メインビジュアル」内【記事のピックアップ方法】編集画面

記事スライダーにどの記事を表示させるか対象を選択します。

並び順も決めましょう。

記事の表示設定
SWELLカスタマイザー「メインビジュアル」内【記事の表示設定
】編集画面

記事スライドの見た目に関する設定を行えます。

変更例

SWELLカスタマイザー「メインビジュアル」内【記事の表示設定 】変更例
スライド設定
SWELLカスタマイザー「メインビジュアル」内【スライド設定 】編集画面

PC・スマホそれぞれのスライダー枚数、アニメーション速度の設定です。

その他の表示設定
SWELLカスタマイザー「メインビジュアル」内【その他の表示設定 】編集画面

記事スライダーにタイトルを追加したり、背景色を変更したりできます。

変更例

SWELLカスタマイザー「メインビジュアル」内【その他の表示設定 】変更例

ピックアップバナー

ピックアップバナーは、メインビジュアル下に表示される画像バナー形式のナビゲーションメニューです。

SWELLカスタマイザー「メインビジュアル」内【ピックアップバナー 】設置例

ピックアップバナーを使用するには、カスタムメニューを作成する必要があります。

「外観」>「カスタマイズ」>「メニュー」より新規メニューを作成してください。

バナーレイアウト
SWELLカスタマイザー「ピックアップバナー」内【バナーレイアウト 】編集画面

バナーを何列で表示するか選択。

2〜4列、またはフレックス(横一列にすべて並べる)から選べます。

バナーデザイン
SWELLカスタマイザー「ピックアップバナー」内【バナーデザイン 】編集画面

バナータイトルのデザイン、白線の有無、バナーをすこし暗くするか設定しましょう。

変更例

SWELLカスタマイザー「ピックアップバナー」内【バナーデザイン 】パターン1
その他
SWELLカスタマイザー「ピックアップバナー」内【その他】編集画面

トップページ以外の下層ページ(投稿ページなど)に表示するか選択できます。

「Lazyload」を強制オフにするにはチェック。

その他

その他ではメインビジュアル下、コンテンツ部分との間の余白を調整できます。

SWELLカスタマイザー「ピックアップバナー」内【その他】設定画面
余白量
  • なし
  • 狭め
  • 標準
  • 広め

ピックアップバナー下の余白と合わせるなら「標準」を選ぶといいですよ。

投稿・固定ページ

投稿・固定ページでは以下の7項目を設定します。

タイトル

記事タイトル周辺のデザインを設定しましょう。

SWELLカスタマイザー「タイトル」設定画面
投稿ページ
SWELLカスタマイザー「タイトル」内【投稿ページ】設定画面

タイトルの表示位置、タイトル横・下に表示する情報を選択できます。

変更例

SWELLカスタマイザー「タイトル」変更例

タイトル背景の画像は「サイト全体設定」>「基本デザイン」「コンテンツヘッダー」より設定可能。

固定ページ
SWELLカスタマイザー「タイトル」内【固定ページ】設定画面

固定ページでも同様の設定ができます。

PR表記

ステマ規制の改正に伴い、アフィリエイトリンクのある記事には「PR表記」をする必要があります。

SWELLカスタマイザー「PR表記」設定画面
PR表記の自動挿入

投稿、固定ページそれぞれ設定可能

表示タイプ

大、小より選択

表示するテキスト

大、小それぞれ自由に設定可能

変更例

SWELLカスタマイザー「タイトル」内【PR表記の自動挿入(投稿)】設置例

アイキャッチ画像

投稿本文のトップにアイキャッチ画像を表示するか選択できます。

SWELLカスタマイザー「アイキャッチ画像」設定画面

投稿、固定ページそれぞれ設定可能です。

表示なしパターン

SWELLカスタマイザー「アイキャッチ画像」設置例

コンテンツのデザイン

「コンテンツのデザイン」では見出しや太字、テキストリンクの装飾を設定。

SWELLカスタマイザー「コンテンツのデザイン」設定画面
見出しのデザイン設定
SWELLカスタマイザー「コンテンツのデザイン」内【見出しのデザイン設定】画面

見出しh2〜h4のデザインをそれぞれ設定できます。

見出しのデザイン例

SWELLのh3見出し例
出典:SWELL
セクション見出しのデザイン設定
SWELLカスタマイザー「コンテンツのデザイン」内【セクション見出しのデザイン設定】画面

セクション用見出しのデザインも変更可能です。

変更例

SWELLセクション見出しの設置画面1
太字
SWELLカスタマイザー「コンテンツのデザイン」内【太字】設定画面

チェックを入れると記事中の太字の下に「点線」がつきます。

変更例

SWELLカスタマイザー「コンテンツのデザイン」内【太字】設置画面
テキストリンク
SWELLカスタマイザー「コンテンツのデザイン」内【テキストリンク】設定画面

チェックを入れると記事中のテキストリンクに「アンダーライン」がつきます。

変更例

SWELLカスタマイザー「コンテンツのデザイン」内【テキストリンク】設置画面

目次

投稿ページの目次を設定しましょう。

SWELLカスタマイザー「目次」設定画面
目次を表示するかどうか

投稿・固定ページに目次を表示させるか選択

目次のタイトル

お好きなタイトルを入力

目次のデザイン

4種類から選択

目次のリストタグ

ol・ulタグから選択

擬似要素(ドット・数字部分)のカラー

テキスト、メイン、カスタムカラーより選択

どの階層の見出しまで抽出するか

h2〜h5より選択

見出し何個以上で表示するか

任意の数字を入力

目次の省略表示

4種類から選択

開くボタンのテキスト

お好きなテキストを入力

閉じるボタンのテキスト

お好きなテキストを入力

目次広告の位置

目次の前・後から選択

設置例

SWELL「目次」設置例

SNSシェアボタン

SNSシェアボタンの配置、表示設定ができます。

SWELLカスタマイザー「SNSシェアボタン」設定画面
シェアボタンを表示する位置

記事の上、下、画面端に固定表示から選択

表示するボタンの種類

6種類のSNSから選択

シェアボタンのデザイン

5種類から選択

URLコピーボタン

表示しない、大、小から選択

「記事下部シェアボタン」の上に表示するメッセージ

お好きなテキストを入力

シェアされた時のハッシュタグ

Xでシェアされたときのハッシュタグを追加可能

via設定(メンション先)

Xでリプライされたとき「@◯◯さんから」と追加可能

設置例

SWELLカスタマイザー「SNSシェアボタン」設置例

記事下エリア

記事下エリアのデザインを編集しましょう。

SWELLカスタマイザー「記事下エリア」設定画面
SNSアクションエリア設定
SWELLカスタマイザー「記事下エリア」内【SNSアクションエリア設定】編集画面

表示するSNSボタン(X、Instagram、Facebook)を選択します。

設置例

SWELLカスタマイザー「SNSアクションエリア」設置例
前後記事へのページリンク設定
SWELLカスタマイザー「記事下エリア」内【前後記事へのページリンク設定】編集画面

前後記事へのページリンクの詳細を設定。

変更例

SWELL「前後記事へのページリンク」設置例1
著者情報エリアの設定
SWELLカスタマイザー「記事下エリア」内【著者情報エリアの設定】編集画面

「著者ページへのリンクを表示する」は著者が複数いるときに便利です。

設置例

SWELLカスタマイザー「著者情報エリア」設置例
関連記事エリアの設定
SWELLカスタマイザー「記事下エリア」内【関連記事エリアの設定】編集画面

関連記事エリアのタイトル、レイアウトなどを設定できます。

変更例

SWELLカスタマイザー「関連記事エリア」設置例
コメントエリアの設定
SWELLカスタマイザー「記事下エリア」内【コメントエリアの設定】編集画面

チェックを入れるとコメントエリアを設置できます。

設置例

SWELLカスタマイザー「コメントエリア」設置例2

アーカイブページ

アーカイブページではタイトルレイアウトを変更可能です。

SWELLカスタマイザー「アーカイブページ」設定画面

タイトルの表示位置を「コンテンツ内」「コンテンツ上」より選択できます。

変更例

SWELLカスタマイザー「アーカイブページ」設置例

タイトル背景への画像挿入は「サイト全体設定」>「基本デザイン」「コンテンツヘッダー」からどうぞ。

記事一覧リスト

記事一覧リストでは、リストレイアウトの設定が可能。

SWELLカスタマイザー「記事一覧リスト」設定画面
リストのレイアウト設定
SWELLカスタマイザー「記事一覧リスト」内【リストのレイアウト設定】編集画面

PC・スマホのリストレイアウトを設定しましょう。

変更例

SWELL「リストレイアウト」設置例
投稿情報の表示設定
SWELLカスタマイザー「記事一覧リスト」内【投稿情報の表示設定】編集画面

抜粋文の文字数(0〜320)など、投稿情報の表示を設定できます。

変更例

SWELL「カード型リスト」設置例
カテゴリーの表示設定
SWELLカスタマイザー「記事一覧リスト」内【カテゴリーの表示設定】編集画面

カテゴリーの表示設定が可能です。

変更例

SWELL「カード型リスト」変更例1
サムネイル画像の比率設定
SWELLカスタマイザー「記事一覧リスト」内【サムネイル画像の比率設定】編集画面

記事一覧リストに表示されるサムネイル画像の比率を設定できます。

画像比率
  • 正方形 (1:1)
  • 黄金比率 (1:1.618)
  • 白銀比率 (1:1.414)
  • 一眼 (3:2)
  • ワイド (16:9)
  • OGP(1.91:1)
  • 横長 (2:1)
  • 超横長 (5:2)

変更例

SWELLサムネイル画像の比率パターン1
マウスホバー時の設定
SWELLカスタマイザー「記事一覧リスト」内【マウスホバー時の設定】編集画面

投稿リストにマウスをホバー(重ねる)させたときに被せるカラーを変更可能です。

編集例

SWELL「マウスホバー時の色」パターン1
タブ切り替え設定(トップページ)
SWELLカスタマイザー「記事一覧リスト」内【タブ切り替え設定(トップページ)】編集画面

トップページの投稿ページ一覧に表示する「タブ」を編集できます。

変更例

SWELLタブ切り替え設定(トップページ)例
タブ切り替え設定(その他のページ)
SWELLカスタマイザー「記事一覧リスト」内【タブ切り替え設定(その他のページ)】編集画面

タームアーカイブ(カテゴリー・タグページ)、著者アーカイブに「人気記事タブ」を追加するか選びましょう。

変更例

SWELLのタームアーカイブに「人気記事タブ」を追加例
投稿一覧から除外するカテゴリー・タグ
SWELLカスタマイザー「記事一覧リスト」内【投稿一覧から除外するカテゴリー・タグ】編集画面

トップページやウィジェットに表示される「投稿一覧リスト」から、除外したいカテゴリーやタグを設定できます。

SNS情報

ヘッダーやフッターに表示するSNSアイコン情報を設定します。

SWELLカスタマイザー「SNS情報」設定画面

アカウント名ではなく、SNSのページURLを入力してください。

SWELLカスタマイザー「SNS情報」編集画面

SWELL初期設定9|プロフィール設定

ウィジェットに表示されるプロフィールを設定します。

SWELLのサイドバー「プロフィール」画面
STEP
「プロフィール」ウィジェットを配置
SWELL「ウィジェット」編集画面

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

プロフィールを表示させたいウィジェットエリアに、プロフィール用ウィジェットをドラッグ&ドロップで配置。

STEP
プロフィールの編集
SWELL「ウィジェット」編集内【プロフィール】画面

テキストやリンク、画像を設定し最後に「完了」をクリックしてください。

STEP
確認
SWELLのプロフィール設設置例

設置したら確認しましょう。

SWELL初期設定10|高速化設定

SWELLの高速性を最大限引き出すためにも「高速化設定」をお忘れなく。

「ダッシュボード」>「SWELL設定」

SWELLの高速化編集画面
キャッシュ機能
SWELL「高速化設定」内【キャッシュ機能】編集画面

キャッシュ機能のチェック項目すべてにチェックを入れます。

ブログカードのキャッシュ期間は「30日」のままでOK

ファイルの読み込み
SWELL設定「高速化」内【ファイルの読み込み】編集画面

「SWELLのCSSをインラインで読み込む」と「コンテンツに合わせて必要なCSSだけを読み込む」にチェック。

遅延読み込み機能
SWELL設定「高速化」内【遅延読み込み機能】編集画面
コンテンツの遅延読み込み

2項目にチェック

画像等のLazyload

「スクリプト(lazysizes.js)を使って遅延読み込みさせる」にチェック

スクリプトの遅延読み込み

オン

遅延させる秒数

5秒

遅延読み込み対象にするスクリプトのキーワード
  • twitter.com/widgets.js,
  • instagram.com/embed.js,
  • connect.facebook.net,
  • assets.pinterest.com,
  • googletagmanager.com/gtag/js,
  • gtag(,
  • adsbygoogle.js,
  • clipboard.min.js,
  • set_urlcopy.min.js,
  • luminous.min.js,
  • set_luminous.min.js,
  • rellax.min.js,
  • set_rellax.min.js,
  • prism.js,
  • hcb_script.js,
  • pochipp/dist/js/update.js,
ページ遷移高速化
SWELL「高速化設定」内【ページ遷移高速化】編集画面

高速化の種類は「Prefetch」にチェック。

Prefetchさせないページのキーワードを入力する場合は、「,(+改行)」で区切ってください。

チェックを入れ終わったら、最下部「変更を保存」をクリックすれば完了。

高速化の詳細はこちら

まとめ|SWELLの初期設定10個

今回は、SWELLの初期設定10個をまとめました。

おさらい

設定項目が多く大変かもしれませんが、SWELLの力を引き出すためです。

一つひとつ確実に設定しましょう。

\国内人気No.1/

あわせて読みたい

【SWELLの始め方】初期設定10個をわかりやすく解説

この記事が気に入ったら
フォローしてね!

よかったらシェア!
  • URLをコピーしました!
目次