6/21(月)・6/22(火)はAmazonプライムデー!商品一覧へ

【SWELL】おすすめの基本テーマ設定まとめ[WordPress]

wordpress-swell-settings

カスタマイズからWordPressテーマ「SWELL」の設定ができますが、一度すべての項目を見直してみました!

見た目に関しては各自お好みですが、これはSEOや機能的にもちゃんと設定したほうが良いものは○をつけてみたので、SWELLの方は是非チェックしてみてください!

すいみん

SWELLは多機能ですが、見た目に関してはカスタマイズから設定できます!すべて書き出してみたので参考にしてください!

\見た目と技術を兼ね備えたWordPressテーマ/

✓無料体験版も有り!

すいみん

ちなみにfunctions.phpを使う高度なカスタマイズは別記事にて記載しています!

カスタマイズからのSWELLの全設定項目を洗い出しました。

特に○が付いている箇所は重要なので見返してみてください。

目次

SWELLのWordPress設定

サイト自体に関する設定ができます。

サイトのトップページをオリジナルにする場合もこちらで設定してあげましょう

サイト基本情報推奨備考
サイトのタイトルサイト名です、必須
キャッチフレーズog:descriptionにも記載されるので入れましょう
サイトアイコンファビコンです、必須
ホームページ設定推奨備考
ホームページの表示最初は最新の投稿ですが、いずれは固定ページで固有のLPにしましょう

SWELLのサイトの全体設定

サイトの細かい見た目の設定ができます。

お知らせバーなどは、よく設定することが多いです。

基本カラー

サイト全体の見た目推奨備考公式リンク
メインカラーアクセント色、濃い色を推奨リンク
テキストカラー文字色、黒系推奨
リンクカラーリンク色、青系推奨
背景色背景色、白系推奨

基本デザイン

サイト全体の見た目推奨備考
全体の質感フラットか丸みかお好みで
コンテンツの背景を白にするオフのほうが少し大きめに表示されます。
フォント設定推奨備考
ベースとなるフォント独自にCSSから指定も可能
フォントサイズ(PC・Tab)お好みで
フォントサイズ(Mobile)お好みで
コンテンツ幅の設定推奨備考
サイト幅お好みで
1カラム時の記事コンテンツ幅お好みで
サブメニューの表示形式推奨備考
サブメニューをアコーディオン化する基本的には隠さないほうが良いです。
ページ背景推奨備考
ページ背景画像(PC)背景に画像を入れたい場合に
ページ背景画像(SP)背景に画像を入れたい場合に

NO IMAGE画像

NO IMAGE画像推奨備考公式リンク
NO IMAGE画像アイキャッチ指定忘れの時の仮画像。忘れやすいので指定しておくことリンク

タイトルデザイン

ウィジェットタイトル推奨備考
サブコンテンツのタイトルデザインお好みで
サイドバーのタイトルデザイン(PC)お好みで
サイドバーのタイトルデザイン(SP)お好みで
フッターのタイトルデザインお好みで
スマホメニュー内のタイトルデザインお好みで

コンテンツヘッダー

コンテンツヘッダー推奨備考公式リンク
タイトル背景用デフォルト画像お好みでリンク
カラーオーバーレイの設定お好みで

お知らせバー

表示内容の設定推奨備考公式リンク
お知らせバーの表示位置SEO的にも重要な場所なので、できれば内部リンク推奨リンク
お知らせバーの文字の大きさお好みで
表示タイプお好みで
お知らせ内容お好みで
リンク先のURLお好みで
背景効果推奨備考
お知らせバーの背景効果お好みで
カラー設定推奨備考
お知らせバー文字色お好みで
お知らせバー背景色お好みで

パンくずリスト

パンくずリスト推奨備考公式リンク
パンくずリストの位置お好みでリンク
「ホーム」の文字列お好みで
その他の設定お好みで

ページャー

ページャー推奨備考公式リンク
ページャーの形お好みでリンク
ページャーのデザインお好みで

スマホ開閉メニュー

カラー設定推奨備考公式リンク
文字色お好みでリンク
背景色お好みで
背景の不透明度お好みで
メニュー展開時のオーバーレイカラーお好みで
メニュー展開時のオーバーレイカラーの不透明度お好みで
表示設定推奨備考
メインメニュー上に表示するタイトルお好みで
サブメニューをアコーディオン化お好みで

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

右下固定ボタン推奨備考
ページトップボタンの表示設定お好みで
目次ボタンの表示設定お好みで
スマホ用固定フッターメニューの設定推奨備考公式リンク
特殊メニューボタンの表示設定お好みでリンク
開閉メニューのラベルテキストお好みで
検索ボタンのラベルテキストお好みで
ページトップのラベルテキストお好みで
目次メニューのラベルテキストお好みで
固定フッターメニューの背景色お好みで
固定フッターメニューの文字色お好みで
固定フッターメニューの背景不透明度お好みで

SWELLのヘッダー

ファーストビューだけで何のサイトでどんなコンテンツがあるのか分かるように設定しましょう。

カラー設定推奨備考公式リンク
ヘッダー背景色お好みでリンク
ヘッダー文字色お好みで
ヘッダーロゴの設定推奨備考
ロゴ画像の設定お好みで
レイアウト・デザイン設定推奨備考
ヘッダーのレイアウト(PC)お好みで
ヘッダーのレイアウト(SP)お好みで
ヘッダー境界線お好みで
トップページでの特別設定推奨備考
ヘッダーの背景を透明にするかどうかお好みで
ヘッダーバー設定推奨備考
ヘッダーバー背景色お好みで
ヘッダーバー文字色お好みで
表示設定お好みで
キャッチフレーズ設定推奨備考
キャッチフレーズの表示位置お好みで
ヘッダーメニュー(グローバルナビ)設定推奨備考
マウスホバーエフェクトお好みで
ホバー時に出てくるラインの色お好みで
サブメニューの背景色お好みで
ヘッダーメニュー(SP)設定推奨備考
スマホ表示時のループ設定お好みで
検索ボタン設定推奨備考
検索ボタンの表示位置(PC)お好みで
検索ボタンの表示設定(SP)お好みで
メニューボタン設定推奨備考
アイコン下に表示するテキストMENUと文字を入れるのが一時期流行りました
メニューボタン背景色お好みで
カスタムボタン設定推奨備考
アイコンクラス名お好みで
アイコン下に表示するテキストお好みで
カスタムボタン背景色お好みで
リンク先URLお好みで

SWELLのフッター

最低限、お問い合わせや運用者情報はいれておきましょう。

カラー設定推奨備考公式リンク
フッター背景色お好みでリンク
フッター文字色お好みで
ウィジェットエリアの背景色お好みで
ウィジェットエリアの文字色お好みで
コピーライト設定推奨備考
コピーライトのテキストお好みで
その他の設定推奨備考
その他の設定お好みで

SWELLのサイドバー

左寄せなどの設定もできます。

サイドバー推奨備考公式リンク
サイドバーを表示するかどうかお好みでリンク
サイドバーの位置お好みで

SWELLのトップページ

LP(ランディングページ)でそのサイトに関する情報をぎゅっと詰めてあげましょう!

大きなオリジナルのメインビジュアルを入れてあげると見た目も良くなります。

メインビジュアル

表示設定推奨備考公式リンク
メインビジュアルの表示内容お好みでリンク
メインビジュアルの高さ設定お好みで
画像(動画)の上に表示されるボタンの丸みお好みで
フィルター処理お好みで
オーバーレイカラーお好みで
画像スライダー設定お好みで
各スライドの設定お好みで

記事スライダー

記事のピックアップ方法推奨備考公式リンク
記事スライダーを設置するかどうかお好みでリンク
ピックアップ対象お好みで
ピックアップ対象のタグ名お好みで
並び順お好みで
記事の表示設定推奨備考
タイトルや日付などの表示位置お好みで
カテゴリー表示位置お好みで
日付の表示設定お好みで
著者の表示設定お好みで
スライド設定推奨備考
スライダーの枚数設定(PC)お好みで
スライダーの枚数設定(SP)お好みで
スライドのアニメーション速度お好みで
スライドが切り替わる間隔お好みで
その他の設定お好みで
その他の表示設定推奨備考
記事スライダーエリアのタイトルお好みで
上下の余白量お好みで
左右の幅お好みで
記事スライダーエリアの文字色お好みで
記事スライダーエリアの背景色お好みで
記事スライダーエリアの背景画像お好みで
背景画像の透過設定お好みで

ピックアップバナー

ピックアップバナー推奨備考公式リンク
バナーレイアウト(PC)お好みでリンク
バナーレイアウト(SP)お好みで
バナータイトルのデザインお好みで
内側に白線をお好みで
バナー画像を少し暗くお好みで
その他お好みで

その他

その他推奨備考
コンテンツ上の余白量お好みで

タイトル

投稿ページ推奨備考
タイトルの表示位置お好みで
タイトル横に表示する日付お好みで
タイトル下に表示する情報できれば更新日も入れる
固定ページ推奨備考
タイトルの表示位置お好みで
コンテンツ内タイトルデザインアイキャッチ画像なければ「NO IMAGE画像」を代わりに表示する

アイキャッチ画像

アイキャッチ画像推奨備考公式リンク
固定ページお好みでリンク
投稿ページお好みで

コンテンツのデザイン

見出しのデザイン設定推奨備考公式リンク
見出しのキーカラーお好みでリンク
見出し2のデザインお好みで
見出し3のデザインお好みで
見出し4のデザインお好みで
セクション見出しのデザイン設定推奨備考
セクション見出しのキーカラーお好みで
セクション用見出し2のデザインお好みで
太字お好みで
テキストリンクお好みで

目次

目次推奨備考公式リンク
目次を表示するかどうかお好みでリンク
目次のタイトルお好みで
目次のデザインお好みで
目次のリストタグお好みで
擬似要素(ドット・数字部分)のカラーお好みで
どの階層の見出しまで抽出するかお好みで
見出しが何個以上あれば表示するかお好みで
目次広告の位置お好みで

SNSシェアボタン

表示設定推奨備考公式リンク
シェアボタンを表示する位置お好みでリンク
表示するボタンの種類お好みで
シェアボタンのデザインお好みで
URLコピーボタンお好みで
「記事下部シェアボタン」の上に表示するメッセージお好みで
Twitter用の追加設定推奨備考
シェアされた時のハッシュタグお好みで
via設定(メンション先)お好みで

記事下エリア

記事下エリア推奨備考
表示するボタンお好みで
前後記事へのページリンク設定お好みで
著者情報エリアの設定お好みで
著者情報エリアのタイトルお好みで
関連記事のレイアウトお好みで
関連記事エリアのタイトルお好みで

SWELLの記事一覧リスト

記事の一覧を見やすくしてあげましょう

タイトル設定推奨備考公式リンク
表示位置お好みでリンク
リストのレイアウト設定推奨備考
リストレイアウト(PC/Tab)お好みで
リストレイアウト(Mobile)お好みで
最大カラム数(PC/Tab)お好みで
最大カラム数(Mobile)スマホでも情報を詰めたいなら2カラム推奨
「READ MORE」のテキストお好みで
投稿情報の表示設定推奨備考
投稿情報の表示設定更新日だけを表示する方が更新感がでる
抜粋文の文字数(PC・Tab)お好みで
抜粋文の文字数(Mobile)お好みで
カテゴリーの表示設定推奨備考
カテゴリー表示位置お好みで
サムネイル画像上に表示される時の追加設定お好みで
サムネイル画像の比率設定推奨備考
カード型リストでの画像比率お好みで
リスト型リストでの画像比率お好みで
サムネイル型リストでの画像比率お好みで
ブログ型での画像比率お好みで
マウスホバー時の設定推奨備考
グラデーション色1お好みで
グラデーション色2お好みで
タブ切り替え設定(トップページ)推奨備考
表示するタブの設定固定ページにするまではタブを入れたほうが使いやすいです
「タームタブ」の設定お好みで
「新着記事タブ」の表示名お好みで
「人気記事タブ」の表示名お好みで
タブデザインお好みで
タブ切り替え設定(その他のページ)推奨備考
タブ切り替え設定(その他のページ)お好みで
投稿一覧から除外するカテゴリー・タグ推奨備考
除外したいカテゴリーのIDお好みで
除外したいタグのID表示させたくない記事はタグ付けしてリストから消すことができます

SWELLのSNS情報

SNSがあればできるだけ登録しておきましょう。

発リンクによってはGoogle側も関連付けをしてくれるはずです。

SNSリンク設定推奨備考
SNSリンク設定関連するSNSのリンクを入れる

SWELLの高度な設定

認証などのコードはこちらで設定してあげます。

高度な設定推奨備考公式リンク
headタグ終了直前に出力するコードheadタグを入れたい場合はここリンク
bodyタグ開始直後に出力するコードお好みでリンク
bodyタグ終了直前に出力するコードお好みで

ダッシュボードのSWELL設定

こちらはダッシュボードから設定できる項目になります。

SWELL設定

高速化推奨備考公式リンク
キャッシュ機能プラグインやサーバーからもキャッシュもできます。あえてテーマでキャッシュしたいのであれば、お好みで。リンク
遅延読み込み機能お好みで。スコアが上がるわけではないので注意リンク
画像のLazyloadlazysizes.jsベース推奨。カスタマイズ(JS)によっては不具合が起きるので、困ったら切るリンク
ファイルの読み込みテーマのCSSをインライン化
高速化の種類カスタマイズを多用している場合はPrefetch推奨。Barba v2は扱いが難しいです。リンク
Pjaxで遷移させないページのURLBarba v2とプラグインが相性が悪い場合で、特定のページだけであればURLを入れるリンク
Prefetchさせないページのキーワード問題が置きた場合にURLを入れるリンク
構造化データ推奨備考
JSON-LD必須。
jQuery推奨備考
ファイルの読み込みwp_footerで登録とjquery-migrateを読み込まないはチェック入れること
Font Awesome推奨備考
Font Awesomeの読み込み読み込みが重いので読みこまないを推奨。
機能停止推奨備考
SWELLの機能お好みで。「ページ表示時のアニメーション」などは切っても良いかと。
WordPressの機能項目がマニアック。デフォルト設定のままでOK
広告コード推奨備考公式リンク
記事内広告 アドセンスを入れる場所です。リンク
目次広告お好みで。リンク
自動広告コードを入れないことを推奨リンク
インフィード広告 PC・Tabサイズ用お好みで。効果薄いので入れない派です。リンク
インフィード広告 スマホサイズ用お好みで。
インフィード広告の間隔お好みで。
リセット推奨備考
キャッシュのクリア必要に応じて。
キャッシュのクリア(ブログカード)必要に応じて。
カスタマイザーのリセット必要に応じて。
PVのリセット必要に応じて。

エディタ設定

カラーセット推奨備考公式リンク
カラーパレット設定お好みでリンク
リスト設定お好みで
キャプションブロック設定お好みで
Q&A設定お好みで
ボーダーセット推奨備考
ボーダーセットの登録お好みで
マーカー推奨備考
マーカー設定サイトカラーのものが1種類あると便利です。
ボタン推奨備考
SWELLボタンの設定お好みで
アイコンボックス推奨備考
アイコンボックス(小)お好みで
アイコンボックス(大)お好みで
ふきだし推奨備考
ふきだしカラーお好みで
その他推奨備考
ブログカードお好みで
引用お好みで

ads.txt編集

ads.txt編集推奨備考公式リンク
ads.txtファイルアドセンスの認証などで使います。リンク

SWELLERS’ 設定

SWELLERS’ 設定推奨備考公式リンク
SWELLERS’ IDSWELL専用アフィリエイトの認証で使います。リンク

SWELLのSEO SIMPLE PACKの設定

SWELLと同じ制作者のプラグイン「SEO SIMPLE PACK」もSWELLに足りない機能を補完してくれるので導入は必須です!

すいみん

SEOに関する設定は本体よりこちらのほうが重要です!

一般設定

SEOに関する設定ができます。

基本設定推奨備考
サイトのタイトル (確認用)お好みで
サイトのキャッチフレーズ (確認用)お好みで
区切り文字お好みで
フロントページ」のタイトルタグお好みで
「フロントページ」のディスクリプションmeta:descriptionを入力しておきましょう
「フロントページ」のキーワードmeta:keywordを入力しておきましょう
「検索結果ページ」のタイトルタグお好みで
「404ページ」のタイトルタグお好みで
投稿ページ推奨備考
「投稿」をインデックスさせないチェックを入れるのはNG
タイトルタグの形式お好みで
ディスクリプションの形式お好みで
「固定ページ」をインデックスさせないお好みで
タイトルタグの形式お好みで
ディスクリプションの形式お好みで
「LP」をインデックスさせないお好みで
タイトルタグの形式お好みで
ディスクリプションの形式お好みで
「メディアページ」を使用しない画像に関するパーマリンクがインデックスされるとクロールバジェットを消費するので、チェックしておくこと
タクソノミーアーカイブ推奨備考
「カテゴリー」のアーカイブページをインデックスさせないカテゴリーページを記事化したい場合はチェックをいれる
タイトルタグの形式お好みで
ディスクリプションの形式お好みで
「タグ」をインデックスさせないお好みで
タイトルタグの形式お好みで
ディスクリプションの形式お好みで
「投稿フォーマット」のアーカイブページをインデックスさせないお好みで
タイトルタグの形式お好みで
ディスクリプションの形式お好みで
「その他」のアーカイブページ推奨備考
著者」のアーカイブページを使用しないお好みで
「著者」のアーカイブページをインデックスさせないお好みで
タイトルタグの形式お好みで
ディスクリプションの形式お好みで
「日付」のアーカイブページをインデックスさせないお好みで
タイトルタグの形式お好みで
ディスクリプションの形式お好みで
「カスタム投稿タイプ」のアーカイブページをインデックスさせないお好みで
タイトルタグの形式お好みで
ディスクリプションの形式お好みで
Googleアナリティクス推奨備考
トラッキングコードの種類GA3または最新のGA4、どちらかお好みで。
トラッキングID」または「測定ID」こちらでアナリティクスの設定、基本。
ウェブマスターツール推奨備考
Googleサーチコンソールの認証コード登録しておくと検索エンジンへのインデックスを早める可能性が上がります
Bingの認証コードMicrosoftの検索エンジン
Baiduの認証コードの検索エンジン。日本の電話番号では登録不可
Yandexの認証コードロシアの検索エンジン

OGP設定

OGPタグの基本設定推奨備考
“og:image”の画像サイト全体のアイキャッチ画像が登録できます。入れておきましょう!
Facebook設定推奨備考
Facebook用のメタタグを使用するお好みで
FacebookページのURLサイトページがあれば
fb:app_idアプリID
fb:adminsFacebook ID。取り扱い注意!
Twitter推奨備考
Twitter用のメタタグを使用するお好みで
Twitterアカウント名入れておいたほうが、気が付きやすい
カードタイプsummary_large_imageを推奨

SWELLのカスタマイズ設定おすすめまとめ

本記事では「【WordPress】SWELLのカスタマイズ設定おすすめまとめ」について書きました。

今回カスタマイズからSWELLの設定をすべて見直してみましたが、見た目に関してかなり細かい調整や機能がそろっていて、あらためてSWELLの多機能さを感じました。

SWELL設定で気をつけたいとことは○をつけたので、是非チェックしてみてください。

\見た目と技術を兼ね備えたWordPressテーマ/

✓無料体験版も有り!

すいみん

ちなみに公式もヘルプは充実しています

すいみん

中級者以上のSWELLのカスタマイズをまとめました。

目次
閉じる