「ブログ・アフィリエイトサイトを始めたいけど、どのテーマを使えばいいかわからない」「SWELLが良いって聞くけど、設定が難しそう」と感じていませんか？
ブログテーマの中でも特に人気が高い「SWELL（スウェル）」は、その高機能性と使いやすさで多くのブロガーから支持されています。しかし、多機能ゆえに「どこから手をつければいいかわからない」と戸惑う初心者の方も少なくありません。
ご安心ください。本講座では、SWELLを導入したばかりのあなたが、サイトを公開する前に必ずやっておくべき初期カスタマイズ手順を、すべて画像付きでわかりやすく解説します。
さあ、一緒にSWELLを使いこなし、魅力的なブログを作り上げましょう！
SWELLとは？なぜSWELLを選ぶべきなのか？
SWELLの具体的なカスタマイズに入る前に、SWELLとはどのようなテーマなのか、なぜ多くのブロガーに選ばれているのかを知りたい方は、下記講座もあわせてご覧ください。
ワードプレスとSWELLを使用したウェブサイトのカスタマイズ方法
さっそくSWELL導入済の初心者の方向けにやるべきことを徹底解説していきたいところですが、先にブログ・ウェブサイトをカスタマイズする方法を簡単に紹介します。
ワードプレスとSWELLを使用したウェブサイトのカスタマイズ方法は大まかに分けると以下4種類あります。
1.ワードプレス本体のメニューやウィジェット設定
上記のように、ワードプレス標準機能としてメニューやウィジェット（サイドメニューやフッター等）が用意されています。
2.SWELLのカスタマイズメニュー
SWELLテーマを購入後にインストールしている場合のみ表示されるメニューで、サイト全体のデザインはほぼすべてここから変更できます。
3.SWELL設定
こちらもSWELL購入者限定メニューで、内部SEO（検索対策）に関係する設定と、一部の広告を表示するための設定となります。（基本的に最初設定すれば、後は変更することはありません）
4.エディター設定
同じくSWELL購入者限定メニューで、「SWELLのカスタマイズメニュー」同様にデザインに関わる設定なのですが、記事内の吹き出しやボダンなどのデザインに特化したメニューです。
1.ワードプレス本体のメニューやウィジェット設定
SWELLのカスタマイズに入る前に、最低限のワードプレス本体設定を終わらせましょう。本サイトの講座を順番に進めている方は準備済の作業となるため、スキップしてください。
（メニューやフッターなどは先に設定しておいた方がデザインをカスタマイズする際にイメージしやすいため）
上記2つの講座をマネした時点で下記のようなサイトが出来上っているはずです。（デザインは使用したデモサイトによって変わります）
2.SWELLのカスタマイズメニュー
いよいよSWELLのデザインカスタマイズを行います。ここでは、最低限最初に行うべき必須のカスタマイズを中心に解説していきますので、上から順番に設定すれば、サイトデザインはほぼ完成しますよ！
他にも変更したい箇所があれば、SWELLのマニュアル（公式サイト）を見てみましょう。
※指定の箇所だけ知りたい場合、Ctrl＋Fボタン同時押しで検索窓を表示し、「フッター」など関連するキーワードで検索してみてください。
SWELL：WordPress設定
サイトタイトル、キャッチフレーズ、サイトアイコンを設定します。アイコン以外はすでに設定済かと思いますが、変更する場合は参考にしてください。
すでに入力済かと思いますが、変更する場合は書き換えましょう。
※ここで設定したタイトルは検索画面やブックマークなどのタイトルで使用されます。また、キャッチフレーズは使用しているテーマやデザインによっては表示されない場合もあります
続いて、サイトアイコンを設定します。
サイトアイコン（ファビコン）の作成方法
サイトアイコンは、通常サイトロゴの画像サイズを変更して使用します。ロゴの作成方法については、姉妹サイトの以下キャンバス大学講座をご覧ください。
要素が真ん中に表示されるように切り抜き位置を調整してください。要素が見切れる場合、余白を大きくしたロゴを再作成しましょう。
左上の「公開」ボタンを押すと、右側のプレビュー画面だけではなく、公開しているウェブサイトにも反映されます。
SWELL：サイト全体設定
基本カラーや背景色など、サイト全体のデザインを変更できる重要な設定です。必須で見直すべき項目を一つずつ解説していきます。
※変更が必須ではない「タイトルデザイン」「コンテンツヘッダー」「パンくずリスト」「ページャー」「株固定ボタン・メニュー」は割愛します。気になる方はメニュー詳細が面を見てみてください。
基本カラー
「サイト全体設定」→「基本カラー」からメインカラー、テキストカラー、リンクカラー、背景色を変更できます。変更が完了したら、「公開」ボタンを押すことを忘れないようにしましょう。
※プレビュー画面のメインメニュー背景色（ピンク）は別途設定画面があり、メインカラーを変更しても反映されません。
基本デザイン
「サイト全体設定」→「基本デザイン」から全体の質感、フォント、コンテンツ幅、ページ背景などを変更できます。
ビジネス向けサイトであれば「全体に丸みをもたせる」のチェックを外すくらいで、余程こだわりがなければ他はそのままで構いません。
NO IMAGE画像
「サイト全体設定」→「NO IMAGE画像」から画像が設定されていない場合に表示される、「画像がありません用の画像」を表示できます。
リンク切れなどで表示される可能性もあるため、シンプルなものでいいのでサイトデザインに合わせて用意しておきましょう。
お知らせバー
「サイト全体設定」→「お知らせバー」からサイト上部、またはメニュー下に表示される「１行のお知らせ」を表示できます。リリース当初は不要だと思いますが、特に見てほしいページや広告用ページがあれば追加してみてください。
サイト開閉メニュー
「サイト全体設定」→「サイト開閉メニュー」からスマートフォンでサイトを表示している場合の開閉メニューデザインを設定できます。背景色をサイトのメインカラーに変更しておくと、全体のまとまりが出ますよ！
※右側のプレビュー画面をスマートフォン表示に変更するには、左下に表示されている「コントロールアイコン」が３つ並んでいるうち右側「スマートフォンアイコン」をクリックしてください。
SWELL：ヘッダー
ロゴなどが表示されているウェブサイトの上部をヘッダーと呼び、そのヘッダー部分を変更できます。オリジナルサイトにするためにも必須の設定となります。
カラー設定
ヘッダーの文字色（サイト名やキャッチフレーズ）、背景色を変更できます。おしゃれなサイトにしたい場合は、文字ではなくロゴ画像を作成して次のヘッダーロゴ設定することをおすすめします。
ヘッダーロゴの設定
ヘッダーの文字色（サイト名やキャッチフレーズ）、背景色を変更できます。おしゃれなサイトにしたい場合は、文字ではなくロゴ画像を作成して次のヘッダーロゴ設定することをおすすめします。
レイアウト・デザイン設定
メニュー含むヘッダーのレイアウトやでデザインパターンを変更できます。今回は見やすしさを優先し、「ヘッダーナビを下に」→「ヘッダーナビをロゴの横に（右寄せ）」に変更しました。
ヘッダーの追従設定
読者がページをスクロールした際、メニュー含むヘッダー部分を常に表示するか制御できます。読者になるべく多くのページを見てもらったほうがサイトの価値が高まるため、PCもSP（スマートフォン）も両方チェックを入れましょう。
ヘッダーバー設定
ヘッダーバー背景色、ヘッダーバー文字色SNSアイコン表示などを制御できます。SNSをされている方、またはサイトとSNSの相性の良いサイト（写真やイラスト系サイトや、トレンドサイト等）は必ず「SNSアイコンリストを表示する」にチェックを入れておきましょう。
キャッチフレーズ設定
サイトのキャッチフレーズを表示するか、または表示位置を設定できます。今回の事例サイトのようにサイト名やトップページからサイトコンセプトが分かりづらい場合や、メニューの数が少ないリリース当初は、表示しておくと読者にも内容が伝わりやすくておすすめです。
ヘッダーメニュー（グローバルナビ）設定
ヘッダーメニューのデザインやアニメーションを制御します。マウスホバーエフェクトは「ラインの出現」、または「背景明るく」がおすすめです。
また、下記画像のように「ヘッダーナビを下に」または「上に」でメニュー表示している場合、メニュー背景色はこちらの「ヘッダーメニューの背景色」で変更できます。
ヘッダーメニュー（SP）設定
スマートフォンでヘッダーメニューを設定している場合、メニューの数が少ないとループ（同じメニューが複数表示）されてしまいます。サイトリリース当初はヘッダーメニューも少ないと思いますので、ループしている場合には「ヘッダーメニューをループさせる」のチェックを外し、シンプルにしましょう。
検索ボタン設定
PC、SP（スマーフォン）それぞれに検索ボタンを表示するか設定できます。少しでも使いやすくするために、両方表示するようにしておきましょう。
メニューボタン設定
スマートフォンで表示される三本メニューに関する設定です。アイコン下には「MENU」や「メニュー」などと入れて分かるようにしましょう。
カスタムボタン設定
スマートフォンで通常表示されるカスタムボタンは「検索用の虫メガネアイコン」となっていますが、指定のページに変更することも可能です。（ウェブショップへ誘導したい場合はカートアイコンにする等）必要に応じて変更しましょう。
SWELL：フッター
ウェブサイトの一番下のエリアをフッターと呼び、そのフッター部分を変更できます。ヘッダー同様、必ず初期設定を行いましょう。
カラー設定
フッターの文字、背景色を変更できます。デザインに迷われたときは、背景色をメインカラーと同じにすることをおすすめします。全体のカラーが統一されて引き締まりますよ！
コピーライト設定
フッターに表示する著作権用の表示であるコピーライトの文字を変更できます。サイト名に変更しておきましょう。
SWELL：サイドバー
PCでサイト表示している場合には右側、スマートフォンの場合はコンテンツの下に表示されることになるサイドバーの表示を制御できます。
サイドバー設定
トップページ、投稿（記事）ページ、固定（お問い合わせやプライバシーポリシー等）ページ、アーカイブページにサイドバーを表示するか設定します。ページをすっきりと見せたいおしゃれなサイトであったり、企業サイトの場合はチェックを外して非表示にすることも検討しましょう。
今回の事例サイトでは、固定ページのみチェックを外します。（ページの性質上、外した方が見やすいため）
SWELL：トップページ
ブログ・サイトの顔であるトップページの表示内容を制御する重要な設定です。SWELLデモサイトの着せ替えデータを反映していて気に入っている場合は特に変更する必要がありませんが、調整したい方は参考にしてください。
※ピックアップバナーは初心者向けではありませんので、割愛いたします
メインビジュアル
トップページにメインビジュアルと呼ばれる大きな画像や動画を表示できます。以下、表示する場合の設定方法を案内します。
■ メインビジュアルの表示内容
表示しない、画像、動画から選択できます。動画はおしゃれ感やインパクトを演出できますが、表示に時間が掛かるなどデメリットも大きいため、余程の理由がなければ画像にしておきましょう。
（画像で訴求できるよう内容がないサイトの場合、メインビジュアルは非表示にしてファーストビューでコンテンツを見せた方が合理的です）
■ 表示設定
メインビジュアルの表示周りを制御できます。特に「メインビジュアルの高さ設定」、「フィルター処理」は調整するとデザインクオリティが上がります。
※特にSP（スマートフォン）は通常メインビジュアルが正方形くらい高くなっていますが、ファーストビューでコンテンツを見せたいため、低く変更することをおすすめします
■ 各スライドの設定
メインビジュアルの画像、画像上に表示するテキストやボタンを押したときのリンク先など、細かく設定できます。テキストを表示する場合には、スマートフォンの表示が見切れていないか、変なところで改行されていないか含めてチェックするようにしましょう。
記事スライダー
メインビジュアル下に表示される記事スライダーを制御できます。表示有無、表示する場合は対象の記事を限定したり、表示する枚数やスピードなどを変更できます。
その他
記事スライダーと下のコンテンツ（記事一覧など）の間隔を調整します。デフォルトで設定されている「標準」より、「狭め」または「なし」にしてなるべくコンテンツが見えるようにしましょう。
SWELL：投稿・固定ページ
投稿（記事）ページや、固定ページ（プライバシーポリシーやお問い合わせなど）のページを制御します。
タイトル
投稿ページ、固定ページのページタイトル表示位置や内容を設定できます。
■ 投稿ページ
投稿ページ内のタイトル表示を設定できます。日付は記事の鮮度として評価されるため、SEO的にも必ず「タイトル下に更新日を表示する」にチェックを入れておきましょう。
■ 固定ページ
固定ページではタイトルの表示位置、タイトルデザインのみ変更できます。
PR表記
リリース当初は広告を掲載しないと思いますので不要ですが、今後アクセスが増えて広告を掲載する場合には、必ずこちらからPR表記の設定を行いましょう。
コンテンツのデザイン
投稿（記事）ページや、固定ページ（プライバシーポリシーやお問い合わせなど）のコンテンツデザインを制御します。読者が最も頻繁に見る場所になりますので、見やすいようにカスタマイズしましょう。
■ 見出しのデザイン設定
投稿・固定ページ詳細の見出し（H2やH3で指定する記事中見出し）のデザインを設定できます。サイトコンセプトや読者層に合わせて固め、おしゃれ、見やすいなど工夫しましょう。
目次
投稿（記事）ページ内に見出し（H2やH3）が複数ある場合、目次として表示できる機能です。目次はページ途中にジャンプできるリンクが自動設定されますので、読者の利便性を考えて必ず活用しましょう。デザインは好みに合わせて設定すれば問題ありませんが、目次が多くなる場合には「どの階層の見出しまで抽出するか」を「h2」に変更しましょう。
SNSシェアボタン
投稿（記事）を読者が自分のアカウントで簡単にシェア（共有）できる機能です。正直余程のニュースバリューがない限りは使われないため表示しなくても問題ありませんが、表示したい場合でも「記事下部に表示する」のみチェックすることをおすすめします。（上部や横は邪魔になるだけです）
記事下エリア
投稿（記事）下に表示可能なSNSアクション、前後記事リンク、著者情報、関連記事、コメントの表示やデザインを制御できます。
※コメント機能については使われない、セキュリティリスクがある、管理が面倒などの理由により、非表示をおすすめします
■ SNSアクションエリア設定
先ほど紹介したのはSNSシェア用のボタンですが、こちらは自身のSNSアカウントにフォローしてもらうためのボタンです。アカウントを持っている場合は設定してもいいですが、サイト自体のヘッダーやフッターにもSNSボタンを表示している場合、くどいので非表示にしましょう。
■ 前後記事へのページリンク設定
読者に複数ページ見てもらうためにも、必ず前後記事へのページリンクは表示しましょう。サムネイル表示やデザインも表示できますので、できるだけデザイン性を上げます。
■ 著者情報エリアの設定
記事の著作者情報＝プロフィール情報を表示できます。検索エンジンは記事の作成者が信頼できるのかどうかもチェックしてサイトを上位表示しますので、可能であれば「著者情報を表示」にチェックを入れるか、ウィジェットでプロフィール情報を表示するようにしましょう。
表示するプロフィール内容を編集したい場合は、以下講座を参考にしてください。
■ 関連記事エリアの設定
関連記事の表示有無や表示する記事の指定（カテゴリやタグが同じものに限定するなど）が可能です。読者が無関係な記事に反応する可能性は限りなく低いので、必ず設定しておきましょう。
記事一覧リスト
トップページやカテゴリを推した後に表示される記事一覧部分の表示方法やデザインを制御できます。ウェブサイトのターゲット（読者）やコンセプトによって見せ方は変わってきますので、読者目線で考えて設計しましょう。
■ リストのレイアウト設定
記事の表示レイアウトを設定できます。記事の更新頻度が高い場合は「テキスト」や「カード型で3カラムにする」など、スクロールしなくてもできるだけ多くの記事が表示されるレイアウトを設定しましょう。
記事が少ないうちは「ブログ型」、増えてきたら「カード型」にするなど、状況によって変更するのもおすすめです。
■ 投稿情報の表示設定
日付や抜粋分の文字数など、一覧に表示する記事の表示項目を設定できます。特に抜粋分は初期設定だと文字数が多くなっていますので、できるだけ少なくして見やすいように変更しましょう。
■ カテゴリーの表示設定
記事リストに表示するカテゴリーの表示制御、デザインを設定できます。こちらもメインカラーにするとサイト全体のメリハリがなくなりますので、可能であればサブ（アクセント）カラーを設定しましょう。
■ サムネイル画像の比率設定
記事の画像サイズ（縦横比）を変更できます。こちらもできるだけ多くのコンテンツが表示されるように、横長のサイズがおすすめですが、使用しているアイキャッチのテンプレートによって適切なサイズが異なります。
■ タブ切り替え設定（トップページ）
トップページの記事一覧の上に、「新着記事」と「人気記事」の一覧を切り替えるタブを表示できます。読者は人気記事を見てみたいと感じることが多いため、できれば切り替えボタンを表示しておきましょう。
SNS情報
トップページ設定や投稿・固定ページ設定、ウィジェット設定などでSNSボタンを表示している場合、押したときに表示される各アカウントのURLを設定できます。
ここまでが「2.SWELLのカスタマイズメニュー」の設定となり、続いて「3.SWELL設定」「4.エディター設定」を行いますが、長くなりましたので講座を分けます。続けて設定を行う方は、以下よくある質問下に表示されている次の講座より、お進みください。
SWELLのカスタマイズメニューに関するよくある質問
SWELLの初期カスタマイズでよくある質問をまとめました。
まとめ
本講座ではSWELL初心者が最初にすべきデザインカスタマイズを中心にお届けました。大変長くなりましたが、みなさまついてこれましたでしょうか。
基本的に必要な変更点をお伝えしましたが、カスタマイズに正解はありません。また、読者のほとんどはGoogleなどの検索結果から直接記事ページに流入し、他のページに移動せずに離脱しますので、サイトデザインにこだわりすぎるのは時間がもったいないです。
後からいつでも変更できますので、デザインに使う時間はそこそこにして、記事作成に集中することをおすすめしますよ！
