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

2021 7/25

2021.04.25 2021.07.25

この記事のまとめ

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

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

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

ねこさん

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

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

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

本記事の内容

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

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

ひなきら

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

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

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

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

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

ひなきら

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

SWELLでサイト型トップページにカスタマイズ！

さて、ではまずはサイト型にカスタマイズしたページの実例を見ましょう。

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

ちょっと違うテイストにしたい場合でも、カスタマイズの基本は学べますよ。

ひなきら

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

やり方さえ覚えておけば、自分なりにアレンジできるようになりますよ。

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

SWELLでは、デフォルトのトップページの場合、ヘッダーの下に新着記事が並ぶ「ブログ型」になっています。

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

ねこさん

なんだか難しそうだにゃ・・・

ひなきら

僕もそう思っていました。

でも、やってみると意外と簡単なんですよ。

実は、難しそうに見えるんですが、やってみると意外と簡単に作れてしまうんです。

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

カスタマイズの流れ

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

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

下記をご覧ください。

STEP

ヘッダー部分

まずは、ヘッダー部分から。

①グローバルメニュー

②お知らせバー

③メインビジュアル

④ピックアップバナー

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

STEP

メインコンテンツの部分

次は、メイン部分です。

①新着記事

②おすすめ記事

③カテゴリー

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

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

それでは、まいりましょう。

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

ひなきら

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

ヘッダーのカスタマイズは、サイト型でもブログ型でも共通して使えますので、確実に覚えておきましょう！

グローバルメニュー

＼タップして拡大できるよ／

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

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

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

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

＼タップして拡大できるよ／

お知らせバー

＼タップして拡大できるよ／

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

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

お知らせバー設定の手順

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

メインビジュアル

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

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

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

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

ピックアップバナー

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

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

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

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

＼手順⑤・⑥の画像だよ／

＼手順⑦の画像だよ／

SWELLでメインコンテンツ部分をカスタマイズ

＼メインコンテンツの部分だよ／

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

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

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

ひなきら

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

固定ページの新規作成

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

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

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

固定ページ作成の手順

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

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

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

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

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

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

カテゴリーエリア

ひなきら

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

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

STEP

「フルワイド」ブロックの追加

「フルワイド」ブロックの設定

「コンテンツの横幅をどこに揃えるか」は、記事を選択。
「上下のpadding量」はPC・モバイルともに「40」を選択。
背景色を変更。
「上部の境界線の形状」はジグザグを選択。
「下部の境界線の高さレベル」は「3」に設定。

STEP

カラム＆バナーリンクを設置

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

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

カテゴリー別の記事表示

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

「タブ」ブロックを追加。
タブの名称を変更。
「タブサイズ設定」で端まで並べる（均等幅で）を選択。
タブサイズ設定（SP)で「ナビをスクロール可能にする」にチェック。
各タブに「投稿リスト」ブロックを追加。

カテゴリー別「投稿リスト」ブロックの設定

「表示する投稿数」は「3」に設定。
「レイアウト」はリスト型を選択。
「投稿の表示順序」は「人気順」を選択。
「抜粋文の文字数」は「40」を選択。
MOREリンクの表示テキストには「もっと見る」などと入力。
「MOREリンクのURL」には、カテゴリーのURLを入力。

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

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

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

トップページ公開の手順

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

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

ひなきら

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

【SWELLカスタマイズ】この記事のやり方でサイト型にするメリット

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPress高速化｜PSIスコア100点にした方法を解説

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ｜SWELLのカスタマイズ方法（サイト型トップページ）

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

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

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

ひなきら

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

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

SWELLの導入手順｜最速でインストールして早く使いたい方へ

SWELLの評判と真価｜使いやすくてオシャレな爆速テーマ

SWELLオススメ機能トップ10|ランキング形式で紹介！

SWELLにおすすめのプラグインと相性の悪いプラグインを紹介

ブロックエディター完全対応
オシャレでスタイリッシュ
ブログが最高に楽しくなるテーマ

WordPressテーマ「SWELL」

リンク先 : https://swell-theme.com/

当サイト使用！
当サイトはPSIスコア100点。つまりSWELLは爆速です！

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

URL Copied!

URL Copied!

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