【全27項目】コーポレートサイトにも使えるSWELLの外観カスタマイズの使い方

この記事では、WordPressテーマ「SWELL(スウェル)」の外観カスタマイズ(カスタマイザー)の設定項目を、ほぼすべてご紹介します。

フォント、見出し、ロゴ、ピックアップバナーなどの全27個の設定項目を重要度別にまとめました。

重要度別にまとめたので、好きなところから設定してみてください。

suya

SWELLは簡単なのに、デザイン設定も豊富です。

なるほどくん

なるほど!デザインにこだわれますね。

この記事でできること
  • マウス操作だけでデザインを変更できる
  • 重要度別にデザイン設定を確認できる
この記事を書いた人

suya

  • 前職は大手IT企業
  • マーケターエンジニアの両方を経験
  • 月1億円のWeb売上
  • セキュリティの専門家(国家資格
  • 前職は大手IT企業
  • マーケターエンジニア
  • 月1億円のWeb売上
  • セキュリティ国家資格

この記事を最後まで読めば、SWELL(スウェル)の外観カスタマイズの使い方がわかります。

ぜひ最後まで進めてみてください。

すでに途中まで進めている人は、目次から該当箇所に飛ぶこともできます。

目次

事前) デザイン確認用の記事がない場合

デザイン確認用の記事がない場合は、ダミー記事(テスト記事)を作成してください。

雛形(テンプレート)からコピペで簡単に作成できます。

事前)カスタマイザーの見方

左メニューの[外観][カスタマイズ]をクリックして、「カスタマイザー」を開きます。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズ(カスタマイザー)を開始
[外観]→[カスタマイズ]をクリック

カスタマイザー」が起動したら、右画面でデザインを確認しながら、左メニューで設定していきます。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズ(カスタマイザー)画面
「カスタマイザー」画面

左下のボタンで、右画面の表示を切り替えることができます。

[コントロールを非表示]で、左メニューが隠れます。(PC画面でサイドバーが横に表示)

[PC]アイコンで、パソコンビュー表示になります。(デフォルト)

[Tab]アイコンで、タブレットビュー表示になります。

[SP]アイコンで、スマホビュー表示になります。

1) WordPress設定

WordPress(ワードプレス)標準の設定項目です。

1-1) WordPress設定 – サイト基本情報(重要度:

必ず設定する設定項目です。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのWordPress設定-サイト基本情報
WordPress設定 – サイト基本情報
重要度設定項目説明
サイトのタイトルサイト上や検索結果に表示されるタイトル
キャッチフレーズサイト上や検索結果に表示されるキャッチフレーズ
→「ヘッダー」設定で表示位置を設定(ヘッダーバーロゴ画像近く)
サイトアイコンブックマークやブラウザのタブに表示されるアイコン(ファビコン

サイトアイコン(ファビコン)画像の推奨サイズは「512×512px」、推奨形式は「.png」です。

1-2) WordPress設定 – ホームページ設定(重要度:

サイト型デザインの場合に必要な設定項目です。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのWordPress設定-ホームページ設定
WordPress設定 – ホームページ設定
重要度設定項目説明
ホームページの表示
 最新の投稿
ブログ型デザインの設定
→ ホームページ=投稿ページ
ホームページの表示
 固定ページ
サイト型デザインの設定
→ ホームページ≠投稿ページ
ホームページ固定ページで作成したトップページ(フロントページ)
投稿ページ固定ページで作成した新着記事一覧ページ

WordPressの[設定][表示設定]で設定できるのと同じ項目です。

WordPress(ワードプレス)の表示設定
WordPress設定の表示設定

2-1) サイト全体設定 – 基本カラー(重要度:

サイトカラーをオリジナルに変更するための設定項目です。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのサイト全体設定 - 基本カラー
サイト全体設定 – 基本カラー
重要度設定項目説明
メインカラー見出しやカテゴリーなどに利用される色
テキストカラー本文などのテキストに利用される色
リンクカラーリンクテキストに利用される色
背景色サイト背景に利用される色

2-2) サイト全体設定 – 基本デザイン(重要度:

サイトデザインをオリジナルに変更するための設定項目です。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのサイト全体設定-基本デザイン
サイト全体設定 – 基本デザイン
重要度設定項目説明
全体をフラットにする影をなくす(フラットデザイン)
全体に丸みをもたせる角を丸くする
ベースとなるフォント「游ゴシック」か「ヒラギノ>メイリオ」
フォントサイズ(PC・Tab)14〜18pxから選択
フォントサイズ(Mobile)「固定サイズ」か「デバイス可変」
サイト幅サイドバーを含むコンテンツの幅
1カラム時の記事コンテンツ幅サイドバーを含まないコンテンツの幅
サブメニューをアコーディオン化するサブメニューを最初は隠す
ページ背景画像(PC)テキストを読みにくくなる画像は非推奨
ページ背景画像(SP)テキストを読みにくくなる画像は非推奨

行間の調整をしたい場合は、以下を参考にしてください。

2-3) サイト全体設定 – NO IMAGE画像(重要度:

NO IMAGE画像」は、アイキャッチ画像が設定されていない記事で表示されるデフォルトのサムネイル画像です。

デフォルトのサムネイル画像をオリジナルに変更するための設定項目です。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのサイト全体設定-NO IMAGE画像
サイト全体設定 – NO IMAGE画像

NO IMAGE画像の推奨サイズは「1200×630px」です。

画面には「推奨:横幅1600px以上」との表記がありますが、OGP画像の推奨サイズと同じ「1200×630px」を利用することが一般的です。

画像の準備がまだの方は、後で設定するために、本ページをブックマークしておきましょう。

参考)「SEO SIMPLE PACK」でOGP画像を設定

OGP画像」は、アイキャッチ画像が設定されていない記事で表示されるデフォルトのSNSシェア画像です。

トップページをSNS(Twitter、Facebookなど)でシェアされた際にも表示されます。

OGP画像を設定するには、SEOプラグイン「SEO SIMPLE PACK」を利用します。

デフォルトのSNSシェア画像をオリジナルに変更するための設定項目です。

WordPressプラグイン「SEO SIMPLE PACK」のOGP設定
「SEO SIMPLE PACK」でOGP画像を設定

OGP画像の推奨サイズは「1200×630px」です。

NO IMAGE画像と同じ画像を利用することが一般的です。

画像の準備がまだの方は、後で設定するために、本ページをブックマークしておきましょう。

2-4) サイト全体設定 – タイトルデザイン(重要度:

タイトル(見出し)をオリジナルに変更するための設定項目です。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのサイト全体設定-タイトルデザイン
サイト全体設定 – タイトルデザイン
重要度設定項目説明
サブコンテンツのタイトルデザイン記事下の「この記事を書いた人」「関連記事」「コメント」などの見出し
サイドバーのタイトルデザイン(PC)ウィジェットのサイドバーの見出し(PC)
サイドバーのタイトルデザイン(SP)ウィジェットのサイドバーの見出し(SP)
フッターのタイトルデザインウィジェットのフッターの見出し
スマホメニュー内のタイトルデザインスマホ開閉メニューの見出し

[コントロールを非表示]で、左メニューが隠れます。(PC画面でサイドバーが横に表示)

[SP]アイコンで、スマホビュー表示になります。(スマホ開閉メニューを表示)

2-5) サイト全体設定 – コンテンツヘッダー(重要度:

コンテンツヘッダーは、固定ページなどで利用される記事タイトルの背景画像です。

コンテンツヘッダーはデフォルトOFFなので、ONに変更した際に設定します。

コンテンツヘッダーを有効にするには、タイトル位置の設定を[コンテンツ上]に変更します。

  • 投稿・固定ページの全体設定は、「外観カスタマイズ」の[投稿・固定ページ][タイトル]で変更(詳細
  • 各記事の単体設定は、「投稿」や「固定ページ」の「表示の上書き設定」で変更(詳細
WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのサイト全体設定-コンテンツヘッダー
サイト全体設定 – コンテンツヘッダー
重要度設定項目説明
タイトル背景用デフォルト画像タイトルの背景画像(コンテンツ)を設定
画像フィルター画像の加工処理を選択
カラーオーバーレイの設定画像に被せるカラーを設定
オーバレイカラーの不透明度画像に被せるカラーの不透明度を設定

コンテンツヘッダー画像の推奨サイズはありませんが、SWELL公式サイトでは「横幅1600px」が利用されています。

ディスプレイ表示を考えて、「横幅1280px以上」にすることをおすすめします。

画像の準備がない場合は、[オーバーレイカラーの不透明度]を「1」にして、[カラーオーバーレイ]を変更すれば、画像なしでコンテンツヘッダーを利用できます。

2-6) サイト全体設定 – お知らせバー(重要度:

お知らせバーは、ページ上部/下部に表示されるピックアップ(PICK UP)記事などへのリンクバーです。

お知らせバーは記事を投稿してから設定します。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのサイト全体設定-お知らせバー
サイト全体設定 – お知らせバー
重要度設定項目説明
お知らせバーの表示位置お知らせバーの表示有無と表示位置を選択
お知らせバーの文字の大きさお知らせバーのフォントサイズ
表示タイプボタン表示や流れるテキスト表示を選択
お知らせ内容お知らせバーの表示内容
リンク先のURLお知らせバーのリンクURL
お知らせバーの背景効果背景カラーの加工処理を選択
お知らせバー文字色お知らせバーのフォントカラー(デフォルト白)
お知らせバー背景色お知らせバーの背景カラー(デフォルト赤)

2-7) サイト全体設定 – パンくずリスト(重要度:

パンくずリストは、ページ上部/下部に表示される現在位置がわかる「ホーム > カテゴリー」のようなリンク表示です。

「ヘンゼルとグレーテル」の童話で、森で迷わないようにパンくずを置きながら進んだことに由来します。

パンくずリストは、Googleサーチコンソールでも評価されるSEO項目なので、必ず表示します。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのサイト全体設定-パンくずリスト
サイト全体設定 – パンくずリスト
重要度設定項目説明
パンくずリストの位置ページ上部かページ下部を選択
「ホーム」の文字列トップページの表示名
カテゴリー・タグの親に「投稿ページ」をセットサイト型デザインの場合に利用
パンくずリストの背景効果を無くす背景の影がなくなる

カテゴリー・タグの親に「投稿ページ」をセットは、サイト型デザインの場合に変更します。

2-8) サイト全体設定 – ページャー(重要度:

ページャーは、トップページやアーカイブページの記事一覧リストの下部に表示されるページ番号です。

ページ送り番号を変更するための設定項目です。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのサイト全体設定-ページャー
サイト全体設定 – ページャー
重要度設定項目説明
ページャーの形四角か丸を選択
ページャーのデザイン現在のページ以外のデザイン設定

2-9) サイト全体設定 – スマホ開閉メニュー(重要度:

スマホ開閉メニューをオリジナルに変更するための設定項目です。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのサイト全体設定-スマホ開閉メニュー
サイト全体設定 – スマホ開閉メニュー
重要度設定項目説明
文字色スマホ開閉メニューのフォントカラー
背景色スマホ開閉メニューの背景カラー
背景の不透明度スマホ開閉メニューの背景の不透明度(透過設定)
メニュー展開時のオーバーレイカラースマホ開閉メニュー以外を暗くする色
メニュー展開時のオーバーレイカラーの不透明度スマホ開閉メニュー以外の不透明度(透過設定)
メインメニュー上に表示するタイトルスマホ開閉メニューの見出し

2-10) サイト全体設定 – 下部固定ボタン・メニュー(重要度:

右下固定ボタンスマホ用固定フッターメニューの設定ができます。

右下固定ボタンとは、ページ右下に固定表示されるページトップボタンや目次ボタンのことです。

WordPressテーマ「SWELL(スウェル)」のページトップボタン
ページトップボタン
WordPressテーマ「SWELL(スウェル)」の目次ボタン
目次ボタン

スマホ用固定フッターメニューとは、ページ下部に固定表示されるフッターメニューボタンのことです。

WordPressテーマ「SWELL(スウェル)」の外観メニュー(スマホ用固定フッターメニュー)
スマホ用固定フッターメニュー
WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのサイト全体設定-下部固定ボタン・メニュー
サイト全体設定 – 下部固定ボタン・メニュー

右下固定ボタンは、スマホ用固定フッターメニューを設定していない場合に表示されます。

重要度設定項目説明
ページトップボタンの表示設定右下固定ボタンの表示有無と四角か丸を選択
目次ボタンの表示設定右下固定ボタンに目次ボタンを表示するか

スマホ用固定フッターメニューを表示するには、事前に「固定フッター(SP)」メニューを作成する必要があります。(後述)

重要度設定項目説明
メニュー開閉ボタンを表示するスマホ開閉メニューの切り替えボタン
検索ボタンを表示するサイト内検索ボタン
ページトップボタンを表示するページトップボタン(右下固定ボタンと同じ)
目次メニューを表示する目次ボタン(右下固定ボタンと同じ)

参考)スマホ用固定フッターメニューを作成

[外観][メニュー]で「新しいメニューを作成しましょう」をクリックしてから、メニュー名を「固定フッター(SP)」などと設定して[メニューを保存]します。

WordPressテーマ「SWELL(スウェル)」の外観メニューの作成(固定フッターSP)
メニュー名を「固定フッター(SP)」などと設定

何もメニューに追加せずに、メニューの位置[固定フッター(SP)]に設定して[メニューを保存]します。

WordPressテーマ「SWELL(スウェル)」の外観メニューの設定(固定フッターSP)
何もメニューに追加せずに、メニューの位置を[固定フッター(SP)]に設定

一旦[メニューを保存]してからメニューの位置を設定しないと、反映されないことがあります。

外観カスタマイズ(カスタマイザー)では、以下の特殊なボタンを追加することができます。

  • メニュー開閉ボタン
  • 検索ボタン
  • 目次メニュー
  • ページトップボタン
WordPressテーマ「SWELL(スウェル)」の外観メニュー(スマホ用固定フッターメニュー)
スマホ用固定フッターメニュー

外観メニューでは、それ以外のリンクを追加することができます。

3) ヘッダー(重要度:

ヘッダーをオリジナルに変更するための設定項目です。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのヘッダー
ヘッダー

ヘッダー – ロゴ画像

ロゴ画像の準備がない場合は、カラー設定を変更することをおすすめします。

重要度設定項目説明
ヘッダー背景色ヘッダーの背景カラー
ヘッダー文字色濃い背景色なら白に変更

ヘッダー – ヘッダーロゴの設定

ヘッダーロゴの設定は、ロゴ画像の準備がある場合に行います。

重要度設定項目説明
ロゴ画像の設定ヘッダーロゴ画像を設定
画像サイズ(PC)32~120pxから選択
画像サイズ(PC追従ヘッダー)24~48pxから選択
画像サイズ(SP)40~80pxから選択

ロゴ画像の推奨サイズはありませんが、SWELL公式サイトでは「1600×360px」が利用されています。

ただし、デザイン重視よりも速度重視の場合は、「600×135px」程度にしておくのがおすすめです。

画像の準備がまだの方は、後で設定するために、本ページをブックマークしておきましょう。

ヘッダー – レイアウト・デザイン設定

レイアウト・デザイン設定は、ロゴとメニュー(ヘッダーナビ)の位置関係を決めます。

重要度設定項目説明
ヘッダーのレイアウト(PC)ヘッダーナビメニューとロゴの位置関係(PC)
ヘッダーのレイアウト(SP)ヘッダーナビメニューとロゴの位置関係(SP)
ヘッダー境界線ヘッダーの境界効果

ヘッダー – トップページでの特別設定

トップページでの特別設定は、SWELL公式サイトのトップページと同じようなデザインにできます。

重要度設定項目説明
ヘッダーの背景を透明にするかどうかトップページのメインビジュアルの画像や動画の上にロゴ画像を表示
SWELL公式サイトのトップページと同じに

ヘッダー – ヘッダーの追従設定

ヘッダーの追従設定は、デフォルトONになっています。

重要度設定項目説明
ヘッダーを追従させる(PC)ヘッダー固定追尾(PC)
ヘッダーを追従させる(SP)ヘッダー固定追尾(SP)
追従ヘッダー(PC)の背景不透明度固定追尾ヘッダーの背景の不透明度(透過設定)

ヘッダー – ヘッダーバー設定

ヘッダーバーは、キャッチフレーズSNS情報などが表示されます。(PCのみ)

WordPressテーマ「SWELL(スウェル)」のヘッダーバー
ヘッダーバー(PCのみ)
重要度設定項目説明
ヘッダーバー背景色指定しない場合はメインカラー(PCのみ表示)
ヘッダーバー文字色ヘッダーバーのフォントカラー
SNSアイコンリストを表示するヘッダーバーにSNSリンクを表示するか
→「SNS情報」でURL設定
コンテンツが空でもボーダーとして表示する空のヘッダーバー

ヘッダー – キャッチフレーズ設定

キャッチフレーズは、「WordPress設定 – サイト基本情報」で設定できます。

重要度設定項目説明
キャッチフレーズの表示位置ヘッダーバーかロゴ画像の近くに表示
キャッチフレーズに「| デモサイト」を表示するサイト名(タイトル)を追記

ヘッダー – ヘッダーメニュー(グローバルナビ)設定

ヘッダーメニュー(グローバルナビ)は、[外観][メニュー]で「グローバルナビ」を作成しておく必要があります。

重要度設定項目説明
マウスホバーエフェクトグローバルナビメニューにマウスを乗せたときの表示
ホバー時に出てくるラインの色表示されるラインカラー
ヘッダーメニューの背景色「ヘッダーのレイアウト(PC)」でロゴとメニューが縦並びのとき
サブメニューの背景色サブメニューの背景カラー

ヘッダー – ヘッダーメニュー(SP)設定

ヘッダーメニュー(SP)は、[外観][メニュー]で「スマホ用ヘッダー」を作成しておく必要があります。

重要度設定項目説明
ヘッダーメニューをループさせるスマホでヘッダーメニューがループ

ヘッダー – 検索ボタン設定

検索ボタンは、PC表示ではヘッダーバーかヘッダーメニュー内に、SP表示ではメニューボタン横に表示できます。

重要度設定項目説明
検索ボタンの表示位置(PC)ヘッダーバーかヘッダーメニューに表示
検索ボタンの表示設定(SP)メニューボタン横(カスタムボタン)に表示するか

サイト内検索は、このほかにも[外観][ウィジェット]でサイドバーやフッターなどに設置できます。

表示位置表示設定箇所表示内容
ヘッダーバー(PCのみ)外観カスタマイズ(ヘッダー)検索ボタン(SNSアイコン横)
ヘッダーメニュー(PC)外観カスタマイズ(ヘッダー)検索ボタン(グローバルナビ)
ヘッダーメニュー(SP)外観カスタマイズ(ヘッダー)検索ボタン(カスタムボタン)
サイドバー、フッターなど外観ウィジェット(検索)検索フォームの入力欄
  • 「検索ボタンの表示設定(SP)」を「表示しない」に設定した場合、スマホヘッダーに検索ボタン以外を設置できます。

ヘッダー – メニューボタン設定

メニューボタン設定は、スマホ開閉メニューのハンバーガーボタン「」の設定です。

重要度設定項目説明
アイコン下に表示するテキスト「MENU」などを設定
メニューボタン背景色背景カラー

ヘッダー – カスタムボタン設定

カスタムボタン設定は、スマホヘッダーに追加できる検索ボタン「」などの設定です。

重要度設定項目説明
アイコンクラス名アイコン一覧から設定
アイコン下に表示するテキスト「SEARCH」などを設定
カスタムボタン背景色ボタンの背景カラー
リンク先URL「検索ボタンの表示設定(SP)」を「表示しない」に設定した場合
検索ボタン以外にお問い合わせメールボタンなどを設定可能

4) フッター(重要度:

フッターをオリジナルに変更するための設定項目です。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのフッター
フッター
重要度設定項目説明
フッター背景色フッターの背景カラー
フッター文字色フッターのフォントカラー
ウィジェットエリアの背景色フッターウィジェットの背景カラー
ウィジェットエリアの文字色フッターウィジェットのフォントカラー
コピーライトのテキスト「©️」以降のテキストを設定
「フッター」と「フッター直前ウィジェット」の間の余白をなくすフッター余白の設定
フッターにSNSアイコンリストを表示する「SNS情報」を表示

SWELLの場合、コッピーライトの先頭に必ず「©️」が表示されます。

おすすめ度コピーライト表示の例説明
ש️ 20xx サイト名/企業名.発行年あり
©️ 20xx-20xx サイト名/企業名.発行年-最新年あり
©️ サイト名/企業名.発行年なし
ש️ 20xx サイト名/企業名. All Rights Reserved.発行年あり、権利留保文言あり

発行年だけで最新年の表記がないと、更新がされていないサイト(ブログ)だと勘違いされることがあります。

だからと言って、最新年も記載すると、毎年コピーライトを書き換える手間が生じます。

ちなみに、「All Rights Reserved.」は古い表示です。

5) サイドバー(重要度:

サイドバーをオリジナルに変更するための設定項目です。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのサイドバー
サイドバー
重要度設定項目説明
トップページにサイドバーを表示するフロントページの表示有無
投稿ページにサイドバーを表示する投稿ページの表示有無
固定ページにサイドバーを表示する固定ページの表示有無
アーカイブページにサイドバーを表示するアーカイブページの表示有無
サイドバーの位置左右から選択

[コントロールを非表示]で、左メニューが隠れます。(PC画面でサイドバーが横に表示)

アーカイブページとは、カテゴリーページ、タグページ、投稿者アーカイブ(著者ページ)、日付アーカイブなどです。

6-1) トップページ – メインビジュアル(重要度:

トップページのメインの画像・動画をオリジナルに変更するための設定項目です。

トップページ – メインビジュアル
重要度設定項目説明
メインビジュアルの表示内容なし、画像、動画から選択
周りに余白をつけるフルワイドに余白設定
Scrollボタンを表示するスクロール誘導ボタンを表示
メインビジュアルの高さ設定メイン画像・動画の高さ設定
画像(動画)の上に表示されるボタンの丸みメイン画像・動画上のボタン
フィルター処理メイン画像・動画の加工処理を選択
オーバーレイカラーメイン画像・動画に被せるカラー
オーバレイカラーの不透明度メイン画像・動画に被せるカラーの透過設定
画像スライダー設定画像の場合、複数枚でスライダー表示
スライド画像 [1〜]画像の場合、スライダー画像を設定(複数可)
動画動画の場合、メイン動画を設定
ポスター画像動画の場合、動画読み込みまでの画像を設定
メインテキストメイン画像・動画上のメインテキスト
サブテキストメイン画像・動画上のサブテキスト
ブログパーツIDメイン画像・動画上のブログパーツ(自由作成)
ボタンのリンク先URLメイン画像・動画上のボタンURL
ボタンテキストメイン画像・動画上のボタンテキスト
テキストの位置メイン画像・動画上のテキスト配置
テキストカラーメイン画像・動画上のテキストの色
テキストのシャドウカラーメイン画像・動画上のテキストの影の色
ボタンカラーメイン画像・動画上のボタンの色
ボタンタイプメイン画像・動画上のボタンの白抜き・ボーダー設定

メインビジュアル画像・動画の推奨サイズはありませんが、SWELL公式サイトでは「1600×900px」が利用されています。

ディスプレイ表示を考えて、「横幅1280px以上」にすることをおすすめします。

画像・動画の準備がまだの方は、後で設定するために、本ページをブックマークしておきましょう。

6-2) トップページ – 記事スライダー(重要度:

記事スライダーとは、メインビジュアル下に表示され、横にスライドする記事一覧表示です。

トップページ以外には表示することができません。

WordPressテーマ「SWELL(スウェル)」の記事スライダーとピックアップバナー
上が記事スライダー、下がピックアップバナー

記事スライダーはデフォルトONですが、最初はすべての記事が表示されています。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのトップページ-記事スライダー
トップページ – 記事スライダー
重要度設定項目説明
記事スライダーを設置するかどうか記事スライダーの設置有無
ピックアップ対象カテゴリータグを選択
ピックアップ対象のカテゴリー名・タグ名カテゴリー名・タグ名を設定
並び順ランダム、投稿日、更新日、人気順から選択
タイトルや日付などの表示位置画像の下側画像の上に被せるか選択
カテゴリー表示位置サムネイル画像の上タイトルの下か選択
日付の表示設定記事の公開日や更新日を表示するか設定
著者の表示設定記事の著者を表示するか設定
スライダーの枚数設定(PC)記事スライダーの数(PC)
スライダーの枚数設定(SP)記事スライダーの数(SP)
スライドのアニメーション速度スライドの移動速度
スライドが切り替わる間隔スライドの移動間隔
その他の設定矢印ナビゲーション、ページネーション、スライド間の余白有無を設定
記事スライダーエリアのタイトルデフォルトは空白
上下の余白量記事スライダーの上下余白
左右の幅フルワイド、少し余白あり、コンテンツ幅から選択
記事スライダーエリアの文字色記事スライダーエリアのフォントカラー
記事スライダーエリアの背景色記事スライダーエリアの背景カラー
記事スライダーエリアの背景画像テキストを読みにくくなる画像は非推奨
背景画像の透過設定背景画像の不透明度

記事が増えてきたら、ピックアップ(PICK UP)用のタグを作成して「ピックアップ対象のタグ名」に登録します。

6-3) トップページ – ピックアップバナー(重要度:

ピックアップバナーとは、メインビジュアル下に表示され、固定表示されるメニュー登録記事です。

デフォルトはトップページですが、トップページ以外にも表示することができます。

WordPressテーマ「SWELL(スウェル)」の記事スライダーとピックアップバナー
上が記事スライダー、下がピックアップバナー

ピックアップバナーはデフォルトOFFなので、ONに変更した際に設定します。

ピックアップバナーを表示するには、[外観][メニュー]で「ピックアップバナー」を作成しておく必要があります。(後述)

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのトップページ-ピックアップバナー
トップページ – ピックアップバナー
重要度設定項目説明
バナーレイアウト(PC)固定幅フレックスか選択
バナーレイアウト(SP)固定幅スライドか選択
バナータイトルのデザイン表示位置とデザインを選択
内側に白線をつけない/つけるバナー画像の白線枠の有無
バナー画像を少し暗くしない/するバナー画像を暗くするか
トップページ以外の下層ページにも表示する全ページに表示

参考)ピックアップバナー用メニューを作成

[外観][メニュー]で「新しいメニューを作成しましょう」をクリックしてから、メニュー名を「ピックアップバナー」などと設定して[メニューを保存]します。

WordPressテーマ「SWELL(スウェル)」の外観メニューの作成(ピックアップバナー)
メニュー名を「ピックアップバナー」などと設定

投稿などを[メニューに追加]し、メニューの位置を[ピックアップバナー]に設定して[メニューを保存]します。

WordPressテーマ「SWELL(スウェル)」の外観メニューの設定(ピックアップバナー)
投稿などを[メニューに追加]し、メニューの位置を[ピックアップバナー]に設定

6-4) トップページ – その他(重要度:

コンテンツ上の余白量を設定できます。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのトップページ-その他
トップページ – その他
重要度設定項目説明
コンテンツ上の余白量トップページでいうと、記事一覧の上の余白

7-1) 投稿・固定ページ – タイトル(重要度:

投稿ページや固定ページの記事タイトルの表示設定ができます。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズの投稿・固定ページ-タイトル
投稿・固定ページ – タイトル

投稿ページは、デフォルトで日付表示されています。

重要度設定項目説明
タイトルの表示位置「コンテンツ上」だとコンテンツヘッダー
タイトル横に表示する日付表示有無と公開日か更新日を選択
タイトル下に表示する情報カテゴリー、タグ、公開日、更新日、著者の表示有無

固定ページは、コンテンツヘッダー設定もおすすめです。

重要度設定項目説明
タイトルの表示位置「コンテンツ上」だとコンテンツヘッダー
コンテンツ内タイトルデザイン「コンテンツ内」の場合の見出し

7-2) 投稿・固定ページ – アイキャッチ画像(重要度:

固定ページや投稿ページのアイキャッチ画像の表示設定ができます。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズの投稿・固定ページ-アイキャッチ画像
投稿・固定ページ – アイキャッチ画像

固定ページは、デフォルトでアイキャッチ画像が表示されません。

重要度設定項目説明
本文の始めにアイキャッチ画像を表示デフォルトOFF

投稿ページは、デフォルトでアイキャッチ画像が表示されます。

重要度設定項目説明
本文の始めにアイキャッチ画像を表示デフォルトON
アイキャッチ画像なければ「NO IMAGE画像」を代わりに表示するデフォルトOFF

アイキャッチ画像を表示するには、投稿ページや固定ページでアイキャッチ画像を設定します。

参考)投稿・固定ページでアイキャッチ画像を設定

投稿・固定ページの編集画面で、アイキャッチ画像を設定できます。

WordPressテーマ「SWELL(スウェル)」の編集画面でアイキャッチ画像を設定
投稿・固定ページの編集画面で、アイキャッチ画像を設定

7-3) 投稿・固定ページ – コンテンツのデザイン(重要度:

固定ページや投稿ページの見出しなどの表示設定ができます。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズの投稿・固定ページ-コンテンツのデザイン
投稿・固定ページ – コンテンツのデザイン
重要度設定項目説明
見出しのキーカラー指定しない場合はメインカラー
見出し2のデザインH2見出しのデザイン
見出し3のデザインH3見出しのデザイン
見出し4のデザインH4見出しのデザイン
セクション見出しのキーカラー指定しない場合はメインカラー
セクション用見出し2のデザインセクションH2見出しのデザイン
太字の下に点線をつける太字(Bold)の下線
テキストリンクにアンダーラインを付けるテキストリンクの下線

ダミー記事(テスト記事)でデザインを確認してください。

一般的に、テキストリンクは青色でアンダーラインがあることが多いです。

7-4) 投稿・固定ページ – 目次(重要度:

固定ページや投稿ページの目次の表示設定ができます。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズの投稿・固定ページ-目次
投稿・固定ページ – 目次
重要度設定項目説明
投稿ページに目次を表示デフォルトON
固定ページに目次を表示デフォルトOFF
目次のタイトルデフォルト「目次」
目次のデザインボーダーや背景などを選択
目次のリストタグ数字(olタグ)かドット(ulタグ)を選択
擬似要素(ドット・数字部分)のカラー数字(olタグ)かドット(ulタグ)の色
どの階層の見出しまで抽出するかh2〜h3
見出しが何個以上あれば表示するかデフォルト「2」
目次広告の位置目次の前後から選択
目次がなくても広告を表示するかどうか投稿ページと固定ページでそれぞれ設定

SWELLでは、目次の開閉ボタンを表示する機能はありません。

7-5) 投稿・固定ページ – SNSシェアボタン(重要度:

投稿ページのSNSシェアボタンの表示設定ができます。

固定ページには表示されません。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズの投稿・固定ページ-SNSシェアボタン
投稿・固定ページ – SNSシェアボタン
重要度設定項目説明
シェアボタンを表示する位置記事上、記事下、画面左固定が可能
表示するボタンの種類Facebook、Twitter、はてブ、Pocket、Pinterest、LINEが可能
シェアボタンのデザインデザインを選択
URLコピーボタン表示有無とデザインを選択
「記事下部シェアボタン」の上に表示するメッセージデフォルト「よかったらシェアしてね!」
シェアされた時のハッシュタグTwitterでシェアされたときのハッシュタグ(#)
via設定(メンション先)Twitterでシェアされたときのメンション(@)

7-6) 投稿・固定ページ – 記事下エリア(重要度:

投稿ページの記事下エリア(SNSフォロー、前後記事リンク、著者情報、関連記事、コメント)の表示設定ができます。

固定ページには表示されません。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズの投稿・固定ページ-記事下エリア
投稿・固定ページ – 記事下エリア
重要度設定項目説明
SNSアクションエリア設定Twitterフォロー、Instagramフォロー、Facebookいいねの設定
前後記事へのページリンク設定前後ページリンクの表示有無、サムネイル有無、デザイン
著者情報エリアの設定著者情報の表示有無、著者ページへのリンク有無、見出しタイトル
関連記事エリアの設定関連記事の表示有無、見出しタイトル、レイアウト、カテゴリーかタグか
コメントエリアの設定コメントの表示有無、見出しタイトル

記事下の著者情報(この記事を書いた人)を表示する場合は、WordPressの[ユーザー][プロフィール]でプロフィール写真、プロフィール情報、連絡先情報(SNS)などを設定してください。

著者情報(この記事を書いた人、プロフィール)の表示方法は、いくつか考えられます。

表示位置表示設定箇所表示内容
記事下
(この記事を書いた人)
外観カスタマイズ(記事下エリア)WordPressの[ユーザー]→[プロフィール]で設定
投稿者アーカイブ
(著者ページ)
「SEO SIMPLE PACK」の一般設定「その他アーカイブ」WordPressの[ユーザー]→[プロフィール]で設定
サイドバー、フッターなど外観ウィジェット([SWELL] プロフィール)ウィジェットで設定
SNS情報は外観カスタマイズ(記事下エリア)で設定
記事内SWELLブログパーツ(新規作成)SWELLブログパーツで編集

8) アーカイブページ(重要度:

日付、カテゴリー、タグ、投稿者などのアーカイブページの表示設定ができます。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのアーカイブページ
アーカイブページ
重要度設定項目説明
タイトル表示位置「コンテンツ上」だとコンテンツヘッダー
コンテンツ内タイトルデザイン「コンテンツ内」の場合の見出し
タームナビゲーション親ターム・子タームへの導線を設置するかどうか

9) 記事一覧リスト(重要度:

フロントページ、新着記事ページ(投稿ページ)、人気記事ページなどの記事一覧ページの表示設定ができます。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズの記事一覧リスト
記事一覧リスト
重要度設定項目説明
リストレイアウトデザイン設定
最大カラム数カード型・サムネイル型でのみ有効
「READ MORE」のテキストデフォルト(READ MORE)
投稿情報の表示設定タイトル、公開日、更新日、著者の表示有無
抜粋文の文字数抜粋の長さ
カテゴリー表示位置表示有無と表示位置を選択
サムネイル画像上に表示される時の追加設定文字色、背景色、背景効果
サムネイル画像の比率設定カード型、リスト型、サムネイル型、ブログ型で設定
マウスホバー時の設定グラデーション色
タブ切り替え設定(トップページ)新着記事タブ、人気記事タブ、タームタブ(カテゴリー・タグ)を追加
「新着記事タブ」の表示名デフォルト「新着記事」
「人気記事タブ」の表示名デフォルト「人気記事」
タブデザイン標準、グレーボックス、下線を選択
タブ切り替え設定(その他のページ)タームアーカイブ、著者アーカイブに人気記事タブを追加
投稿一覧から除外するカテゴリー・タグID設定

10) SNS情報(重要度:

SNS情報の表示設定ができます。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのSNS情報
SNS情報を入力

FeedlyページURLは、以下のように設定してください。

manuon.com」の箇所を自分のサイトのドメイン名に変更します。

https://feedly.com/i/subscription/feed/https%3A%2F%2Fmanuon.com%2Ffeed%2F

ここで設定したSNS情報は、ヘッダーバーウィジェット([SWELL] プロフィール)などで利用されます。

WordPressテーマ「SWELL(スウェル)」のヘッダーバー
ヘッダーバー

記事下の著者情報(この記事を書いた人)投稿者アーカイブ(著者ページ)などに表示されるSNSは、WordPressの[ユーザー]→[プロフィール]で別途設定する必要があります。

SNS情報の設定箇所は、3つあるため注意してください。

表示位置表示設定箇所表示内容
ヘッダーバー(PCのみ)外観カスタマイズ(ヘッダー)外観カスタマイズ(SNS情報)
サイドバー、フッターなど外観ウィジェット([SWELL] プロフィール)外観カスタマイズ(SNS情報)
フッター外観カスタマイズ(フッター)外観カスタマイズ(SNS情報)
記事下
(この記事を書いた人)
外観カスタマイズ(記事下エリア)WordPressの[ユーザー]→[プロフィール]で設定
投稿者アーカイブ
(著者ページ)
「SEO SIMPLE PACK」の一般設定「その他アーカイブ」WordPressの[ユーザー]→[プロフィール]で設定
OGP「SEO SIMPLE PACK」のOGP設定「Facebook/Twitter」「SEO SIMPLE PACK」のOGP設定「Facebook/Twitter」

この記事のまとめ

デザインテーマ「SWELL」の外観カスタマイズの使い方を見てきました。

SWELLは、設定だけで簡単にコーポレートサイトができます。

なるほどくん

マウス操作だけでできちゃいました。

導入するだけでおしゃれ(スタイリッシュ)なデザインになる「SWELL(スウェル)」を、あなたのサイト(ブログ)に導入しましょう。

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』

\ おしゃれで簡単 /

\ 購入から導入まで /

\ 記事テンプレート付き /

アクセスや収益をUPさせるノウハウ紹介

実際の経験を元に、効果のあった施策をまとめました。

よかったら見ていってください。

ドメインパワーUPでSEOに効く被リンク獲得リスト

被リンクというと、ブラックなやり方を想像される方が多いかもしれません。

しかし、多くのサイトを分析してみると、みんな使っている登録サイトが存在することがわかりました。

ドメインパワーがSEOに重要な地位を占める現状では、自然なホワイトリンクの獲得戦略が欠かせません。

実際に既存サイトでも大きな効果を上げることができたので、ここでご紹介したいと思います。

リンクフリー
URLをコピーする
URLをコピーしました!

コメント

コメントする

目次
閉じる