最大30,000円キャッシュバック&ドメイン永久無料キャンペーン(1/21迄)国内シェアNo.1【エックスサーバー】チェック

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

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

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

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

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

記事の内容(もくじ)

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

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

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

①~④は「カスタマイズ」と「メニュー」の設定だけでできています。

カスタマイズというほどではないですが、一応流れを書きました。

⑤以下はタブ、カラム、投稿リストなどを組み合わせています。

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

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

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

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

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

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

主要なカテゴリーを任意の名前で作り「メニュー設定」で「グローバルナビ」にチェックを入れる。

SWELLの「グローバルナビ」解説

②お知らせバー

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

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

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

季節感のあるリンク先にすると良いかも?と思いつつ、ほったらかしです。

SWELLの「お知らせバー」解説

③記事スライダー

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

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

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

SWELLの「記事スライダー」解説

④ピックアップバナー

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

  1. 「メニュー」でピックアップバナー用メニューを作る
  2. カスタマイザーで見た目を設定

1.管理メニュー → 外観 → メニュー → ピックアップバナー用メニュー作成 → 「ピックアップバナー」設定

ピックアップバナー用メニュー

ピックアップバナー用メニューはバナー画像のURLを説明欄に入れます。

最後にメニュー設定の「メニューの位置」で「ピックアップバナー」にチェックを入れて保存。

これでピックアップバナーが表示されます。

カスタムメニューでもサイト内のURLなら機能します。

私はバナーサイズを400×200pxにしました。

2.管理メニュー → 外観 → カスタマイズ → 「トップページ」 → 「ピックアップバナー」

カスタマイザーでは下記の設定ができます。

  • PCまたはスマホでバナーを何個横並びにするか
  • バナータイトルの表示(位置も)・非表示の設定
  • バナーに白線をつけるかどうか
  • バナー画像を暗くするかどうか
  • 下層ページにも表示するかどうか

カスタマイズの設定を後に書きましたが、メニューの保存でピックアップバナーが表示されるので、先にこちらの設定を済ませた方が良いかもしれません。

ピックアップバナーはトップページ以外にも表示できるので、カテゴリーやタグ、主要な記事ページの入口として機能させるとアクセスが増えるような気がします。

SWELLの「ピックアップバナー」解説

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

⑤新着記事

投稿リストのSettingsで下記の設定をしています。

記事数2、テキスト型、新着順、カテゴリーはサムネイル画像上(テキスト型なのでサムネイルはありませんが)、抜粋文なし。

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

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

ですから、

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

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

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

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

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

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

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

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

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

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

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

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

SWELLの「投稿リスト」解説

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

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

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

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

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

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

右カラムに画像を挿入。

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

SWELLの「カラム」解説

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

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

SWELLの「ボタン」解説

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

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

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

ラジオボタンの「固定ページ」を選択。

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

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

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

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

SWELLの「ボタン」解説

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

  1. SWELLの「カスタマイズ」でグローバルナビゲーションやスライダーを設定
  2. 固定ページにタブ、カラム、投稿リストで作った要素を配置
  3. 作った固定ページをトップページに設定

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

記事の内容(もくじ)
閉じる