テーマ選びに迷っている方へ
SWELL
「SWELL」は、当ブログで活用しているWordPressテーマです。
いくつかのテーマを使った私が、最終的にSWELLを選んだ理由をまとめました。
WordPressのテーマ選びに迷っている人は、上記リンクページを参照してください。
＼ SWELLの詳細を今すぐ見る ／
＼ SWELLの詳細を今すぐ見る／
シンプルなのに高機能
■「SWELL」を購入した人は、最初に「テーマ購入後の3ステップ」に従い、テーマ利用のための準備を行ってください。
■SWELLカスタマイザーの内部構造については、下記を参照してください。
■各種機能の設定については、下記を参照してください。
公式サイトに「設定マニュアル」があります！
SWELL購入後の3ステップ
親テーマ、子テーマのインストール手順の詳細については、公式ページに書かれています。
以降、SWELLのテーマカスタマイザーを使って設定を行います。
カスタマイザーの使い方については、公式ページに書かれています。
また、バージョンアップさせる方法についても、公式ページに書かれています。
WordPressの機能を拡張してくれるプラグインは、とても便利なものです。
その一方、多くのトラブルがプラグインによって引き起こされています。
SWELLユーザーは、なるべくSWELL推奨のプラグインを使うようにしましょう。
「SEO SIMPLE PACK」はアクセス分析に便利！
ブログをビジネス利用で利用される場合、Google Analyticsによるアクセス分析は欠かせません。
その際、プラグイン「SEO SIMPLE PACK」を活用すると面倒な設定が不要になります。
- プラグイン「SEO SIMPLE PACK」をインストールします。
- ダッシュボードの「SEO PACK」→「一般設定」で「Googleアナリティクス」タブをクリックします。
- Googleアナリティクスで調べた「トラッキングID」を貼り付け、「設定を保存する」をクリックします。
なお、「SEO SIMPLE PACK」の詳細については、SWELLの開発者でもあり、このプラグインの開発者でもある了さんがまとめておられます。
また、「UA」から始まる「トラッキングID」の代わりに、「G」から始まる「測定ID」でも大丈夫です。
その場合、アナリティクスの管理画面を開き、「管理（歯車マーク）」の「データストリーム」をクリックします。
「ウェブ」タブをクリックした後、当該サイトをクリックすると、右上に「G」から始まる「測定ID」が表示されます。
- アドセンスを使う場合は、ダッシュボードの「SWELL設定」をクリックします。
「広告コード」タブをクリックした後、「記事内広告」と「自動広告」の欄に広告コードを貼り付けます。
「記事内広告コード」 に関しては、記事内でショートコード [ａｄ]（※adは小文字で入力）と入力することによって表示させることができます。
また、「目次広告」に広告コードを入れると、目次の直前または直後に広告を貼ることができます。
カスタマイザーの概要
ダッシュボードから起動する場合は、「外観」の「カスタマイズ」をクリックします。
SWELL設定の概要
上記の他、ダッシュボードの「SWELL設定」から、以下の設定が行なえます。
基本的なデザインと各種機能
ここからは、レイアウトや各機能の説明になります。
サイト全体のレイアウトを整える
投稿・固定ページをデザインする
記事内パーツ、役立つ機能
①サイト全体のカラー設定
「外観」→「カスタマイズ」→「サイト全体設定」で「基本カラー」をクリックします。
「メインカラー」「テキストカラー」「リンクの色」「背景色」を好みの色に設定できます。
これがサイト全体のベースカラーになります。
デフォルトのメインカラーは紺色のため、h2、h3などの見出しの色も紺色に統一されています。
メインカラーを紫にすると、上記同様、見出し部分は紫に統一されます。
－
「テキストカラー」の設定では、サイト全体のテキストの色を変更できます。
「リンクカラー」の設定でも同様に、サイト全体のリンクの色を変更できます。
「背景色」の設定では、サイト全体の背景色を変更できます。
デフォルトの「背景色」は「白」になっています。
このように、任意の背景色へ変更することができます。
ただし、「外観」→「カスタマイズ」→「サイト全体設計」→「基本デザイン」で「コンテンツの背景を白にする」が「ON」になっている場合、例えば、背景色を赤に変更してもコンテンツ背景は白のままです。
サイト全体の基本カラーについては、公式ページにも書かれています。
スマホメニューの色
スマホメニューについては、「外観」→「カスタマイズ」→「サイト全体設計」→「スマホ開閉メニュー」で「文字色」と「背景色」を変えることができます。
デフォルトでは、「文字色」は黒色、「背景色」は白色になっています。
「文字色」を黄色、「背景色」を青色にすると、このように変わります。
②カラーパレットの設定
公式サイトの解説ページ：②カラーパレットの配色をカスタマイズする方法
カラーパレットの「文字色」と「背景色」は、ブロックのサイドバーで表示されます。
いずれの一列目も固定で5色になっていますが、それ以外の8色については好きな色に設定できます。
デフォルトでは、赤、青、緑、橙の濃い色と薄い色になっていますが、任意のカラーへ変更可能です。
記事内で実際に使ってみます。
このように、美しい配色にすることができます。
③ヘッダー周りの設定
SWELL公式の解説ページ：③ヘッダーの設定をしよう
ヘッダーロゴ画像の設定
ヘッダーロゴ画像については、「外観」→「カスタマイズ」→「ヘッダー」の「ヘッダーロゴの設定」で行います。
デフォルトでは、テキストでブログタイトル名が文字色が黒、背景色が白で表示されています。
「ロゴ画像」をアップすると、テキストの代わりに画像が表示されます。画像制作時に文字も埋め込みましょう。
「画像サイズ」では、縦のサイズを入れます。縦横比一定で幅も拡大・縮小されます。
スマホでは、ロゴ画像は上のように表示されます。
ロゴ画像の大きさは任意ですが、パソコンの場合は縦が最大120px、スマホの場合は最大80pxのため、縦120px/幅600～1000pxくらいにするのが良いと思えます。
ヘッダーメニューの位置（PC）
【ヘッダーのレイアウト設定（PC）】
ヘッダーメニューの位置については、4つの中から選択できます。
- ロゴ画像（※ロゴ画像は左端）の右側（右寄せ）
- ロゴ画像（※ロゴ画像は左端）の右側（左寄せ）
- ロゴ画像（※ロゴ画像は中央）の下側
- ロゴ画像（※ロゴ画像は中央）の上側
詳細については、公式サイトの解説ページに画像付きで書かれています。
ヘッダーメニューの位置（SP）
【ヘッダーのレイアウト設定（SP）】
スマホの場合、ヘッダーメニューは三本線の中に収まっています。
ヘッダーメニューの位置については、3つの中から選択できます。
- ロゴ画像（※ロゴ画像は左端）の右側（右寄せ）
- ロゴ画像（※ロゴ画像は中央）の右側（右寄せ）
- ロゴ画像（※ロゴ画像は中央）の左側（左寄せ）
詳細については、公式サイトの解説ページに画像付きで書かれています。
メインビジュアルの上にヘッダーメニューをかぶせる
【トップページでの特別設定】
メインビジュアルの上にヘッダーメニューをかぶせることもできます。
ロゴ画像を使っても、テキストのみでもこの設定は行なえます。テキスト色は白色か黒色かを選べます。
ただし、パソコンのヘッダーレイアウトは横並びにする必要があります。
詳細については、公式サイトの解説ページに画像付きで書かれています。
ヘッダーの追従設定
通情は、ヘッダーを追従させるようにしておくと便利です。
上の画像のように、ページを下の方へスクロールしても、ヘッダーがしっかり表示されたままになっています。
スマホの場合も同様です。
「追従ヘッダー（PC）の背景不透明度」のデフォルト値は1です。通常はデフォルトのままで大丈夫です。
この値を例えば「0.1」にすると、上の画像のように、ヘッダーエリア内でも本文が透けて見えるようになります。
ヘッダーバーの設定
ヘッダーバーとは、上の画像の場合、一番上のオレンジ色エリアのことです。デフォルトでは単色（メインカラー）の細いバーが表示されているだけです。
「外観」→「カスタマイズ」→「ヘッダー」で「ヘッダーバー背景色」「ヘッダーバー文字色」を任意のカラーへ変更することもできます。
ヘッダーバーの右端には、デフォルトでは「RSSページ」へのリンクアイコンがついているだけです。
「外観」→「カスタマイズ」→「SNS情報」で、ツイッターへのリンクを貼ってみます。
ヘッダーバーに、ツイッターページへのリンクアイコンが追加されました。
キャッチフレーズ設定
「キャッチフレーズ」は、WordPressのダッシュボードの「設定」→「一般設定」の「キャッチフレーズ」で設定します。
「ヘッダーバーに表示」にすると、ヘッダーバーに表示されます。
その下の欄にチェックを入れると、サイトのタイトルも加えることができます。
また、「ヘッダーロゴの近くに表示」にすると、ヘッダーロゴの右横、もしくは下に表示されます。
その下の欄にチェックを入れると、サイトのタイトルも加えることができます。
ヘッダーメニュー（グローバルナビ）設定
ヘッダーメニュー（グローバルメニュー）とは、上の画像のように、ヘッダーエリアに表示されるメニューのことです。
ヘッダーメニューでマウスをホバーした時のエフェクトには、以下の5種類があります。
- ラインの出現（中央から）
- ラインの出現（左から）
- ブロックの出現
- 背景グレー
- 背景明るく
ヘッダーメニューをロゴの上または下に表示させた時も、同様のエフェクト設定が行えます。
「ラインの出現」にすると、マウスホバー時に、上の画像のような細いラインが出現します。
「ブロックの出現」にすると、マウスホバー時に、上の画像のような太い線が出現します。
「背景グレー」にすると、マウスホバー時に、上の画像のようなグレーが出現します。
「背景明るく」にすると、マウスホバー時に、背景が明るくなります。
また、サブメニューを設定している際は、サブメニューの背景色を「ホワイト」もしくは「メインカラー」にすることができます、
さらに、ヘッダーメニューがヘッダーロゴの上もしくは下にある場合、ヘッダーメニューの色を任意のカラーにすることもできます。
スマホ用ヘッダーメニューの設定
スマホ用のヘッダーメニュー設定としては、「ヘッダーメニューをループさせる」ことができます。
ヘッダーでの「検索ボタン」設置
「検索ボタン」は自サイト内での検索を行うツールです。
パソコンでは、「ヘッダー内のアイコンリストに表示」もしくは「ヘッダーメニューに表示」させることができます。
「ヘッダー内のアイコンリストに表示」させた場合、上の画像のように、アイコン横に「検索ボタン」が設置されます。
「ヘッダーメニューに表示」させた場合、上の画像のように、ヘッダーメニュー横に「検索ボタン」が設置されます。
スマホの場合、「カスタムボタンに設置」させることができます。
「カスタムボタンに設置」した場合、上の画像のように、サイトのタイトル横に「検索ボタン」が設置されます。
スマホヘッダーに表示するボタンの設定
スマホのヘッダーには、「メニューボタン」と「カスタムボタン」の2つを設置することができます。
メニューボタンは「≡」で表示されているメニューのことです。
「アイコン下に表示するテキスト」はデフォルトでは空欄で何も表示されませんが、「≡」の下に「MENU」などの文字を表示させることが可能です。
また、「メニューボタンの背景色」によって、メニューボタンの背景色を変えることができます。
「カスタムメニュー」に関しては、デフォルトで「検索ボタン」が表示されていますが、別のものへ変更することが可能です。
上記の例では、問い合わせページへのリンクボタンに変更しています。アイコンや、アイコン下のテキスト、カスタムボタンの背景色、リンク先を任意のものに変更することが可能です。
ただし、リンク先を任意のものにしたい場合は、「検索ボタンの表示設定（SP）」を「表示しない」に設定してください。
④フッター周りの設定
SWELL公式の解説ページ：④フッター周りの設定方法
フッターのカラー設定
フッター周りの設定に関しては、「外観」→「カスタマイズ」→「フッター」で行います。
「フッター背景色」と「フッター文字色」については任意のカラーへ変更することができます。
こんな感じでアクセントになります。
コピーライトの直前のエリアが、フッターのウィジェットエリアです。
「ウィジェットエリアの背景色」から、カラーの変更が行なえます。
また、「ウィジェットエリアの文字色」を変更することもできます。
「コピーライト設定からは、「コピーライトのテキスト」の変更が行なえます。
「その他の設定」からは、「フッターとフッター直前ウィジェットの間の余白をなくす」設定や、「フッターにSNSアイコンリストを表示する」設定が行なえます。
フッターメニューの設定
ダッシュボードの「外観」→「メニュー」から、フッタメニューを作成することができます。
フッターメニューを初めて作る場合は、「新しいメニューを作成しましょう」をクリックします。
「メニュー名」に「フッターメニュー」と入力し、「メニュー設定」で「フッター」にチェックを入れ、「メニューを作成」をクリックします。
フッターメニューが出来上がると、上の画像のように、SNSアイコンとコピーライトの間に表示されます。
フッター周りで使用できるウィジェット
フッター周りで使用できるウィジェットについては、5種類あります。
ダッシュボードの「外観」の「ウィジェット」から設定を行います。
詳細については、SWELL公式ページの解説を参照してください。
⑤サイドバーの設定
SWELL公式の解説ページ：⑤サイドバーの設定
最初に「外観」→「カスタマイズ」→「サイドバー」を開きます。
サイドバーを表示するかどうか、サイドバーの位置（右・左）をどうするか設定が行えます。
また、「外観」→「カスタマイズ」→「サイト全体設定」→「タイトルデザイン」から、ウィジェットのタイトルのデザインを設定することができます。
例えば、「サイドバーのタイトルデザイン」を「左に縦線」にしてみます。
上の画像のように、ウィジェットのタイトルにメインカラーの縦線が入ります。
⑥スマホメニューの設定
SWELL公式の解説ページ：⑤スマホメニューの設定方法
スマホメニューとは、スマホの「≡」ボタンをタップすることで表示されるメニューのことです。
最初に「外観」→「カスタマイズ」→「サイト全体設計」→「スマホ開閉メニュー」を開きます。
カラー設定
「カラー設定」では、「文字色」「背景色」などを変更することができます。
デフォルトの「文字色」は黒、「背景色」は白ですが、例えば「文字色」を紫、「背景色」を淡黄にすると、上の画像のようになります。
表示設定
「表示設定」では、「メインメニュー上に表示するタイトル」をつけることができます。
例えば「メニュー」とすると、上の画像のように表示されます。
また、「メインメニュー上に表示するタイトル」のデザインを変える場合は、「外観」→「カスタマイズ」→「サイト全体設計」で「タイトルデザイン」をクリックします。
一番下に「スマホメニュー内のタイトルデザイン」という項目があります。
例えば「左に縦線」を選ぶと、上の画像のように表示されます。
スマホメニューの内容をグローバルナビと異なるものにしたい場合は？
デフォルトでは、グローバルナビと同じものがスマホメニューにも表示されるようになっています。
グローバルナビと異なる内容のものをスマホメニューに表示する方法については、公式ページに書かれています。
投稿記事一覧の表示設定｜モバイルで投稿リストを2列表示にする方法、カテゴリーを非表示にする方法は？
トップページに投稿記事一覧を表示させるような場合、カード形式で表示させると美しいビジュアルになります。
スマホ画面でも、2列表示にすることが可能です。
「外観」→「カスタマイズ」→「記事一覧リスト」の「リストのレイアウト設定」を開きます。
モバイルで2列表示させたい場合は、「2カラム」を選択します。
カテゴリーの表示・非表示も選択できます。
また、サムネイル画像の縦横比率も変更できます。
サイト名・検索バーの位置
「外観」→「カスタマイズ」 で「ヘッダー」をクリックします。
「レイアウト・デザイン設定」の「ヘッダーナビ」を変更するとブログサイト名・ナビの位置を変更できます。
さらに下へスクロールし、「検索ボタン設定」で検索バーの位置を変更することもできます。
公式ページでは、
「ヘッダーカラーの設定」「ヘッダーロゴ画像の設定」「ヘッダーのレイアウト・デザイン設定」「トップページでの特別設定」「ヘッダーの追従設定」「ヘッダーバーの設定」「SNSアイコンリストについて」「キャッチフレーズ設定」「ヘッダーメニュー（グローバルメニュー）設定」「検索ボタンの設定」「スマホヘッダーに表示するボタンの設定」「お知らせバーの設定」
について詳しく書かれています。
フッター周りの設定についても、公式ページに書かれています。
サイドバーの設定についても、公式ページに書かれています。各ページごとに、表示・非表示にすることも可能です。
スマホメニューの設定についても、公式ページに書かれています。
公式ページの「サイトのベースとなるデザイン・レイアウトの設定方法」の項目では、「基本デザインの設定（「フォント設定」「コンテンツ幅の設定」など）」「NO IMAGE 画像の設定」「タイトルデザインの設定」「コンテンツヘッダーの設定」「お知らせバーの設定（下記も参照）」「パンくずリストの設定（下記も参照）」「ページャーのデザイン設定（下記も参照）」「サイドバーの表示設定」について書かれています。
お知らせバーの表示と設定
「外観」→「カスタマイズ」 の 「サイト全体設計」で「お知らせバー」をクリックします。
バーの配置場所やカラーなどを任意のものへ変更できます。
パンくずリストのレイアウト変更
「外観」→「カスタマイズ」 の 「サイト全体設計」で「パンくずリスト」をクリックします。
パンくずリストの位置や、背景表示などを変更できます。
ページャーのデザイン
「外観」→「カスタマイズ」 の 「サイト全体設計」で「ページャー」をクリックします。
ページャーのデザインを変更できます。
トップページのメインビジュアルと記事スライダー
「外観」→「カスタマイズ」 の「トップページ」で「メインビジュアル」をクリックします。
「メインビジュアルの表示内容」で「表示しない」にチェックを入れると、デフォルトの画像が非表示になります。
また、「トップページ」で「記事スライダー」をクリックすると、記事スライダーの設置・非設置を選択できます。
記事スライダーの詳細については、公式マニュアルに書かれています。
公式マニュアルではピックアップした記事のみを記事スライダーに載せる方法について触れられていません。
しかし、特定「タグ」の記事のみを指定することができるため、このタグ指定を行えば、掲載記事をピックアップすることが可能です。
画面右下の「トップへ戻る」「目次」ボタンの設置
「外観」→「カスタマイズ」 の 「サイト全体設計」 で「下部固定ボタン・メニュー」をクリックします。
パソコンやスマホ画面右下に、トップへ戻るボタンと「目次」ボタンを設置することができます。
Font Awesomeの読み込み
ダッシュボードの「SWELL設定」の「SWELL設定」で「Font Awesome」タブをクリックします。
Font Awesomeの読み込み方法について選択できます。
サイト運営者のSNSアカウント情報を設定する方法
「サイト運営者のSNSアカウント情報を設定する方法」については、公式ページに書かれています。
フォント基本サイズの変更
「外観」→「カスタマイズ」→「サイト全体設計」→「基本デザイン」の中にある「フォント設定」で調整できます。
メニュー画面（グローバルメニュー）のデザイン
グルーバルメニューは、トップページの上部に表示されるナビゲーションメニューのことです。
ここでは「問い合わせ」という文字のみが表示されています。
ダッシュボードの「外観」→「メニュー」で、最初に右上の「表示オプション」パネルを開きます。
「説明」にチェックを入れます。
「説明」欄に英語を書き加えます。
グローバルメニューに英語が併記されるようになりました。
ピックアップバナーの設置
トップページに表示させたいリンクをカード形式で並べることができます。
詳細については、公式マニューアルに書かれています。
投稿・固定ページのデザイン
投稿・固定ページのデザインに関する主なものをまとめました。
著者情報の表示・非表示
「外観」→「カスタマイズ」 の 「投稿・固定ページ」 の「記事下エリア」をクリックします。
記事下に、著者情報（「この記事を書いた人」）の表示をつけることができます。
著者情報が不要な場合は、「著者情報を表示」のチェックを外します。
記事タイトル上のアイキャッチ画像の表示・非表示
「外観」→「カスタマイズ」 → 「投稿・固定ページ」の 「アイキャッチ画像」を開きます。
「本文の始めにアイキャッチ画像を表示」のチェック有無で表示・非表示の変更が行なえます。
リンクを貼ったテキストにアンダーバーをつけたい時は？
「外観」→「カスタマイズ」 の 「投稿・固定ページ」の「コンテンツのデザイン」から変更が行なえます。
「テキストリンクにアンダーラインを付ける」にチェックをします。
記事に表示されるSNSシェアボタンの変更
「外観」→「カスタマイズ」で「投稿・固定ページ」をクリックします。
「SNSシェアボタン」をクリックすると、シェアボタンの変更が行なえます。
なお、SNSボタンの飛び先については、「外観」→「カスタマイズ」の「SNS情報」で指定することができます。
目次スタイルを変える方法
デフォルトでは、目次に自動で番号が振られるようになっています。
「外観」→「カスタマイズ」 → 「投稿・固定ページ」の「目次」を開きます。
「ulタグ」に変更すると、番号がなくなり、すっきりします。
フロントページに目次を表示する方法は？
「固定ページ」に目次が表示されるよう設定しても、トップページの固定ページには目次が表示されません。
その場合、目次を貼りたい場所へ以下のコードを貼りつけると、そこに目次が表示されます。
<div class="p-toc -simple"><span class="p-toc__ttl">目次</span></div>また、「ボックス」にする場合は「-simple」の部分を「-capbox」へ、「上下２重線」にする場合は「-double」へ変更します。
前後記事へのページリンク・関連記事の表示・非表示
「外観」→「カスタマイズ」で「投稿・固定ページ」をクリックします。
「前後記事へのページリンクを表示」や「関連記事を表示」のチェックの有無で表示・非表示を変更することができます。
ツイッター・Facebookのフォロワーを増やす方法
投稿ページの末尾に、ツイッターやFacebookへのフォローを促す文言を加えることができます。
「外観」→「カスタマイズ」の「投稿・固定ページ」で「記事下エリア」をクリックします。
「Twitterフォローボタン」や「Facebookいいねボタン」にチェックを入れると、リンク先URLを入力する画面が開きます。
こんな感じでフォローを促すバナーが自動作成されるので便利ですね。
記事内パーツのデザイン
記事内のパーツのデザインについてまとめました。
表デザインのスタイル変更
「スタイル」や「表の設定」から、好みのレイアウトへ変更できます。
ブログカード（リンク）のスタイル変更
SWELLの機能の中で個人的に好きな機能の一つがブログカードです。
他の有料テーマではブログカードをオリジナルコードで作成しているものが多く見られますが、SWELLでは、URLを記事本文にペーストするだけでブログカードが完成します。
また、ブログカードのデザインを変更することもできます。
ダッシュボードの「SWELL設定」の「エディター設定」で「その他」タブをクリックします。
ブログカード（内部）・ブログカード（外部）ともに、デザイン変更が可能です。
ふきだしの作り方
シンプルなふきだしの作り方や、アイコン画像付きのふきだしの作り方については、[マニュアル]に詳しく書かれています。
Q&Aの作り方は？
投稿画面で「＋」マークをクリックし、「SWELLブロック」の「FAQ」をクリックします。
本文を入力します。
右端の線上をクリックし、ブロック全体を選択します。
「Q]と「A」の形状や、カラーを変更することができます。
アイコンの使い方は？
SWELLでは、簡単なショートコードでアイコンを使うことができます。
アイコンの使い方については公式ページで説明されています。
SWELLで使えるアイコン一覧についても、公式ページで説明されています。