SWELLを使ったトップページのカスタマイズ方法をご紹介！(一部動画あり)
SWELLのトップページを「サイト型」にする方法を分かりやすく解説していきます。
おしゃれなサイト型のトップページにできて、ページスピードも速くなる？かもしれませんよ。
ねこさんSWELLでお洒落なサイト型のトップページにしたいにゃあ。
でも、どんな風にカスタマイズすればいいのか分からないにゃあ。
こんなお悩みを解決します。
本記事の内容
- SWELLでのトップページカスタマイズ方法
- ヘッダーエリアのカスタマイズ
- メインエリアのカスタマイズ
- サイト型にして表示速度を速くする方法
これを見れば、トップぺージをお洒落なサイト型にできるだけでなく、記事投稿などでも使えるSWELLカスタマイズ方法の基本が身に付きます。
ヒナキラトップページだけでなく、記事作成にも活かすことができます！
今後のサイト運営に役立つこと間違いなしです！
そして、僕の場合はサイト型トップページにしたところサイトの表示スピードも速くなりました。
PageSpeed InsightsというGoogle公式ツールで計測したところ、下記のような結果に。
ぶっちゃけ、モバイル99・PC100というのはかなり速いです。
ヒナキラつまり、見た目だけでなくページスピードの面でも改善できる可能性があるということです！
ページスピードは2021年から重要なSEO評価要素になっているので、速いに越したことはありませんね。
それでは、まいりましょう！
SWELLのトップページをサイト型にカスタマイズ
今回のカスタマイズ方法では、下記のようなサイト型のトップページを作れるようになります。
今回ご紹介するトップページはこちら
ヒナキラこのようなトップページの作り方をご紹介します。
やり方さえ覚えれば、アレンジできるようになりますよ。
参考：こんなページにもできます
ヒナキラ今回ご紹介する方法では、こんなトップページにもできますよ。
「固定ページ」でサイト型にカスタマイズする
SWELLに限らずブログテーマのデフォルトは、まず新着記事が並ぶ「ブログ型」になっています。
そこから「サイト型」にするには、「固定ページ」を使っていきます。
ヒナキラ難しそうに感じるかもしれませんが、意外と簡単に作れますよ。
というわけで、この機会に「サイト型」のトップページにカスタマイズする方法を覚えてしまいましょう。
サイト型カスタマイズの流れ
トップページをカスタマイズする「流れ」ですが、トップページの上部から順番にカスタマイズしていきます。
具体的には、下記です。
まずは、ヘッダー部分です。
①グローバルメニュー
②お知らせバー
③メインビジュアル
④ピックアップバナー
こういった流れで見ていきます。
ヘッダーエリアは、Wordpress管理画面「外観」の「メニュー」や「カスタマイズ」で作っていきます。
次は、メイン部分です。
①固定ページ作成
②新着記事
③おすすめ記事
④カテゴリー
といった流れで行きます。
メインエリアについては、「固定ページ」を使って作成していきますよ。
それでは、まいりましょう。
SWELLでヘッダー部分をカスタマイズ
ヒナキラSWELLは、ヘッダー部分を簡単にお洒落にすることができます。
ちなみに、ヘッダーのカスタマイズはサイト型でもブログ型でも共通して使えますよ。
ヘッダー部分カスタマイズの流れ
①グローバルメニュー
②お知らせバー
③メインビジュアル
④ピックアップバナー
①グローバルメニュー
＼タップして拡大できるよ／
青枠の部分が「グローバルメニュー」です。
グローバルメニューとは、全ページに共通して表示する画面上部のメニューです。
主にカテゴリーや、おすすめ記事へのリンクを貼ることが多いですね。
グローバルメニュー設定の手順
- WordPress管理画面から「外観」→「メニュー」に進む。
- 「メニュー項目」から、グローバルメニューに設定したいものを追加する
- 「メニュー構造」で、好きな順番に並びかえる。
- 「メニューの位置」で、グローバルナビにチェック。
- 「保存」をクリック。
＼タップして拡大できるよ／
②お知らせバー
＼タップして拡大できるよ／
画像の部分が「お知らせバー」です。
お知らせバーとは、重要なお知らせ（記事）を分かりやすくアピールするための機能です。
ここに収益記事やアピールしたい記事へのリンクを貼ることが多いですね。
お知らせバー設定の手順
- WordPress管理画面から「外観」→「カスタマイズ」→「サイト全体設定」→「お知らせバー」に進む。
- 「お知らせバー」の表示位置を選択。
- 「表示タイプ」を選択。
- 「お知らせ内容」にお知らせしたい内容を入力。（下記画像を参照）
- 「リンク先のURL」にURLを入力。（下記画像を参照）
③メインビジュアル
画像の青枠部分が「メインビジュアル」です。
メインビジュアルとは、トップページを開いた時に最初に目に飛んでくる画像（動画）のことです。
ここに配置する画像によって、サイトの雰囲気が大きく変わります。
メインビジュアル設定の手順
- WordPress管理画面から「外観」→「カスタマイズ」→「トップページ」→「メインビジュアル」に進む。
- 「メインビジュアルの表示内容」は画像を選択。
- 「各スライドの設定」で表示させたい画像を添付。（下記画像を参照）
- 「各スライドの設定」で表示させたいテキストを入力。（下記画像を参照）
④ピックアップバナー
画像の青枠部分が「ピックアップバナー」です。
ピックアップバナーとは、トップページに表示できる画像型のナビゲーションメニューのことです。
カテゴリーや、おすすめ記事へのリンクを貼ることが多いでしょう。
ピックアップバナー設定の手順
- WordPress管理画面から「外観」→「カスタマイズ」→「トップページ」→「ピックアップバナー」に進む。
- 「バナーレイアウト」で表示させたいバナーの数を選択する。（当サイトは４）
- WordPress管理画面に戻って「外観」→「メニュー」に進む。
- 「メニュー項目」から、ピックアップバナーに設定したいものを追加する。
- 「メニュー構造」で、好きな順番に並びかえる。（下記画像を参照）
- 「メニューの位置」で、グローバルナビにチェック。（下記画像を参照）
- 各ピックアップバナーに「リンク先URL」、「画像URL」を入力。（下記画像を参照）
- 「保存」をクリック。
＼手順⑤・⑥の画像だよ／
＼手順⑦の画像だよ／
SWELLでメインエリアをカスタマイズ
では本記事の本題ともいえる「メインエリア」のカスタマイズ方法を見ていきましょう。
なお、メインエリアは下記の流れで解説していきます。
①固定ページ作成
②空白の「新着記事」の作成
③新着記事エリア作成
④おすすめ記事エリア作成
⑤カテゴリーエリア作成
ヒナキラこの順番で解説していきます。
メインエリアも、わりと簡単にカスタムできますよ。
①固定ページの新規作成
メインエリアは、「固定ページ」で作っていきます。
というわけで、まずは「固定ページ」を新規に作成しましょう。
固定ページ作成の手順
- WordPress管理画面から「固定ページ」→「新規追加」に進む。
- タイトルを、「ホーム」などとしておく。
- 固定ページの設定で、サイドバーを非表示にする。
ヒナキラここではサイドバーを使わない「フルワイド」で作成していきますので、サイドバーは非表示にします。
②空白の「新着記事」の作成
このあとで解説する「新着記事エリア」のための準備として、空白の「新着記事」を作成しておきます。
空白の「新着記事」作成の手順
- WordPress管理画面から「固定ページ」→「新規追加」に進む。
- タイトルを、「新着記事」などとしておく。
- パーマリンクを「new-post」などとしておく。
- ページを「公開」にする。
- WordPress管理画面から「外観」→「カスタマイズ」→「Wordpress設定」→「ホームページ設定」に進む。
- 「ホームページの表示」は固定ページを選択する。
- 「投稿ページ」を先ほど作成したばかりの「新着記事」にする。
ヒナキラ空白のページを作る理由は、あとで新着記事を呼び出すのに必要になる為です。
③新着記事エリアの作成
ヒナキラではここから、「新着記事エリア」作成の説明をしていきます。
新着記事エリア、おすすめ記事エリアについて動画で見たい方は下記をどうぞ。
新着記事エリア作成の手順
- 「コンテンツの横幅をどこに揃えるか」は、記事を選択。
- 「上下のpadding量」はPC・モバイルともに「40」を選択。
- 背景色を変更。
- 「上部の境界線の形状」はジグザグを選択。
- 「下部の境界線の高さレベル」は「3」に設定。
カラムブロックのパターンを「50/50」に設定する。
「左側カラム」の設定手順
- 「段落」を追加して、＼新着記事／などと入力。
- 「投稿リスト」ブロックの追加。
- 「表示する投稿数」は「1」に設定。
- 「レイアウト」はカード型を選択。
- 「投稿の表示順序」は新着順を選択。
- 「最大カラム数」は「1」を選択。
- 「抜粋文の文字数」は「40」を選択。
「右側カラム」の設定手順
- 「タブ」ブロックを追加。
- タブの名称を「新着順」と「人気順」に変更。
- タブブロックの設定で「スタイル」を吹き出しに変更。
- 「新着順」のタブに「投稿リスト」ブロックを追加。
- 「人気順」のタブに「投稿リスト」ブロックを追加。
- 「表示する投稿数」は「3」に設定。
- 「レイアウト」はテキスト型を選択。
- 「投稿の表示順序」は新着順を選択。
- 「抜粋文の文字数」は「0」を選択。
- MOREリンクの表示テキストは「新着記事をもっと見る」と入力。
- 「MOREリンクのURL」には先ほど作った空白の「新着記事」のURLを入力。
- 「高度な設定」の追加CSSクラスに『li-first-none』と入力。（最新記事を非表示にするため）
- 「表示する投稿数」は「3」に設定。
- 「レイアウト」はリスト型を選択。
- 「投稿の表示順序」は人気順を選択。
- 「抜粋文の文字数」は「0」を選択。
④おすすめ記事エリアの作成
ヒナキラここからは、おすすめ記事エリアの解説に入りますよ～。
おすすめ記事エリア作成の手順
- 「コンテンツの横幅をどこに揃えるか」は、記事を選択。
- 「上下のpadding量」はPC・モバイルともに「40」を選択。
- 背景色を変更。
- 「上部の境界線の形状」はジグザグを選択。
- 「下部の境界線の高さレベル」は「3」に設定。
カラムブロックのパターンを「50/50」に設定。
その下にもカラムブロック「50/50」を追加。
- 「表示する投稿数」は「1」に設定。
- 「レイアウト」はリスト型を選択。
- 「抜粋文の文字数」は「40」を選択。
- Pickupタブの「投稿IDを直接指定」におすすめ記事のIDを入力。
⑤カテゴリーエリアの作成
ヒナキラでは、今回のラストとなる「カテゴリーエリア」の作成方法を解説していきます。
カテゴリーエリア作成の手順
- 「コンテンツの横幅をどこに揃えるか」は、記事を選択。
- 「上下のpadding量」はPC・モバイルともに「40」を選択。
- 背景色を変更。
- 「上部の境界線の形状」はジグザグを選択。
- 「下部の境界線の高さレベル」は「3」に設定。
カラム＆バナーリンク設置の手順
- 「カラム」ブロックの追加で４つのカラムを設置。
- 各カラムに画像を設置。
- 各画像にリンク先のURLを設定。
カテゴリー別の記事表示の手順
- 「タブ」ブロックを追加。
- タブの名称を変更。
- 「タブサイズ設定」で端まで並べる（均等幅で）を選択。
- タブサイズ設定（SP)で「ナビをスクロール可能にする」にチェック。
- 各タブに「投稿リスト」ブロックを追加。
- 「表示する投稿数」は「3」に設定。
- 「レイアウト」はリスト型を選択。
- 「投稿の表示順序」は「人気順」を選択。
- 「抜粋文の文字数」は「40」を選択。
- MOREリンクの表示テキストには「もっと見る」などと入力。
- 「MOREリンクのURL」には、カテゴリーのURLを入力。
ヒナキラ以上で、トップページのカスタマイズは完了です！
最後にSWELLサイト型トップページを公開する
では最後に、カスタマイズしたサイト型トップページを公開しましょう。
トップページ公開の手順
- 固定ページを「公開」にする。
- WordPress管理画面から「外観」→「カスタマイズ」→「Wordpress設定」→「ホームページ設定」に進む。
- 「ホームページの表示」は固定ページを選択する。
- 「ホームページ」を先ほど作成したばかりの固定ページ「ホーム」にする。
ヒナキラこれで、「ブログ型」から「サイト型」のトップページに変更されました。
きちんと反映できているか、確認してみてくださいね。
SWELLをサイト型にカスタマイズするメリットとは？
ここからは基本的な考え方の話で、SWELLをサイト型にカスタマイズするメリットについて解説します。
メリットをまとめると下記です。
- CSSなど難しい知識を使わずに、簡単にサイト型にできる
- 「ブログ型」と違うオリジナルなトップぺージにできる
- サイトスピードが速くなる
①ＣＳＳなど難しい知識を使わずに、簡単にサイト型にできる！
SWELLでは、CSSなどの難しいコードや専門的な知識がなくても簡単にサイト型にできます。
つまり、初心者でも簡単にカスタマイズができるということ。
ヒナキラ誰でも簡単にカスタムできるというのは、とても大きなメリットです。
②「ブログ型」と違うオリジナルなトップぺージにできる
「ブログ型」は新着記事が並ぶSWELLのデフォルトデザインです。
ただでさえSWELLは人気のテーマなので、デフォルトでは多くの人と見た目が被ってしまいます。
そして「サイト型」にすれば、そのデメリットが解消されてオリジナルなトップページに。
ヒナキラ「サイト型」は自由度が高く、オリジナルな自分だけのサイトにカスタマイズできます。
自分だけのデザインに出来るというメリットがありますよ。
③サイトスピードが速くなる
サイト型にカスタマイズすれば、サイトスピードが向上する可能性があります。
ウィジェットなどを使わないことで、サーバーとデータのやり取りをする回数が減るからです。（下記参照）
ヒナキラウィジェットなどは、サイトを重くする要因の一つでもありますからね。
SWELLサイト型カスタマイズのQ&A
ここでは、カスタマイズに関するQ&Aもご紹介していきますね。
- SWELLのサイト型カスタマイズは初心者でも出来ますか？
-
はい、SWELLのカスタマイズは簡単ですから、もちろん初心者でも出来ます。
ぶっちゃけ僕も不安でしたが、やってみたら「あら、不思議」本当に簡単でした。
初心者でも、これを見ながらカスタマイズすればトップページのカスタマイズが出来るし、アレンジの仕方も身につきますよ。
- カスタマイズって、CSSとかの知識も必要なんじゃないですか？
-
いいえ、SWELLのカスタマイズでは、CSSの知識は必要ありません。
マウスでポチポチしていくだけで、お洒落なサイト型のトップページも作れます。
実際に、僕はCSSの知識ゼロですけど、簡単にカスタマイズできましたから安心してくださいね。
- サイト型のトップページにするメリットは何ですか？
-
サイト型にすると、単純にお洒落なサイトになりますし、みんなと違う見た目のサイトに出来ます。
SWELLは大人気のテーマなので、デフォルトのトップページだと、みんなと被ってしまいますからね。
あとは、自分だけのデザインにすることで、サイトへの愛着がわきますし、モチベーションアップにもつながります。
さらに、今回紹介した方法ではウィジェットがなくなるなど、サイトスピード改善の期待もありますよ。
SWELLでカスタマイズされたブログを紹介
僕の周りにも、SWELLを使ってとてもおしゃれにカスタマイズしている方がたくさんいます。
というより、ほとんどみんなカスタマイズしていますね。
ここでは、その中でも特にオシャレなサイトをご紹介します。
ヒナキラオシャレでスタイリッシュで参考になりますので、一度見に行ってみてくださいね。
まとめ｜SWELLカスタマイズ（サイト型トップページに）
いかがでしたでしょうか。
「SWELLのトップページ、おしゃれなサイト型にすることが出来たよ！」という方が一人でもいれば嬉しいです。
そして、今回ご紹介した方法では、サイトスピードの高速化にもつながる可能性も。
サイトスピードが上がれば、SEOにも有利になりますから、見逃せないメリットですよ。
ヒナキラ見た目が良くなって、スピードも改善する。
まさに一石二鳥ですね。
では、今回はこれで終わりになります。
またのお越しを～。
コメント