時短！25項目のSWELL初期設定を公式マニュアルにない具体的な値で解説

本記事はWordPressテーマSWELLの初期設定25項目のおすすめの具体例を紹介します！

悩む人

公式マニュアル読んで設定方法は分かったけど、どれが良いのか迷う。
おすすめの初期設定を教えて！

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

SWELLには分かりやすい公式マニュアルがありますが、設定方法は理解しても実際に何を選べば良いのか迷い時間がかかってしまう声は多いです。

私もSWELLを購入してから初期設定の項目が多く使い出すために丸一日かかりました。

そこで本記事はSWELLを愛用し使いこなしている私が具体的なおすすめの初期設定を全て完全解説します。

じゅんた

画像や表を使って分かりやすく解説します！

本記事を読むと初期設定の内容を理解しながら設定時間を短縮することができます。

SWELLを導入する際には是非ご覧下さい。

参考>>SWELLをまだ検討中の方は「SWELLは評判以上！7つのWordPressテーマを使う私の口コミ！」をご覧下さい。

>>SWELLの公式マニュアルを見る

25項目のSWELL初期設定の概要をご説明！

初期設定は全部で22個あります。

それぞれ次の章から解説していきます。

【11項目】カスタマイザーでSWELL全体の設定

カスタマイザーでの設定は下記の通りです。

WordPressダッシュボードから「カスタマイズ」をクリックしてカスタマイザーを立ち上げます。

カスタマイザーの左側の項目を設定していきます。

それぞれ下記から解説していきます。

WordPressの設定

じゅんた

まずはWordPress設定のサイト基本情報の設定です！

こちらはWordPressのダッシュボードでも変更出来ます。

おすすめは下記の通りです。

じゅんた

ホームページ設定です！

初心者の場合は固定ページで作り込み事が難しいので「最新の投稿」で良いです。

「最新の投稿」はよくあるブログ型で新規記事から並ぶタイプです。

あり程度記事がまとまってきたらユーザービリティを良くするためにサイト型のトップページにする事をおすすめします。

参考>>【簡単にサイト型へ】SWELLトップページのカスタマイズ方法を解説！

サイト全体設定

じゅんた

まずは基本カラーの設定です！
>>公式サイトのサイト全体設定の説明はこちら！

ここではサイトのカラーやデザイン、フォント等の基本的な設定を行います。

まずはカラーのおすすめ設定は下記の通りです。

テキストカラーとリンクカラーだけは注意してあとは何でも良いのでお好みで

じゅんた

次は基本デザインの設定です！

フォントだけ注意して頂ければ他はお好みで大丈夫です。

フォントは游ゴシックが一番視認性が高く速読しやすいので読者にストレスがなくおすすめです。

じゅんた

次はNO IMAGE画像の設定です！

アイキャッチを設定しなかった場合の表示です。

私の場合は全てアイキャッチを設定しているのでここは特に触っていません。

じゅんた

次はタイトルデザインの設定です！

正直ここはどれもあまり変わらないので当サイトは初期設定のままです。

じゅんた

次はコンテンツヘッダーの設定です！
参考>>公式サイト「コンテンツヘッダーの説明」はこちら！

コンテンツヘッダーとは記事の一番上に表示される背景付きタイトルの事です。

下記の通り当サイトでも使用しています。

コンテンツヘッダーは使っていない方も多いですが、読者の印象にも残りますので設定する事をおすすめします。

じゅんた

次はお知らせバーの設定です！
参考>>公式サイト「お知らせバーの説明」はこちら！

記事上に表示されている下記のようなバーです。

お知らせバーは便利で自分が見て欲しい記事や商品のPR、キャンペーンのお知らせなど告知できます。

SEO対策としてサイトの滞在時間や回遊率を上げるためにも内部リンクを貼ることをおすすめします。

じゅんた

次は「パンくずリスト」の設定です！
参考>>公式サイトパンくずリストの説明はこちら

パンくずリストは一般的に使われているレイアウトや文字が読者にも分かりやすく良いかと思います。

じゅんた

次は「ページャー」の設定です！
参考>>公式サイトのページャーの説明はこちら！

ここはページ送りのアイコンの形なのでなんでも良いです。

私は初期設定のまま使っています。

じゅんた

次は「スマホ開閉メニュー」の設定です！
参考>>公式サイトスマホ開閉メニューの説明はこちら！

スマホ開閉メニューも何でも良いです。

私は初期設定のまま使っています。

じゅんた

次は「下部固定ボタン・メニュー」の設定です！
参考>>公式サイト下部固定ボタン・メニューはこちら！

この下部固定ボタン・メニューは画面下部のメニューです。

少し分かりづらいので下記画像を見て下さい。

「スマホ用固定フッターメニュー」をONにするとパソコンでは「右下固定ボタン」が表示されスマホでは「スマホ用固定フッターメニュー」が表示されるようになります。

おすすめ設定は下記の通りです。

ヘッダー

じゅんた

ここでは「ヘッダー」の設定を解説します！
参考>>公式サイト「ヘッダーの設定」はこちら！

ヘッダーはユーザービリティを高めSEOに影響のあるサイト滞在時間や回遊率を上げるためにも大切です。

おすすめの設定は下記の通りです。

ヘッダーの追従設定は画面を上下にスクロールしてもヘッダーがついてくる設定のことです。

私はパソコンの場合は画面の上下の幅が狭いためOFFにしています。（気が散らないようにしたい）

スマホの場合は画面の上下の幅が広くユーザービリティが高まるという考えでONにしています。

以下おすすめの設定です。

ヘッダバーとはヘッダーの上に表示される項目のことです。

ヘッダーバーはなくても良いと思います。（当サイトも表示したり消したりしてます。）

ここはお好みで大丈夫です。

下記はお好みで大丈夫です。

当サイトは「スマホ用固定フッターメニュー」にて検索ボタンを追加しているのでスマホの「検索ボタンの表示設定（SP）」は非表示にしています。

変わりに下記のように「コンタクトボタン」を設けています。

おすすめ設定は下記の通りです。

フッター

じゅんた

次は「フッター」の設定です！
参考>>公式サイト「フッターの説明」はこちら！

下記画像の部分の設定になります。

おすすめの設定は下記の通りです。

サイドバー

じゅんた

次は「サイドバー」の設定です！
参考>>公式サイト「サイドバーの説明」はこちら！

サイドバーは基本何でも良いですが私のおすすめ設定を解説します。

トップページにはサイドバーをなくしています。

なぜならトップページのデザインはサイト全体のイメージになり重要なためごちゃごちゃしたくなかったからです。

また投稿ページにはサイドバーを表示するようにしていますが、記事毎に個別に非表示にできるので記事内容によってかえたりしています。

私のおすすめ設定は下記です。

トップページ

じゅんた

次は「トップページ > メインビジュアル」の設定です！
参考>>公式サイト「メインビジュアルの説明」はこちら！

ここは個人の個性を出す場所なのでおすすめというよりは当サイトの設定のご紹介をしていきたいと思います。

参考になれば嬉しいです。

じゅんた

次は「トップページ > 記事スライダー」の設定です！
参考>>公式サイト「記事スライダーの説明」はこちら！

記事スライダーは私としてはおすすめしません。

なぜなら記事が動きながら流れていくので意図を持って読者にPRできないからです。

また個人的に読者として記事スライダーを見るとストレスがたまるからという理由もあります。

私は「設置しない」にしています。

設置したい方はお好みで！

じゅんた

次は「トップページ > ピックアップバナー」の設定です！
参考>>公式サイト「ピックアップバナーの説明」はこちら！

ピックアップバナーとは下記のようにメインビジュアルの下に設置されるバナーです。

おすすめは下記の通りです。

投稿・固定ページ

じゅんた

次は「投稿・固定ページ > タイトル」の設定です！
参考>>公式サイト「タイトル設定の説明」はこちら！

ここでは記事タイトルの表示方法を設定できます。

表示するタイプは下記画像の2種類です。

おすすめの設定は下記の通りです。

じゅんた

次は「投稿・固定ページ > アイキャッチ画像」の設定です！
参考>>公式サイト「アイキャッチ画像設定の説明」はこちら！

ここはアイキャッチ画像の表示の仕方なのでお好みで良いですが、投稿ページにはアイキャッチ表示をした方が良いです。

なぜならファーストビューに文章だけが表示されていると読む気がなくなり、即離脱される可能性があるからです。

記事が即離脱されるとSEO的にとても悪影響がでます。

アイキャッチ画像は必ず設置し表示させましょう。

じゅんた

次は「投稿・固定ページ > コンテンツのデザイン」の設定です！
参考>>公式サイト「コンテンツのデザイン設定の説明」はこちら！

ここはデザインの設定なので完全に好みです。

見出し、太字、テキストリンクのデザイン設定をします。

念の為に当サイトの設定を書いておきます。

じゅんた

次は「投稿・固定ページ > 目次」の設定です！
参考>>公式サイト「目次の説明」はこちら！

目次は読者が求める情報を確認できる場所なのでしっかり見えやすいデザインがおすすめです。

おすすめの設定は下記の通りです。

じゅんた

次は「投稿・固定ページ > SNSシェアボタン」の設定です！
参考>>公式サイト「SNSシェアボタンの説明」はこちら！

SNSでシェアされるとSEOでも良い影響があるのでしっかり設定する事をおすすめします。

おすすめの設定は下記の通りです。

じゅんた

次は「投稿・固定ページ > 記事下エリア」の設定です！
参考>>公式サイト「記事下エリアの説明」はこちら！

次は記事下の設定です。

おすすめの設定は下記の通りです。

アーカイブページ

じゅんた

次は「アーカイブページ」の設定です！
参考>>公式サイト「アーカイブページの説明」はこちら！

アーカイブページとは記事をまとめているような新着記事ページやカテゴリーページ等のことです。

ここは完全お好みです。

一応当サイトの設定を書いておきますので参考にしてみてください。

記事一覧リスト

じゅんた

次は「記事一覧リスト」の設定です！
参考>>公式サイト「記事一覧リストの説明」はこちら！

この記事一覧リストはトップページなどで表示される投稿リストの表示方法です。

これもお好みですが、当サイトの設定を書いておきますので参考にしてみてください。

実際トップページをオリジナルで作るとこの設定はあまり関係なくなります。

（アーカイブページではこの設定が反映されます。）

参考>>【簡単にサイト型へ】SWELLトップページのカスタマイズ方法を解説！

SNS情報

じゅんた

次は「SNS情報」の設定です！
参考>>公式サイト「SNS情報の説明」はこちら！

ここは特に説明不要かと思います。

サイトに表示させたいSNSリンクのURLを設定するだけです。

高度の設定

じゅんた

次は「高度な設定」の設定です！

ここではGoogleアドセンスやGoogleアナリティクスのコードを入力したりします。

参考>>公式サイト「Googleアドセンスの貼り付け方【申請コード・広告ウィジェット・目次前広告・自動広告】」はこちら

【4項目】WordPressダッシュボードSWELL設定での高速化設定

次にSWELLの高速化設定をします。

設定するのは下記の4点です。

高速化設定はWordPressダッシュボードの「SWELL設定」から設定していきます。

それぞれ解説します。

キャッシュ機能

じゅんた

「キャッシュ機能」の設定です！
参考>>公式サイト「キャッシュ機能の説明」はこちら！

キャッシュ機能は全てONにした方が良いかと思います。

キャッシュをクリアしたいときは「リセットタブ」のキャッシュのクリアをクリックします。

遅延読み込み機能

じゅんた

次は「遅延読み込み機能」の設定です！
参考>>公式サイト「遅延読み込み機能の説明」はこちら！

SWELLは画像や動画、フッターなどを遅延して読み込ます事でページ遷移の速度体感を上げることができます。

特に画像や動画を多用している方におすすめの設定です。

ファイルの読み込み

じゅんた

次は「ファイルの読み込み」の設定です！

SWELLのCSSをファイル読み込みではなくてインライン出力することでページ表示速度の高速化が期待できます。

ページ遷移高速化

じゅんた

次は「ページ遷移高速化」の設定です！
参考>>公式サイト「遅延読み込み機能の説明」はこちら！

当サイトはPrefetchを選択しています。

ページ表示速度の体感スピードはPjaxの方が速いですが、次のページに移動してもページが更新されないなど扱いが難しいからです。

そのためプラグインによっては不具合がおきる可能性があるのでPrefetchを選択しています。

【7項目】WordPressダッシュボードエディター設定でカラーを設定

次にSWELLのエディター設定をします。

エディター設定ではカラーやアイコンの細かな見せ方の設定ができます。

ここは好みによるところが多いですし、説明しなくても直感的に選べるのでお好みで選んでください。

個別の説明は下記の通りです。

>>カラーパレットの配色をカスタマイズする方法

Font Awesomeの設定

Font Awesomeとはアイコンを文字として扱うことができるようになるツールです。

SWELLでは特にダウンロードなどしなくても使えます。

使えるようにするにはSWELL設定で設定するだけです。

SEWELL設定のFont Awesomeタブをクリックして「CSSで読み込む」を選択して保存するだけです。

後はFont Awesomeのアイコン検索ページから選ぶだけです。

例えば「リンゴ」の形をしたアイコンを使いたいときは一覧からリンゴアイコンをクリックします。

そしてりんごアイコンの詳細ページの赤枠で囲った部分のコードを確認します。

上記コードの「class=”fas fa-apple-alt”」をメモして下記のように書いてエディターに記述すればアイコンがプレビューで表示されます。

[icon class="fas fa-apple-alt"]

　←のようにアイコンが表示されます。

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

SWELLのGoogleアナリティクス設定は簡単におわるのでやっておきましょう。

Googleアナリティクスを使うためにはトラッキングIDの設定が必要になります。

ここではSWELL推奨プラグインSEO SIMPLE SEOでの設定方法をご説明します。

※他テーマからの移行などでAll in One SEO Packをそのまま使う方は設定不要です。

まずはWordPressのダッシュボード左一覧から「SEO PACK」を選択しタブの「Googleアナリティクス」をクリックします。

そして「トラッキングID」または「測定ID」の欄にアナリティクスのIDを入力し設定を保存します。

トラッキングIDはどうやったら分かるの？

トラッキングIDの確認方法をご案内します。

まずGoogleアナリティクスにアクセスし左下の「設定ボタン」をクリックします。

Googleアナリティクスの設定画面になるので「トラッキング情報」→「トラッキングコード」とクリックします。

すると下記のようにトラッキングIDが表示されるのでSEO PACKの設定画面で入力します。

Googleアドセンス設定

別記事で詳しく解説

詳しさ公式以上！SWELLのアドセンスの設定と貼り方、設置場所を解説！ この記事はSWELLを使ったGoogleアドセンスの設定、貼り方からおすすめの設置場所まで書いています。初心者でも分かりやすいように全ての手順で画像を使い徹底解説。SWELLのGoogleアドセンスで悩んでいる方はご覧ください。

Googleアドセンスの設定に関しては長くなるので、別記事にてまとめています。

記事ではアドセンス申請時の申請コードの張り方から、おすすめの設置場所、SWELL側の設定＆貼り方まで詳しく解説しています。

初心者でも分かりやすいように全手順画像付きで解説しているので、是非ご覧ください。

参考記事>>詳しさ公式以上！SWELLのアドセンスの設定と貼り方、設置場所を解説！

まとめ

以上のようにSWELLの初期設定に関して解説していきました。

最初の初期設定は手間がかかるかと思いますのでぜひ参考にしてみて下さい。

不明点があれば下記連絡先にお気軽にご連絡下さい。

また当記事の感想など頂ければとても嬉しいです。

Twitterでメンション（@jun_sigotofun）つけてツイートして頂ければ私もリツィートして拡散します！

またその他にもSWELL運営で必要な記事を書いてますので良かったらご覧下さい。

関連記事>>SWELLの使い方｜16個のオリジナルブロックや便利機能まで解説

関連記事>>【簡単にサイト型へ】SWELLトップページのカスタマイズ方法を解説！

関連記事>>【実績暴露】SWELLアフィリエイトが稼げる5つの理由と始め方

関連記事>>簡単！SWELLでおしゃれなプロフィールを作成する3つの方法！

>>その他SWELLの記事まとめはこちら