MENU
アーカイブ
くうか
ミニマリスト
整理収納・ゲーム・プログラミングが好きな40代専業主婦。4人家族。
小さなおうちに引っ越して収納が減っちゃった!少しずつ物を減らしているミニマリストでもあります。
SWELLでサイト型トップページを作る!解説→CLICK!

SWELLカスタマイズ|サイト型トップページの作り方【おしゃれ・かわいい】

SWELLカスタマイズ!サイト型トップページの作り方
この記事でわかること
  • サイト型トップページの基本をまるごとわかりやすく解説
  • SWELLでヘッダーをカスタマイズする方法
  • SWELLでフッターをカスタマイズする方法
  • SWELLの高機能なブロックの使い方

こんにちは、SWELLというWordPressテーマを3年以上愛用している、くうかです。

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

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

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

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

妹分のゆずいろ

初心者の私でもできるかな?

くうか

この記事を読めば、プログラミングの知識がなくてもサイト型トップページを作ることができます!

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

この記事はこんな人におすすめ
  • SWELLでサイト型トップページにカスタマイズしたい
  • ブログのトップページをおしゃれにカスタマイズしたい
  • SWELLでどんなトップページを作れるか知りたい

当ブログは、SWELL公式サイトに利用ブログとして掲載されています。

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

目次

サイト型トップページとは?

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

ブログ型

記事が新しい順に並んでいる状態。

ブログ型

サイト型

記事が整理され、見やすく表示されている状態。

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

実際に現在のサイト型トップページを見たい方はこちらから →トップページへ

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

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

お互いにメリットが多いね!

くうか

そう。だから記事数が増えてきたらサイト型にするのをおすすめします!

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

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

くうか

サイト型トップページを作る工程は、大きく分けて3ステップ。読みたいところへ飛んでくださいね。

SWELLを使ったサイト型トップページのカスタマイズ【3つのステップ】

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

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

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

くうか

まずは事前準備!

固定ページを3つ作成していきます。(もしくは2つ)

  1. 新着記事ページ:タイトルを付けただけの空白ページ
  2. 人気記事ページ:人気記事を配置したページ(省略可能)
  3. ホームページ:メインとなるページ

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

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

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

くうか

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

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

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

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

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

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

②【人気記事ページ】は、設置したい場合のみでOKで省略可能です。

投稿リストブロックを配置して、読んでほしい記事をピックアップして表示させるページ。

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

固定ページを新規作成
固定ページの新規追加
人気記事の作成画面
人気記事の作成画面
  1. タイトル(自分がわかりやすいもの)→「人気の記事」としました。
  2. URLスラッグ(URLとなるので英語推奨)→「popular」としました。
  3. 投稿リストブロックを追加する
    1. 投稿数:6、レイアウト:カード型、抜粋文:お好みで
    2. Pickupタブの投稿IDに6記事文のIDを記載
  4. 公開する

当ブログでは、本当の人気記事の表示ではなく、ピックアップしたい記事を表示しています。

本当の人気記事順に並べたい場合は、投稿IDを指定せず、表示順序を「人気順」にしてください。

妹分のゆずいろ

おすすめ記事より人気記事と書かれている方が読まれる気もするね!

くうか

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

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

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

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

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

①新着記事エリア→解説へ

新着記事エリア

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

コンセプトエリア

③ピックアップエリア→解説へ

ピックアップエリア

④人気記事エリア→解説へ

人気記事エリア

⑤カテゴリーエリア→解説へ

カテゴリーエリア

⑥ギャラリーエリア→解説へ

ギャラリーエリア

⑦サイト紹介エリア→解説へ

アバウトエリア

⑧検索エリア→解説へ

検索エリア

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

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

固定ページを新規作成
固定ページの新規追加
ホームページの作成画面
ホームページの作成画面
  1. タイトル(自分がわかりやすいもの)→「Home」としました。
  2. URLスラッグ(URLとなるので英語推奨)→「home」としました。
  3. 下書き保存または公開する。(公開は完成後でもOK)

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

  1. 新着記事:新着順に記事を表示
  2. コンセプト:サイトのコンセプト
  3. ピックアップ:特に目立たせたいまとめ記事などを表示
  4. 人気記事:読んでほしい記事を表示
  5. カテゴリー別:カテゴリー別に記事を表示
  6. ギャラリー:写真から記事に飛べる仕組み(見た目はインスタ風)
  7. サイト紹介:簡単なプロフィールとSWELLを紹介
  8. サイト内検索:文字列またはキーワード(タグ)から検索できる
くうか

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

①新着記事エリアの作り方

サイトによって新着記事の位置は様々ですが、私は1番はじめに持ってきています。

それは、リピーターの方のために新着記事がぱっと見でわかると、すぐにアクセスできるため。

見た目はこのように作りました。

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

最新の1・2番めの記事のみカード型のアイキャッチ付きで目立たせ、3番目以降の記事はテキスト表示にしています。

くうか

最新の記事をわかりやすくしたかったんだ。

妹分のゆずいろ

パッと見て新しい記事がわかるね!

以下、作成の手順です。

新着記事
【フルワイド】ブロックを追加する

ブロックパターンから、見出しがあらかじめ付属している【フルワイドセクション】を選択します。

フルワイドセクションを選択
フルワイドセクションを選択

見出しに注釈がはじめから入っているのが便利なので、フルワイドセクションを使っています。

フルワイド設定項目
  • コンテンツ横幅:記事
  • 上下のpadding量:PC40・SP20
  • 背景色:白
  • 上下の境界線の形状:斜線、高さ:0
新着記事
【見出し(H2)】ブロックを配置する

【見出し】はブロックパターンで付属していたものをそのまま使用しています。

見た目はセクション用。

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

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

見出しに画像を入れる
見出しに画像を入れる場合
新着記事
カード型の【投稿リスト】ブロックを追加する

【投稿リスト】ブロックで2記事のみ表示

新着記事の最新記事
この部分

【投稿リスト】ブロックを追加。

設定項目
  • 投稿数:2
  • レイアウト:カード型
  • 表示順序:新着
  • 抜粋文:40

最新記事の1・2番目の記事を大きく目立たせたいので、2記事のみ。
見た目を良くするため、抜粋文を入れています。

新着記事
テキスト型の【投稿リスト】ブロックを追加する

【投稿リスト】ブロックで3記事め以降をテキスト型で表示

新着記事の3記事め以降
この部分

【投稿リスト】ブロックを追加。

投稿リスト 設定項目
  • 投稿数:5(CSSで2記事非表示にするため5に)
  • レイアウト:テキスト型
  • 表示順序:新着
  • 抜粋文:0
  • MOREリンク:new-post(STEP1で作成した空白の新着記事ページのURLスラッグを入力)

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

投稿リストから1・2番目を非表示にする方法

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

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

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

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

\コピペ用CSSコード/

.li-2nd-none li:nth-child(-n+2) {
    display: none;
}

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

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

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

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

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

1〜2番目の記事を非表示、だけでなくカッコ内の「(-n+2)」の2の部分を他の数字に変えると、その数字の数だけ記事を非表示にすることができます!

例:3記事非表示にする場合は、-n+3にする

くうか

しらこさん、ヤモヲさん、ご協力ありがとうございました♪

くうか

新着記事の最新だけアイキャッチ付きで目立たせたかった!
お風呂で思いついたレイアウトなんだけど、いい感じで気に入ってます♪

他にもこのような表示方法もできます。(当ブログの旧バージョンより)

1記事めカード型
2記事め以降テキスト型

新着記事バージョン1

1記事めカード型
2記事め以降テキスト型+人気記事リスト型

新着記事バージョン2
くうか

新着記事は1記事めを目立たせると目を引きますね!

これら旧バージョンのレイアウトは、以下の記事で詳しく解説しています。

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

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

コンセプトエリア
コンセプトエリア

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

フルワイド設定項目
  • コンテンツ横幅:サイト幅
  • 上下のpadding量:PC40・SP20
  • 背景色:白
  • 上部の境界線:斜線、高さレベル:0
  • 下部の境界線:斜線、高さレベル:0

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

PC・タブレットは2列、SPは1列にして、あらかじめ作成しておいたサイトの画像を左カラムに追加。

右カラムにはサイトのコンセプトを入力していきます。

くうか

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

③ピックアップエリアの作り方

特に紹介したい記事を、「メディアとテキスト」ブロックを使って表示させています。

メディアとテキストブロックを使ったエリア
メディアとテキストブロックを使ったエリア

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

フルワイド設定項目
  • コンテンツ横幅:サイト幅
  • 上下のpadding量:PC40・SP20
  • 背景色:白
  • 上部の境界線:斜線、高さレベル:0
  • 下部の境界線:斜線、高さレベル:0

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

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

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

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

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

  • 【段落】
  • 【SWELLボタン】

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

メディアとテキストのテキスト部分
メディアとテキストのテキスト部分

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

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

くうか

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

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

ブログの人気記事を紹介しているエリアです。

人気記事エリア
人気記事エリア

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

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

そして【投稿リスト】ブロックを追加。

投稿リスト設定項目
  • 投稿数:3
  • レイアウト:カード型
  • 表示順序:新着
  • 抜粋文:0
  • MOREリンク:popular(事前準備で作成した人気記事のURLスラッグを入力)
  • Pickupタブの投稿IDを直接指定:読んでほしい記事ID
妹分のゆずいろ

ここも見てほしい記事を配置してるんだね!

くうか

そう。実はこのアイデアを教えてもらって今回初めてやってみたよ!

⑤カテゴリーエリアの作り方

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

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

フルワイド設定項目
  • コンテンツ横幅:サイト幅
  • 上下のpadding量:PC40・SP20
  • 背景色:白
  • 上部の境界線の形状:斜線、高さレベル:0
  • 下部の境界線の形状:斜線、高さレベル:0
カテゴリー
【リッチカラム】ブロックを追加

【リッチカラム】ブロックを追加し、好みの列数に設定する。(当サイトはPC3列)

カテゴリー
カラム内にブロックを追加
カテゴリーエリアの詳細
カテゴリーエリアの詳細
  1. カテゴリーのイメージ画像を追加する
  2. 【リンクリスト】ブロックを追加する
リンクリストを選択
リンクリストを選択

SWELLテーマ側で、あらかじめブロックパターンが2種類用意されています。(青枠部分)

トップページに使いやすいレイアウトなので、こちらを使う方法も良いかもしれません。

  1. 一括作成でサブカテゴリーを追加する(サブカテがある場合)
リンクリスト一括作成
一括作成

カテゴリーやサブカテゴリーをリストに追加したい場合は、「一括作成」するととってもラクです。

カテゴリー一覧画面が表示されるので、追加したいカテゴリーまたはサブカテゴリーを選択します。

リンクリストの一括作成
一括作成画面

選択し終えたら、追加または入れ替えボタンを押します。

追加するを選択した場合

リンクリスト一括追加
追加する

入れ替えるを選択した場合

リンクリスト一括入れ替え
入れ替える

追加した場合は、あらかじめ作られたリスト項目の下に追加されます。

入れ替えの場合は、あらかじめ作られたリスト項目に上書きされます。

リストが作られたら、リンクリストの見た目(スタイル)を設定していきます。

リンクリストのスタイル設定
スタイル設定

ボーダーを付けたり、アイコンを替えたり。お好みでカスタマイズしてみてくださいね。

  1. テキストを追加し、該当カテゴリーページへリンクする(ボタンでも良い)

また【タブ】ブロックを使って、省スペースでカテゴリー別の記事を表示する方法もあります。

タブブロック(投稿リスト)
タブブロック

タブブロック内に、カテゴリーごとの投稿リストを入れるとこのような表示が可能です。

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

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

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

フルワイド設定項目
  • コンテンツ横幅:サイト幅
  • 上下のpadding量:PC40・SP20
  • 背景色:白
  • 上部の境界線:斜線、高さレベル:0
  • 下部の境界線:斜線、高さレベル:0
ギャラリーエリア編集画面
ギャラリーエリア編集画面
  1. 【リッチカラム】を追加し、好みの列数にする
    1. 当ブログは「横スクロールで表示する」にチェック
    2. 横幅はPCタブレットは220px、スマホは180px
    3. カラム間の余白は左右0.3rem
  2. 各列に【バナーリンク】を追加し、画像とリンク先を設定する
くうか

イメージはインスタグラムなので、バナーリンクの画像サイズを正方形に近づけるとそれっぽくなります♪

⑦サイト紹介エリアの作り方

アバウトエリア
アバウトエリア

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

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

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

左カラム

  1. 【バナーリンク】でプロフィール画像
  2. 【リスト】で軽く自己紹介
  3. 【SWELLボタン】で詳しいプロフィールページへリンク

右カラム

SWELLの紹介パーツエリアとし、バナー・テキスト・SWELLボタンを配置。

くうか

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

⑧検索エリアの作り方

検索エリア
サイト内検索エリア

キーワードで検索できるエリアとなっています。

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

フルワイド設定項目
  • コンテンツ横幅:記事
  • 上下のpadding量:PC40・SP20
  • 背景色:白
  • 上部の境界線:斜線、高さレベル:0
  • 下部の境界線:斜線、高さレベル:0
  1. 【検索】ブロック:箱の中に任意のテキストを入力することができる
  2. 【タグクラウド】ブロック:タグ一覧の表示設定ができる
タグクラウドを選択
タグクラウドを選択

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

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

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

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

\ウィジェット系ブロックの注意事項を了さんからご教授いただいた!/

くうか

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

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にて作成しています。(無料のお試し期間もあり)

\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を記述する。

くうか

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

ブログのトップページをおしゃれにするために意識していること

ブログのトップページを少しでもおしゃれだったり、可愛くしたい。

そのために私が意識していることは3つ。

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

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

SWELLを使ったサイト型トップページの作り方まとめ

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

SWELLを使った、おしゃれなサイト型トップページのカスタマイズでおこなったことのまとめです。

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

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

検索からの流入がほとんどだとトップページはあまり見られないかもしれませんが、トップページはブログの顔!と私は考えています。

(余談:一応、当ブログは毎日トップページのアクセスが1番多い。)

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

くうか

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

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

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

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

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

くうか

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

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

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

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


目次