テーマSWELLでトップページをカスタマイズ！好みのトップページができた
テーマ「SWELL」が好きすぎて、記事を書くよりテーマをゴニョゴニョする時間の方が長くて本当に困ります。
SWELL独自の機能を組み合わせるだけで、楽しいコトがたくさんできる！ 抜け出せません。
その1つ、運営サイト（バースデークリップ）のトップページをカスタマイズしたので紹介します。
オリジナルデザインのトップページを作る手順は2つの作業が必要です。
- 固定ページにトップ用のページを作る
- そのページをトップページに設定する
SWELL機能を使ってトップページ用の固定ページを作る
カスタマイズしたトップページ（固定ページ）の図解
※カスタマイザーとは、外観 → カスタマイズのことです。
トップページは主に、SWELLの基本設定（カスタマイザー）とSWELLブロックでできています。
メインコンテンツの上部（ヘッダー）
- グローバルナビ
（メニュー＋カスタマイザー） - お知らせバー
（カスタマイザー） - ピックアップバナー
（メニュー＋カスタマイザー）
メインコンテンツエリア
- よく読まれる記事
（投稿リスト） - タブ切り替え
（タブ＋投稿リスト） - サイト案内
（カラム） - カテゴリー毎の人気記事
（カラム＋投稿リスト＋ボタン）
※⑤のタブは外観 → カスタマイズ「記事一覧リスト」の「タブ切り替え設定（トップページ）」ではなく、SWELLブロックのタブです。
コンテンツ上部のカスタマイズ
①グローバルナビゲーション（ヘッダーメニュー）
ヘッダーに置く最も重要なナビゲーション。
WordPress基本機能の「メニュー」で作ります。
メニューの作り方
- メニュー画面で「新しいメニューを作成しましょう」をクリック
- 「メニュー名」を入力（日本語も可）
- 「メニュー作成」ボタンをクリック
- 「メニュー項目を追加」欄の必要な項目にチェックを入れ「メニュー追加」ボタンをクリック
- 並び順・表示名（ナビゲーションラベル）を調整
- メニュー設定「グローバルナビ 」にチェックをいれ「メニューを保存」ボタンをクリック
※グローバルナビはカテゴリーが一般的だけど、リンク先は自由自在です。
グローバルナビの調整
グローバルナビの位置を（ロゴの右、左、上、下）を選択できます。
②お知らせバー
表示させるテキストやURL、ボタンの有無、ボタンや背景のカラーなど自在に編集できます。
たった1つのリンクですから、大事です。
それなのに、私は何に使ったら良いのかわからなくて、とりあえずユーザーにも自分にも（アフィリエイト）役立ちそうなリンク先を設定しています。
一押しのページやプロフィールへのリンクもよいと思います。
③ピックアップバナー
ピックアップバナーは2か所の設定が必要です。
- 「メニュー」でピックアップバナー用メニューを作る
- カスタマイザーで表示や装飾の設定
ピックアップバナーの作り方
- 新規メニュー作成（作り方はグローバルナビと同じ）
- ピックアップバナー用の画像をあらかじめアップロード
- メディアライブラリで目的の画像をクリック
- 開いたパレット右下「URL をクリップボードにコピー」をクリック
- （外観 →）メニューそれぞれの「説明」欄にペースト（下図参照）
- メニュー設定のメニューの位置「ピックアップバナー」にチェック
- メニューを保存
ピックアップバナーの設定
カスタマイザーで下記の設定をします。
- PC・スマホでのバナー横並び数
- バナータイトルの表示・非表示
- バナーの装飾
- 下層ページにも表示するかどうか
メインコンテンツ部分のカスタマイズ
④よく読まれる記事
紹介サイトの投稿リスト設定内容
- 表示する投稿数 6
- カード型
- 人気順
- 日付、著者、PV数は無し
- カテゴリー 日付の横
- タイトルタグ h2
- PC 3列 SP 2列
- 抜粋文 無し
- MOREリンク 無し
⑤カテゴリー毎の人気記事（テキスト）
投稿リスト（人気記事・テキスト）でカテゴリーをタブ切り替えで配置しました。
※SWELL公式サイト内には「タブ」の紹介ページがないような？ 上記の動画で確認してください！
Tab 2以降は「+」をクリックしてタブを増やし、タイトルを入力。
⑦あいさつ文
- カラムブロックを挿入
- 2カラム（2/3・1/3）を選択
- 左カラムにあいさつ文を入力
- 右カラムに画像を挿入
- カラム全体を選択して背景色を設定
⑧カテゴリー毎の人気記事（サムネイル）
2カラム均等割りを選択
カテゴリ名を入力
紹介サイトの設定内容
- 表示投稿数 2
- カード型
- 人気順
- meta情報 非表示
- カテゴリー 非表示
- 最大カラム数 PC・SP両方2列
- 抜粋 文字数PC・SP両方0
可愛いボタンを使いたいので、MOREリンク無視。
- カテゴリー選択
SWELLブロックのSWELLボタンを選び、カテゴリー名とカテゴリーURLを入力
同作業を何度も繰り返すのは大変なので、コピペして必要な部分だけ再選択
ブロックツールバー（右端）の詳細設定の「複製」
【カラム全体の選択方法】いずれか
1．左右カラムの中間あたりをクリック
2．カラム内にカーソルを置き、編集画面最下段のナビ（パンくずのような）でカラムをクリック
見出し、カテゴリー名、ボタンの変更
以上でトップページ用の固定ページが完成です。
校正後、忘れずに「公開」して下記に進んでください。
固定ページをトップページに設定してカスタマイズ完了
出来上がった固定ページ（公開済み）を下記の手順でトップページに設定します。
固定ページ一覧画面を見ると、このページの横に「— フロントページ」と追加されています。
また固定ページの編集画面を見ると、パーマリンクがトップページのURLになっています。
SWELLトップページカスタマイズ
SWELLは高機能です。
HTMLやCSSがわからなくてもSWELLブロックなどの組み合わせで、とても素敵なトップページを作ることができます。
今回のカスタマイズには使いませんでしたが、ほかにもトップページを飾る機能がたくさんあります。
SWELL公式サイトのトップページのように、画面いっぱいに動画を配するとゴージャスな印象になりますね。
また、大き目のサムネイルを複数枚スライドさせる機能や、小ぶりなサムネイルの記事スライダーなど、動く機能もいろいろあります。
ブロックエディターの楽しいのは（HTMLを書かずに）それらを組み合わせて、オリジナル感いっぱいのページを作れるところです。
私の理想は…
ブログの雰囲気を伝えつつ、サイト内にどんなコンテンツが隠れているかを十分に伝えるスッキリしたトップページです。
年のせいか動体視力がついていかないので、動くモノ（メインビジュアルの動画や記事スライダー）は不採用です。www
