テーマSWELLでトップページをカスタマイズ!好みのトップページができた

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

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

SWELL独自の機能を組み合わせるだけで、楽しいコトがたくさんできる! 抜け出せません。

その1つ、運営サイト(バースデークリップ)のトップページをカスタマイズしたので紹介します。

以前1度書いた記事を大幅に手直ししました。つまり、それだけゴニョゴニョしたということです。

オリジナルデザインのトップページを作る手順は2つの作業が必要です。

  1. 固定ページにトップ用のページを作る
  2. そのページをトップページに設定する
記事の内容(もくじ)

SWELL機能を使ってトップページ用の固定ページを作る

カスタマイズしたトップページ(固定ページ)の図解

カスタマイザーとは、外観 → カスタマイズのことです。

トップページは主に、SWELLの基本設定(カスタマイザー)とSWELLブロックでできています。

トップページのカスタマイズ
2021年4月のトップページ

メインコンテンツの上部(ヘッダー)

  1. グローバルナビ
    (メニュー+カスタマイザー)
  2. お知らせバー
    (カスタマイザー)
  3. ピックアップバナー
    (メニュー+カスタマイザー)

メインコンテンツエリア

  1. よく読まれる記事
    (投稿リスト)
  2. タブ切り替え
    (タブ+投稿リスト)
  3. サイト案内
    (カラム)
  4. カテゴリー毎の人気記事
    (カラム+投稿リスト+ボタン)

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

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

①グローバルナビゲーション(ヘッダーメニュー)

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

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

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

メニューの作り方

外観 → メニュー

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

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

グローバルナビの調整

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

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

②お知らせバー

お知らせバー【SWELL公式】

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

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

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

それなのに、私は何に使ったら良いのかわからなくて、とりあえずユーザーにも自分にも(アフィリエイト)役立ちそうなリンク先を設定しています。

一押しのページやプロフィールへのリンクもよいと思います。

③ピックアップバナー

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

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

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

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

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

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

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

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

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

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

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

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

④よく読まれる記事

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

SWELLボックス → 投稿リスト

紹介サイトの投稿リスト設定内容

  • 表示する投稿数 6
  • カード型
  • 人気順
  • 日付、著者、PV数は無し
  • カテゴリー 日付の横
  • タイトルタグ h2
  • PC 3列 SP 2列
  • 抜粋文 無し
  • MOREリンク 無し

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

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

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

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

SWELLブロックの「タブ」
SWELLブロックの「タブ」
STEP
各タブにタイトルを設定

Tab 2以降は「+」をクリックしてタブを増やし、タイトルを入力。

STEP
タブ下の枠内でSWELLグロック「投稿リスト」を選択

好みのレイアウトを設定。私の場合は…

Setting
  • 表示投稿数 5
  • テキスト型
  • 人気順
  • meta情報 非表示
  • カテゴリー 非表示(タブタイトルがカテゴリー名)

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

STEP
STEP2で作った投稿リストをすべてのタブ内(タブタイトルの下)にコピペ
STEP
タブタイトルと同じカテゴリーを再選択

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

⑦あいさつ文

カラム【SWELL公式】

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

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

⑧カテゴリー毎の人気記事(サムネイル)

カラム【SWELL公式】

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

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

SWELLブロック → 投稿リスト

ボタン【SWELL公式】

SWELLブロック → SWELLボタン

カテゴリー毎の人気記事
カテゴリー毎の人気記事
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(カテゴリーの再選択)とボタンの内容の書き換え

見出し、カテゴリー名、ボタンの変更

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

以上でトップページ用の固定ページが完成です。

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

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

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

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

トップページの設定
トップページの設定

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

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

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

SWELLは高機能です。

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

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

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

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

SWELL公式サイト

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

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

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

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
記事の内容(もくじ)
閉じる