基本がわかる!SWELLでサイト型トップページをおしゃれにカスタマイズ

当ページのリンクには広告が含まれています。
SWELLサイト型トップページカスタマイズ

この記事では、SWELLを使ったブログをサイト型トップページにカスタマイズする方法を解説しています。

この記事でわかること
  • サイト型トップページの基本的な作り方
  • ヘッダーの設定方法
  • フッターの設定方法

サイト型とは、トップページに記事を各コンテンツごとに配置することで、ユーザーにとって見やすい表示となっています。

サイト型トップページにすると、

  • 読んでほしい記事を読者にアピールできる
  • 読者が読みたい記事を探しやすくなる
  • サイトの個性を出せる

というメリットがあるので、記事が増えてきたらサイト型トップページにすることを検討しても良いかもしれません。

くうか

記事が1ページ内に収まらなくなってきたあたりを目安にすると良いと思います。

私のメインサイト「くうかんしんぷるライフ」のようなトップページの作り方を、まるっとわかりやすく解説しているので、ぜひ最後まで読んでみてください。

「くうかんしんぷるライフ」は、SWELLを4年愛用しSWELL公式サイトに利用ブログとして掲載されています。

\ 公式サイトを見てみる /

目次

トップページのブログ型・サイト型とは?

ブログのトップページには、「ブログ型」と「サイト型」があります。

ブログ型

デフォルト。記事が新しい順に表示されている。

ブログ型

サイト型

各コンテンツごとに記事が整理されている。

サイト型
  • ブログ型:ブログ作成時のデフォルトの状態で、記事が新しい順に表示されている
  • サイト型:記事がコンテンツごとに整理され、ユーザーが見やすいように配置されている

記事が増えてきたらサイト型にするのがおすすめ。

サイト型にすると読者側と運営者側、どちらにもメリットがあるんです。

読者のメリット運営者のメリット
どんなサイトなのかひと目でわかる
知りたい情報を探しやすい
見せたい記事をアピールできる
記事以外の情報を表示できる

サイトの個性を出せる
くうか

サイトの個性を出せるという部分も重要だなと思っています。

このSWELLというテーマでは、サイト型を作るのに適した高機能なブロックが揃っていて、私もSWELLに移行してすぐにサイト型トップページを作ることができました。

SWELLを知らないという方は、正直なレビューを書いているのでよろしければご覧ください。

SWELLでサイト型トップページにカスタマイズする3つのステップ

SWELLでサイト型トップページを作る3つのステップ

サイト型トップページを作る工程は、大きく分けて3ステップ。すぐに読み始めたい場合は各ステップに飛んでくださいね。

ヘッダーやフッターのカスタマイズは別項目で説明していくので、この項目ではサイト型トップページの基本の作り方を解説していきます。

くうか

まずは事前準備から!

固定ページを2つ作成していきます。

  1. 新着記事ページ:タイトルを付けただけの空白ページ
  2. ホームページ:メインとなるページ

STEP1. 【事前準備】固定ページで①新着記事ページを作成

サイト型トップページのステップ1

①【新着記事ページ】は、タイトルとパーマリンク(URL)のみを設定した空白のページを作ります。

くうか

サイト型にするとデフォルトの新着記事ページが非表示になるため、固定ページを使って代用を作ってあげましょう。

WordPressのメニューから「固定ページ」→「新規追加」します。

固定ページを新規作成
固定ページの新規追加

作業は3箇所だけ。

新着記事の作成画面
新着記事の作成画面
  1. タイトル(自分がわかりやすいもの)→「新着記事」としました。
  2. URLスラッグ(URLとなるので英語推奨)→「new-post」としました。
  3. 公開する

ページの中身は空白ですが、最後のWordPressでの設定をおこなうことで、以下のような新着記事が並んだ一覧ページとなります。

新着一覧ページ
新着一覧ページ
くうか

後ほどこのページをメインとなる②ホームページからリンクするので、パーマリンク(new-post)をコピペするか覚えておいてくださいね。

これで事前準備は完了!続いてついに実際の見ためを作っていきます。

STEP2. 【メイン】固定ページで②ホームページを作り込む

サイト型トップページのステップ2

このステップがサイト型の1番のメインとなります。

実際の見ためとなるメインの②【ホームページ】全体像はこんな感じ!

1. 新着記事エリア→解説へ

新着記事エリア

2.コンセプトエリア→解説へ

コンセプトエリア

3.ミニマリストエリア→解説へ

ミニマリストエリア

4.シンプルライフエリア→解説へ

シンプルライフエリア

5.ブログエリア→解説へ

ブログエリア

6.カテゴリーエリア→解説へ

カテゴリーエリア

7.運営者紹介エリア→解説へ

アバウトエリア

8.ギャラリーエリア→解説へ

ギャラリーエリア

それでは、ようやくトップページのメインとなる②【ホームページ】を作っていきます。
※ホームページもしくはフロントページとも呼ばれます。

WordPressのメニューから「固定ページ」→「新規追加」します。

固定ページを新規作成
固定ページの新規追加

こちらもとりあえずの作業は3箇所。

ホームページの作成画面
ホームページの作成画面
  1. タイトル(日本語でもOK)→「Home」としました。
  2. URLスラッグ(URLとなるので英語推奨)→「home」としました。
  3. 下書き保存または公開する。(公開は完成後でもOK)

そして、トップページに入れたい以下の内容を作り込んでいきます。

  1. 新着記事:新着順の記事+サイト内検索
  2. コンセプト:サイトのコンセプト
  3. ミニマリスト:ミニマリストに関する記事
  4. シンプルライフ:シンプルライフに関する記事
  5. ブログ:ブログに関する記事
  6. カテゴリー別:カテゴリー別に記事を表示
  7. 運営者紹介:簡単なプロフィール
  8. ギャラリー:写真から記事に飛べる仕組み
くうか

それぞれのエリアごとに詳しく解説していきますね。

1. 新着記事エリアの作り方

新着記事の位置、私は1番はじめに持ってきています。

それは、リピーターの方のために新着記事がぱっと見でわかるとすぐにアクセスできるためですが、サイトによって順番はまちまちでOKです。

完成したものがこちら。

新着記事エリア
新着記事エリア

左右でコンテンツを分けています。

  1. 左:最新記事を大きなカード型表示、2番目以降の記事を小さく2記事表示
  2. 右:文字・キーワード(タグ)・カテゴリーから検索可能なエリア
くうか

最新の記事をわかりやすくしたかったのと、すぐに検索したい場合に対応してみました。

文字が動いているのとアイキャッチが大きいので目を引きます。

以下、作成の手順です。

新着記事
フルワイド追加・見出し設定

【フルワイド】ブロックを追加する。

コンテンツ横幅サイト幅
上下のpadding量PC40・SP40
背景色
上下の境界線の形状斜線、高さ:0
フルワイド設定

【見出し】(H2)の見た目はシンプルなセクション用を設定。

テキスト(または画像)・注釈はお好みで設定してください。

見出しに画像を入れたい場合は、【インライン画像】で入れるとH2の属性を保つことができます。

見出しに画像を入れる
見出しに画像を入れる場合
新着記事
リッチカラムを追加

【リッチカラム】ブロックを追加。

スタイルデフォルト
列数PC2列、タブレット2列、モバイル1列
カラム間余白左右3rem、上下1.5rem
ブロック設定
新着記事
左カラムの作成
新着記事エリアの左カラム部分
この部分

①「\ What’s new! /」の表示

左カラム内に【段落】ブロックを追加し、「\ What’s new! /」を入力する。(文字サイズL)

※文字を目立たせるためにタイピングアニメーションを付加。(プラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」使用)

②投稿リストで1記事のみ大きく表示

①の下に【投稿リスト】ブロックを追加する。

投稿数1
レイアウトカード型
表示順序新着
抜粋文0
投稿リスト設定

最新記事の1番目の記事を大きく目立たせたいので、1記事のみの表示にする。

③投稿リストで2記事め以降を表示

②の大きな投稿リストの下に、さらにもう1つ【投稿リスト】ブロックを追加する。

投稿数3(CSSで1記事非表示にするため3に)
レイアウトカード型
表示順序新着
最大カラム数PC・SPともに2列
抜粋文0
MOREリンクnew-post(STEP1で作成した空白の新着記事ページのURLスラッグを入力)
投稿リスト設定

※なおMOREリンクボタンの見た目は、丸みか四角しか選ぶことができません。カスタマイザーで全体の質感を「丸みをもたせる」にすると丸くなり、そうでなければ四角のボタンになります。

このままでは②の大きなカードと、③の小さなカードの1記事めが被ってしまいますので、以下の方法を用います。

自動化する方法(CSSを使用)とアナログな方法、2通り紹介します。

自動化して1記事めを非表示にする方法

1.投稿リストブロックを選択した状態で、Settingタブ内の【高度な設定】に追加CSS名「li-first-none」を入力する。

追加CSSクラスにクラス名を入力
追加CSSクラスにクラス名を入力
追加CSSクラス
追加CSSクラスにクラス名を入力

別のクラス名が入っている場合は、繋がらないように半角スペースを入れてください。

2.ページ下部にある「カスタムCSSのCSS用コード」に以下のコードを追加

固定ページ内下部のカスタムCSS
固定ページ内下部

\コピペ用CSSコード/

.li-first-none > ul >li:first-child {
    display: none;
}

すると、以下のようになります。(一文字でも違うと動作しませんので要確認)

CSS用コードに入力
コードを入力
  • コードを追加する場合は自己責任の上おこなってください。
  • 表示される記事数が1つ減るので、記事数をお好みで調整してください。

カスタマイザーの追加CSSではなく、固定ページ下部のカスタムCSSに記載するようにしました。(2022年3月)

このページのみでCSSを使う場合は、この方が速度的にも良いと判断。

CSSに関するSpecial thanks → しらこさん鰥夫(ヤモヲ)さんしおさださん

アナログな方法で1記事めを非表示にする

Pickupタブ内の【除外する投稿ID】に最新の記事のIDを入力する

  • 簡単だけど、記事が増えるたびにIDを更新しなければならなくなるので注意
くうか

新着記事の最新だけ、アイキャッチ付きで目立たせるカスタマイズです。他にもいくつかのデザインを考えたので、以下の記事を参考にしてみてくださいね。

新着記事
右カラムの作成

右カラムはサイト内検索エリア。

新着記事エリアの右カラム部分
この部分

①任意テキスト検索

【検索】ブロックを使用:箱の中に任意のテキストを入力することができる。

②キーワード検索

【タグクラウド】ブロックを使用:タグ一覧の表示設定ができる。

フルワイドのトップページにするとサイドバーがなくなってしまうので、それを補うために表示させています。

タクソノミーに【タグ】が選択されていればOK。

【カテゴリー】なども選択肢に表示されるので注意。

①と②はウィジェット系ブロックなので、WordPress自体のアップデート時に仕様変更することもあるので、その際にはちゃんと動作しているかチェックした方が良い。

③カテゴリー検索

【リンクリスト】ブロックを使い、各カテゴリー名とカテゴリーページをリンクさせる。

2. コンセプトエリアの作り方

サイトのコンセプトを表示するエリアです。

コンセプトエリア
コンセプトエリア
コンセプト
フルワイド追加・見出し設定

【フルワイド】ブロックを追加する。

コンテンツ横幅サイト幅
上下のpadding量PC40・SP40
背景色薄めのピンク
上部の境界線波、高さレベル:3
下部の境界線波、高さレベル:3

【見出し】にテキストまたはインライン画像を設定する。

コンセプト
リッチカラム追加

【リッチカラム】ブロックを追加し、列数を決める。

PC・タブレットは2列、SPは1列にする。

コンセプト
リッチカラム1行目の設定

1行目のカラムの横幅をサイトに合わせて設定する。(当ブログの場合は60%・40%)

あらかじめ作成しておいたサイトの画像を左カラムに追加。

右カラムにはサイトのコンセプトを入力する。タイトルは新着記事と同じくタイピングアニメーションを採用。

コンセプト
リッチカラム2行目の設定

2行目のカラムの横幅は特に設定なし。

左カラムに【SWELLボタン】ブロックを追加し、サイトマップページへリンク。

右カラムにも同じくボタンを入れて問い合わせページへリンク。

くうか

コンセプトがあると、どのようなサイトなのかわかりやすいので入れました。

3. ミニマリストエリアの作り方

ミニマリストエリア
ミニマリストエリア

【フルワイド】ブロックを追加後、【見出し】 にインライン画像を設定。

コンテンツ横幅記事幅
上下のpadding量PC40・SP40
背景色
上部の境界線の形状斜線、高さレベル:0
下部の境界線の形状斜線、高さレベル:0
フルワイド設定
くうか

このミニマリストコンテンツでは、さらに部屋(Room)のエリアと持ち物(Goods)のエリアに分けています。

部屋(Room)エリアの詳細

Roomのエリア
Roomのエリア
Room
見出し(H3)の設定

【見出し】(H3)ブロックを追加し、インライン画像を設定する。

Room
各サブカテゴリーへのリンク

まずは、Roomカテゴリーのまとめ記事とサブカテゴリーへのリンクを作成。

【リッチカラム】ブロックを追加。(PC・TAB2列、SP1列)

リッチカラム内の各ブロックの配置は以下の通り。

Room各ブロック内訳
各ブロック内訳

左カラム

  1. 段落
  2. バナーリンク:Roomまとめ記事へ
  3. 段落
  4. インラインボタン:該当記事へ

右カラム

  1. 段落
  2. ボックスメニュー:各サブカテゴリーへリンク

持ち物(Goods)エリアの詳細

Goodsのエリア
Goodsのエリア
Goods
見出し(H3)の設定

【見出し】(H3)ブロックを追加し、インライン画像を設定する。

STEP
主要記事へのリンク

4つのサブカテゴリーから主要記事へのリンクを作成。

【リッチカラム】ブロックを追加。(PC・TAB4列、SP2列)

スタイルデフォルト
列数PC4列、タブレット4列、モバイル2列
カラム間余白左右50px、上下10px
ブロック設定

各カラムに以下のコンテンツを追加する。

Goodsの主要記事へのリンク
主要記事へリンク
  1. 【画像】ブロック
  2. 【リンクリスト】ブロック:主要記事へリンク
  3. 【SWELLボタン】:サブカテゴリーへリンク
くうか

ミニマリストエリアは記事も多いので、サブカテゴリーや記事への直リンクなど、動線を増やしています。

4. シンプルライフエリアの作り方

シンプルライフエリア
シンプルライフエリア
くうか

このシンプルライフコンテンツでは、2つのカテゴリーから主要記事をピックアップしてリストにしています。

【フルワイド】ブロックを追加後、【見出し】 にインライン画像を設定。

コンテンツ横幅記事幅
上下のpadding量PC40・SP40
背景色薄いグレー
上部の境界線の形状波、高さレベル:3
下部の境界線の形状波、高さレベル:3
フルワイド設定

【画像】と【リンクリスト】ブロックで構成しています。

シンプルライフ
リッチカラム追加

【リッチカラム】ブロックを追加。

スタイルデフォルト
列数PC2列、タブレット2列、モバイル1列
カラム間余白左右3rem、上下1.5rem
ブロック設定
シンプルライフ
カテゴリーごとの主要記事へリンク

左右の各カラムに、それぞれのカテゴリーごとの主要記事へのリンクを作る。

シンプルライフエリアの詳細
項目詳細
  1. 【画像】
  2. 【段落】:カテゴリーの説明(タイピングアニメーション採用)
  3. 【リンクリスト】:記事へリンク
  4. 【SWELLボタン】:カテゴリーへリンク

装飾したいので、追加・設定し終わったらそれら4つのブロックを選択し、グループ化。

グループ化したものをお好みで装飾する。(当ブログではかぎ括弧)

5. ブログエリアの作り方

ブログエリア

ブログカテゴリーの主要な記事とSWELL公式サイトを、【メディアとテキスト】ブロックを使って表示させています。

【フルワイド】ブロックを追加後、【見出し】にインライン画像を設定。

コンテンツ横幅記事幅
上下のpadding量PC40・SP40
背景色
上部の境界線の形状斜線、高さレベル:0
下部の境界線の形状斜線、高さレベル:0
フルワイド設定

そして【メディアとテキスト】ブロックを追加。

メディアとテキストブロックは、画像と文字の組み合わせで通常のブロックにはないレイアウトが楽しめます。

今回は「ブロークングリッド」という、SWELL独自のレイアウトを使ってみました。

スタイルブロークングリッド
モバイルでは縦に並べるON
画像サイズフルサイズ
メディアとテキスト設定

画像は、以下の設定メニューから左右のどちらにでも表示することが可能です。

メディアの配置を変える
メディアの配置を変える

左右交互に並べるのもおしゃれ。

テキスト側には様々なブロックを入れることができますが、今回は

  1. 【見出し】
  2. 【段落】
  3. 【SWELLボタン】

のブロックを入れて、関連する記事にリンクさせています。

テキスト側の背景色や装飾の設定は、段落などのブロックをすべて選択した状態で【グループ化】するとできるようになります。

余談ですが、背景色を未設定または「グレー」に設定すると、CSSを使わずに透過されますよ。

くうか

写真を目立たせつつコンテンツを入れられるブロックで、おしゃれで気に入っています♪

とても簡単なブロックですが、以下の記事で使い方を解説しています。

6. カテゴリーエリアの作り方

カテゴリーエリア
カテゴリーエリア

【フルワイド】ブロックを追加後、【見出し】 にインライン画像を設定。

コンテンツ横幅サイト幅
上下のpadding量PC40・SP40
背景色薄いグレー
上部の境界線の形状波、高さレベル:3
下部の境界線の形状波、高さレベル:3
フルワイド設定

【タブ】ブロックでカテゴリー数分のタブを作り、それぞれに【投稿リスト】ブロックを入れていきます。

カテゴリーエリアの詳細
カテゴリーエリアの詳細

投稿リストは、Pickup設定にてカテゴリーを指定します。

カード型の場合は表示数を3にして、最後の投稿を非表示にするかの項目を【SP表示で非表示】にチェックを入れて、モバイルでは表示数が2になるようにします。(見た目が良いため)

くうか

モバイルでの表示も絶対にチェックしてくださいね。

7. 運営者紹介エリアの作り方

運営者紹介エリア
運営者紹介エリア

【フルワイド】ブロックを追加後、【見出し】にインライン画像を設定。

コンテンツ横幅記事幅
上下のpadding量PC40・SP40
オーバーレイの透明度73
画像任意の写真を設定
背景効果固定背景をON
フルワイド設定

【見出し】設定後、【リッチカラム】ブロックで2列のカラムを作成し、それぞれ以下の通りに設置。

左カラム:幅40%

【バナーリンク】でプロフィール画像を挿入。

右カラム:幅60%

【段落】で名前と自己紹介を入力。

下カラム:幅100%

【ボックスメニュー】でプロフィール・X(旧Twitter)・Instagramにリンク。

くうか

この背景画像があるエリアは上下の境界線の設定項目はありません

ギャラリーエリア
ギャラリーエリア

写真を多く使っているブログなので、写真をメインにしたエリアがあってもいいかなと考え、このエリアを作りました。

以前はインスタグラム風に写真を羅列していたけど、今回はスライダー表示に変えてみました。

【フルワイド】ブロックを追加後、【見出し】にインライン画像を設定。

コンテンツ横幅記事幅
上下のpadding量PC40・SP40
背景色
上部の境界線の形状波、高さレベル:3
下部の境界線の形状斜線、高さレベル:0
フルワイド設定

スライダーのプラグイン「XO Slider」で表示しています。(XO Slider公式ページ

こちらのプラグインをインストールすると、WordPressメニューに【スライダー】という項目が出現するのでスライダーを新規作成します。

テンプレートDefault
ナビゲーションON
パラメーターCards
ページネーションON
表示順ランダム
効果速度600ミリ秒
中央配置ON
スライダー設定

スライダー作成画面の右下にショートコードが表示されているので、コピーしておきます。

コピーしておいたショートコードを、トップページの固定ページの表示したい場所へ貼り付けます。

当ブログの場合は、2列の【リッチカラム】ブロックを配置して、左カラムにスライダー・右カラムにふきだしを入れて軽く説明をしています。

くうか

いつかSWELLにスライダーブロックができたら、そちらに変更する予定です。

STEP3. 【最後の仕事】ホームページ設定(作成した固定ページをトップページに表示)

サイト型トップページのステップ3

固定ページで新着記事やメインページが完成したら、最後に以下の設定を行います。

①外観→カスタマイズ

外観→カスタマイズ
外観→カスタマイズ

②サイト全体設定

WordPress設定→サイト全体設定
WordPress設定→サイト全体設定

③ホームページ設定

サイト基本情報→ホームページ設定
サイト基本情報→ホームページ設定

【ホームページ設定】で、【ホームページ】【投稿ページ】部分に先ほど作成した固定ページ2つをそれぞれ割り当てる。

ホームページ設定
ページの割り当て

【ホームページの表示】を【◎固定ページ】にチェック。

【ホームページ】を作成した固定ページにします。

  1. ホームページ:②ホームページ(メインとして作成した固定ページ)
  2. 投稿ページ:①新着記事(空白で作成した固定ページ)
くうか

この2か所を割り当てることで自由なレイアウトのサイト型トップページが出来上がり!

ホームページ設定を参考にさせていただきました!

WordPressでWebサイトのようなトップページをSWELLで作る方法|Mizuc ism

なお、フルワイドブロックを使う場合は、サイドバーを非表示にした方がよりダイナミックなトップページになります。

トップページのサイドバーを非表示にする方法は?

【外観】→【カスタマイズ】→【サイドバー】にて、トップページを非表示設定にします。

または固定ページの【ホームページ】自体のSWELL設定で、サイドバーを非表示にすることができます。

くうか

サイト型トップページの作り方はいったんここまで。
次はヘッダーとフッターのカスタマイズ方法を紹介します。

SWELLでヘッダーをカスタマイズする方法

SWELLでヘッダーをカスタマイズ

SWELLでのヘッダーのカスタマイズ方法を解説していきます。

ヘッダーはサイトを開いた時に最初に目につく場所で、1番目立ちます。以下の各種設定をおこなってサイトの雰囲気を決めていきましょう。

  1. ロゴ画像
  2. グローバルナビ
  3. メインビジュアル
  4. お知らせバー
  5. ピックアップバナー(当ブログでは未使用)
  6. 記事スライダー(当ブログでは未使用)

①ヘッダーロゴ設定:画像サイズは【1600×360】

ヘッダーは画像にすると、サイトの個性が出て一気にイメチェンに♪

いつもお世話になっているツール、Canva Proで作成しました。

参考までに、「くうかんしんぷるライフ」の画像サイズは【1600×360】。SWELL公式サイトがこのサイズだったので、同様にさせていただきました。

くうかんしんぷるライフのヘッダーロゴ
画像サイズ【1600×360】

サイトの雰囲気と合わせてシンプルに作りました。

くうか

サイズは決まっているわけではないので、自身のサイトに合わせたお好みのサイズにしてみてくださいね。

ロゴ画像設定箇所
【外観】→【カスタマイズ】→【ヘッダー】→【ロゴ画像の設定】

画像サイズ(PC)55px
画像サイズ(PC追従ヘッダー)48px
画像サイズ(SP)70px
ロゴ画像設定
あわせて読みたい

Canvaはオンラインで無料で使える、便利な画像編集ツール。画像の透過は、有料版のProにて作成しています。(無料のお試し期間もあり)

②グローバルナビとレイアウト・デザイン設定

ヘッダーに表示させるメニュー(いわゆるグローバルナビゲーション)を、あらかじめ作成しておきます。

グローバルナビゲーション
グローバルナビはここ

グローバルナビ作成箇所
【外観】→【メニュー】から作成することができます。

「くうかんしんぷるライフ」のグローバルナビは、

  • 各カテゴリー(+サブカテゴリー)
  • サイトマップ
  • 問い合わせ

で構成しています。

グローバルナビのメニューの作成が終わったら、カスタマイザーでの設定を。

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

ヘッダーレイアウト(PC)ヘッダーナビロゴ横右寄せ
ヘッダーレイアウト(SP)ロゴ中央メニュー左
ヘッダー境界線なし
ヘッダーの背景を透明にするかする(文字色:黒)
ヘッダーレイアウト設定

参考記事

グローバルナビ(ヘッダーメニュー)の設定方法|SWELL公式

③メインビジュアルの設定

メインビジュアルとは、サイトのファーストビューとして設定できる、画像や動画のことです。

くうか

もちろんなくても大丈夫ですが、メインビジュアルがあるとサイトの個性を出すことができます。

準備として、

  • 画像or動画
  • リンクを設置するか

を、考えておきましょう。

「くうかんしんぷるライフ」では、動画にブログパーツを組み合わせたメインビジュアルにしています。

メインビジュアルにブログパーツ
メインビジュアルにブログパーツ

Canvaで作成した動画の上に、ブログパーツでトップページメニューと画像をのせたイメージです。

手順は、

  1. メニューのブログパーツを作る
    1. リッチカラムブロックを使って、配置したい場所にメニューや画像が来るように調整する
    2. メニューからトップページの各エリアへアンカーリンクをする
  2. メインビジュアルにする背景動画(または画像)を用意する
    1. 必要であればPCとSPで動画(画像)を分ける
  3. カスタマイザーでメインビジュアルの設定をする

となります。

メインビジュアル設定箇所
【外観】→【カスタマイズ】→【トップページ】→【メインビジュアル】

メインビジュアルの表示内容動画
表示設定Scrollボタンを表示させるにチェック
メインビジュアルの高さ設定ウィンドウサイズにフィットさせる
動画(PC用)用意した動画を設定(サイズ例:1600×900px)
ブログパーツID1作成したブログパーツのIDのみ入力
メインビジュアル設定

詳しい設置方法は、以下の記事にまとめています。

くうか

表示位置の調整に手間取ったけど、トップページ内の好きな所へアクセスできる仕組みは面白いかなーと。

④お知らせバーの設置方法

トップページの1番上にお知らせバーを設置しました。

ヘッダーの背景を透明にしている場合は、トップページには表示されません。

お知らせバー
お知らせバー

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

お知らせバーの表示位置ヘッダー上部に表示
お知らせバーの文字の大きさ普通
表示タイプテキスト位置固定(ボタンを設置)
お知らせ内容URLを入力
ボタンテキストCLICK!
お知らせバーの背景効果なし
お知らせバー設定

このトップページカスタマイズ記事へ、一発で遷移できるリンクを入れたくて設置しました。

くうか

モバイルでも表示されます!
目立つので、1番見てほしいことを入れるといいですね。

⑤ピックアップバナーの設置方法

現在のトップページにはピックアップバナーは設置していませんが、設置時の説明だけ記載しておきます。

ヘッダー部分には、記事がランダムでスライドするかっこいい【スライダー】を設置することもできますし、記事やカテゴリをピックアップ表示できる【ピックアップバナー】を設置することもできます。

SWELLではスライダーとピックアップバナー、両方を表示させることも可能

ピックアップバナー
赤で囲った部分がピックアップバナー

ピックアップバナー設定箇所
【外観】→【カスタマイズ】→【トップページ】→【ピックアップバナー】

「くうかんしんぷるライフ」で以前使用していたピックアップバナーの画像サイズ【400×150】です。

バナーレイアウト固定幅4列(PC)・固定幅2列(SP)
バナーデザインタイトル⇒表示しない、内側に白線をつけない、バナー画像を少し暗くしない
ピックアップバナー設定

ピックアップバナーにはカテゴリーをあてるのも良いですが、テーマごとにバラバラになっている記事をまとめた”まとめ記事”をリンクさせるのもおすすめです。

くうか

記事内で各記事へ内部リンクしているので、色んな記事を見てもらえると嬉しいなという期待もこめて…♪

【外観】→【メニュー】で投稿ページやカテゴリーなどを追加し、【ピックアップバナー】として登録します。

ピックアップバナーの画像は、投稿ページなどで設定されているアイキャッチが適用されますが、【概要】に画像のURLを直接指定することにより、任意の画像にも指定できます。

ピックアップバナー:任意の画像の設定の仕方

ピックアップバナー設定画面
ピックアップバナー設定画面

画像URLは、WordPressの左メニュー内の【メディア】→【ライブラリ】で該当の画像のURLがわかります。

くうか

ピックアップバナーの画像は、雰囲気を揃えるといい感じになりますね。

ピックアップバナーに関する質問

トップページ以外の記事ページ等にもピックアップバナーを表示させたい場合はどうすればいいの?

【外観】→【カスタマイズ】→【トップページ】→【ピックアップバナー】→【その他】で、「トップページ以外の下層ページにも表示する」にチェックを入れます。

くうか

記事ページにもピックアップバナーが表示されるようになります!

タイトルロゴとピックアップバナーの間に余白が入ってしまう

【外観】→【カスタマイズ】→【トップページ】→【その他】で、「コンテンツ上の余白量」を標準から狭めやなしに設定します。

くうか

私も「なし」です。

記事スライダーの設定

記事スライダーも現在のトップページでは未使用となっていますが、設定内容だけ記載しておきます。

記事スライダー
赤い部分が記事スライダー

記事をスライドさせながら表示ができる記事スライダー。

設置するとメインビジュアルの下に表示されます。

くうか

とても目を引くので、見たい記事があればユーザーが回遊してくれるはず。

記事スライダー設定箇所
【外観】→【カスタマイズ】→【トップページ】→【記事スライダー】

  • カテゴリーまたはタグで絞る
  • 並び順
  • 表示の設定
  • スライドの枚数・速度・間隔の設定

などを設定することができます。

SWELLでフッターをカスタマイズ

フッターまで見てくれる人は果たしているのか?わかりませんが、まとめ記事の内部リンクを設置する方が多いようです。

フッターは1〜3まであり、【外観】→【ウィジェット】で設定することができます。

サイト型トップページのフッター全体
フッター全体
STEP
フッター1を作成

フッター1には内部リンクを設置しました。まとめ記事を配置するのが個人的におすすめ。

フッター(PC)1
フッター(PC)1

【ブログパーツ】にて、【ボックスメニュー】ブロックで入れたい内部リンクを作成しておく。(アイコンとテキストの並びを横並びにすると、リストのようになるので私は好み。)

【外観】→【ウィジェット】→【フッター(PC)1】に、 テキスト追加→上記で作ったブログパーツIDを記述する。

くうか

さりげなく自分の姉妹サイトも宣伝してます。

STEP
フッター2を作成

フッター2には、ブログ村などの外部サイトへの応援ありがとうリンクを入れています。

フッター(PC)2

【ブログパーツ】にて、ブログ村などのリンクへ飛ぶ【SWELLボタン】を作成する。

この際、ボタンサイズを「大」にすると表示が揃います。

※SWELLボタンではなく、リンクリスト】ブロックでボタン表示にしても似たイメージになりますよ。

【外観】→【ウィジェット】→【フッター(PC)2】に、テキスト追加→上記で作ったブログパーツIDを記述する。

詳しくは以下の記事で解説しています。

STEP
フッター3を作成
フッター(PC)3
フッター(PC)3

【外観】→【ウィジェット】→【フッター(PC)3】に、カスタムHTMLを追加し、ブログ村のパーツhtmlを記述する。

くうか

フッターはサイトによって必要なパーツは違うと思うので、お好きに作ってくださいね。

サイト型トップページを作る前にこの2つを決めておこう

サイト型トップページを作り始める前に決めておくと良いことが、以下の2つ。

  1. サイトの中で何をアピールしたいか
  2. トップページの完成イメージ

①サイトの中で何をアピールしたいか

自身のサイトで何をアピールしたいのか、どんな順序でトップページを見せたいかを決めておきましょう。

上に配置するものほど重要なコンテンツが良いです。(下の方は見てもらえない可能性も…)

例えば…

  • サイトのメインコンテンツをはじめに見せたい
  • 読者を導きたい流れに沿って見せたい
  • リピーターが多いので新着記事から見せたい

など、サイトの特性を活かしたトップページを考えてみてください。

くうか

「くうかんしんぷるライフ」はリピーターが多いので新着記事から。そのあとからは見せたい順に表示させていますよ。

②トップページの完成イメージ

トップページの完成したイメージを、何となくでもいいので考えておきましょう。

  • 可愛くしたい・おしゃれにしたい
  • 極力シンプル
  • 入れたいコンテンツ
  • メインカラー、差し色

などなど。

くうか

私はだいたいのトップページのイメージを、紙に書き出していますよ。

「くうかんしんぷるライフ」は、可愛さもありつつ基本シンプルなサイトをイメージしています。

トップページを考える際に、私が意識していることは3つ。

  1. 色の数をなるべく抑える
    • 一般的に3〜4色程度に抑えると良いといいます。私は、黒・ピンク・ベージュ(■)を使っています。カラフルにならないように。
  2. 装飾はシンプルに
    • ブロックの装飾は派手にならないよう、シンプルなタイプを選ぶようにしています。例えば、リンクリストは「>」を選択してみたり。
  3. 情報を詰め込みすぎない
    • 余白があると美しい印象を受けます。情報を詰め込みすぎないように…。
くうか

この中では色が1番重要かなと考えています。

【まとめ】SWELLでサイト型トップページをおしゃれにカスタマイズしよう

WordPressテーマSWELLを使った、サイト型トップページのカスタマイズ完全版のまとめです。

ブロックの組み合わせと設定だけで、ここまでできるテーマ「SWELL」

WordPressを始めてすぐの私でもできて、このテーマを選んでよかった!と感じました。

検索からの流入がほとんどだとトップページはあまり見られないかもしれませんが、トップページはブログの顔!と私は考えています。(余談:「くうかんしんぷるライフ」は毎日トップページのアクセスが1番多い)

ユーザーの気持ちになって、見やすさはこれからも追及し続けていきたい。(あと自己満足。笑)

くうか

わりと頻繁にリニューアルしてるので、ぜひ見に行ってみてくださいね。

SWELLをまだ持っていないという方は、正直にレビューをしているのでぜひ読んでみてください。

SWELLの他のサイトのデザインを見たい!という方には、さとしんさんが作られているサイト集がおすすめ。

SWELL DESIGN GALLERY|WebNote+

\当ブログの利用テーマとレンタルサーバーはこちら/

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次