【WordPressテーマSWELL】初期設定を初心者向けに解説

当ページのリンクには広告が含まれています。
  • SWELLを購入しました!初期設定を簡単に教えて欲しい!
  • 初期段階で必要なプラグインは?
  • メニューなどの簡単な設定も教えて!

上記のような疑問をお持ちの方の悩みを解決できる記事を書きました。

この記事では、SWELL導入後の初期設定を解説しており、SWELL初心者が最低限設定した方がいい項目をピックアップし、紹介しています。

この記事を最後まで読み、実践することによって、SWELLの初期設定が解決すると言っても過言ではありません。

SWELLでのブログ運営に最低限必要な初期設定をさっさと済ませて記事を書く段階に進んでしまいましょう。

これからSWELLの購入をご検討の方は、まずは下の公式ページから購入しましょう。

SWELL導入方法をわかりやすく記事にしました。

目次

SWELLをインストール・有効化する

まず始めに、WordPressに購入したSWELLをインストール・有効化します。

STEP
管理画面→【外観】→【テーマ】→【新規追加】をクリックする
STEP
【テーマのアップロード】をクリックする
STEP
【ファイルを選択】で親テーマ【swell-…….zip】ファイルを選択、【今すぐインストール】をクリックする
STEP
【テーマページへ移動】をクリックする

ここからは、先ほどと同様にSWELL子テーマをインストールしていきます。

STEP
【ファイルを選択】で子テーマ【swell-child.zip】を選択し、【今すぐインストール】をクリックする
STEP
【有効化】をクリックする

SWELL親テーマ同様、SWELL子テーマも【有効化】します。

STEP
【SWELL CHILD】が【有効】になっていればインストール完了です

以上がSWELLインストール・有効化までの流れです。

SWELLプラグイン設定

続いては、SWELLのプラグイン設定について。

プラグインは、そもそも開発者がそれぞれ違い、WordPressのバージョンアップなどに細かく対応していないものもあるので、プラグイン側での不具合はつきものです。

また、SWELLとの相性や、プラグイン同士の相性もあります。

著者が設定したプラグインや、SWELL開発者が推奨しないプラグインを解説しますね。

  • 推奨プラグイン
  • 非推奨なプラグイン
  • プラグインのインストール・有効化手順

推奨プラグイン

SWELLでほぼ必須なプラグインは、【SEO SIMPLE PACK】です。

SWELLと同じ開発者が作成しており、完全に日本語対応のプラグインです。

WordPress.org 日本語
SEO SIMPLE PACK とてもシンプルなSEOプラグインです。ページごとのmetaタグやOGPタグを簡単に設定・カスタマイズできます。

SWELL開発者が作ったプラグイン

WordPress.org
Highlighting Code Block Add code block with syntax highlighting using prism.js. (Available for Gutenberg and Classic Editor)
WordPress.org 日本語
Useful Blocks 痒いところに手がとどく、便利なブロックを集めたプラグインです。
WordPress.org 日本語
Pochipp Amazonや楽天市場から商品を検索してアフィリエイトリンクを管理できるプラグインです。

SWELL開発者が個人的におすすめなプラグイン

SWELLおすすめセキュリティ・バックアップ系プラグイン

その他おすすめプラグイン

非推奨なプラグイン

SWELLで不要なプラグイン

  • Gutenberg
  • WooCommerce
  • Elementor
  • Flying Scripts
  • Autoptimize
  • Async JavasScript
  • Table of Contents Plus
  • RTOC
  • Lazy Load
  • Speech bubble
  • Classic Editor
  • AddQuicktag
  • TinyMCE Advanced
  • Jetpack
  • WP Super Cache
  • W3 Total Cache
  • SiteGuard WP Plugin
  • EWWW Image Optimizer

推奨プラグイン・非推奨プラグインをもっと詳しく知りたい方は、【SWELL開発者了さんの記事】を参考にしてください。

カイハツ

WordPressテーマによって必要なプラグインが全然違うので、開発者のおすすめプラグインを参考にするといいですよ。

プラグインのインストール・有効化手順

ここからは、ステップ形式でプラグインのインストール・有効化(設定)手順を解説します。

STEP
WordPress管理画面【プラグイン】→【新規プラグインを追加】を順にクリック、キーワード検索欄にプラグイン名を記入し検索する
STEP
【今すぐインストール】をクリック、インストール完了後【有効化】をクリック

【今すぐインストール】をクリックすると、【インストール中】が完了し、【有効化】になります。

下記の画像では、【SEO SIMPLE PACK】はすでに有効化済みです。

STEP
WordPress管理画面【プラグイン】→【インストール済みプラグイン】をクリックし、有効化になっているか確認する

プラグインの項目下に、【無効化】と表示されている場合、現在有効化されている状態です。

上記のステップ形式で、必要なプラグインをインストール、有効化していきます。

カイハツ

各プラグイン開発者はバラバラです。
複雑なプログラム同士が絡み合うので、不具合が出る場合も!

SWELL基本設定

ここからは、SWELLの基本的な設定について解説していきます。

  1. パーマリンクの設定
  2. サイト全体のカラー設定
  3. ヘッダーの設定
  4. フッターの設定
  5. サイドバーの設定
  6. 運営者アカウント情報の設定
  7. Twitterカードの設定
  8. 吹き出しの設定

1:パーマリンクの設定

まず、パーマリンクについて、下記を参考にしてください。

パーマリンクとは、ウェブサイトの各ページに対して個別に与えられているURLのことです。

つまりURL自身のことになります。パーマネントリンク(Permanent Link)の略で、ページが増えても恒久的に変わることのないリンクであることから、固定リンクとも呼ばれます。

引用元:ナイルのマーケティング相談室

この記事だと、「https://kaihatsublog.xyz/wordpress-theme-swell-initialization」肌色マーカー部分がパーマリンクです。

それでは、パーマリンク初期設定を解説します。

STEP
WordPress管理画面【設定】→【パーマリンク】をクリックする
STEP
【カスタム構造】を選択し、【%postname%】を選択、【変更を保存】で完了

上記の画像の手順通りに設定すれば完了です。

各ページごとのパーマリンク設定方法はここでは割愛します。

パーマリンクを途中で変更した場合の注意点

初期設定で決めたパーマリンクを途中で変更してしまうことはおすすめしません。

なぜなら、パーマリンクを途中で変更することにより、今までブログ運営してきてシェアされたURLや、被リンクが無効になってしまうリスクがあります。

ドメイン全体でもSEOに悪影響がある恐れもあるので、できれば初期設定のまま運営することをおすすめします。

カイハツ

初期設定したパーマリンクでブログ運営し続けることをおすすめします。

2:サイト全体のカラー設定

サイト全体のカラー設定方法をステップ方式で解説します。

STEP
WordPress管理画面【外観】→【カスタマイズ】をクリック
STEP
カスタマイズ画面【サイト全体設定】をクリック
STEP
【基本カラー】をクリック
STEP
カラーを変更する
  • メインカラー:サイト全体のカラーを選択できます。
  • テキストカラー:文字のカラーを選択できます。
  • リンカラー:リンクのカラーを選択できます。
  • 背景色:背景の色を選択できます。

以下のカラーも同様に変更可能です。

  • ヘッダー
  • フッター
  • スマホ開閉メニュー

WordPress管理画面【外観】【カスタマイズ】にて編集可能ですので、設定してみましょう。

カイハツ

リンクカラーはそのままがいいかも!
変に赤とかにしてしまうと、あまりいい印象はないです。

3:ヘッダーの設定

次に、ヘッダー周りの設定をしましょう。

ヘッダーの設定は多岐に渡りますが、今回の記事で解説する設定項目は以下。

  • カラー設定
  • ヘッダーのロゴ設定
  • レイアウト・デザイン設定

ヘッダーのカラー設定

ヘッダーのカラー設定方法です。

STEP
WordPress管理画面【外観】→【カスタマイズ】をクリック
STEP
【ヘッダー】→【カラー設定】
STEP
ヘッダー部分のカラーを設定する

上記赤矢印部分のカラー、文字色を設定できます。

ヘッダーのロゴ設定

ヘッダーのロゴ設定方法です。

STEP
WordPress管理画面【外観】→【カスタマイズ】をクリック
STEP
【ヘッダーロゴの設定】→【画像を選択】をクリックし、ロゴを選択する
STEP
ロゴを設定できたら、画像サイズを決める

【画像を変更】でロゴを変更できます。

画像サイズはそれぞれPCやスマホ、タブレットで確認しましょう。

STEP
ロゴが正しく設定できているか確認する
カイハツ

サイトのヘッダー部分ができてくると、それらしくなってきますね。

レイアウト・デザイン設定

レイアウト・デザイン設定の手順について解説していきます。

STEP
WordPress管理画面【外観】→【カスタマイズ】をクリック、レイアウト・デザイン設定

下記の画像のメニューから、ヘッダーナビの位置を設定することができます。

STEP
以下4種類が設定後の例
ヘッダーナビをロゴの横に(右寄せ)
ヘッダーナビをロゴの横に(左寄せ)
ヘッダーナビを下に
ヘッダーナビを上に

ヘッダーの設定はまだ数種類あるので、詳しく知りたい方は【SWELL公式ページ】を参考にしてください。

カイハツ

自身のブログにあったスタイルを選択しましょう。

4:フッターの設定

続いて、フッターの設定手順を解説します。

フッターで設定できる項目は以下。

  • カラー設定
  • コピーライト設定
  • その他の設定

それでは順に解説していきます。

カラー設定

カラー設定でできる設定は以下です。

  • フッター背景色
  • フッター文字色
  • ウィジェットエリアの背景色
  • ウィジェットエリアの文字色

今回は【フッター背景色】【フッター文字色】を設定しました。

STEP
WordPress管理画面【外観】→【カスタマイズ】→【フッター】をクリックし、【カラー設定】を設定する
STEP
【フッター背景色】【フッター文字色】を設定する
フッター背景色
フッター文字色

カラー設定では、上記のようにフッター部分のカラー設定をすることができました。

コピーライト設定

【コピーライト設定】では、フッター部分のコピーライト表記を設定でます。

まずは、コピーライトについて以下を参考にしてください。

コピーライト(Copyright)とは、創作物に対して著作権を有することを表す表記。 Webサイトにコピーライトを記載することで、著作権が誰にあるのか、いつからあるのかといった権利を示すことができます。 そのため、多くのWebサイトではコピーライトの記載が一般的になっています。

引用元:株式会社クリエル
STEP
WordPress管理画面【外観】→【カスタマイズ】→【フッター】をクリックし、【コピーライト設定】を設定する

【コピーライト設定】のテキスト欄に、自身の表記させたい文字を打ち込みます。

STEP
【カイハツブログ.】と設定する
コピーライトのテキスト
カイハツ

コピーライト設定はデフォルトで設定されますが、設定手順を覚えておきましょう。

その他の設定

【その他の設定】では、以下のような設定ができます。

  • 「フッター」と「フッター直前ウィジェット」の間の余白をなくす
  • フッターにSNSアイコンリストを表示する

今回の設定では、【フッターにSNSアイコンリストを表示する】を設定します。

STEP
WordPress管理画面【外観】→【カスタマイズ】→【フッター】をクリックし、【その他の設定】を設定する

【フッターにSNSアイコンリストを表示する】にチェックを入れます。

STEP
フッターにSNSアイコンリストが表示される
【フッターにSNSアイコンリストを表示する】

フッター部分に、SNSアイコンが表示されました。

カイハツ

後に解説する【SNSリンク設定】にURLを設定すれば、アイコンが表示されますよ。

5:サイドバーの設定

続いて、サイドバーの設定手順を解説します。

サイドバーを編集することによって、以下の部分を設定できます。

STEP
WordPress管理画面【外観】→【カスタマイズ】→【サイドバー】をクリックし、設定する

右下の画像、サイドバーを表示させたい場所にチェックを入れます。

STEP
WordPress管理画面【外観】→【ウィジェット】→【サイドバー】周辺をクリックし、設定する

【サイドバー】には以下の項目があります。

  • 共通サイドバー
  • 共通サイドバー【スマホ版】
  • トップページ専用サイドバー
  • 追尾サイドバー

共通サイドバー

共通サイドバーで表示を設定した場合、全てのページで表示が設定されることになります。

共通サイドバー【スマホ版】

スマホ版の共通サイドバーです。

この項目で何も設定しない場合、上記の【共通サイドバー】で設定した内容が反映されます。

トップページ専用サイドバー

トップページ専用で表示されるサイドバーです。

追尾サイドバー

【共通サイドバー】下部分に表示されます。

サイドバーに広告を貼りたい場合

サイドバーにアフィエリエイトリンクを貼りたい場合は、表示させたいサイドバー内にウィジェット【SWELL】広告コードをドラッグ&ドロップします。

【SWELL】広告コード内にアフィリエイトリンクを貼ると、サイドバーに広告が表示されます。

アフィリエイトリンクの貼り方を詳しく書いた記事を用意しましたので、ぜひ目を通してください。

カイハツ

【サイドバーの設定】は、【カスタマイザー】【ウィジェット】の2箇所設定する必要があります。

:運営者アカウント情報の設定

次に、アカウント情報の設定をしましょう。

STEP
WordPress管理画面【外観】→【カスタマイズ】→【SNS情報】をクリックし、設定する
STEP
【SNSリンク設定】にページURLを設定する

以上です。

自身のブログ運営と連携させたいSNSのURLは、進んで設定しましょう。

カイハツ

ブログ運営をする際に、Twitter(X)も同時に運営することをおすすめします。

7:Twitterカードの設定

まずは、SWELLでTwitterカードを表示する際に、SWELL開発者が作った【SEO SIMPLE PACK】というプラグインをインストールしてから設定します。

SIMPLE SEO PACKプラグインで設定する

以下で手順を解説します。

1. SWELLテーマのダッシュボード【プラグイン・新規追加】から【SEO SIMPLE PACK】プラグインをインストール

2. 【プラグイン】の設定ページで【有効化】する

3. 【SEO SIMPLE PACK・OGP設定】【基本設定・Twitter】を設定していく

4. 各項目にサイトのTwitterアカウントやデフォルト画像などを入力

5. 【設定を保存する】で完了

ブログにTwitterカードを埋め込むと、以下のメリットがあります。

  • Twitterでリンクをシェアした時にリッチな情報を表示できる
  • 記事のタイトルや概要、サムネイル画像が表示される
  • クリック率や拡散率が上がる
  • Twitterユーザーにコンテンツをアピールできる
  • Twitterとの連携でSEO効果が期待できる
  • SEO以外の集客を期待できる

ですので、ブログ運営する際にはTwitterも同時に使っていきましょう。

Twitterカード

Twitterカード表示方法について、より詳しく解説した記事にも目を通してください。

カイハツ

Twitterカードの貼り方は、上記の記事を参考にしてね!

8:吹き出しの設定

吹き出しの設定です。

STEP
WordPress管理画面【ふきだし】をクリックする
STEP
【新規ふきだし追加】で吹き出しを追加する
STEP
【ふきだしセット】を編集する

ふきだし編集画面でできる設定は以下です。

  • ふきだしセット一覧のふきだしタイトル
  • アイコンの丸枠:【枠なし・枠あり】
  • ふきだしの形:【発言・心の声】
  • ふきだしの向き【左・右】
  • ふきだしの線【なし・あり】
  • ふきだしの色
  • テキストとアイコンの並び
カイハツ

吹き出しは記事にメリハリを付けるために必要です。
ぜひ活用していきましょう。

ふきだしを使う際の注意点

記事にふきだしを使う際に、注意しておいた方がいいポイントがあります。

各見出しの締め毎にふきだしを使うと、記事にメリハリがついて読みやすくなります。

ですが、ふきだしの中にもしっかり有益な情報を書きましょう。

以下は著者がおすすめしないふきだしの使い方です。

カイハツ

うんうん、そうだね!

上記のようなふきだしの使い方は、無駄ですよね?

ですので、ふきだしの内容にもしっかり意味のある情報を書きましょう。

SWELLアフィリエイトに参入しよう!

SWELLの初期設定が完了したら、SWELLアフィリエイトに参入しましょう。

SWELLアフィリエイトに参入する方法は以下です。

  • SWELLを購入する
  • SWELLERS’会員に登録する
  • SWELLERS’にログインし、【プロモーション詳細はこちら】をクリックする
  • もしもアフィエリエイトでSWELLのリンクを取得する
  • 自身のメディアでSWELLをアフィリエイトする

SWELLアフィリエイトは、購入者限定でアフィリエイトプログラムに参加することができます。

SWELL購入者のみが利用できる【クローズド案件】について詳しく記事を書きました。

カイハツ

SWELLテーマはとても魅力的なので、初心者でもアフィリエイトのチャンスがまだまだあります。
購入者のみが参入できる仕組みなので、購入者の特権ですよ。

まとめ

今回の記事のおさらいです。

SWELLの初期設定についてわかりやすく解説した内容は以下です。

  1. パーマリンクの設定
  2. サイト全体のカラー設定
  3. ヘッダーの設定
  4. フッターの設定
  5. サイドバーの設定
  6. 運営者アカウント情報の設定
  7. Twitterカードの設定
  8. 吹き出しの設定

SWELLを導入し、初期設定をさっと済ませて記事を書くことに集中しましょう。

これからSWELLの購入を検討の方は、以下のリンクから。

SWELL購入方法を詳しく知りたい方は、以下の記事を参考にしてください。

それではまた、次の記事で!

このフォームに入力するには、ブラウザーで JavaScript を有効にしてください。
Name

この記事はSWELLで書かれています

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

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