当ブログではアフィリエイト広告を利用しています。ごゆるりとご覧ください。
前編では、SWELLを導入した後にまず確認しておきたい、テーマと子テーマの関係、ユーザー認証、不要・非推奨プラグインの確認、高速化とキャッシュ、遅延読み込み、機能停止設定、そしてブログのメインカラーの決め方までを紹介しました。
▼前編はこちら
後編となるこの記事では、ヘッダーロゴ、ファビコン、ヘッダーとグローバルメニュー、フッター、記事ページのデザイン、SEO SIMPLE PACKによるOGPの設定など、読者が実際に目にする部分を中心に、初心者の私が行った設定を順番に紹介していきます。
10．ヘッダーロゴを設定する
ヘッダーは、ブログの上部に表示される部分です。
サイト名を文字で表示することもできますが、私はブログ専用のロゴ画像を作成して設定しました。
ロゴを設定する場所は、SWELLのバージョンや画面によって多少異なる場合がありますが、カスタマイズ内のヘッダーやロゴ設定から行います。
ロゴ画像を作るときに意識したこと
私は次の点を意識してロゴを作りました。
- ブログ名が読める
- 横長でヘッダーに収まりやすい
- 背景が透過されている
- スマートフォンでもつぶれない
- 色を使いすぎない
- ブログ全体の雰囲気に合っている
最初に作ったロゴは、画像としてはきれいでも、スマートフォンで見ると文字が小さくなりました。
ロゴは大きな画像として見るだけでなく、実際のヘッダーに設定して確認することが大切です。
ロゴの表示サイズを確認する
ロゴを設定した後は、次の画面で確認します。
- パソコンのトップページ
- パソコンの記事ページ
- スマートフォンのトップページ
- スマートフォンの記事ページ
パソコンではちょうどよくても、スマートフォンでは大きすぎたり、小さすぎたりすることがあります。
SWELLのカスタマイズ画面では、パソコン、タブレット、スマートフォンの表示を切り替えて確認できます。
11．ファビコンを設定する
ファビコンとは、ブラウザのタブやブックマークなどに表示される小さなアイコンです。
WordPressの設定画面では、主に「サイトアイコン」という名称で表示されます。
設定する場所は、
「外観」→「カスタマイズ」→「WordPress設定」→「サイト基本情報」
です。画面内にある「サイトアイコン」から画像を設定します。
ファビコンは小さく表示されるため、細かい文字や複雑な絵は見えにくくなります。
私は、ブログロゴをそのまま縮小するのではなく、ロゴの一部や頭文字を使った、シンプルな画像にしました。
ファビコンで意識すること
- 正方形の画像を使う
- 小さくても形が分かる
- 細かい文字を入れない
- ブログロゴと同じ雰囲気にする
- 背景色との境目が分かるようにする
ファビコンは記事内容には直接関係しませんが、設定しておくとブログらしさが出ます。
ブラウザで複数のタブを開いたときにも、自分のブログを見つけやすくなります。
ただし、設定してもGoogleの検索結果などへすぐに反映されるとは限りません。まずは、自分のブラウザのタブで正しく表示されるかを確認します。
12．ヘッダーとグローバルメニューを整える
次に、ヘッダー周辺を整えます。
ヘッダーには、主に次のものを表示できます。
- ブログロゴ
- グローバルメニュー
- 検索ボタン
- SNSアイコン
- お知らせ
- キャッチフレーズ
初心者の段階では、すべて表示する必要はありません。
私は、ブログロゴと主要なメニューを中心に、できるだけシンプルにしました。
グローバルメニューとは
グローバルメニューは、ブログの上部に表示される主要メニューです。
読者に見てもらいたいページやカテゴリーを設定します。
例えば、次のような項目です。
- ホーム
- ブログの始め方
- WordPress
- SWELL
- 運営者情報
- お問い合わせ
ただし、記事数が少ない段階でカテゴリーを細かく分けすぎると、中身のないメニューが増えてしまいます。
私は、記事が増えるまでは必要最低限にすることにしました。
メニューを作る方法
WordPress管理画面から、
「外観」→「メニュー」
または、カスタマイズ内のメニュー設定を開きます。
新しいメニューを作成し、表示したいページやカテゴリーを追加します。
最後に、メニューを表示する場所として、ヘッダーやグローバルナビを選びます。
スマートフォンメニューも確認する
パソコンでは横並びに表示されるメニューも、スマートフォンでは三本線のメニューボタンに収納されることがあります。
スマートフォンで実際にメニューを開き、
- 項目が表示されるか
- リンク先が正しいか
- 文字が途中で切れていないか
- 閉じるボタンが使えるか
を確認します。
13．フッターを整える
フッターは、ブログの一番下に表示される部分です。
ヘッダーほど目立ちませんが、運営者情報やプライバシーポリシーなどを置く重要な場所です。
私のブログでは、主に次のページをフッターへ表示しました。
- 運営者情報
- プライバシーポリシー
- お問い合わせ
- 読者向けサイトマップ（記事一覧などをまとめた固定ページ。後述するXMLサイトマップとは別物です）
固定ページそのものはPart1の作業で作成しているため、ここではSWELL上での表示確認だけを行います。
フッターメニューを設定する
WordPress管理画面からメニューを作成し、表示場所としてフッターを選びます。
設定後、ブログの一番下までスクロールして確認します。
リンクを押して、正しいページが表示されるかも確認します。
コピーライトを確認する
フッターには、ブログ名や著作権表示が表示されます。
必要に応じて、ブログ名が正しく表示されているか確認します。
ただし、無理に長い文章を入れる必要はありません。
フッターは、読者が必要な情報を見つけられるよう、シンプルにした方が分かりやすいと思います。
14．記事ページのデザインを確認する
SWELLでは、記事ページの表示も細かく調整できます。
外観→カスタマイズ内の、
「投稿・固定ページ」
などの項目を開きます。
例えばタイトルは以下の画面です。
確認する主な項目は次のとおりです。
- 記事タイトルの表示
- 公開日の表示
- 更新日の表示
- 著者名
- アイキャッチ画像
- 目次
- SNSシェアボタン
- 記事下の著者情報
- 関連記事
- 前の記事・次の記事
- パンくずリスト
すべて表示すると情報が多くなる
SWELLには多くの表示機能があります。
便利だからといってすべて表示すると、記事本文以外の情報が増えすぎる場合があります。
私は、読者が記事を読みやすいことを優先して、必要な項目だけを表示する方針にしました。
公開日と更新日
記事を公開した日と、後から内容を修正した日を表示できます。
設定方法やサービス内容に関する記事は、情報が古くなる可能性があります。
そのため、更新日が分かるようにしておくと、読者が情報の新しさを判断しやすくなります。
目次
長い記事では、目次があると読みたい場所へ移動しやすくなります。
SWELLには目次機能があるため、別の目次プラグインは導入しませんでした。
目次は、記事内の見出しをもとに自動で作られます。
そのため、記事を書くときには、
- H2
- H3
- 必要な場合だけH4
という順番を意識します。
見た目を大きくするためだけに見出しを使うと、目次の構造も分かりにくくなります。
アイキャッチ画像
アイキャッチ画像は、記事一覧やSNSで記事を紹介するときに使われる画像です。
私は最初、アイキャッチ画像を設定しないまま記事を公開しようとしていました。
しかし、記事ごとにアイキャッチ画像を設定すると、記事一覧で内容が分かりやすくなります。
このブログでは、デザインを大きく変えすぎず、統一したテンプレートを使う方針にしました。
記事タイトルやテーマに合わせて文字を変更し、ブログ全体の雰囲気をそろえます。
運営者情報
記事の下に、運営者プロフィールを表示できます。
私は、60代のブログ初心者として試行錯誤していることがブログの特徴だと思っています。
そのため、記事を書いた人が分かるように、簡単なプロフィールを表示することにしました。
ただし、長い自己紹介を毎回表示する必要はありません。
詳しい内容は運営者情報ページへリンクし、記事下には短い紹介だけを置きます。
15．SEO SIMPLE PACKとOGPを設定する
SWELL本体には、サイトの表示や記事作成に関する機能が多数あります。
一方、SEOタイトル、メタディスクリプション、OGPなどの設定には、SEO SIMPLE PACKを使用します。
SEO SIMPLE PACKはSWELLと同じ開発者によるプラグインで、ページごとのメタタグやOGPタグを設定できます。SWELL公式の推奨プラグイン解説ページでも、SEO対策プラグインとして案内されています。
SEO SIMPLE PACKを有効化する
WordPress管理画面から、
「プラグイン」→「新規プラグインを追加」
を開きます。
「SEO SIMPLE PACK」と検索し、インストールして有効化します。
すでに導入済みの場合は、最新状態になっているか確認します。
基本設定を確認する
WordPress管理画面に追加された、
「SEO PACK」
を開きます。
主に確認するのは次の項目です。
- フロントページのタイトルタグと説明文
- タイトルタグの区切り文字
- 投稿ページのタイトル形式
- 固定ページのタイトル形式
- インデックス設定
- OGP設定
最初からすべての項目を変更する必要はありません。
よく分からない設定は、初期状態のままにしました。
メタディスクリプションとは
メタディスクリプションは、検索結果で記事タイトルの下に表示されることがある説明文です。
記事編集画面のSEO SIMPLE PACK欄にある、
「このページのディスクリプション」
へ入力します。
例えば、この記事では次のような文章にします。
60代のブログ初心者が、SWELL導入後に行った初期設定15項目を実体験をもとに解説。子テーマ、ユーザー認証、高速化、キャッシュ、遅延読み込み、ロゴ、ファビコン、メニュー、SEO SIMPLE PACK、OGPの設定を紹介します。
検索した人に、
- 何が書かれている記事か
- 自分に必要な内容があるか
- 初心者向けか
- 実体験が含まれているか
を伝える役割があります。
ただし、メタディスクリプションを入力しても、Googleが必ずその文章をそのまま検索結果へ表示するとは限りません。検索語句に応じて、記事本文から別の文章が選ばれることもあります。それでも、記事の内容を簡潔に伝える文章を設定しておくことには意味があります。
OGPとは
OGPは、記事のURLをSNSやメッセージで共有したときに、タイトル、説明文、画像などを表示するための情報です。
例えば、XやFacebookなどへ記事URLを貼ったときに、画像付きのカードが表示されることがあります。
そのときに使用される画像がOGP画像です。
OGP画像を設定する
SEO SIMPLE PACKのOGP設定画面を開き、サイト全体で使用する基本画像を設定します。
記事ごとにアイキャッチ画像が設定されていれば、その画像が使用される場合があります。
アイキャッチ画像がないページでは、サイト全体のOGP画像が使われることがあります。
そのため、ブログ名が分かる共通のOGP画像を一枚設定しておくと安心です。
私のブログでは、ロゴやブログ名を使った「Serene Life」専用のOGP画像を設定しました。
OGP画像とアイキャッチ画像の違い
似ていますが、役割が少し違います。
| 画像 | 主な用途 |
|---|---|
| アイキャッチ画像 | 記事一覧や記事ページに表示され、記事をSNSなどで共有した際のOGP画像として使われる場合もある |
| デフォルトOGP画像 | アイキャッチ画像などが設定されていないページを共有した場合に使われる予備画像 |
| ロゴ | ブログのヘッダーなどで使用 |
| ファビコン | ブラウザのタブ、ブックマーク、検索結果などで使用される場合がある |
記事ごとにアイキャッチ画像を設定し、アイキャッチ画像がないページの予備として、サイト全体のデフォルトOGP画像を設定すると考えると分かりやすくなります。
SEO SIMPLE PACKにサイトマップ機能はない
注意したいのは、SEO SIMPLE PACKにはXMLサイトマップを作成する機能がないことです。
この点は、SWELL公式の推奨プラグイン解説ページでも明記されています。専用のサイトマップが必要な場合の候補としては、「XML Sitemap & Google News」というプラグインが案内されています。
一方、現在のWordPress本体にも、標準のXMLサイトマップ機能（wp-sitemap.xml）があります。
ここで一つ、見落としやすい注意点があります。
SWELLでは、初期状態でWordPress本体のサイトマップ生成機能が停止されています。
これは、サイトマッププラグインをすでに使用している環境で、サイトマップ機能が重複しないようにするためです。
WordPress標準のサイトマップを使用する場合は、
「SWELL設定」→「機能停止」
を開き、
「コアのサイトマップ機能を停止する」
のチェックを外して保存します。
その後、通常は次のURLへアクセスして、サイトマップが表示されるか確認します。
https://自分のドメイン/wp-sitemap.xml
このURLでサイトマップを使用する場合は、Google Search Consoleのサイトマップ欄へ、
wp-sitemap.xml
を送信します。
すでにサイトマップ作成プラグインを使用している場合は、プラグインが指定するサイトマップURLを確認します。WordPress標準機能とプラグインの両方を有効にすると、サイトマップが重複する可能性があるため注意が必要です。
小規模なブログでは、まずWordPress標準のサイトマップを使用し、より細かな設定が必要になった段階で専用プラグインを検討する方法もあります。
サイトマップの確認とGoogle Search Consoleへの送信については、SWELLのデザイン設定とは別の作業になるため、別記事で詳しく説明します。
SWELL設定後にスマートフォンで確認する
私は普段、Androidスマートフォンでもブログを確認しています。
SWELLのカスタマイズ画面にはスマートフォン表示のプレビューがありますが、最後は実際のスマートフォンで確認することが大切です。
ヘッダー
- ロゴが大きすぎないか
- ロゴの文字が読めるか
- メニューボタンが押せるか
- ヘッダーが画面を占領しすぎていないか
記事本文
- 文字が小さすぎないか
- 行間が狭すぎないか
- 見出しが目立ちすぎていないか
- 表が画面からはみ出していないか
- 画像が切れていないか
- ボタンを押せるか
記事下
- プロフィールが崩れていないか
- SNSボタンが多すぎないか
- 関連記事が正しく表示されるか
- フッターメニューが使えるか
パソコンではきれいに見えていても、スマートフォンでは一行が短くなり、文章が長く感じられることがあります。
私は、記事を公開する前にスマートフォンで読み直し、長すぎる段落を分けるようにしています。
SWELL設定で初心者の私が迷ったこと
SWELLは初心者にも使いやすいテーマだと思います。
ただし、「使いやすい」ということと、「設定項目が少ない」ということは同じではありません。
実際には、多くの機能があるからこそ、最初は迷いました。
「SWELL設定→SEO」が見つからなかった
私は最初、SWELL設定の中にSEO設定があると思い、探していました。
しかし、SEOタイトルやメタディスクリプション、OGPなどの設定は、基本的にSEO SIMPLE PACK側で行います。
そのため、
- SWELL設定：高速化やテーマ機能
- カスタマイズ：ブログのデザイン
- SEO SIMPLE PACK：SEOやOGP
と分けて考えると分かりやすくなりました。
高速化のチェック欄が多かった
高速化設定には、キャッシュや遅延読み込みなど、多くの項目があります。
キャッシュ項目は公式でも基本的に全部オンでよいと分かりましたが、遅延読み込みやスクリプト関連の項目まで一気に変更すると、不具合が出たときに原因を特定しにくくなります。
今は、キャッシュ以外の項目は一つずつ設定して表示を確認する方が安全だと思っています。
設定変更が反映されないことがあった
ロゴや色を変更しても、すぐに表示が変わらないことがありました。
このような場合、設定ミスだけでなく、キャッシュが原因になっていることがあります。
- カスタマイズ画面で公開を押したか
- SWELLのキャッシュが残っていないか
- ブラウザに古い表示が残っていないか
- 別の端末ではどう見えるか
を確認しました。
ブログをおしゃれにしようとして作業が進まなかった
SWELLでは、色、見出し、ボタン、ヘッダー、フッターなどを細かく調整できます。
設定を始めると、少し変えては確認する作業が続きます。
私は途中で、記事を書くよりデザインを触っている時間の方が長くなりました。
ブログで最も大切なのは、読者に役立つ記事を書くことです。
最低限の見た目を整えたら、一度設定を止め、記事作成へ進むことも必要だと感じました。
SWELL導入後の初期設定チェックリスト
最後に、SWELLを導入した後に確認した項目をまとめます。
テーマと認証
- SWELL本体がインストールされている
- テーマファイルやPHPをカスタマイズする場合は、SWELL CHILDを有効化している
- 親テーマを削除していない
- SWELLのユーザー認証が完了している
- 更新情報を確認できる
プラグイン
- SWELLと機能が重複していない
- 不要・非推奨プラグインを確認した
- 目次プラグインを重複させていない
- キャッシュ機能を重複させていない
- SEO SIMPLE PACKを有効化した
高速化
- 高速化設定の場所を確認した
- 動的なCSSのキャッシュを確認した
- 遅延読み込みを確認した
- 一度にすべて変更していない
- 設定後に表示を確認した
- キャッシュの削除方法を確認した
デザイン
- メインカラーを決めた
- 文字が読みやすい
- 背景色との組み合わせに問題がない
- ヘッダーロゴを設定した
- ファビコンを設定した
- パソコンとスマートフォンで確認した
メニュー
- グローバルメニューを設定した
- 中身のないカテゴリーを並べていない
- スマートフォンメニューを確認した
- フッターメニューを設定した
- 固定ページへのリンクが正しい
記事ページ
- アイキャッチ画像の表示を確認した
- 目次の表示を確認した
- 公開日と更新日を確認した
- 著者情報を確認した
- SNSボタンを確認した
- 関連記事を確認した
SEO・OGP
- SEO SIMPLE PACKの基本設定を確認した
- サイト全体のOGP画像を設定した
- 記事ごとにアイキャッチ画像を設定した
- メタディスクリプションの入力欄を確認した
- WordPress標準サイトマップを使う場合は「機能停止」で解除した
- サイトマップ機能が重複していない
すべてにチェックが入らなくても、ブログの記事は書き始められます。
最初に必要なのは、完璧な設定ではなく、読者が問題なく記事を読める状態にすることです。
SWELLの初期設定に関するよくある質問
SWELLの設定は全部変更する必要がありますか？
いいえ。SWELLは初期状態でも使用できます。意味が分からない項目を無理に変更すると、表示が崩れる原因になるため、まず必要な項目だけを設定し、運営しながら調整する方が安全です。
親テーマと子テーマのどちらを有効化しますか？
SWELLのカスタマイズ機能だけを使って運営する場合は、親テーマのSWELLを有効化したままでも使用できます。
一方、子テーマのstyle.cssやfunctions.php、テンプレートファイルなどをカスタマイズする場合は、変更内容がテーマ更新で失われないよう、SWELL CHILDを有効化しておくと安心です。
私のブログでは、今後カスタマイズする可能性を考えて、SWELL CHILDを有効化しました。
子テーマを使用する場合も、親テーマであるSWELL本体は必要なので削除しません。
SWELLだけでSEO対策はできますか？
SWELLにはSEOを意識した構造や表示機能がありますが、SEOタイトル、メタディスクリプション、OGPなどの管理には、SEO SIMPLE PACKを使用します。
SWELL公式でもSEO SIMPLE PACKが推奨プラグインとして案内されています。
キャッシュは全部有効にした方がよいですか？
SWELL標準のキャッシュ項目については、特別なカスタマイズをしていなければ、公式でも基本的にすべてオンにすることが推奨されています。
ただし、SWELLと同じような処理をする外部のキャッシュ・高速化プラグインを追加する場合は、表示が崩れたり、変更が反映されにくくなったりすることがあります。仕組みを理解してから追加する方が安心です。
SWELLに目次プラグインは必要ですか？
SWELLには目次機能があるため、通常は別の目次プラグインを追加する必要はありません。
複数の目次機能を使うと、目次が二重に表示される可能性があります。
アイキャッチ画像は記事ごとに変えますか？
基本的には記事ごとに変更します。
ただし、ブログ全体の統一感を出すため、同じテンプレートを使い、タイトルやイラストだけを変更する方法があります。
私のブログでも、Serene Life専用のアイキャッチテンプレートを使う方針にしました。
ロゴ、ファビコン、OGP画像は同じ画像ですか？
役割が違うため、別々の画像を用意する方が使いやすいです。
- ロゴは横長
- ファビコンは正方形でシンプル
- OGP画像はSNSで見やすい横長
- アイキャッチ画像は記事ごとに変更
という形が分かりやすいと思います。
設定を変更しても反映されない場合はどうしますか？
次の順番で確認します。
- カスタマイズ画面で「公開」を押したか
- ページを再読み込みする
- ブラウザのキャッシュを確認する
- SWELLのキャッシュを削除する
- シークレットモードで確認する
- 別の端末で確認する
- プラグインとの競合を確認する
一度に多くの設定を変更すると原因を見つけにくくなるため、一つずつ確認します。
おまけ SWELL初期設定チェックリスト（PDF保存推奨）
- ⬜︎ SWELL本体と子テーマを確認する
- ⬜︎ ユーザー認証を行う
- ⬜︎ 不要・非推奨プラグインを確認する
- ⬜︎ 設定画面の違いを知る
- ⬜︎ 化設定を確認する
- ⬜︎ キャッシュ機能を設定する
- ⬜︎ 読み込みを確認する
- ⬜︎ 停止設定を確認する
- ⬜︎ カラーを決める
- ⬜︎ ヘッダーロゴを設定する
- ⬜︎ ファビコンを設定する
- ⬜︎ ヘッダーとメニューを整える
- ⬜︎ フッターを整える
- ⬜︎ 記事ページのデザインを確認する
- ⬜︎ SEO SIMPLE PACKとOGPを設定する
まとめ｜SWELLは最初から完璧に設定しなくてもよい
今回は、SWELLを導入した後に行った初期設定を15項目に分けて紹介しました。
主な設定は次のとおりです。
- SWELL本体と子テーマを確認する
- ユーザー認証を行う
- 不要・非推奨プラグインを確認する
- 設定画面の違いを知る
- 高速化設定を確認する
- キャッシュ機能を設定する
- 遅延読み込みを確認する
- 機能停止設定を確認する
- サイトカラーを決める
- ヘッダーロゴを設定する
- ファビコンを設定する
- ヘッダーとメニューを整える
- フッターを整える
- 記事ページのデザインを確認する
- SEO SIMPLE PACKとOGPを設定する
SWELLを導入した直後は、設定できる項目の多さに驚きました。
「有料テーマを購入したのだから、すべて使いこなさなければならない」
と思っていたところもあります。
しかし、実際には、最初からすべてを設定する必要はありません。
私はまず、
- ブログが正しく表示される
- スマートフォンでも読める
- ロゴとメニューが表示される
- 記事を書ける
- SEOの基本情報を入力できる
という状態を目指しました。
ブログの色や細かなデザインは、記事を書きながら後から変更できます。
むしろ、最初に設定ばかり続けていると、いつまでも記事が増えません。
SWELLは設定項目が多いテーマですが、一つずつ確認すれば、初心者でも少しずつ自分のブログらしいデザインを作れます。
私も60代の初心者として、分からない項目を調べ、画面を確認しながら設定してきました。
一度に完璧にしようとせず、まずは記事を書ける状態まで整える。
それが、SWELLの初期設定で最も大切なことだと思います。
次の記事では、記事を公開した後に行う、Google Search Consoleでのインデックス登録、Google Analyticsのアクセス確認、内部リンク、SNSへの投稿などを、チェックリスト形式で紹介します。
SWELLのご購入はこちら↓
