
SWELLをカスタマイズ!サイト型トップページを作る具体的な方法
この記事は、SWELL独自の機能を組み合わせるだけ(ノーコード)で、サイト型のトップページを作る方法を具体的に紹介しています。

テーマ「SWELL」が好きすぎて、記事を書くよりSWELLをゴニョゴニョする時間の方が長くて本当に困ります。
SWELLは高機能なテーマです。
やれる事が本当にたくさんあるので、カスタマイズの自由度が高い!
記事を書きつつ、デザインを整えていく楽しみですよ。
\ノーコードでカスタマイズも自由自在/
私の運営サイト(バースデークリップ)のカスタマイズを順を追って詳細に書きました。
オリジナルのトップページを作る2つの作業
- 固定ページにトップ用のページを作る
- そのページをトップページに設定する
記事の内容(もくじ)
SWELL機能を使ってカスタマイズ
この記事で紹介するのは、自サイトバースデークリップのトップページです。
バースデークリップ


バースデークリップ | 子供に最高の誕生日を!お出かけや誕生会のヒント
子供の誕生日を祝うためのお出かけ情報や誕生日特典のお知らせ、子供向きのレストラン、自宅で祝う手作り誕生会の料理のヒント、バースデーカードや誕生日メッセージなどの…

自分の好みというかコンセプトは…
- 動く要素は入れない
情報発信が目的なので落ち着いた画面に - メリハリのあるデザイン
見て楽しい感じを求めて - 少しずつ小出しに見せる
ザッと見てサイトのイメージが伝わるよう - 気になる部分はすぐ変更
子供のように大事に育てたい!
先にも書きましたが、紹介するカスタマイズはすてべSWELLの機能だけを使っています。
コードはいじっていませんし、トップページのカスタマイズにプラグインは使っていません。
でもこれだけの事ができる!って、SWELL最高。
SWELL機能だけでトップページ用の固定ページを作るのに加え、ついでにヘッダー部分などの紹介もします。
つまり、バースデークリップのトップページにある要素すべての紹介です。
記事中頻出するカスタマイザーとは外観 → カスタマイズのことです。
\できるコトがたくさんある/
ヘッダー(コンテンツ上)のカスタマイズ
カスタマイズというより、SWELLのカスタマイザーで自分好みに仕上げた、というだけです。

メインコンテンツの上部(ヘッダー)
- お知らせバー
(カスタマイザー) - キャッチフレーズ
(カスタマイザー) - ロゴ
(カスタマイザー) - グローバルナビ
(メニュー+カスタマイザー) - ピックアップバナー
(メニュー+カスタマイザー)
①お知らせバー

表示させるテキストやURL、ボタンの有無、ボタンや背景のカラーなど自在に編集できます。
たった1つのリンクですから、大事です。
一押しのページやプロフィールへのリンク、アフィリエイトリンクなど何にでも使えます。
私の設定
- ヘッダー上部に表示
- 文字サイズ「大きく」
- 表示タイプ「ボタン設置」
- テキスト・URL・ボタンテキスト設定
- カラー設定
②キャッチフレーズ
少し踏み込んだサイトの内容やキーワードを埋め込んでアピールできます。
ロゴの真上にメインカラー+白抜きで表示されています。目に入りやすい!と思うので…
私の設定
- 位置「ヘッダーバーに表示」
③ロゴ
サイトの顔ですから、力を込めて作りたいですね。メッチャ安直なロゴを使っている私が言うのもナンですが…
私の設定
- 画像サイズ天地(px)
PC:70
PC追従ヘッダー:48
SP:64 - 実寸245×70pxで制作
- ロゴは透過PNGで
余談ですが、このロゴは無料ロゴメーカー「DesignEvo」で作りました。
\ヘッダ周りもおしゃれ/
④グローバルナビゲーション(ヘッダーメニュー)
ヘッダーに置く最も重要なナビゲーション。
WordPress基本機能の「メニュー」で作ります。
メニューの作り方
- メニュー画面で「新しいメニューを作成しましょう」をクリック
- 「メニュー名」を入力(日本語も可)
- 「メニュー作成」ボタンをクリック
- 「メニュー項目を追加」欄の必要な項目にチェックを入れ「メニュー追加」ボタンをクリック
- 並び順・表示名(ナビゲーションラベル)を調整
- メニュー設定「グローバルナビ 」にチェックをいれ「メニューを保存」ボタンをクリック
※グローバルナビはカテゴリーが一般的だけど、リンク先は自由自在です。
グローバルナビの調整
グローバルナビの位置を(ロゴの右、左、上、下)を選択できます。
私の設定
- 位置
PC:ロゴ横(左寄せ)
SP:ロゴ中央・メニュー左 - ヘッダー境界線:影
\まだまだ機能いっぱい!/
⑤ピックアップバナー
ピックアップバナーは2か所の設定が必要です。
- 「メニュー」でピックアップバナー用メニューを作る
- カスタマイザーで表示や装飾の設定
ピックアップバナーの作り方
- 新規メニュー作成(作り方はグローバルナビと同じ)
- ピックアップバナー用の画像をあらかじめアップロード
- メディアライブラリで目的の画像をクリック
- 開いたパレット右下「URL をクリップボードにコピー」をクリック
- (外観 →)メニューそれぞれの「説明」欄にペースト(下図参照)
- メニュー設定のメニューの位置「ピックアップバナー」にチェック
- メニューを保存

ピックアップバナーの設定
カスタマイザーで下記の設定をします。
- PC・スマホでのバナー横並び数
- バナータイトルの表示・非表示
- バナーの装飾
- 下層ページにも表示するかどうか
\使いたい機能ばっかりで迷う/
メインコンテンツ部分のカスタマイズ
新規の固定ページで作ります。
メインコンテンツ上部
- 新着記事
(投稿リスト) - よく読まれる記事
(投稿リスト)

⑥新着記事

見出し(h2)は「セクション用」。
新規記事をアピール。リスト型にして、抜粋も少し読んで~と期待。SPは画面を取り過ぎるので抜粋文なし。
私の設定
- 表示する投稿数 2
- リスト型
- 新着順
- 著者、PV数は非表示
- 日付(公開日)、カテゴリー表示
- カテゴリー位置は日付の横
- タイトルタグ h2
- 抜粋文 PC 120字・SP 0
- MOREリンク 無し
\表現多数で組み合わせが楽しい/
⑦よく読まれる記事

見出し(h2)は「セクション用」。
表示数はPCでもスマホでも不都合がないよう、6に。
スマホを2列にするには偶数が必要、PCでは4列がないので2列か3列。2列だと(画像が大きくて)画面がずっしり重くなるような気がするので、6コに決定。
私の設定
- 表示する投稿数 6
- カード型
- 人気順
- 日付、著者、PV数は無し
- カテゴリー表示
- タイトルタグ h2
- PC 3列 SP 2列
- 抜粋文 無し
- MOREリンク 無し
メインコンテンツ下部
- カテゴリー毎の人気記事(テキスト)
(投稿リスト) - あいさつ
(カラム) - カテゴリー毎の人気記事(サムネイル)
(カラム+投稿リスト+ボタン)

⑧カテゴリー毎の人気記事(テキスト)

投稿リスト(人気記事・テキスト)でカテゴリーをタブ切り替えで配置しました。
下方にサムネイル付きでカテゴリー毎の人気記事を紹介していますが、画像(サムネイル)がたくさんあるページ内のテキストは結構目立つので…。
また、ここら辺までしか読まない人も多いので…。
でも一番の理由はページレイアウトのメリハリ。単なる私の好みwww
タブの使い方動画(公式)
※SWELL公式サイト内には「タブ」の紹介ページがないような? 上記の動画で確認してください!
STEP
各タブにタイトルを設定
Tab 2以降は「+」をクリックしてタブを増やし、タイトルを入力。
STEP
タブ下の枠内でSWELLグロック「投稿リスト」を選択
STEP
STEP2で作った投稿リストをすべてのタブ内(タブタイトルの下)にコピペ
STEP
タブタイトルと同じカテゴリーを再選択
\タブは画面の有効活用/
⑨あいさつ文
- カラムブロックを挿入
- 2カラム(2/3・1/3)を選択
- 左カラムにあいさつ文を入力
- 右カラムに画像を挿入
- カラム全体を選択して背景色を設定
⑩カテゴリー毎の人気記事

カテゴリー毎の人気記事の手順
STEP
ブロックコンテンツ上で「カラム」を選ぶ
2カラム均等割りを選択
STEP
カラム内に見出しを追加
カテゴリ名を入力
STEP
SWELLブロックの「投稿リスト」を追加
紹介サイトの設定内容
Setting
- 表示投稿数 2
- カード型
- 人気順
- meta情報 非表示
- カテゴリー 非表示
- 最大カラム数 PC・SP両方2列
- 抜粋 文字数PC・SP両方0
可愛いボタンを使いたいので、MOREリンク無視。
Pickup
- カテゴリー選択
STEP
カテゴリー一覧ページへのボタン
SWELLブロックのSWELLボタンを選び、カテゴリー名とカテゴリーURLを入力
STEP
上記(見出し・投稿リスト・ボタン)を隣のカラムにすべてコピペ
同作業を何度も繰り返すのは大変なので、コピペして必要な部分だけ再選択
STEP
カラム全体を選択し、必要な個数分複製する
ブロックツールバー(右端)の詳細設定の「複製」
【カラム全体の選択方法】いずれか
1.左右カラムの中間あたりをクリック
2.カラム内にカーソルを置き、編集画面最下段のナビ(パンくずのような)でカラムをクリック
STEP
Settingはそのまま、Pickup(カテゴリーの再選択)とボタンの内容の書き換え
見出し、カテゴリー名、ボタンの変更
校正後、忘れずに「公開」して下記に進んでください。
固定ページをトップページに設定してカスタマイズ完了
出来上がった固定ページ(公開済み)を下記の手順でトップページに設定します。

固定ページ一覧画面を見ると、このページの横に「— フロントページ」と追加されています。
また固定ページの編集画面を見ると、パーマリンクがトップページのURLになっています。
サイドバーの設定

サイドバーはウィジェットで編集します。
「利用できるウィジェット」を右側のウィジェットエリアに追加
どちらかのやり方で…
- ドラッグ&ドロップ
- ▼ → エリアを選ぶ → ウィジェットを追加
「新着記事」や「人気記事」は表示数や表示させるカテゴリーや日付などが選べます。
SWELLのカスタマイズ機能
SWELLは高機能です。
HTMLやCSSがわからなくてもSWELLブロックなどの組み合わせで、とても素敵なトップページを作ることができます。
今回のカスタマイズには使いませんでしたが、ほかにもトップページを飾る機能がたくさんあります。
SWELL公式サイトのトップページのように、画面いっぱいに動画を配するとゴージャスな印象になりますね。
また、大き目のサムネイルを複数枚スライドさせる機能や、小ぶりなサムネイルの記事スライダーなど、動く機能もいろいろあります。
ブロックエディターの楽しいのは(HTMLを書かずに)それらを組み合わせてオリジナル感いっぱいのページを作れるところです。
私の理想は…
ブログの雰囲気を伝えつつ、サイト内にどんなコンテンツが隠れているかを十分に伝えるスッキリしたトップページです。