> 【チート級】ChatGPTでブログ執筆を超効率化へ!10倍速で書く方法
PR

SWELLトップページをおしゃれにカスタマイズ【動画ビジュアル】

Customize-the-top-page-of-SWELL

SWELLトップページ(メインビジュアル動画で)のカスタマイズ方法を紹介します。

おしゃれな「サイト型」にする方法を分かりやすく解説。

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

ヒナキラ

こんなお悩みを解決します。

この記事で解決できる悩み
  • SWELLトップページのカスタマイズ方法は?
  • サイト型へのカスタマイズ方法は?
  • メインビジュアル動画の設定方法は?

これを見れば、SWELLを使ったトップぺージをお洒落なサイト型にでき、モチベーション高くブログ運営をすることができるようになります。

ヒナキラ

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

と、前置きはこの辺にして、さっそく見ていきましょう!

Blog

この記事を書いた人

ヒナキラ

ブログ最高月25万円。SNS最高日給12万円。Twitter(X)フォロワー15,200人。ブログとSNSとSEOがすき。ChatGPTでの効率化も。SWELL大好き自称テーマおたく。

Blog

この記事を書いた人

ヒナキラ

ブログ最高月25万円。SNS最高日給12万円。Twitter(X)フォロワー15,200人。ブログとSNSとSEOがすき。ChatGPTでの効率化も。SWELL大好き自称テーマおたく。

見たいところに飛べる目次

SWELLトップページをおしゃれなサイト型にカスタマイズ

この記事のカスタマイズ方法をマネるだけで、下記のようなサイト型のSWELLトップページが作れます。

SWELLカスタマイズ
SWELLカスタマイズ

ちなみに、メインビジュアルは動画での解説となります。

「固定ページ」でカスタマイズする

固定ページでサイト型に

SWELLは、デフォルト状態では「ブログ型」になっています。

上記画像のとおり、「ブログ型」から「サイト型」にするには、「固定ページ」を使っていきます。

ヒナキラ

難しそうに感じるかもしれませんが、意外と簡単。

というわけで、「サイト型」のトップページにカスタマイズする方法を見ていきましょう。

カスタマイズの流れ

トップページをカスタマイズする「流れ」ですが、トップページの上部から順番にカスタマイズしていきます。

  1. ヘッダーエリア
  2. メインコンテンツエリア
  3. フッターエリア
カスタマイズ
STEP
ヘッダーエリア

まず、ヘッダーエリアから見ていきます。

ヘッダーエリアでやること
  1. グローバルメニュー
  2. お知らせバー
  3. メインビジュアル
  4. ピックアップバナー

ヘッダーエリアについては、上記の流れで見ていきます。

ヘッダーエリアは、WordPress管理画面「外観」の「メニュー」や「カスタマイズ」で作っていきます。

STEP
メインコンテンツエリア

次は、メインエリアです。

メインエリアでやること
  1. 固定ページ作成
  2. 新着記事
  3. おすすめ記事
  4. カテゴリー

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

メインエリアについては、「固定ページ」を使って作成していきますよ。

STEP
フッターエリア

最後に、フッターエリアの設定を行って終了です。

なお、フッター直前エリアにSWELLのバナー広告を配置しておきます。

ヒナキラ

それでは、それぞれ見ていきましょう。

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

ヘッダーエリア
ヒナキラ

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

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

カスタマイズの流れ
  1. グローバルナビ
  2. お知らせバー
  3. メインビジュアル
  4. ピックアップバナー

では、順番に見ていきましょう。

①グローバルナビ

グローバルナビ

赤枠部分が「グローバルナビ」です。

グローバルナビとは、全ページ共通して表示するナビゲーションメニューのこと。

ホーム、カテゴリーページ、おすすめ記事へのリンクを貼ることが多いです。

グローバルナビの設定手順
  1. 管理画面から「外観」→「メニュー」
  2. メニューに設定したいものを追加
  3. 好きな順番に並びかえる
  4. グローバルナビにチェック
  5. 「保存」をクリック

詳しくは、「SWELLグローバルナビの設定方法」の記事をご覧ください。

グローバルナビに英字やアイコンを設定する方法も解説しています。

②お知らせバー

お知らせバー

赤枠部分が「お知らせバー」です。

お知らせバーは、設定したページをアピールできる機能です。

成約に近い記事や、読んでほしい記事へのリンクを貼るのがオススメ。

お知らせバーの設定手順
  1. 管理画面から「外観」→「カスタマイズ」→「サイト全体設定」→「お知らせバー」
  2. 「表示位置」を選択
  3. 「文字の大きさ」を選択
  4. 表示させたいテキストを入力
  5. リンク先URLを入力
お知らせバーの設定

③メインビジュアル

メインビジュアル

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

メインビジュアルとは、トップページ上部の大きな画像(動画)のこと。

メインビジュアル次第で、サイトの雰囲気が大きく変わります。

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

詳しくは、「SWELLメインビジュアルにおしゃれな動画を設定する方法」の記事をご覧ください。

メインビジュアルに使う動画の作成方法から設定まで解説しています。

④ピックアップバナー

ピックアップバナー

赤枠部分が「ピックアップバナー」です。

ピックアップバナーとは、画像ナビゲーションメニューのこと。

カテゴリーページや、おすすめ記事へのリンクを貼ることが多いです。

ピックアップバナーの設定手順
  1. 管理画面→「メディア」
  2. 設定したい画像を新規追加
  3. 管理画面 →「外観」→「メニュー」
  4. 「新しいメニューを作成しましょう」をクリック
  5. ピックアップバナーにチェックして「メニュー作成」をクリック
  6. 「メニュー項目を追加」から、設定したいページを選択
  7. 各ピックアップバナーの説明欄に「画像URL」を入力
  8. 「メニューを保存」をクリック
  9. 管理画面から「外観」→「カスタマイズ」→「トップページ」→「ピックアップバナー」
  10. 「バナーレイアウト」で表示させたいバナーの数を選択

詳しくは、「SWELLピックアップバナーの作りかた」の記事からご覧ください。

ピックアップバナー用の画像の作り方、画像サイズについても解説しています。

なお、この記事で使用している画像サイズは「幅400×高さ220」です。

SWELLメインエリアをカスタマイズ

メインエリアのカスタマイズ

では続いて「メインエリア」のカスタマイズ方法を見ていきましょう。

なお、メインエリアは下記の流れで解説していきます。

メインエリアの設定手順
  1. 固定ページ作成
  2. 新着記事エリア作成
  3. おすすめ記事エリア作成
  4. カテゴリーエリア作成
ヒナキラ

では、順番に解説します。

①固定ページの新規作成

メインエリアは「固定ページ」を使って作ります。

固定ページの作成手順
  1. 管理画面から「固定ページ」→「新規追加」
  2. タイトルを入力(”ホーム”などでOK)
  3. 固定ページの設定で、サイドバーを非表示にする
ヒナキラ

サイドバーを使わないので、サイドバーは非表示設定にします。

②新着記事エリアの作成

新着記事

新着記事のカスタマイズ方法は、くうかさんの記事を参考にさせていただきました。併せて「SWELLカスタマイズ|サイト型トップページの作り方」の記事も参考にどうぞ。

ヒナキラ

では、「新着記事」の設定をしていきます。

新着記事エリア、おすすめ記事エリアについて動画で見たい方は下記をどうぞ。

SWELLカスタマイズ
  • 新着記事エリア作成の手順
STEP
「フルワイド」ブロックの追加
フルワイド
フルワイドの設定
  • 「コンテンツの横幅をどこに揃えるか」はサイト幅を選択(お好みで)
  • 「上下のpadding量」はPC・モバイルともに「40」を選択(お好みで)
  • 背景色を変更(この記事では #faf9f0 を使用)
  • 「上部の境界線の形状」はジグザグを選択(お好みで)
  • 「下部の境界線の高さレベル」は「3」に設定(お好みで)
STEP
「カラム」ブロックの追加
カラム

カラムを追加したら、パターンを「50/50」に設定します。

5050
STEP
左側のカラムの設定(最新記事)
左側の設定
左側カラム内の設定手順
  1. 「段落」を追加して、\新着記事/などと入力
  2. \新着記事/の下に「投稿リスト」ブロック追加
投稿リスト設定
投稿リストの設定手順
  1. 「表示する投稿数」は「1」に設定
  2. 「レイアウト」はカード型を選択
  3. 「投稿の表示順序」は新着順を選択
  4. 「最大カラム数」は「1」を選択
  5. 「抜粋文の文字数」は「40」を選択(お好みで)
STEP
右側のカラムの設定(新着・人気記事)
右カラム設定
右側カラム内の設定手順
  1. 「タブ」ブロックを追加。
  2. タブの名称を「新着順」と「人気順」に変更。
  3. タブブロックの設定で「スタイル」を吹き出しに変更。
  4. 「新着順」のタブに「投稿リスト」ブロックを追加。
  5. 「人気順」のタブに「投稿リスト」ブロックを追加。
投稿リスト設定
「新着順」の投稿リストブロックの設定
  1. 「レイアウト」はテキスト型を選択
  2. 「投稿の表示順序」は新着順を選択
  3. 「抜粋文の文字数」は「0」を選択
  4. 「高度な設定」の追加CSSクラスにコードを入力(下記参照)
  5. 記事下部のCSS用コードを入力(下記参照)

高度な設定(追加CSSクラス)

追加CSSクラス
i-first-none

記事下部のCSS用コード

CSSコード
.li-first-none > ul >li:first-child {
    display: none;
}
「人気順」の投稿リストブロックの設定
  • 「表示する投稿数」は「3」に設定
  • 「レイアウト」はリスト型を選択
  • 「投稿の表示順序」は人気順を選択
  • 「抜粋文の文字数」は「0」を選択

③おすすめ記事エリアの作成

おすすめ記事
ヒナキラ

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

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

カラムブロックを追加して、パターンを「50/50」に設定。

5050

その下にもカラムブロックを追加して、パターンを「50/50」に設定。(2段にします)

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

投稿ID(記事に振られたIDのこと)の確認は以下参照。

toukou-id

④カテゴリーエリアの作成

カテゴリー
ヒナキラ

「カテゴリーエリア」の作成方法を解説していきます。

  • カテゴリーエリア作成手順
STEP
「フルワイド」ブロックの追加
フルワイドの設定
  1. 「コンテンツの横幅をどこに揃えるか」は、サイト幅を選択(お好みで)
  2. 「上下のpadding量」はPC・モバイルともに「40」を選択(お好みで)
  3. 背景色を変更(お好みで)
  4. 「上部の境界線の形状」はジグザグを選択(お好みで)
  5. 「下部の境界線の高さレベル」は「3」に設定(お好みで)
STEP
カテゴリー別の記事表示
カテゴリー別記事表示の設定手順
  1. 「タブ」ブロックを追加
  2. タブの名称を変更
  3. 「タブサイズ設定」で端まで並べる(均等幅で)を選択
  4. タブサイズ設定(SP)で「ナビをスクロール可能にする」にチェック
  5. 各タブに「投稿リスト」ブロックを追加
カテゴリー設定
カテゴリー別「投稿リスト」ブロックの設定
  1. 「表示する投稿数」は「3」に設定(お好みで)
  2. 「レイアウト」はリスト型を選択(お好みで)
  3. 「投稿の表示順序」は「人気順」を選択(お好みで)
  4. 「抜粋文の文字数」は「40」を選択(お好みで)
ヒナキラ

最後に、フッターエリアのカスタマイズを解説していきますね。

SWELLのフッターエリア設定

フッターエリアの設定

続いて、フッターエリアのカスタマイズになります。

といっても、ここで解説するのはSWELLのバナー広告設置と、フッターの色やテキストを変更する程度です。

SWELLバナー広告の設置

では、SWELLバナー広告を設置していきましょう。

手順は以下の通りです。

SWELLバナー広告設置手順
  1. もしもアフィリエイトでSWELLバナーのコードを取得
  2. 管理画面から「外観」→「ウィジェット」
  3. 「フッター直前」に「テキスト」を追加
  4. 「テキスト」にSWELLバナーのコードを貼り付け
  5. 「ビジュアル」からバナーを中央に寄せる
  6. 「保存」をクリック

「テキスト」にSWELLバナーのコードを貼り付け

「ビジュアル」からバナーを中央に寄せる

中央寄せにする

フッターのカラー、テキストを変更

フッターカスタマイズ

フッターのテキスト、カラーを変更する手順は以下の通りです。

フッター内容の変更手順
  1. 管理画面から「外観」→「カスタマイズ」→「フッター」
  2. フッター背景色を変更
  3. フッター文字色を変更
  4. コピーライトのテキストを変更

以上で、SWELLトップページのカスタマイズ設定ができました。

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

最後に、カスタマイズしたサイト型トップページを公開しましょう。

トップページ公開手順
  1. 固定ページを「公開」にする
  2. 管理画面から「外観」→「カスタマイズ」→「WordPress設定」→「ホームページ設定」
  3. 「ホームページの表示」は固定ページを選択
  4. 「ホームページ」を固定ページ「ホーム」にする
ヒナキラ

これで「サイト型」のトップページで公開されました。

SWELLをサイト型にカスタマイズするメリットとは?

ここからは、SWELLをサイト型にカスタマイズするメリットについて解説します。

メリットをまとめると下記です。

SWELLをサイト型にするメリット
  1. 簡単にサイト型にできる
  2. オリジナルなトップぺージにできる
  3. サイトスピードが速くなる
ヒナキラ

それぞれ解説します。

①簡単にサイト型にできる

SWELLでは、専門的な知識がなくても簡単にサイト型にできます。

つまり、初心者でも簡単にカスタマイズができるということ。

ヒナキラ

誰でも簡単にカスタムできるというのは、とても大きなメリットです。

②オリジナルなトップぺージにできる

「ブログ型」は新着記事が並ぶSWELLのデフォルトデザインです。

ただでさえSWELLは人気のテーマなので、デフォルトでは多くの人と見た目が被ってしまいます。

そして「サイト型」にすれば、そのデメリットが解消されてオリジナルなトップページに。

ヒナキラ

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

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

サイト型にカスタマイズすれば、サイトスピードが向上する可能性があります。

ウィジェットなどを使わないことで、サーバーとデータのやり取りをする回数が減るからです。(下記参照)

HTTPリクエストとレスポンス
ヒナキラ

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

ただし、動画や、サイズの大きな画像、Twitter埋め込みなどといった「速度を下げる」ものを配置すればスピードは下がることもあります。

SWELLサイト型カスタマイズのQ&A

ここでは、SWELLカスタマイズに関するQ&Aもご紹介していきますね。

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

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

ぶっちゃけ僕も不安でしたが、やってみたら「あら、不思議」本当に簡単でした。

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

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

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

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

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

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

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

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

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

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

【番外編】SWELLトップページを「記事化」するカスタマイズ

ちょっと番外編となりますが、SWELLのトップページを記事化する方法も解説しておきます。

ヒナキラ

ちなみに、当サイトは記事化したトップページです。

では、SWELLのトップページを記事化する流れを見てみましょう。

SWELLトップページを記事化する流れ
  1. 固定ページを新規作成
  2. 固定ページで記事を作成
  3. 本文に疑似タイトル作成
  4. 疑似タイトル下にアイキャッチ画像挿入
  5. 「ホームページ設定」で記事化した固定ページを選ぶ

こういった流れになります。

疑似タイトルや、アイキャッチ画像の挿入方法は、以下のように行います。

トップページ記事化

【番外編】スマホで固定フッターを設定するカスタマイズ

こちらは、トップページのカスタマイズとは少しそれますが、スマホでの見た目が良くなる固定フッターです。

詳しくは「SWELLのスマホ固定フッターの作り方」で解説していますので、そちらをどうぞ。

SWELLでおしゃれな企業サイトを作る方法

SWELLなら、オシャレな企業サイトを作るのも簡単です。

企業サイトでも基本的にはポチポチとブロックを組み合わせていくだけですから。

下記では、美容室っぽいサイトを作ってみましたので、良ければ参考に見ていってくださいね。

他のブログデザインを見てカスタマイズしたい方は「WordPressテーマSWELLのブログデザイン集」の記事がオススメです。

ヒナキラ

なんと、400サイト以上のデザインを見ることができます。

まとめ|SWELLをおしゃれにカスタマイズしてモチベアップに!

今回は、SWELLトップページをカスタマイズする方法について解説しました。

そして、今回ご紹介した方法では、サイトスピードの高速化にもつながる可能性もあります。

読み込みが少なくなることで、スピードアップも可能になるということですね。

ヒナキラ

見た目が良くなって、モチベアップ。
さらにスピードも改善する可能性あり。一石二鳥ですね。

というわけで、今回はこれで以上となります。

またねっ。

当サイト使用テーマ。最高です。

WordPressテーマ「SWELL」の特徴
総合評価
( 5 )
メリット
  • 購入者限定アフィリエイトがあるからテーマで稼げる
  • 書きやすくて時短になるから生産性があがる
  • ChatGPTとの相性もバツグンで時短が加速
  • 誰でも簡単にオシャレなデザインにできる
  • 買い切り、複数サイトにバンバン使える
  • アプデが多くて進化がスゴイ
  • SEOにも強い
デメリット
  • 価格が高い
  • 個人開発の不安
  • 人気すぎてデザインが被りがち

\ 時短になって生産性が爆上がりするテーマ /

※おしゃれで書きやすくてブログが楽しくなる

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

見たいところに飛べる目次