【図解で簡単】SWELLの初期設定と基本的な設定・使い方まとめ

アイキャッチ画像_SWELL初期設定・設定・使い方
  • URLをコピーしました!
悩んでる人

SWELLの設定や困りごとに対する回答がまとまっている所ないかな〜

くぼたつ

この記事にまとめました!(自分のためにも…)

随時「気づき」があり次第、追加しています。もしこんな情報あったら嬉しい!初心者の方に教えてあげたい!などあればTwitter(@v_challenging)にDMいただけると嬉しいですmm

この記事の執筆者

この記事の執筆者(利用WordPressテーマ)
twitter:@v-challenging
くぼたつ

私がブログ運営で学んだ知識を記事にしています!ぜひブログ運営の参考にしてみてください!


\本サイトで利用しているWordPressテーマ/

本記事は既にSWELLインストール済みの方向け記事です。
SWELLのインストールから始めたい!という方は、SWELLのインストール手順と他テーマからの乗り換え移行手順をこちらでご紹介します。

目次

SWELLインストール後最初にやりたい設定【初期設定】

WordPressテーマ「SWELL」を導入したら最初に設定したい、初期設定の手順をご紹介しています。

くぼたつ

SWELLのインストールから始めたい!という方は「こちら」をご確認ください。

プラグインの設定|サイトに悪影響を与えるプラグインは要確認

サイトを簡単に拡張できる数あるプラグインの中でSWELLにあったプラグインと、非推奨なプラグインをご紹介します。

設定手順
  • 「ダッシュボード>プラグイン>新規追加」より検索あるいはアップロードによりインストール・有効化する。
  • あまり知識なくSWELLへの導入をおすすめしないプラグインは、画像圧縮系・キャッシュ系・SEO系プラグインです。

詳しいプラグインの紹介は『WordPressテーマ「SWELL」と一緒に使いたいおすすめプラグイン』を併せてチェックしてみてください。

OGPの設定|他メディアでの発信時に綺麗に見せたい

SWELL設定:OGP設定

Twitterを含むSNS投稿で、アイキャッチ画像を表示させる設定を行います。

設定手順
  1. プラグイン「SEO SIMPLE PACK」をインストールする
  2. 「ダッシュボード>SEO PACK>OGP>基本設定」でアイキャッチ画像を設定する
  3. 「ダッシュボード>SEO PACK>OGP>Twitter」でアカウント名とカードタイプ(上のイメージだと”summary_large_image”)を設定する
  4. ③まで完了したら、上手く表示されるか「Card validator」でURL入力しブログカードを確認する。

上の手順で作業は完了ですが、上手く表示されない場合は「ダッシュボード>SWELL設定>リセット」の「キャッシュのクリア(ブログカード)」でキャッシュをクリアします。

Googleアナリティクス設定|サイト運営に必須の設定

SWELL設定:Googleアナリティクス設定

サイト内のユーザー行動を分析するGoogleアナリティクスを「SEO SIMPLE PACK」プラグインを使って設定していきます。

設定手順
  • プラグイン「SEO SIMPLE PACK」をインストールする
  • 「ダッシュボード>SEO PACK>一般設定>Googleアナリティクス」を開く
  • 「トラッキングID」にGoogleアナリティクスのトラッキングコードを設定する。

Googleサーチコンソール設定|サイト運営には必須の設定

SWELL設定:Googleサーチコンソール設定

サイト流入までの経路解析ができるGoogleサーチコンソールを「SEO SIMPLE PACK」プラグインを使って設定する。

設定手順
  • プラグイン「SEO SIMPLE PACK」をインストールする
  • 「ダッシュボード>SEO PACK>一般設定>ウェブマスターツール」を開く
  • 「Googleサーチコンソールの認証コード」にGoogleサーチコンソールのTXTレコードを設定する。

高速化オプション設定|ページの表示速度でSEOスコアを高める

SWELL設定:高速化設定

SWELL独自の高速化オプション設定をする。

設定手順
  • 「ダッシュボード>SWELL設定>高速化」を開く
  • 以下を個々にカスタマイズ設定する。
    • キャッシュ機能
    • 遅延読み込み機能
    • ファイルの読み込み
    • ページ遷移高速化
  • 「ダッシュボード>外観>カスタマイズ>サイト全体設定>基本デザイン>フォント設定」の「ベースとなるフォント」を「メイリオ」に変更する。

SWELLの広告設定と使い方まとめ

Googleアドセンスの【申請設定】と【広告表示の使い方】

SWELL設定:Googleアドセンス設定

Googleアドセンスの利用申請と、承認後の広告配置位置を設定する。

設定手順
  • 申請:Googleアドセンス申請時に提供される<script …></script>のコードを、「ダッシュボード>外観>カスタマイズ>高度な設定」の「headタグ終了直前に出力するコード」に入力して申請します。
  • 承認確認:Googleアドセンスの承認メールが届きます。
  • 広告配置:Googleアドセンスで広告ユニットを作成し、広告コードを取得します。「ダッシュボード>SWELL設定>広告コード」を開き、任意の位置に広告コードを貼り付けます。

詳しい説明は『SWELLで設定|Googleアドセンス申請・広告配置設定手順』で解説しているので、併せてチェックしてみてください。

広告タグの設定と使い方

SWELL設定:広告タグ

サイト内で利用する広告タグ管理の新規追加設定と、エディター内での使い方を紹介します。

広告タグの設定手順
  • 「ダッシュボード>広告タグ>新規追加」を開き、適当なフォーマット(テキスト/バナー/アフィリエイト/Amazon/ランキング)を選択して広告タグコードを設定・保存する。
広告タグの使い方
  • テキスト型以外:エディターで「広告タグ」ブロックを呼び出し、各フォーマットの広告を選択。
  • テキスト型:文章内で呼び出しコード(※ IDを指定してください。)をコピペする。

SWELLアフィリエイトの申請設定と使い方

SWELL設定:SWELLアフィリエイト

SWELLを紹介して報酬を得るSWELLアフィリエイトの申請設定と使い方をご紹介します。

申請設定手順
  • にメディア会員登録する。
  • SWELL利用者限定会員サイト(SWELLERS)のマイページからSWELLアフィリエイトのクローズド案件に提携申請する。

SWELLアフィリエイトの詳しい申請手順は『SWELLがアフィリエイト向きな理由|自己アフィリエイトはできる?』で図解付でご紹介しています。併せてチェックしてみてください。

SWELLアフィリエイトの使い方
  • もしも通常のアフィリエイトコードと同様に利用する。

SWELLのデザイン設定と使い方まとめ

サイト型トップページの設定とブロックの使い方

SWELLを使ってブログ形式の初期フォーマットから、おしゃれなサイト型トップページの設定方法をご紹介します。

設定手順
  • トップページ用の固定ページを作成する。
  • 固定ページに各カテゴリー・記事へのナビゲーションを入れる。
  • トップページの表示設定を新着記事から作成して固定ページを設定する。

サイト型トップページの詳しい作成方法は『【図解で簡単】SWELLでサイト型トップページを作るカスタマイズ手順』で図解付でご紹介しています。併せてチェックしてみてください。

デモサイト着せ替え設定と使い方

サイトを簡単におしゃれなデザインに着せ替えできるデモサイト着せ替えをご紹介します。

設定手順
  • SWELL利用者会員サイト(SWELLERS)で利用したいデモサイトデザイン(.zip)ファイルをダウンロードする。(デモサイトのデザインを確認したい方はこちら『』)
  • デモサイトデザイン(.zip)ファイルを解凍(.zip→.dat変換)する。
  • プラグイン「Customizer Export/Import」をインストール・有効化する。
  • 「ダッシュボード>外観>カスタマイズ>Export/Import」からデモサイトデザイン(.dat)ファイルをインストールし反映する。

デモサイトのデザイン例や、詳しい設定手順は『WordPressテーマ「SWELL」デモサイトの色カスタマイズ例一覧』で図解付きでご紹介しています。併せてチェックしてみてください。

SWELLの記事執筆周りの設定と使い方まとめ

ブロックパターンの設定と使い方

SWELL設定:ブロックパターン設定

記事執筆時に利用する頻出定型分・ブロックをグルーピングして、簡単に呼び出せるブロックパターンの設定と使い方をご紹介します。

ブロックパターンの設定手順
  • 「ダッシュボード>ブログパーツ>新規追加」を開き、作成したい定型文・ブロック群を作成する。(作成イメージとしては記事と変わらない)
  • 「用途」を「ブロックパターン」に設定して公開する。
ブロックパターンの使い方
  • 記事執筆時(エディター)で、左上プラスボタン([+])をクリックし、「パターン」タブを開く。
  • 「パターン」タブの最上部の選択ボックスで「SWELL」から「SWELL custom patterns」に変更すると、作成したブロックパターンが表示される。
  • 利用したいブロックパターンを選択し、エディタに反映する。

再利用ブロックの設定と使い方

SWELL設定:再利用ブロック設定

記事執筆時に利用する頻出定型分・ブロックをグルーピングして、簡単に呼び出せる再利用ブロックの設定と使い方をご紹介します。

ブロックパターン

ブロックパターン呼び出し後に、記事内でブロックパターンの一部を改変しても、他の記事(ブロックパターン利用箇所)や登録ブロックパターンに改変内容は影響しない。また、登録ブロックパターンを改変しても、他の記事に改変内容は影響しない。ブロックパターンは呼び出し後は独立して機能する。

再利用ブロック

再利用ブロック呼び出し後に、記事内で再利用ブロックを改変した場合、他の記事や登録元の再利用ブロックにも改変内容が反映される。

再利用ブロック設定手順
  • 「ダッシュボード>再利用ブロック>新規追加」を開き、作成したい定型文・ブロック群を作成する。(作成イメージとしては記事と変わらない)

通常の記事執筆時(エディター)からでも、三点リーダー(「︙」)から「再利用ブロックに追加」でも作成可能。

再利用ブロックの使い方
  • エディターの通常ブロック呼び出しで登録した再利用ブロック名検索で呼び出しする。

ピックアップバナーの設定と使い方

SWELL設定:ピックアップバナー設定

トップページに視覚的に効果的なピックアップバナーの設定手順をご紹介します。

設定手順
  • 「ダッシュボード>外観>メニュー」を開き「新しいメニューを作成しましょう」を選択して新規メニューを作成する。
  • ピックアップバナーでリンク先としたいガイドをメニューの1つとして新規メニューを作成する。
  • ピックアップバナーで利用する画像を「ダッシュボード>メディア」で新規登録する。(SWELLの定義上では縦横16:9が理想)
  • ピックアップバナーで利用する画像の「ファイルのURL」をコピーし、メニューの「説明」に設定する。(「説明」が「ナビゲーションラベル」の下に表示されていない場合は、画面右上の表示オプションで表示設定が必要)
  • 「メニュー設定>メニューの位置」をピックアップバナーに設定する。
  • 「ダッシュボード>外観>カスタマイズ>トップページ>ピックアップバナー」で、ピックアップバナーのレイアウトを設定する。

【記事準備中】SWELLのピックアップバナー設定と使い方

ふきだしブロックの設定と使い方

SWELL設定:ふきだし設定

ブログで人気のふきだし機能について、SWELLのふきだしブロック「ふきだしブロック」をご紹介します。

くぼたつ

これがふきだしブロックです

吹き出しセット設定手順
  • 「ダッシュボード>ふきだし>新規追加」で吹き出しセットを作成します。
くぼたつ

本ブログでは運営者の私や

悩んでる人

悩んでいる読者を作成しています

吹き出しブロックの使い方
  • エディターで「ふきだし」ブロックを選択して、作成した「ふきだしセット」を呼び出します。

【記事準備中】SWELLの吹き出し設定と使い方

目次の設定と使い方

SWELL設定:目次設定

SWELLの目次設定と使い方(SWELLは標準機能内で自動で目次を設定してくれます)をご紹介します。

目次の設定手順

SWELLは何もせずとも目次が自動表示されるためレイアウトのデザイン設定のみとなります

  • 「ダッシュボード>外観>カスタマイズ>投稿・固定ページ>目次」で各種設定を行えます。

【記事準備中】SWELLの目次設定と使い方

SWELLのSNS設定と使い方

サイドバープロフィールのSNS設定と使い方

SWELL設定:サイドバープロフィールSNS

全ての記事に表示されるプロフィール欄(サイドバー)のSNS設定方法をご紹介します。

設定手順
  • 「ダッシュボード>外観>ウィジェット」で「[SWELL]プロフィール」ウィジェットをサイドバーにドラッグ&ドロップします。
  • プロフィールの付随情報を入力・デザインを装飾します。
  • SNSのURLは「ダッシュボード>外観>カスタマイズ>SNS情報」の「SNSリンク設定」で入力します。

上記の手順で設定は完了しますが、『【図解で簡単】SWELLで設置したいプロフィール位置5ヶ所と作り方』で図解ありで詳しい手順をご紹介しています。併せてチェックしてみてください。

「この記事を書いた人」のSNS設定と使い方

SWELL設定:この記事を書いた人SNS

記事の著者情報を表す「この記事を書いた人」のSNS設定方法をご紹介します。

設定手順
  • 「ダッシュボード>ユーザー>ユーザー一覧」で「この記事を書いた人」となるユーザーを選択(ユーザー名をクリック)しプロフィール情報を入力します。

「ダッシュボード>外観>カスタマイズ>投稿・固定ページ>記事下エリア」の「著者情報エリアの設定」で「著者情報を表示」にチェックを入れます。

上記の手順で設定は完了しますが、『【図解で簡単】SWELLで設置したいプロフィール位置5ヶ所と作り方』で図解ありで詳しい手順をご紹介しています。併せてチェックしてみてください。

【まとめ】SWELLの初期設定と基本的な設定・使い方まとめ

本記事ではSWELLで最初に設定したい初期設定、他の設定項目と使い方をご紹介しました。

アイキャッチ画像_SWELL初期設定・設定・使い方

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

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