➡とってもお得なWordpressブログの作り方はこちら

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

SWELLトップページ-サイト型
この記事のまとめ

SWELLを使ったトップページのカスタマイズ方法をご紹介!

SWELLのトップページを「サイト型」にする方法を分かりやすく解説していきます。

これを見れば、お洒落なサイトにすることができ、さらにユーザーの回遊率UPなどにもつながることでしょう!

ブロ美ちゃん

SWELLでお洒落なサイト型のトップページにしたいなあ。
でも、どんな風にカスタマイズすればいいのか分からないなあ・・・。

こんなお悩みにお答えします。

本記事の内容

【SWELL】ヘッダーのカスタマイズ方法を解説

【SWELL】トップページメインコンテンツのカスタマイズ方法を解説

これを見おわったときには、お洒落なサイト型にできているだけでなく、記事作成などにも活用できるSWELLのカスタマイズ方法身に付いていることでしょう。

ひなきら

トップページだけでなく、記事作成にも活かすことができます!
今後のサイト運営に役に立つこと間違いなし!

目次

【SWELLカスタマイズ】トップページを憧れのサイト型に!

SWELLでトップページをサイト型にカスタマイズしたものが、下記のものになります。

SWELLトップページ
ひなきら

今回は、このようなトップページの作り方をご紹介しますよぉ。

サイト型にカスタマイズする方法

SWELLは、デフォルトの状態であれば、ヘッダーの下に新着記事が並ぶ「ブログ型」になっていますよね。

これを「サイト型」にするには、「固定ページ」を使っていくことになります。

ブロ子

なんだか難しそう・・・

ひなきら

僕もそう思っていました。
でも、やってみると意外と簡単なんですよ。

そうなんです。やってみると意外と簡単に作れてしまうんですよね。

なので、この機会にぜひ僕と一緒に「サイト型」のトップページにカスタマイズしちゃいましょう!

カスタマイズの流れ

では、トップページをカスタマイズする「流れ」を見ておきましょう。

ザックリいうと、トップページの上から順番にカスタマイズしていきます。

細かくすると、下記です。

STEP
ヘッダー部分

まずは、ヘッダーから。

①グローバルメニュー

②お知らせバー

③メインビジュアル

④ピックアップバナー

といった流れで見ていきます。

STEP
メインコンテンツの部分

次は、メイン部分です。

①新着記事

②おすすめ記事

③カテゴリー

といった流れで行きます。

この部分は「固定ページ」を使って作成していきます。

さっ、それではいきますよ!せーーのっ!

「おしえて!ヒナキラーーーーー!」

え?そんなやつ知らないって?

失礼しました、僕です(笑)

【SWELLカスタマイズ】ヘッダー部分

ひなきら

SWELLは、ヘッダー部分を簡単にお洒落にすることができます。

ちなみにですが、ヘッダーのカスタマイズは、サイト型でもブログ型でも共通して使えます。

グローバルメニュー

\タップして拡大できるよ/

SWELLグローバルメニュー

青枠の部分が「グローバルメニュー」です。

グローバルメニューとは、全ページに共通して表示するメニューです。

グローバルメニュー設定の手順

  1. WordPress管理画面から「外観」→「メニュー」に進む。
  2. 「メニュー項目」から、グローバルメニューに設定したいものを追加する
  3. 「メニュー構造」で、好きな順番に並びかえる。
  4. 「メニューの位置」で、グローバルナビにチェック。
  5. 「保存」をクリック。

\タップして拡大できるよ/

SWELLグローバルメニュー手順

お知らせバー

\タップして拡大できるよ/

SWELLお知らせバー

画像の部分が「お知らせバー」です。

お知らせバーとは、重要なお知らせを分かりやすくアピールするための機能です。

お知らせバー設定の手順

  1. WordPress管理画面から「外観」→「カスタマイズ」→「サイト全体設定」→「お知らせバー」に進む。
  2. 「お知らせバー」の表示位置を選択。
  3. 「表示タイプ」を選択。
  4. 「お知らせ内容」にお知らせしたい内容を入力。(下記画像を参照)
  5. 「リンク先のURL」にURLを入力。(下記画像を参照)
SWELLお知らせバー設定

メインビジュアル

SWELLメインビジュアル

画像の青枠部分が「メインビジュアル」です。

メインビジュアルとは、トップページを開いた時に最初に目に飛んでくるエリアのことです。

メインビジュアル設定の手順

  1. WordPress管理画面から「外観」→「カスタマイズ」→「トップページ」→「メインビジュアル」に進む。
  2. 「メインビジュアルの表示内容」は画像を選択。
  3. 「各スライドの設定」で表示させたい画像を添付。(下記画像を参照)
  4. 「各スライドの設定」で表示させたいテキストを入力。(下記画像を参照)
SWELLメインビジュアル

ピックアップバナー

SWELLピックアップバナー

画像の青枠部分が「ピックアップバナー」です。

ピックアップバナーとは、トップページに表示できる画像型のナビゲーションメニューのことです。

ピックアップバナー設定の手順

  1. WordPress管理画面から「外観」→「カスタマイズ」→「トップページ」→「ピックアップバナー」に進む。
  2. 「バナーレイアウト」で表示させたいバナーの数を選択する。(当サイトは4)
  3. WordPress管理画面に戻って「外観」→「メニュー」に進む。
  4. 「メニュー項目」から、ピックアップバナーに設定したいものを追加する。
  5. 「メニュー構造」で、好きな順番に並びかえる。(下記画像を参照)
  6. 「メニューの位置」で、グローバルナビにチェック。(下記画像を参照)
  7. 各ピックアップバナーに「リンク先URL」、「画像URL」を入力。(下記画像を参照)
  8. 「保存」をクリック。

\手順⑤・⑥の画像だよ/

SWELLピックアップバナー設定

\手順⑦の画像だよ/

【SWELLカスタマイズ】メインコンテンツ部分

\メインコンテンツの部分だよ/

SWELLメインコンテンツ

さて、では今回の本題ともいえる「メインコンテンツ部分」の解説に入ります。

僕のサイトでは、メインコンテンツ部分は「新着記事エリア」→「おすすめ記事エリア」→「カテゴリーエリア」といった構成になっています。

順番に解説していきますね。

ひなきら

メインコンテンツ部分も、やり方さえ分かってしまえば簡単だよ~!

固定ページの新規作成

メインコンテンツ部分は、「固定ページ」で作っていきます。

なので、まずは「固定ページ」を新規作成しましょう。

また、ここではサイドバーを使わない「フルワイド」で作成していきますので、サイドバーは非表示にします。

固定ページ作成の手順

  1. WordPress管理画面から「固定ページ」→「新規追加」に進む。
  2. タイトルを、「ホーム」などとしておく。
  3. 固定ページの設定で、サイドバーを非表示にする。

空白の「新着記事」の作成

このあとで解説する「新着記事エリア」のための準備として、空白の「新着記事」を作成しておきます。

新着記事を呼び出すのに必要になるんですね。

空白の「新着記事」作成の手順

  1. WordPress管理画面から「固定ページ」→「新規追加」に進む。
  2. タイトルを、「新着記事」などとしておく。
  3. パーマリンクを「new-post」などとしておく。
  4. ページを「公開」にする。
  5. WordPress管理画面から「外観」→「カスタマイズ」→「Wordpress設定」→「ホームページ設定」に進む。
  6. 「ホームページの表示」は固定ページを選択する。
  7. 「投稿ページ」を先ほど作成したばかりの「新着記事」にする。

新着記事エリア

SWELL新着記事エリア
ひなきら

ではここから、「新着記事エリア」の説明をしていきます。

新着記事エリア作成の手順

STEP
「フルワイド」ブロックの追加
SWELLフルワイド
「フルワイド」ブロックの設定
  • 「コンテンツの横幅をどこに揃えるか」は、記事を選択。
  • 「上下のpadding量」はPC・モバイルともに「40」を選択。
  • 背景色を変更。
  • 「上部の境界線の形状」はジグザグを選択。
  • 「下部の境界線の高さレベル」は「3」に設定。
STEP
「カラム」ブロックの追加

カラムブロックのパターンを「50/50」に設定する。

SWELLカラムブロック追加
STEP
左側のカラムの設定(最新記事)
SWELL新着記事

「左側カラム」の設定手順

  1. 「段落」を追加して、\新着記事/などと入力。
  2. 「投稿リスト」ブロックの追加。
「投稿リスト」ブロックの設定
  • 「表示する投稿数」は「1」に設定。
  • 「レイアウト」はカード型を選択。
  • 「投稿の表示順序」は新着順を選択。
  • 「最大カラム数」は「1」を選択。
  • 「抜粋文の文字数」は「40」を選択。
STEP
右側のカラムの設定(新着・人気記事)
SWELL新着・人気

「右側カラム」の設定手順

  1. 「タブ」ブロックを追加。
  2. タブの名称を「新着順」と「人気順」に変更。
  3. タブブロックの設定で「スタイル」を吹き出しに変更。
  4. 「新着順」のタブに「投稿リスト」ブロックを追加。
  5. 「人気順」のタブに「投稿リスト」ブロックを追加。
「新着順」の投稿リストブロックの設定
  • 「表示する投稿数」は「3」に設定。
  • 「レイアウト」はテキスト型を選択。
  • 「投稿の表示順序」は新着順を選択。
  • 「抜粋文の文字数」は「0」を選択。
  • MOREリンクの表示テキストは「新着記事をもっと見る」と入力。
  • 「MOREリンクのURL」には先ほど作った空白の「新着記事」のURLを入力。
「人気順」の投稿リストブロックの設定
  • 「表示する投稿数」は「3」に設定。
  • 「レイアウト」はリスト型を選択。
  • 「投稿の表示順序」は人気順を選択。
  • 「抜粋文の文字数」は「0」を選択。

おすすめ記事エリア

SWELLおすすめ記事
ひなきら

ここからは、おすすめ記事エリアの解説に入りますよ~。

おすすめ記事エリア作成の手順

STEP
「フルワイド」ブロックの追加
「フルワイド」ブロックの設定
  • 「コンテンツの横幅をどこに揃えるか」は、記事を選択。
  • 「上下のpadding量」はPC・モバイルともに「40」を選択。
  • 背景色を変更。
  • 「上部の境界線の形状」はジグザグを選択。
  • 「下部の境界線の高さレベル」は「3」に設定。
STEP
「カラム」ブロックの追加(上下2段)

カラムブロックのパターンを「50/50」に設定。

その下にもカラムブロック「50/50」を追加。

STEP
それぞれのカラムに「投稿リスト」ブロックを追加
「おすすめ記事」の投稿リストブロックの設定
  • 「表示する投稿数」は「1」に設定。
  • 「レイアウト」はリスト型を選択。
  • 「抜粋文の文字数」は「40」を選択。
  • Pickupタブの「投稿IDを直接指定」におすすめ記事のIDを入力。

カテゴリーエリア

SWELLメインコンテンツ-カテゴリー
ひなきら

では、いよいよラストとなる「カテゴリーエリア」の作成方法を解説していきますよぉ~。

カテゴリーエリア作成の手順

STEP
「フルワイド」ブロックの追加
「フルワイド」ブロックの設定
  • 「コンテンツの横幅をどこに揃えるか」は、記事を選択。
  • 「上下のpadding量」はPC・モバイルともに「40」を選択。
  • 背景色を変更。
  • 「上部の境界線の形状」はジグザグを選択。
  • 「下部の境界線の高さレベル」は「3」に設定。
STEP
カラム&バナーリンクを設置
SWELLカスタマイズ-カテゴリー

カラム&バナーリンク設置の手順

  1. 「カラム」ブロックの追加で4つのカラムを設置。
  2. 各カラムに画像を設置。
  3. 各画像にリンク先のURLを設定。

カテゴリー別の記事表示

SWELLカスタマイズ-カテゴリ別

カテゴリー別の記事表示の手順

  1. 「タブ」ブロックを追加。
  2. タブの名称を変更。
  3. 「タブサイズ設定」で端まで並べる(均等幅で)を選択。
  4. タブサイズ設定(SP)で「ナビをスクロール可能にする」にチェック。
  5. 各タブに「投稿リスト」ブロックを追加。
カテゴリー別「投稿リスト」ブロックの設定
  • 「表示する投稿数」は「3」に設定。
  • 「レイアウト」はリスト型を選択。
  • 「投稿の表示順序」は「人気順」を選択。
  • 「抜粋文の文字数」は「40」を選択。
  • MOREリンクの表示テキストには「もっと見る」などと入力。
  • 「MOREリンクのURL」には、カテゴリーのURLを入力。

【SWELL】サイト型トップページを公開する

以上で、トップページの作成は完了です!

では、作ったトップページを公開しましょう!

トップページ公開の手順

  1. 固定ページを「公開」にする。
  2. WordPress管理画面から「外観」→「カスタマイズ」→「Wordpress設定」→「ホームページ設定」に進む。
  3. 「ホームページの表示」は固定ページを選択する。
  4. 「ホームページ」を先ほど作成したばかりの固定ページ「ホーム」にする。

これで、サイト型のトップページに変更されました。

ひなきら

公開できてるか、確認してみてねっ!

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

いかがでしたでしょうか。

SWELLのトップページ、サイト型にすることが出来たでしょうか。もしくは、出来そうでしょうか。

ひなきら

これを見ながら、お洒落なサイトにできた!という嬉しい声があがれば、これに勝る喜びはありません。

逆に、良く分からないよ・・・。という場合には、分かる範囲であれば回答しますので、気軽にコメントくださいね。

これからSWELLにしようか迷っている・・・。という方は、
SWELLは最高のWordPressテーマ!評判・感想レビュー!~愛すべき理由がここにある~←こちらの記事をご覧ください。きっとSWELLの魅力に取りつかれてしまうことでしょう・・・。

よかったらシェアしてね!

コメント

コメントする

目次
閉じる