SWELLのトップページをおしゃれに！カスタマイズのやり方大全

この記事で解決できる悩み

こんな悩みを解決する記事を用意しました！

ボクの初めてのブログも「30万PV」を超えるメディアに成長しました！

本記事の信頼性

『SWELL』のトップページを〝おしゃれかつカッコよく〟カスタマイズしたくありませんか？

そこで、記事の前半で「現役WebデザイナーがSWELLのトップページをサイト型に切り替える方法」を。

後半では「トップページを含むヘッダー・フッターのカスタマイズのやり方」について完全解説します。

本記事を最後まで読むことで、初めてでも『SWELL』のトップページをおしゃれにカスタマイズできますよ！

SWELLのトップページは「サイト型＋記事一覧」がおすすめ！

WordPressのトップページは「ブログ型」がデフォルトです。

新着記事が並ぶ「記事一覧型」ですね。

これを本記事では「サイト型＋記事一覧」にカスタマイズしていきます！

新着記事一覧もあったほうがいいですからね。

そこで、まずは「準備」です👇️

この章のもくじ

サクッと終わりますよ！

ステップ①固定ページでトップページと記事一覧を作る

トップページと記事一覧ページは「固定ページ」で作ります。

とはいえ、次の２つを決めて「公開」するだけ。

これだけ

中身は「空」でOKです。

表は横にスクロールできます

タイトルは管理者（あなた）にしか表示されないので、そのまんま「トップページ・記事一覧」でOK。

リンクは何を設定しても、「トップページのURL」に切り替わります。

とはいえ、「記事一覧ページ」は設定したとおり採用されるので・・・

記事一覧のURL

このあたりを設定するのが一般的ですね。

それぞれ「公開」しただけでは切り替わらないので、とりあえず公開しちゃってください。

ステップ②ホームページ設定する

トップページの切り替えはここで行います。

ホームページ設定

「公開」をクリック。

とはいえ、今やらなくても「カスタマイズ後」でもいいですよ。

ステップ③その他の設定をする

サイト型のトップページに「サイドバー」はいらないですよね？

3-1：サイドバーを非表示にする

「トップページにサイドバーを表示する」の✅️を外してください。

3-2：コンテンツ上の余白量を「なし」にする

「コンテンツ上の余白量」を「なし」にしましょう。

わかりにくいですが「なし」にしないと、ヘッダーとメインエリアのあいだに〝変な余白〟ができてしまうんです。

3-3：「フッター」と「フッター直前ウィジェット」の間の余白をなくす

【「フッター」と「フッター直前ウィジェット」の間の余白をなくす】の✅️を外してください。

これもわかりにくいですが、メインエリアとフッターのあいだに〝変な余白〟ができてしまうからですね。

【SWELL】カスタマイズのやり方【トップページ編】

SWELLカスタマイズのやり方「トップページ編」は、次のとおり。

この章のもくじ

AFFINGER6で作られた当サイトを「SWELLで作るなら？」

をコンセプトに「デモサイト」を用意したので、別タブで開きながら読み進めてくださいね！

まずは、サイトの顔「メインビジュアル」から👇️

その①メインビジュアル（動画）

メインビジュアルには「画像 or 動画」を設置できます。

メインビジュアルの表示内容

せっかくなので、「動画」にしました！

素材は『動画AC』で無料ダウンロードできますよ。

表示設定

「Scrollボタンを表示する」のがおすすめ。

メインビジュアルの高さ設定

デモサイトのように「ウィンドウサイズにフィットさせる」なら、とくにですね。

フィルター処理

動画（画像）の上に「フィルター」もかけられますよ。

オーバーレイカラー

動画（画像）は「PCとSP」。

動画の場合は「動画が読み込まれるまでに表示される画像」まで設定できます。

動画の設定

さらに、動画（画像）の上に「テキスト＋ボタン」も入れられるんです。

動画の設定

「テキスト＋ボタン」だけでなく、「ブログパーツ」から呼び出すこともできますよ。

メインビジュアルのカスタマイズ

それぞれ解説しますね。

テキストをGoogleフォントに

デモサイトは「メインビジュアルのみ筆記体」にしています。

これがEmbed code

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap" rel="stylesheet">

「追加CSS」の場所はここです👇️

「メインテキストとサブテキストにのみ」適用させるCSSが、次のとおり。

これがCSS

.p-mainVisual__slideTitle,
.p-mainVisual__slideText {
  font-family: "Noto Serif JP", serif;
}

これでメインビジュアルがGoogleフォントになりますよ。

サイト全体にも適用できますが、重くなるので「デフォルト」の中から選びましょう。

メインビジュアルにブログパーツ

メインビジュアルのデフォルトのボタンはシンプル過ぎますからね。

メインビジュアルを設定したら、ヘッダーは「透明」にするのがオススメ！

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

デモサイトは「ロゴ画像」を「白黒」で使い分けています。

関連記事SWELLの画像サイズまとめ｜アイキャッチ・メインビジュアルなど

関連記事SWELLのブログパーツの作り方３ステップと６つの使い方

その②記事スライダー

トップページには「記事スライダー or ピックアップバナー」のどちらかを設置しましょう。

どっちにする？

両方あるとクドいですからね。

個人的には、「ピックアップバナー」のほうがオススメです。

「記事スライダー」を非表示にしたいなら、「設置しない」を選んでください。

記事スライダーを設置するかどうか

ここからは「記事スライダー」をカスタマイズしたい人向けです👇️

記事のピックアップ方法

ピックアップする記事は「カテゴリーID or タグ名」で指定できます。

記事の表示設定

「タイトル」「カテゴリー・タグ名」「公開日・更新日」もカスタマイズし放題！

スライド設定

スライドの「枚数」や「速度」もカスタマイズできますよ。

その他の表示設定

記事スライダーの下には「ピックアップバナー」が設置されます。

その③ピックアップバナー

ピックアップバナーは「メニュー」から設定します。

「メニューを新規作成」をクリック。

新規メニュー

「次」をクリック。

中身を入れていきます。「＋ 項目を追加」をクリック。

投稿記事を設置するのが一般的ですね。

投稿

「投稿」から「＋」をクリックして追加してください。

ドラッグすると、並び替えることができますよ。

さいごに「公開」をクリック。

また、バナーに表示されるテキスト（ナビゲーションラベル）は自由に変更できます。

「<br>」タグを入れれば〝改行〟もできますよ。

では、ピックアップバナーをカスタマイズしていきましょう。

バナーレイアウト

PCで「固定幅 4列」、スマホでは「固定幅 2列」がデフォルトです。

バナーデザイン

デモサイトは「中央（シンプル）」「内側に白線をつける」「バナー画像を少し暗くする」にしています。

その他

ピックアップバナーはトップページ以外にも表示できますよ。

その④フルワイド

大前提として、トップページには「フルワイドブロック」を使いましょう。

要するに、こういうことです👇️

トップページの作り方

「フルワイド」と言っても、幅は「３通り」あります。

コンテンツサイズ

「背景色」も変えられるし、背景を「画像」にもできますよ。

境界線の形状

デモサイトは背景を「斜線」にして、レベルを「MAX（5）」にしています。

その⑤見出し（セクション用）

フルワイドを選ぶと、自動で「見出し」が入ります。

見出しは「２種類」あるんです。

見出し

セクション見出しには、「投稿記事用の見出し」とは別にカスタマイズが用意されています。

とはいえ、２つだけ。

セクション見出しのデザイン設定

セクション見出しには「H2」しかありません。

なので、見出しを「画像」にしてもいいですね！

見出しを画像にする方法

インライン画像は「ブロックツールバー」の「ᐯ（下矢印）」の中にありますよ。

その⑥ロードマップ（投稿リスト）

「ロードマップ」という名目で「読んでもらいたい記事」を配置しています。

メニューバー右の「Pickup」をクリック。

投稿リストのカスタマイズ

あとは「表示設定」です。

表示設定

デモサイトはこの４つをカスタマイズしています。

記事へのボタン

さいごに「ロードマップ記事」へのボタンを設置しました。

その⑦記事一覧（投稿リスト）

新着記事一覧も「投稿リスト」で設置します。

「デフォルト」でこうなります👇️

投稿リストのデフォルト

デモサイトはレイアウトを「リスト型（左右交互）」にしています。

あとは、最初に作った「記事一覧ページ」へリンクを渡すだけ。

記事一覧ページへのボタン

表示テキストは「もっと読む」とかでもいいですね。

記事一覧ページへのリンクは「post（相対パス）」だけでOK。

その⑧プロフィール（リッチカラム＋SWELLボタン）

トップページには「サイドバー」がないので、さいごに「プロフィール」を用意しました。

カラムとは「列」のこと。コンテンツを横並びにできるブロックです。

プロフィール

「50 / 50」をクリック。

列数

左のブロックがスマホでは上に来ます。

画像を「アップロード or メディアライブラリ」から選んでください。

スタイル

「名前」と「プロフィール文」は説明不要ですね！

ボタンのスタイルは「キラッと」がおすすめ。

スタイル

「ボタンの計測設定」はかならず有効化しましょう。

ボタンのカスタマイズ

デモサイトには「アイコン」も設置してみました。

関連記事【84種一覧】SWELLアイコンの入れ方｜色やサイズの変更方法も

【SWELL】カスタマイズのやり方【ヘッダー編】

SWELLカスタマイズのやり方「ヘッダー編」は、次のとおり。

この章のもくじ

ヘッダーも実質「トップページ」みたいなもんですよね！

その①ヘッダーの背景色

ヘッダーのカスタマイズはここで行います。

カラー設定

『SWELL』の背景色は「真っ白（#fff）」じゃないんですよね。

「ヘッダーバー」や「ロゴ画像」に合わせて決めてくださいね。

その②ヘッダーロゴ

ヘッダーロゴはなるべく「画像」にしましょう◎

「画像を選択」をクリック。

推奨サイズはありませんが、公式サイトのロゴは「1600 × 360px」ですね。

「代替テキスト」には「サイトのタイトル（ブログ名）」を入れてください。

画像サイズ

これは「好み」ですね。

デモサイトの画像サイズ

デモサイトの画像サイズは上記のとおりです。

関連記事SWELLの画像サイズまとめ｜アイキャッチ・メインビジュアルなど

その③ヘッダーバー

ヘッダーバーは、いかにも『SWELL』なデザインですよね。

ヘッダーバー設定

設定していれば、「キャッチフレーズ」もここに表示されます。

ヘッダーバーを非表示にする方法

これで「ヘッダーバー」が非表示になりますよ。

その④グローバルナビ

ヘッダーには「グローバルナビ（メニュー）」を設置しましょう。

一般的に「個人ブログ」なら、こんな感じ👇️

グローバルナビ

ぜんぶ公開済みの前提で進めますね。

「メニューを新規作成」をクリック。

せっかくなので、スマホ用のメニューも一緒に作ってしまいましょう！

新規メニュー

「次」をクリック。

中身を入れていきます。「＋ 項目を追加」をクリック。

固定ページ

「固定ページ」から「＋」をクリックして追加してください。

カテゴリー

ドラッグすると、並び替えることができますよ。

さいごに「公開」をクリック。

新しく「グローバルナビ」を設置すると、デフォルトのメニューから切り替わります。

また、メニューの横に「アイコン」を入れたいですよね？

ナビゲーションラベル

アイコンのクラス名は「SWELLで使えるアイコン一覧」からどうぞ。

テキストの横に「半角スペース」を入れるのがオススメです。

ではグローバルナビというか、「ヘッダー周り」をカスタマイズしていきましょう。

レイアウト・デザイン設定

ここでは「ロゴとナビメニューのレイアウト」をカスタマイズできます。

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

ヘッダーの背景を「透明」にすると、メインビジュアルに迫力が出ていいですよね。

ヘッダーの追従設定

デフォルトで「ヘッダーは追従」します。

ヘッダーメニュー（グローバルナビ）設定

「ホバー」とは、カーソルを合わせた時のこと。

ヘッダーとは別に、「ヘッダーメニューの背景色」も指定できますよ。

関連記事【84種一覧】SWELLアイコンの入れ方｜色やサイズの変更方法も

その⑤スマホ用ヘッダー

「スマホ用ヘッダー」は、PC用グローバルナビの「スマホ版」ですね。

２種類のスマホ用ナビ

「スマホ用ヘッダー」の設定は１つだけ👇️

ヘッダーメニュー（SP）設定

スマホは横幅が狭いので、メニューが多い場合は✅️を入れましょう。

とはいえ、次の「スマホ開閉メニュー」があれば不要です。

その⑥スマホ開閉メニュー内

まずは、ヘッダー右の「検索ボタン」のカスタマイズから。

検索ボタン設定

つぎに、ヘッダー左の「メニューボタン」です。

メニューボタン設定

「検索ボタン」を「お問い合わせフォーム」などに変更することもできます。

カスタムボタン設定

アイコンは公式サイト「SWELLで使えるアイコン一覧」で探してくださいね。

また、「スマホメニュー内のタイトルデザイン」も変更できます。

スマホメニュー内のタイトルデザインは、次の４種類👇️

ウィジェットタイトル

デフォルトは「塗り」になります。

関連記事【84種一覧】SWELLアイコンの入れ方｜色やサイズの変更方法も

その⑦お知らせバー

「お知らせバー」はデフォルトでは非表示になっています。

いちばん「読んでもらいたい記事」を設置するといいですよ。

お知らせバーの表示位置

デモサイトは「下部」に表示しています。

表示内容の設定

サイトが重くなりますが、「テキストを横に流す」こともできますよ。

背景効果

デモサイトは「斜めストライプ」にしています（トップページのみ非表示）。

カラー設定

目立つので、お知らせバーの「背景色」はメインカラーとは別でもいいですね。

【SWELL】カスタマイズのやり方【フッター編】

SWELLカスタマイズのやり方「フッター編」は、次のとおり。

この章のもくじ

フッターとその上にくる「ウィジェットエリア」まで完全解説しますね！

その①フッターの背景色

「フッターの背景色」をメインカラーにしたいなら、ここで変更しましょう。

カラー設定

※「ウィジェットエリア」はあとで作ります。

フッターの背景色に合わせて「文字色」も変えてくださいね。

その②コピーライト

コピーライトは、デフォルトではこうなります👇️

コピーライトのテキスト

ブログ名が入っていますよね。

コピーライトのテキスト

「© 発行年 サイトのタイトル」とするのが一般的です。

とはいえ、「発行年」の記載がないからといって、著作権を放棄したことにはならないので大丈夫。

その③SNSアイコンリスト

「フッターにSNSアイコンリストを表示する」に✅️を入れると、コピーライトの上にSNSアイコンが並びます。

SNSアイコンは以下に入力したものが表示されますよ👇️

SNSリンク設定

なお、順番は変えられません。

その④フッターメニュー

ヘッダーとは別に、フッターにもメニューを設置しましょう。

一般的に「個人ブログ」なら、こんな感じ👇️

フッターメニュー

ぜんぶ「固定ページ」で作り、公開している前提で進めますね。

「メニューを新規作成」をクリック。

新規メニュー

「次」をクリック。

中身を入れていきましょう。「＋ 項目を追加」をクリック。

固定ページ

「固定ページ」から「＋」をクリックして追加してください。

ドラッグすると、並び替えることができますよ。

さいごに「公開」をクリック。

フッターメニューが「SNSアイコンとコピーライトのあいだ」に設置されました。

その⑤固定フッター（SP）

フッターメニューとは別に、スマホ用の「固定フッター」を設置しましょう。

「メニューを新規作成」をクリック。

新規メニュー

「次」をクリック。

中身を入れていきましょう。「＋ 項目を追加」をクリック。

「公開」すると、デフォルトでいちばん左に「メニュー開閉ボタン」が入ります。

メニュー項目

「＋」をクリックして追加してください。

「カスタムリンク」を使えば、YouTubeなどの外部サイトを設置することもできます。

「リンクを新しいタブで開く」に✅️を入れてくださいね。

また、固定フッターには「アイコン」も入れられます。

アイコンの例

アイコン名は公式サイト「SWELLで使えるアイコン一覧」でコピーできますよ。

「説明」にペーストしてくださいね。

ドラッグして並び替えたら、「公開」をクリック。

では、固定フッターをカスタマイズしていきましょう。

特殊メニューボタンの表示設定

デモサイトは「メニュー開閉ボタン」以外を設置しました。

ラベルテキスト

テキストも自由に変えられますよ。

仕上げ

さいごに、メニューの「背景色・文字色・不透明度」をカスタマイズしたら完成です！

関連記事【84種一覧】SWELLアイコンの入れ方｜色やサイズの変更方法も

その⑥フッター直前（ブログパーツ）

「フッター直前」の「リンクについて」は『SWELLの公式サイト』と同じように「ブログパーツ」で呼び出しています。

「フッター直前」に追加したい「ブロック」を作ります。

ブログパーツの作り方

あとはショートコード[blog_parts id="XXX"]をペーストするだけ。

左の「利用できるウィジェット」から「テキスト」を「フッター直前」に追加してください。

フッター直前のカスタマイズ

ブログパーツを使えば、「複数のブロック」だって追加できますよ。

関連記事SWELLのブログパーツの作り方３ステップと６つの使い方

その⑦フッター内部（検索＋人気記事＋プロモーションバナー）

「フッター内部」には、４つのウィジェットを追加できます。

フッター内部

※「フッター（スマホ）」にウィジェットを追加すると、スマホでは「フッター（PC）1・2・3」は非表示になります。

トップページには「サイドバー」がないので、サイドバーと同じコンテンツを入れてみましょう。

フッター内部

「検索」は「フッター（PC）1」に追加するだけ。

「[SWELL] 人気記事」のカスタマイズは、次のとおり。

人気記事のカスタマイズ

非表示にするページを選択

なるべく「シンプル」にしたいですね。

「[SWELL] プロモーションバナー」は次のとおり。

プロモーションバナーのカスタマイズ

アフィリエイトリンクは「以下だけ」をコピペしてください。

このあたりのカスタマイズは「サイドバー編」でくわしく解説しています。

その⑧タイトルデザイン

フッターのタイトルデザインは、次の３種類👇️

ウィジェットタイトル

デモサイトはデフォルトの「下線」にしています。

【SWELL】カスタマイズのやり方【全体編】

SWELLカスタマイズのやり方「全体編」は、次のとおり。

この章のもくじ

サクッと終わるので、最初に設定しちゃってもいいですね！

その①フォント

『SWELL』のフォントはここで変更できます。

フォント設定

まずは「ベースとなるフォント」から。

ベースとなるフォント

フォントファミリーは４種類のみ。

これは「好み or ジャンルと相談」ですね。

とはいえ、「ゴシック系」のほうが〝視認性が高い〟ので、あくまで「読者の読みやすさ」を優先しましょう。

フォントサイズ（PC・Tab）

フォントサイズは「14〜18px」で選べます。

デフォルトの「16px or それ以上」がおすすめ。これも〝読みやすさ〟ですね。

フォントサイズ（Mobile）

スマホのサイズは「固定サイズ or デバイス可変」。

「PC・Tab」を基準に「デバイスに合わせてサイズが変わる」デフォルトのままでいいでしょう。

字間（letter-spacing）

字と字の間隔を「Letter-spacing」と言います。

これもデフォルトの「標準（normal）」でいいですね。

その②全体カラー

全体カラーはここで変更できます。

基本カラー

とはいえ、「メインカラー」だけ変えればOK！

メインカラー

変えるだけで、ここらへんがバチッと決まりますよ。

その③サイトアイコン

これは『SWELL』というか、「WordPress側」での設定ですね。

サイト基本情報

サイトアイコン（faviconとも言う）のサイズは、「512px以上の正方形」が推奨されています。

設定しないと「WordPressのロゴのまま」なので、変更したいですよね。

関連記事SWELLの画像サイズまとめ｜アイキャッチ・メインビジュアルなど

【SWELL】カスタマイズのやり方【サイドバー編】

SWELLカスタマイズのやり方「サイドバー編」は、次のとおり。

この章のもくじ

トップページにサイドバーはいらなくても、記事の横には欲しいですよね？

まずは、デフォルトで入っている「サイドバーの中身」を削除しましょう。

その①サイドバーの中身を削除する

サイドバーの中身は「共通サイドバー」にあります。

デフォルト

デフォルトの「検索」はダサいので、いったん全部「削除」をクリック。

ウィジェットに「公開」などのボタンはなく、即反映されますよ。

また、以下の方法は「追加するウィジェットエリア」を変えれば、「フッター」でも「ヘッダー内部」でも通用します。

その②検索

左の「利用できるウィジェット」から「検索」をクリック。

「共通サイドバー」を選んで、「ウィジェットを追加」をクリック。

これだけで「サイドバー」に「検索」が追加されますよ。

場所は「いちばん上」がオススメです。

その③[SWELL] プロフィール

同じ要領で「サイドバー」に「プロフィールカード」を追加しましょう。

プロフィールのカスタマイズ

デモサイトは「プロフィール記事」をリンク先に指定しています。

その④[SWELL] 目次

「目次」こそサイドバーに入れましょう。

場所は「追尾サイドバー」一択！

『SWELL』ならプラグインなしで実装できますよ。

「タイトル」が空だと、「目次」と表示されます。

関連記事SWELLの目次の作り方｜サイドバーや表示されない時の対処法も

その⑤[SWELL] プロモーションバナー

サイドバーに「アフィリエイトリンクつきのバナー画像」を設置するのも◎

プロモーションバナーのカスタマイズ

アフィリエイトリンクは「以下だけ」をコピペしてくださいね。

とはいえ、アフィリエイトリンクを貼るなら、自由度の高い「広告コード」がおすすめ👇️

その⑥[SWELL] 広告コード

「バナー画像」も「バナー画像以外の広告タグ」も入れられます。

広告コードの貼り方

「広告タグ › 新規投稿を追加」をクリック。

広告タグの作り方

場所は「共通サイドバー」でも「追尾サイドバー」でも、どっちでもOK！

広告コード

さらに、広告コードの表示は「PCのみ or SPのみ」も選べますよ。

その⑦[SWELL] 人気記事

サイドバーに「人気記事」を設置するのも定番ですよね。

人気記事のカスタマイズ

リアルに「PV数の多い順」に記事が並びます。

非表示にするページを選択

おすすめは「投稿ページだけ」に表示すること。

その⑧[SWELL] 新着記事

「新着記事」も設置できます。

新着記事のカスタマイズ

同じように「投稿ページだけ」に表示するのがオススメ。

非表示にするページを選択

とはいえ、両方はクドいので「人気記事 or 新着記事」のどっちかにしましょう。

その⑨[SWELL] SNSリンク

「SNSリンクだけ」を設置することもできます。

SNSリンクのカスタマイズ

とはいえ、「プロフィールカード」のほうがおすすめです。

その⑩タイトルデザイン

サイドバーのタイトルデザインは、次の４種類👇️

ウィジェットタイトル

「PC」と「スマホ」でデザインを変えられますよ。

SWELLトップページのカスタマイズを承ります！

初めてでも『SWELL』のトップページがカスタマイズできるように完全解説しました！

とはいえ、カスタマイズ項目の多さに圧倒されましたよね？

ヘボにお任せください！

トップページのカスタマイズ以外もぜんぶやります！

「あなたは記事を書くだけ」でOK。

とはいえ、次の３つができなくなります👇️

できないこと

ボクの『SWELL』を使うことになるからですね。

とはいえ

本記事を読んで「自分ではできなそう…」と感じたら、「購入前」にご相談くださいね👇️

＼最高33万PVブロガー／

実質SWELLがもらえる！

【Q&A】SWELLのトップページのカスタマイズに関するよくある質問

SWELLのトップページのカスタマイズに関する「よくある質問（Q&A）」は次のとおり。

この章のもくじ

長くなってしまったので、一つだけ。

Q1：Swellのウィジェットはどこにありますか？

ASWELLのウィジェットには２通りの方法でたどり着けます。

ウィジェットの場所

わかりやすく「カスタマイズ」にまとめてくれてるんですね。

【まとめ】SWELLトップページのカスタマイズのやり方大全！

「SWELLトップページのカスタマイズのやり方」について解説しました。

まとめ

本記事をブックマークして、トップページをおしゃれにカスタマイズしてくださいね！

あとは記事を書くだけ👇️

合わせて読みたい

『SWELL』のセットアップは当サイトだけで完結しますよ！

SWELLを導入したい方へ