SWELLを使ったトップページのカスタマイズ方法を紹介！(一部動画あり)
トップページを「サイト型」にする方法を分かりやすく解説していきます。
SWELLでお洒落なサイト型のトップページにしたいです。
こんなお悩みを解決します。
本記事の内容
- SWELLでのトップページカスタマイズ方法
- ヘッダーエリアのカスタマイズ
- メインエリアのカスタマイズ
- サイト型にして表示速度を速くする方法
これを見れば、トップぺージをお洒落なサイト型にできるだけでなく、記事投稿などでも使えるSWELLカスタマイズ方法の基本が身に付きます。
トップページだけでなく、記事作成にも活かすことができます！
そして、僕の場合はサイト型トップページにしたところサイトの表示スピードも速くなりました。
と、前置きはこの辺にして見ていきましょう！
＼ おしゃれで効率性の高いテーマ ／
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など難しい知識を使わずに、簡単にサイト型にできる
- 「ブログ型」と違うオリジナルなトップぺージにできる
- サイトスピードが速くなる
①CSSなど難しい知識を使わずに、簡単にサイト型にできる！
SWELLでは、CSSなどの難しいコードや専門的な知識がなくても簡単にサイト型にできます。
つまり、初心者でも簡単にカスタマイズができるということ。
誰でも簡単にカスタムできるというのは、とても大きなメリットです。
②「ブログ型」と違うオリジナルなトップぺージにできる
「ブログ型」は新着記事が並ぶSWELLのデフォルトデザインです。
ただでさえSWELLは人気のテーマなので、デフォルトでは多くの人と見た目が被ってしまいます。
そして「サイト型」にすれば、そのデメリットが解消されてオリジナルなトップページに。
「サイト型」は自由度が高く、オリジナルな自分だけのサイトにカスタマイズできます。
自分だけのデザインに出来るというメリットがありますよ。
③サイトスピードが速くなる
サイト型にカスタマイズすれば、サイトスピードが向上する可能性があります。
ウィジェットなどを使わないことで、サーバーとデータのやり取りをする回数が減るからです。（下記参照）
ウィジェットなどは、サイトを重くする要因の一つでもありますからね。
SWELLサイト型カスタマイズのQ&A
ここでは、カスタマイズに関するQ&Aもご紹介していきますね。
- SWELLのサイト型カスタマイズは初心者でも出来ますか？
はい、SWELLのカスタマイズは簡単ですから、もちろん初心者でも出来ます。
ぶっちゃけ僕も不安でしたが、やってみたら「あら、不思議」本当に簡単でした。
初心者でも、これを見ながらカスタマイズすればトップページのカスタマイズが出来るし、アレンジの仕方も身につきますよ。
- カスタマイズって、CSSとかの知識も必要なんじゃないですか？
いいえ、SWELLのカスタマイズでは、CSSの知識は必要ありません。
マウスでポチポチしていくだけで、お洒落なサイト型のトップページも作れます。
実際に、僕はCSSの知識ゼロですけど、簡単にカスタマイズできましたから安心してくださいね。
- サイト型のトップページにするメリットは何ですか？
サイト型にすると、単純にお洒落なサイトになりますし、みんなと違う見た目のサイトに出来ます。
SWELLは大人気のテーマなので、デフォルトのトップページだと、みんなと被ってしまいますからね。
あとは、自分だけのデザインにすることで、サイトへの愛着がわきますし、モチベーションアップにもつながります。
さらに、今回紹介した方法ではウィジェットがなくなるなど、サイトスピード改善の期待もありますよ。
SWELLでカスタマイズされたブログを紹介
僕の周りにも、SWELLを使ってとてもおしゃれにカスタマイズしている方がたくさんいます。
ここでは、その中でも特にオシャレなサイトをご紹介します。
下記の記事も参考にどうぞ～。
SWELLでおしゃれな企業サイトを作る方法
SWELLなら、オシャレな企業サイトを作るのも簡単です。
企業サイトでも基本的にはポチポチとブロックを組み合わせていくだけですから。
下記では、美容室っぽいサイトを作ってみましたので、良ければ参考に見ていってくださいね。
まとめ｜SWELLをおしゃれにカスタマイズしてモチベアップに！
今回は、SWELLトップページをカスタマイズする方法について解説しました。
そして、今回ご紹介した方法では、サイトスピードの高速化にもつながる可能性もあります。というのも、ワンカラム型（サイト型）のトップページでは、サイドバーがない為です。
読み込みが少なくなることで、スピードアップも可能になるということですね。
見た目が良くなって、モチベアップ。
さらにスピードも改善する可能性あり。一石二鳥ですね。
というわけで、今回はこれで以上となります。
またねっ。
コメント