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

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

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

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

上記の現在のトップページです。

SWELLテーマの実験場にもなっているので、デザインが変更される可能性大です。

目次

SWELL機能を使ってトップページのカスタマイズ

トップページは、SWELLの基本設定(カスタマイズ)とSWELLブロックを使って出来上がっています。

バースデークリップのトップページ
2020年5月のトップページ

①~③は「カスタマイズ」の設定だけなので、カスタマイズというほどではないですが、ついでなので…。

④以下はタブ、カラム、投稿リスト、ブログパーツなどを組み合わせています。

タブは「カスタマイズ」内の「■ タブ切り替え設定(トップページ)」ではなく、SWELLブロックのタブです。

最後に詳しく書きますが、要素別に作ったブログパーツ(移動や変更に備えて)をトップページ用の固定ページで合体させています。

「カスタマイズ」での設定

①グローバルナビゲーション

WordPress基本機能のメニューで設定しています。

管理メニュー → 外観 → メニュー

ヘッダーに置く最も重要なナビゲーション。主要なカテゴリーを任意の名前で作り「メニュー設定」で「グローバルナビ」にチェックを入れる。

②お知らせバー

管理メニュー → 外観 → カスタマイズ → 「サイト全体設定」 → 「お知らせバー」

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

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

季節感のあるリンク先(夏ならプール情報とか)にすると良いかも?と思いつつ、ほったらかしです。

③記事スライダー

管理メニュー → 外観 → カスタマイズ → 「トップページ」 → 「記事スライダー」

WEBページ上の動くモノはあまり好まないのですが、ビジュアルの強さは確かにあるので設定しました。

それでも大きな画像がゴロンゴロン動くのは嬉しくないので、枚数をPC6枚、スマホ2枚です。

SWELLブロックを使ったカスタマイズ

上でも書きましたが、④、⑤、⑥はそれぞれSWELLブロックで作った要素をブログパーツに置き、それをトップページ用固定ページで合体させています。

トップページ用の固定ページ上で一気に作っても良いのですが、分けておいた方がチョコチョコ手を加える時に便利です。

順番の入れ替え時はスーパー便利!

④タブと投稿リストを使ったカテゴリー毎の人気記事

タブ機能はカスタマイズ → 記事一覧リスト → 「タブ切り替え設定(トップページ)」でも作れますが、小細工が利きません。

ですから、

SWELLブロックの「タブ」を使いました。

SWELLブロックの「タブ」
SWELLブロックの「タブ」
STEP
ブログパーツ → 新規追加 → タイトルを入力

上記のタブを作るページです。タイトルはサイト上に表示されません。

STEP
ブロックコンテンツ上でSWELLブロック「タブ」を選ぶ

タイトルをつける。サイト上には表示されないので、自分のわかりやすい文言にする。

タブスタイルは「ふきだし」。

STEP
各タブにタイトルを設定

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

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

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

Setting
  • 表示投稿数 5
  • テキスト型
  • 人気順
  • meta情報 非表示
  • カテゴリー 非表示
Pickup
  • カテゴリーのみ選択
STEP
STEP4で作った投稿リストをすべてのタブ内にコピペ

タブ名に合わせ、カテゴリーのみ再選択

⑤カラムを使ったごあいさつ

STEP
ブログパーツ → 新規追加 → タイトルを入力

ピンク背景色のあいさつ部分を作るページです。タイトルはサイト上に表示されません。

STEP
ブロックコンテンツ上で「カラム」を選ぶ

左から3番目の「2カラム 2/3・1/3」のカラムを選択。

左カラムに「段落」であいさつ文を入力。

右カラムに画像を挿入。

カラム全体を選択して、背景色を設定。

⑥カラム、投稿リスト、ボタンを使ったカテゴリー毎の人気記事

カテゴリー毎の人気記事
カテゴリー毎の人気記事
STEP
ブログパーツ → 新規追加 → タイトルを入力

カテゴリー毎の人気記事部分を作るページです。タイトルはサイト上に表示されません。

STEP
ブロックコンテンツ上で「カラム」を選ぶ

一番左の2カラム均等割りを選択。

STEP
左カラム内に見出しとSWELLブロックの「投稿リスト」を追加

見出しタグh3を追加し、カテゴリ名を入力する。

見出しの下にSWELLブロックの「投稿リスト」を追加。

Setting
  • 表示投稿数 2
  • カード型
  • 人気順
  • meta情報 非表示
  • カテゴリー 非表示
  • 最大カラム数 PC・SP両方2列
  • 抜粋 文字数PC・SP両方0

可愛いボタンを使いたいので、MOREリンク無視。

Pickup
  • カテゴリーのみ選択

タグや複数のカテゴリーを選べます。自由自在にくくれて超便利!

STEP
一覧ページへのボタン

SWELLブロックから「ボタン」を選び、カテゴリー名とカテゴリーのURLを入力。

STEP
左カラム内に作った要素をすべて右カラムにコピペ
STEP
カラム全体を選択し、必要な数分「複製」する

カラムは左右カラムのちょうど中間あたりをクリックすると一発で選択できます。

ブロックツールバー(右端)の詳細設定「複製」でカラム全体を複製。

Settingはそのまま、Pickup(カテゴリーの再選択)とボタンの内容の書き換えです。

固定ページで独自デザインのトップページを作る

固定ページにブログパーツを配置

STEP
固定ページの新規追加

タイトルをつける。最終的にはタイトルは表示されません。

STEP
ブログパーツを配置する

ブログパーツの呼び出しコードを目的順に配置する。

  1. (タブ)
  2. (あいさつ)
  3. (カテゴリー)

固定ページをトップページにする

管理メニュー → 設定 → 表示設定 → 「ホームページの表示」内

ラジオボタンの「固定ページ」を選択。ホームページに、先に作った固定ページのタイトルを選択して保存。

これで今回作った固定ページがサイトのトップページとして表示されます。

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

SWELLトップページカスタマイズのまとめ

  1. SWELLの「カスタマイズ」でグローバルナビゲーションやスライダーを設定
  2. 要素別にブログパーツを作る
    表示順の変更や編集をラクにするため
  3. 固定ページにブログパーツを配置
  4. 作った固定ページをトップページに設定

投稿リスト、ブログパーツはメチャクチャ便利です。組み合わせ次第でまだまだデザインの幅が広がりそう。

サーバーとテーマ おススメの組み合わせ

目次
閉じる