> 大評判のSWELLを徹底レビュー!気になる口コミ・評判は?

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

Customize-the-top-page-of-SWELL

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

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

\ 抜群の機能性!初心者でもデザイン性抜群のサイトにできる /

※いま一番オススメのWordPressテーマ

マチコ

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

ヒナキラ

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

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

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

ヒナキラ

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

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

デザインが綺麗でオシャレ、使いやすく、高機能。

SWELLの評判を集めた記事は →SWELLの口コミ評判・レビュー

有料テーマ12コ使う僕のイチオシWordPressテーマです。

≫SWELL公式サイトはこちら

Blog

この記事の監修者

ヒナキラ 編集長

30代凡人ブロガー。ブログ月収6桁。複数サイト運営。有料テーマ13コを扱う自称テーマまにあ。Twitter(@OneokrockHomme)フォロワー8,000人。ブログが大好き。

Blog

この記事の監修者

ヒナキラ 編集長

30代凡人ブロガー。ブログ月収6桁。複数サイト運営。有料テーマ13コを扱う自称テーマまにあ。Twitter(@OneokrockHomme)フォロワー8,000人。ブログが大好き。

タップできる目次

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

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

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

トップページ記事化

スマホで固定フッターを設定するカスタマイズ

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

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

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

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

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

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

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

ヒナキラ

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

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

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

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

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

ヒナキラ

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

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

またねっ。

時短に繋がる、超高機能Wordpressテーマ。

WordPressテーマ「SWELL」の特徴
総合評価
( 5 )
メリット
  • とってもオシャレなサイトが誰でも作れる
  • 構造化機能も充実!SEO対策をしやすい
  • ダントツクラスの機能性
  • 高速化のプロを顧問!ページスピードが速い
  • 時短機能も充実!記事執筆を効率化できる
  • ブロックエディター対応度ナンバーワン
  • ブログ運営が楽しくなる
  • 初心者でもカスタマイズしやすい
  • 買い切り、複数サイトに使える
  • アプデが頻繁で進化が止まらない
デメリット
  • 値段が安くない(17,600円)
  • AMP非対応
  • 個人開発

SWELLはオシャレで、非常に使いやすく、時短に繋がる生産性高いWordpressテーマ。

17,600円の価格も、抜群の機能性やSEO対策面、記事執筆効率化などを考慮すればむしろ安いです。

使ったら二度と手放せなくなるWordpressテーマ「SWELL」の感動を、あなたにも。

\オシャレで使いやすく機能性抜群のテーマ/

※今まで使った有料テーマの中で一番おすすめ

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

コメント

コメントする

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

CAPTCHA

タップできる目次