MENU
アーカイブ
くうか
ミニマリスト
ミニマリスト・ブロガー・ライター。
整理収納アドバイザー準1級、元SE。
引っ越しをきっかけに物を減らすことを決意。快適なシンプルライフへの過程を発信しています。
SWELLでサイト型トップページを作る!解説→CLICK!

【完全保存版】SWELLサイト型トップページをおしゃれにカスタマイズする方法を解説

当ページのリンクには広告が含まれています。
SWELLカスタマイズ!サイト型トップページの作り方
この記事でわかること

【SWELLでカスタマイズ】

  • サイト型トップページの基本的な作り方
  • ヘッダーの設定
  • フッターの設定
  • トップページをおしゃれにカスタムする方法

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

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

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

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

くうか

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

当ブログのようなサイト型トップページの作り方を、まるっとわかりやすく解説しているので、ぜひ最後まで読んでみてください。

当ブログは、SWELLを4年愛用し当初からSWELL公式サイトに利用ブログとして掲載されています。

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

目次

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

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

ブログ型

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

ブログ型

サイト型

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

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

サイト型にすることで、読者側と運営者側が得られるメリットをまとめてみると…

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

どちらにもメリットが多いんです。

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

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

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

サイト型トップページを作り始める前に決めておいてほしいこと。

  1. カテゴリーは整っているか
  2. サイトの中で何をアピールしたいか
  3. トップページの完成イメージ

①カテゴリーは整っているか?

カテゴリーが整っていたほうが、サイト型トップページをスムーズに進めることができます。

不要なカテゴリーはないか、似たようなカテゴリーが複数ないか、などチェックしておきましょう。

もちろん、あとから直しても大丈夫ですができるなら先に。

くうか

当ブログもカテゴリーはかなりテコ入れしましたよ。

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

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

例えば…

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

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

くうか

当ブログはリピーターが多いので新着記事から。そのあとからは見せたい順に表示させていますよ。

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

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

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

などなど。

くうか

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

当ブログは、可愛さもあるけど基本シンプルなサイトをイメージしています。

イメージを考える際に、私が意識していることは3つ。

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

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

SWELLでサイト型トップページにカスタマイズする方法【3ステップ】

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

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

サイト型トップページの作り方3つのステップ

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

SWELLでは、固定ページで好きなようにブロックを組み合わせることで、自由なデザインのトップページを作れるようになります。

くうか

まずは事前準備!

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

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

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

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

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

くうか

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

ワードプレスのメニューから「固定ページ」→「新規追加」します。

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

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

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

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

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

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

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

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

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

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

新着記事エリア

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

コンセプトエリア

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

ミニマリストエリア

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

シンプルライフエリア

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

ブログエリア

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

カテゴリーエリア

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

アバウトエリア

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

ギャラリーエリア

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

ワードプレスのメニューから「固定ページ」→「新規追加」します。

固定ページを新規作成
固定ページの新規追加
ホームページの作成画面
ホームページの作成画面
  1. タイトル(自分がわかりやすいもの)→「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。

タクソノミーを選択
タクソノミーを選択

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

③カテゴリー検索

【ボックスメニュー】ブロックを使い、各カテゴリーをリンクさせる。

①と②はウィジェット系ブロックなので、注意事項をSWELL開発者の了さんから注意事項↓

くうか

ワードプレスのアップデート時は、ちゃんと変わらず使えているかチェックした方が良いようです!

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. ボックスメニュー:各サブカテゴリーへリンク
Room
主要記事へのリンク

次に、主要記事への直リンク。

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

Room主要記事へのリンク
主要記事へのリンクリスト

左右のカラムそれぞれに【キャプションボックス】ブロック内に【リンクリスト】ブロックで、主要記事へのリンクを作成。

持ち物(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か所を割り当てることで自由なレイアウトのサイト型トップページが出来上がり!

妹分のゆずいろ

私でもできた!

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

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

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

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

または固定ページの【ホームページ】自体の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)ロゴ中央メニュー左
ヘッダー境界線なし
ヘッダーの背景を透明にするかする(文字色:黒)
ヘッダーレイアウト設定

メインビジュアルの設定

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

くうか

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

準備として、

  • 画像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は、ワードプレスの左メニュー内の【メディア】→【ライブラリ】で該当の画像のURLがわかります。

くうか

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

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

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

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

くうか

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

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

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

くうか

当ブログは「なし」です。

記事スライダーの設定(当ブログは未使用)

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

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

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

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

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

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

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

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

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

フッターまで見てくれる人は果たしているのか?わかりませんので、見られなくてもいい・でも自分にはないと困るようなコンテンツを置いています。笑

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

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

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

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

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

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

くうか

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

STEP
フッター2を作成

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

フッター(PC)2
フッター(PC)2

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

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

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

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

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

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

くうか

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

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

カスタマイズおつかれさまでした
おつかれさまでした!

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

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

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

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

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

くうか

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

色んなサイトのデザインを見たい!という方に、さとしんさんのSWELLサイト集がおすすめ。

カスタマイズの参考に、しらこさんとsuyaさんのSWELLお役立ち記事をブクマしておくと良いですよ。

最後に:この記事を紹介してくれたサイト

この記事を紹介してくれたサイトを、ありがとうリンク集にて掲載させていただいています。

くうか

ありがとうございます!
紹介してくださった方は教えてくださると嬉しいです。

ぽちっとしていただけると嬉しいです

にほんブログ村 ライフスタイルブログ ミニマリストへ

楽天ROOMに愛用品を登録しています

楽天ROOM
SWELLカスタマイズ!サイト型トップページの作り方

この記事が気に入ったら
フォローしてね!

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

コメント

コメント一覧 (16件)

    • 久野さん
      コメントありがとうございます!!
      そういって頂けてとても嬉しいです。
      サイトもこのカスタマイズを使っていただいて嬉しくなっちゃいました(^^♪

  • くうか様

    お世話になっております。
    英語やポイ活などについて情報発信しておりますぴろやんと申します。
    いつも有益な情報発信ありがとうございます。
    くうか様のサイトがとってもわかりやすかったので、貴サイトを参考にSWELLでサイト構築いたしました。
    当方のブログでもくうか様のサイトを参考にさせていただいた旨は、記載させていただいております。
    https://piroyan101.com/swell/

    引き続き、よろしくお願いいたします。

    • piroyan101さん
      コメントありがとうございます^^
      わかりやすいと言っていただけてとっても嬉しいです。
      サイトの紹介もしていただいて、ありがとうございました!!

  • お久しぶりです、くうかさん

    先日はSWELLのセール情報ありがとうございました
    おかげさまで無事にSWELL購入できました。
    くうかさんのブログから購入したいと言っておきながら
    購入せず申し訳ありませんでした。

    被リンクしていただいてありがとうございました。
    気づくのが遅れて申し訳ありません。
    僕のブログでもリンクさせて頂き、リンク先でくうかさんのブログを
    紹介させて頂きました。

    これからもお邪魔させて頂きます。
    今回は誠にありがとうございました。

    • ノブさん
      いえいえ。お安く買えた方が絶対良いですし!
      気にしないでくださいね。

      拝見させていただきました。
      ご紹介ありがとうございました!^^

  • くうかさん!

    こんばんは!Twitterでお世話になっているためです。

    勝手で恐縮ですが、カスタマイズを参考にいたしました。なので、ブログに記載し、リンクを貼らせていただきました。

    https://tamesanlog.com/swell-customization/
    (SWELLサイト型カスタマイズ⑥:カテゴリーコンテンツでリンクを貼っています)

    • ためさん
      参考にしてくださってありがとうございます!
      ためさんのカスタマイズはとっても丁寧な説明で色々と参考になりますね^^
      紹介してくださりありがとうございました。

  • 始めまして!
    ヨシマと言います。

    くうかさんのカスタマイズが気に入り、購入させていただきました。
    アフィンガー5からの移行で上手くできるか不安ですが、記事を参考に一つ一つやっていきます。

    • ヨシマさん
      SWELLを気に入っていただけて嬉しいです!
      カスタマイズを見てくださってさらに嬉しいです。
      移行は手間ではありますが、使いやすいテーマなので頑張ってください…!

  • 初めまして!
    やちゃ坊と申します。
    初めてのコメントでドキドキしています

    SWELLのサイト型トップページに憧れ、
    くうかさんのこの記事ならカスタマイズできる!
    と参考にさせてもらいました!
    みんなからも褒められ、すごく嬉しいです!感謝しています✌︎(‘ω’✌︎ )

    微力ながら記事にて紹介もさせてもらいました!今後ともよろしくお願いします!

    https://www.ena-laughday.com/cocoonswell/

    • やちゃ坊さん
      はじめまして!コメントありがとうございます^^
      素敵にカスタマイズされていますね!
      記事の紹介もありがとうございます。
      私の方からもお礼のリンクを後日させていただきますね~!

  • 初めまして。さくと申します。
    CSSを参考にさせていただきました。
    とても素晴らしいです☆
    ありがとうございます!

    記事にリンク貼らせていただきました。

    https://wgamelab.net/swell-top/

    今後ともよろしくお願いいたします。

    • さくさん
      はじめまして。コメントありがとうございます。
      記事を参考にしていただいたようで嬉しいです!
      リンクもありがとうございます。
      こちらからも時間が出来た時にリンクさせていただきますね^^

  • くうかさん
    初めまして
    このたび、自分のサイトをデフォルトのブログ型からサイト方にしたいと考えてこちらのサイトに行きつきました。
    1点質問なのですがCSSを用いて投稿リストの先頭記事の表示を調整されているのですが、これは現在のSWELLでも可能なのでしょうか?
    いくつかパターンを試してみたのですが、1記事目から普通に表示されてしまうのです。
    何か陥りやすいパターンだったり情報をご存知ならご教授いただけないでしょうか。

    • トリダイさん
      はじめまして!記事を参考にしていただきありがとうございます。

      当ブログは最新バージョンのSWELLを使用しています。
      なので、別の要因がありそうですね。

      現在の実際の画面ではブログ型なので、想像でいくつか挙げてみると、

      ・CSSのクラス名を、調整したい投稿リストの設定項目「追加CSSクラス名」に入力していない
      ・CSSにて作ったクラス名と追加CSSクラス名が一致していない

      など、チェックしてみてください^^

コメントする

CAPTCHA


目次