SWELLをカスタマイズ！サイト型トップページを作る具体的な方法

12

テーマ「SWELL」が好きすぎて、記事を書くよりSWELLをゴニョゴニョする時間の方が長くて本当に困ります。

SWELLは高機能なテーマです。やれる事が本当にたくさんあるので、カスタマイズの自由度も大きいです。

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

私の運営サイト（バースデークリップ）のカスタマイズを順を追って詳細に書きました。

オリジナルのトップページを作る2つの作業

1. 固定ページにトップ用のページを作る
2. そのページをトップページに設定する

SWELL機能を使ってカスタマイズ

この記事で紹介するのは、自サイトバースデークリップのトップページです。

バースデークリップを確認

自分の好みというかコンセプトは…

• 動く要素は入れない
  情報発信が目的なので落ち着いた画面に
• メリハリのあるデザイン
  見て楽しい感じを求めて
• 少しずつ小出しに見せる
  ザッと見てサイトのイメージが伝わるよう
• 気になる部分はすぐ変更
  子供のように大事に育てたい！

先にも書きましたが、紹介するカスタマイズはすてべSWELLの機能だけを使っています。

コードはいじっていませんし、トップページのカスタマイズにプラグインは使っていません。

でもこれだけの事ができる！って、SWELL最高。

画像と説明文が迷子にならないよう、いくつかに分けて紹介します

SWELL機能だけでトップページ用の固定ページを作るのに加え、ついでにヘッダー部分などの紹介もします。

つまり、バースデークリップのトップページにある要素すべての紹介です。

記事中頻出するカスタマイザーとは外観 → カスタマイズのことです。

トップページは、SWELLのカスタマイザーとSWELLブロックでできています。

ヘッダー（コンテンツ上）のカスタマイズ

カスタマイズというより、SWELLのカスタマイザーで自分好みに仕上げた、というだけです。

メインコンテンツの上部（ヘッダー）

1. お知らせバー
   （カスタマイザー）
2. キャッチフレーズ
   （カスタマイザー）
3. ロゴ
   （カスタマイザー）
4. グローバルナビ
   （メニュー＋カスタマイザー）
5. ピックアップバナー
   （メニュー＋カスタマイザー）

①お知らせバー

お知らせバー【SWELL公式】

外観 → カスタマイズ → サイト全体設定 → お知らせバー

表示させるテキストやURL、ボタンの有無、ボタンや背景のカラーなど自在に編集できます。

たった1つのリンクですから、大事です。

一押しのページやプロフィールへのリンク、アフィリエイトリンクなど何にでも使えます。

私の設定

• ヘッダー上部に表示
• 文字サイズ「大きく」
• 表示タイプ「ボタン設置」
• テキスト・URL・ボタンテキスト設定
• カラー設定

②キャッチフレーズ

キャッチフレーズ【SWELL公式】

外観 → カスタマイズ → ヘッダー → キャッチフレーズ設定

少し踏み込んだサイトの内容やキーワードを埋め込んでアピールできます。

ロゴの真上にメインカラー＋白抜きで表示されています。目に入りやすい！と思うので…

私の設定

• 位置「ヘッダーバーに表示」

③ロゴ

ロゴ【SWELL公式】

外観 → カスタマイズ → ヘッダー → ヘッダーロゴの設定

サイトの顔ですから、力を込めて作りたいですね。メッチャ安直なロゴを使っている私が言うのもナンですが…

私の設定

• 画像サイズ天地（px）
  PC：70
  PC追従ヘッダー：48
  SP：64
• 実寸245×70pxで制作
• ロゴは透過PNGで

余談ですが、このロゴは無料ロゴメーカー「DesignEvo」で作りました。

④グローバルナビゲーション（ヘッダーメニュー）

グローバルナビ【SWELL公式】

ヘッダーに置く最も重要なナビゲーション。

WordPress基本機能の「メニュー」で作ります。

メニューの作り方

外観 → メニュー

1. メニュー画面で「新しいメニューを作成しましょう」をクリック
2. 「メニュー名」を入力（日本語も可）
3. 「メニュー作成」ボタンをクリック
4. 「メニュー項目を追加」欄の必要な項目にチェックを入れ「メニュー追加」ボタンをクリック
5. 並び順・表示名（ナビゲーションラベル）を調整
6. メニュー設定「グローバルナビ 」にチェックをいれ「メニューを保存」ボタンをクリック

※グローバルナビはカテゴリーが一般的だけど、リンク先は自由自在です。

グローバルナビの調整

外観 → カスタマイズ → ヘッダー → レイアウト・デザイン設定

グローバルナビの位置を（ロゴの右、左、上、下）を選択できます。

私の設定

• 位置
  PC：ロゴ横（左寄せ）
  SP：ロゴ中央・メニュー左
• ヘッダー境界線：影

⑤ピックアップバナー

ピックアップバナー【SWELL公式】

ピックアップバナーは2か所の設定が必要です。

1. 「メニュー」でピックアップバナー用メニューを作る
2. カスタマイザーで表示や装飾の設定

ピックアップバナーの作り方

外観 → メニュー → ピックアップバナー用メニュー作成 → ピックアップバナー

1. 新規メニュー作成（作り方はグローバルナビと同じ）
2. ピックアップバナー用の画像をあらかじめアップロード
3. メディアライブラリで目的の画像をクリック
4. 開いたパレット右下「URL をクリップボードにコピー」をクリック
5. （外観 →）メニューそれぞれの「説明」欄にペースト（下図参照）
6. メニュー設定のメニューの位置「ピックアップバナー」にチェック
7. メニューを保存

ピックアップバナーの設定

外観 → カスタマイズ → トップページ → ピックアップバナー

カスタマイザーで下記の設定をします。

• PC・スマホでのバナー横並び数
• バナータイトルの表示・非表示
• バナーの装飾
• 下層ページにも表示するかどうか

記事ごとに表示・非表示が可能
投稿編集画面の右側「表示の上書き設定」で、ピックアップバナーの表示・非表示を選択できます。

メインコンテンツ部分のカスタマイズ

新規の固定ページで作ります。

左メニュー → 固定ページ → 新規追加

メインコンテンツ上部

投稿リスト動画解説【SWELL公式】

SWELLブロック → 投稿リスト

⑥新着記事

見出し（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リンク 無し

メインコンテンツ下部

⑧カテゴリー毎の人気記事（テキスト）

タブは外観 → カスタマイズ「記事一覧リスト」の「タブ切り替え設定（トップページ）」ではなく、SWELLブロックのタブです。

投稿リスト（人気記事・テキスト）でカテゴリーをタブ切り替えで配置しました。

下方にサムネイル付きでカテゴリー毎の人気記事を紹介していますが、画像（サムネイル）がたくさんあるページ内のテキストは結構目立つので…。

また、ここら辺までしか読まない人も多いので…。

でも一番の理由はページレイアウトのメリハリ。単なる私の好みwww

SWELLブロック → タブ
SWELLブロック → 投稿リスト

タブの使い方動画（公式）

#SWELLアップデート予告

タブブロックを実装します！🙌#wpswell pic.twitter.com/18Ph50q87i

— 了🌊SWELL開発者 (@ddryo_loos) April 30, 2020

※SWELL公式サイト内には「タブ」の紹介ページがないような？　上記の動画で確認してください！

STEP3とSTEP4の作業の意味
同じ作業を繰り返すのはナンなので、1つ作ってコピペ。必要な部分のみ書き換えればかなりの時短

⑨あいさつ文

カラム【SWELL公式】

ブロック → デザイン → カラム

1. カラムブロックを挿入
2. 2カラム（2/3・1/3）を選択
3. 左カラムにあいさつ文を入力
4. 右カラムに画像を挿入
5. カラム全体を選択して背景色を設定

⑩カテゴリー毎の人気記事

カラム【SWELL公式】

ブロック → デザイン → カラム

投稿リスト動画解説【SWELL公式】

SWELLブロック → 投稿リスト

ボタン【SWELL公式】

SWELLブロック → SWELLボタン

カテゴリー毎の人気記事の手順

STEP5以下の作業の意味
同じ設定を何度も繰り返すのは面倒ですし、間違いも起こりやすいので、コピペで進めます

校正後、忘れずに「公開」して下記に進んでください。

固定ページをトップページに設定してカスタマイズ完了

出来上がった固定ページ（公開済み）を下記の手順でトップページに設定します。

管理メニュー → 設定 → 表示設定 → ホームページの表示 → 固定ページ → ホームページ：トップページ用固定ページを選択 → 保存

固定ページ一覧画面を見ると、このページの横に「— フロントページ」と追加されています。

また固定ページの編集画面を見ると、パーマリンクがトップページのURLになっています。

サイドバーの設定

サイドバー【SWELL公式】

左メニュー → 外観 → ウィジェット

サイドバーはウィジェットで編集します。

「利用できるウィジェット」を右側のウィジェットエリアに追加

どちらかのやり方で…

1. ドラッグ＆ドロップ
2. ▼ → エリアを選ぶ → ウィジェットを追加

「新着記事」や「人気記事」は表示数や表示させるカテゴリーや日付などが選べます。

SWELLトップページカスタマイズ

SWELLは高機能です。

HTMLやCSSがわからなくてもSWELLブロックなどの組み合わせで、とても素敵なトップページを作ることができます。

今回のカスタマイズには使いませんでしたが、ほかにもトップページを飾る機能がたくさんあります。

SWELL公式サイトのトップページのように、画面いっぱいに動画を配するとゴージャスな印象になりますね。

また、大き目のサムネイルを複数枚スライドさせる機能や、小ぶりなサムネイルの記事スライダーなど、動く機能もいろいろあります。

ブロックエディターの楽しいのは（HTMLを書かずに）それらを組み合わせて、オリジナル感いっぱいのページを作れるところです。

私の理想は…
ブログの雰囲気を伝えつつ、サイト内にどんなコンテンツが隠れているかを十分に伝えるスッキリしたトップページです。

年のせいか動体視力がついていかないので、動くモノ（メインビジュアルの動画や記事スライダー）は不採用です。www

12