≫ お得!Wordpressブログの始め方はこちら

SWELLカスタマイズ!トップページをサイト型に!表示も速くなります

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

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

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

おしゃれなサイト型のトップページにできて、さらに見た目だけでなくページスピードも速くなる!?方法を教えます。

ねこさん

SWELLでお洒落なサイト型のトップページにしたいにゃあ。

でも、どんな風にカスタマイズすればいいのか分からないにゃあ・・・。

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

本記事の内容

  • ヘッダーのカスタマイズ方法を解説
  • トップページメインコンテンツのカスタマイズ方法を解説
  • トップページをサイト型にして表示速度が速くなる方法を解説

これを見れば、お洒落なサイト型にできるだけでなく、今後の記事作成などにも活用できるSWELLのカスタマイズ方法が身に付きますよ。

ひなきら

トップページだけでなく、記事作成にも活かすことができます!

今後のサイト運営に役に立つこと間違いなし!

そしてさらに、今回ご紹介するサイト型トップページはサイトの表示スピードも速くなります。


PageSpeed Insights
というツールで計測したところ、下記のような結果となりました。

ぶろぐ学部サイトのページスピード

ぶっちゃけ、モバイル98・PC100というのはかなり速いです。

ひなきら

というわけで、見た目だけでなく、ページスピードの面でもオススメできる方法のご紹介になります!

目次

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カスタマイズ】この記事のやり方でサイト型にするメリット

まずは、この記事を見ながらサイト型にする場合のメリットについて解説します。

  • CSSなど難しい知識を使わずに、簡単にサイト型にできる!
  • ブログ型とは違うオリジナルなトップぺージにできる!
  • サイトスピードが速くなる!

CSSなど難しい知識を使わずに、簡単にサイト型にできる!

今回ご紹介する方法では、CSSなど難しい知識を使わずに、簡単にサイト型にでます。

つまり、初心者であっても簡単にサイト型にカスタマイズできます。

ブログ型とは違うオリジナルなトップぺージにできる!

ブログ型は、デフォルトのデザインで、大半の人はブログ型のままだろうと思います。

ただでさえSWELLは人気のテーマなので、ブログ型では周りと同じような見た目になってしまうでしょう。

その点、サイト型では自由度が高いので、オリジナルな自分だけのサイトにカスタマイズできます。

サイトスピードが速くなる!

この記事の方法でカスタマイズをすれば、サイトスピードが向上します。

理由は簡単。ウィジェットなどを使わないからです。

ウィジェットなどは、サイトを重くする要因の一つでもありますからね。

【SWELL】カスタマイズのQ&A

SWELLのカスタマイズは初心者でも出来ますか?

はい、SWELLのカスタマイズは簡単ですから、もちろん初心者でも出来ますよ!

初めは僕も不安でしたが、やってみたら「あら、不思議!」本当に簡単でした。

初心者でも、これを見ながらカスタマイズすればトップページのカスタマイズが出来るし、アレンジの仕方も身につきます。

カスタマイズって、CSSとかの知識も必要なんじゃないですか?

いいえ、SWELLのカスタマイズでは、CSSの知識は必要ありません。

マウスでポチポチしていくだけで、お洒落なサイト型のトップページも作れます!

実際に、僕はCSSの知識ゼロですけど、簡単にカスタマイズできましたから安心してくださいね。

サイト型のトップページにするメリットは何ですか?

サイト型にすると、単純にお洒落なサイトになりますし、みんなと違う見た目のサイトに出来ます。

SWELLは大人気のテーマなので、デフォルトのトップページだと、みんなと被ってしまいますからね。

あとは、自分だけのデザインにすることで、サイトへの愛着がわきますし、モチベーションアップにもつながります。

さらに、今回紹介した方法ではウィジェットがなくなるなど、サイトスピード改善の期待もありますよ!

SWELLでカスタマイズされたブログを紹介

僕の周りにも、SWELLを使ってとてもおしゃれにカスタマイズされている方がたくさんいます。

その中でも、特におすすめなサイトをご紹介しておきますね。

くうかんシンプルライフ
くうかんシンプルライフ
コビガジェライフ
コビガジェライフ
MY OPTION
My Option
tomotomo-life
tomotomo-life

どれもオシャレでスタイリッシュで、とても参考になりますので、一度見てみてくださいね~。

まとめ|SWELLのカスタマイズ方法(サイト型トップページ)

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

SWELLのトップページ、おしゃれなサイト型にすることが出来たでしょうか。

そしてさらに、今回ご紹介した方法では、サイトスピードの高速化にもつながる可能性があります!(僕が速いので、少なくとも遅くなるリスクはない)

ひなきら

まさに一石二鳥になる可能性が大です!

見た目アップにスピードアップともなれば、もう最高ですね!!!

SWELLバナー
  • ブロックエディター完全対応
  • オシャレでスタイリッシュ
  • ブログが最高に楽しくなるテーマ
当サイト使用!
当サイトはPSIスコア100点。つまりSWELLは爆速です!
よかったらシェアしてね!

コメント

コメントする

目次
閉じる