SWELLトップページをサイト型にカスタマイズ?劇的ビフォーアフター

あなたのサイトの顔とも言えるトップページ。その初印象が顧客の滞在時間や購買意欲に大きく影響します。では、SWELLを使っているサイトはどのようにしてトップページを魅力的にカスタマイズできるのでしょうか?

この記事では、SWELLを利用したトップページのビフォーアフターを劇的に変化させた方法を紹介します。SWELLのテーマを導入してから約半年、デフォルトのままで過ごしきました。

記事数も20程度になり、そろそろトップページをサイト型にカスタマイズしたい気持ちが高まり、SWELLの柔軟なカスタマイズ機能を最大限に活用し、またサイトの関連記事やYoutubeを参考にカスタマイズを実施してみました。

その実体験を皆さんにも紹介し、何かのお役に立てばという気持ちからこの記事を作成してみました。
さあ、あなたのサイトも、次の劇的ビフォーアフターの主役になりませんか?

                     料金と概要

料金)

 17,600円(税込)

(概要)

柔軟性と拡張性に優れたEコマースプラットフォームです。サブスクリプションモデルからデジタル製品、物理的な商品まで幅広く対応し、API駆動の仕組みにより、独自のカスタマイズが容易です。SaaS(Software as a Service)として提供されるため、ユーザーは複雑なサーバー設定を気にすることなく、よりビジネス成長に集中することが可能となります。

  メリットとデメリット

(メリット)

  • かゆい所に手が届くカスタマイズ性
  • 直感的な操作でおしゃれなブログができる
  • 複数サイトで利用できる
  • SEO対策機能の充実
  • 豊富なテンプレートとデザイン
  • サポート体制とコミュニティの充実

(デメリット)

  • 機能追加に伴う複雑性


【目次】タップで読みたい場所にジャンプ

トップぺージのスタイル|サイト型とブログ型の違い

トップページは、Webサイトの顔であり、訪問者の第一印象を決める重要なページです。サイト型とブログ型は、それぞれ異なる構造と特徴を持ち、目的に応じた使い分けが重要です。

特徴・メリット・デメリット・オススメのブログなど

サイト型のトップページを作る手順

ここからトップページをカスタマイズしていきます。

まずは、新着記事を表示するための「投稿ページ」と実際にトップページになる「ホームページ」の枠を固定ページに作ります。

「外観」→「カスタマイズ」で変更を加えた場合は「公開」をクリックすることをお忘れなく。

固定ページ(2つ)を新規追加

STEP
新着記事を表示する「投稿ページ」を作成

・タイトルとスラッグは何でもいいのですが、新着記事であることがわかるように
BLOG」としました。

STEP
トップページになる固定ページを作成

・タイトルとスラッグは「TOPPAGE」にしました。

・STEP1と同様、公開をクリックしてください。

STEP
STEP1,2で作成した固定ページを「表示設定」する

WordPress管理パネルで「設定」→「表示設定」を開く。

①固定ページをチェック。
②ホームページで「TOP PAGE」を選択。
③投稿ページで「BLOG」を選択。

④1ページに表示する最大投稿数を決める。→10〜15ページ程度。

STEP
カテゴリーの設定

新規カテゴリーを設定する。

STEP
ブログ記事の作成(10〜15記事の必要)

サイト型トップページにカスタマイズするには10〜15の記事が必要である。

現在、10記事未満の方はここで「STOP」しましょう。

  • サイト型のトップページは最低10〜15の記事が必要です。
  • 記事数が10未満の方は、記事を増やしましょう。
  • 記事内容も充実したもので。
  • 記事数が10以上ある方はこのまま進んでください。
読者

急がば回れですね。

ヨシキ

一歩一歩着実に。

私の状況

私もサイト型のトップページにカスタマイズしようとしましたが、記事数が5程度しかなかったので断念しました。記事数が目標に達する間にそのカスタマイズによく使用するブロックエディター(フルワイドブロック、投稿リストブロック、リッチカラム[カラム]ブロック、タブブロック)の使用法を徹底的に学びました。そのおかげで1ヶ月5記事ほどしか書けなかったのが1ヶ月10〜15記事も書けるようになりました。断念した時は悔しかったですが、待っている間に大きな自信を得ることができました。

外観のカスタマイズ

サイト全体設定

WordPress管理パネル 「外観」→「カスタマイズ」を開く。

STEP2より「サイト全体設定」になります。

STEP
①WordPress設定→②ホームページ設定→③ホームページ表示のカスタマイズ(設定→表示設定でしたことがここでも可能)
STEP
サイト全体設定→基本カラー

WordPress設定のすぐ下の①「サイト全体設定」を開く。→②基本カラーを開く→③メインカラー、テキストカラー、リンクカラー、背景色の設定。

STEP
サイト全体設定→基本デザイン

①基本デザインを開く→サイト全体の見た目、フォント設定、コンテンツ幅の設定

ヘッダー設定→ヘッダーバーを非表示

ヘッダーバーを非表示にする設定をします。

①「SNSアイコンリストを表示する」のチェックを外す。

②キャッチフレーズの表示位置→「表示しない」を選択

ヘッドバーが非表示に。

メインビジュアル

メインビジュアルの位置のイメージ。

メインビジュアルの画像を設定します。

STEP
トップページ→メインビジュアル

①トップページを開く→②メインビジュアルを開く

STEP
メインビジュアルの表示内容

① 画像にチェックを入れる。

② 表示設定の「メインビジュアルの高さの設定」で「画像・動画サイズのまま」を選択。

STEP
メインビジュアル用の画像を Canvaで作成します

画像サイズはPC用 1200×560 px、SP用 600×800 px(縦長)です。

STEP
メインビジュアル用の画像を設置

記事スライダーの非表示

記事スライダーの位置のイメージ。

記事スライダーを非表示にするステップ。

① トップーぺージを選択→ ② 記事スライダーを選択→ ③ 記事スライダーを設置するかどうか 設置しないにチェックを入れる。

ピックアップバナーの設置

ピックアップバナーの位置のイメージ。

STEP
WordPressダッシュボードから「外観」→「メニュー」に移動
「新しいメニュー作成しましょう」をクリック
STEP
以下の手順で「ピックアップバナー」を作成

① 任意のメニュー名を入力。「ピックアップバナー」を記入。

② ピックアップバナーを選択。

③ メニューを作成をクリック。

STEP
リンク作成

カスタムリンクで

① リンク先のURLを記入。

② リンク先の文字列を入力。ここでは「トップページのビフォーアフター」と入力。

③ 「メニューに追加」をクリック。

STEP
カスタムリンクを作成後、表示オプションをクリック

表示オプション」をクリック。(このステップは画像を表示させるために重要)

STEP
「説明」にチェックを入れる
STEP
画像URLを指定

説明」にチェックを入れたことで、「画像URL」を指定できます。

画像URLの取得方法

メディア」→「ライブラリ」に移動。

任意の画像を選択して、右下にある「URLをクリップボードにコピー」をクリックすると、画像URLを取得できます。

STEP
カスタムリンク(3つ作成)

上記手順を繰り返して、載せたいリンクをまとめたら完成です。

STEP
完成(トップページ)

タブ切替の投稿リストを設置(新着記事と人気記事の設置)

設置場所のイメージ。

新着記事と人気記事の投稿リストを設置します。

STEP
固定ページを開きます

先ほど作成した「TOP PAGE」を開きます。

STEP
タブをパネルより選択し、タブのタイトルを変更

① タブを選択、② タブタイトルを「新着記事」と「人気記事」に変更。

STEP
タブのスタイルを変更

スタイルをノーマル→下線に変更

STEP
タブサイズ設定

タブサイズをPC→固定幅(25%)、SP→固定幅(50%)に設定。

STEP
新着記事に「投稿リスト」設定

バネルより「投稿リスト」を選択。

STEP
新着記事の「投稿リスト」のカスタマイズ

① Settinsを選択。
② 表示する投稿数→6
③ レイアウトを選択→カード型
④ 投稿の表示順序→新着順
⑤ 降順を選択

STEP
人気記事に「投稿リスト」を設置

新着記事と同様に、人気記事にも「投稿リスト」を設置する。

STEP
人気記事の「投稿リスト」のカスタマイズ

① Settinsを選択。
② 表示する投稿数→5
③ レイアウトを選択→カード型
④ 投稿の表示順序→人気順
⑤ 降順を選択

記事を公開したばかりだとPVがないため人気記事が表示されない場合がある。

新着記事、人気記事の投稿リストの下に「SWELLボタン」を設置

STEP
パネルより「SWELLボタン」を選択
STEP
SWELLボタンのカスタマイズ(1)

スタイルを「ノーマル」→「MOREボタン」に変更

STEP
SWELLボタンのカスタマイズ(2)

① タイトルを「もっと見る」にする。

② リンク先を表示設定の投稿ページで登録した固定ページのURLを記載。

名入れ 万年筆 モンブラン(マイスターシュテュック)

価格:¥90,000円(送料無料)

プロフィールの設置

SWELLボタンの下にプロフィールを設置。

STEP
パネルよりフルワイドブロックを選択。
STEP
フルワイドの中に「カラム」をパネルより選択

パターンは50×50を選択。

STEP
左にプロフィール画像、右にプロフィールの説明文を入れる

プロフィール画像は「角丸」を選択し、角を丸くする。

STEP
SWELLボタンを設置

プロフィール画像の下に「問い合わせ」のボタンを設置する。

STEP
ボタンのカスタマイズ

① ボタンのスタイルを「MOREボタン」に変更。

② ボタンのタイトルを「問い合わせ」に。
 リンク先は問い合わせフォーム(固定ページ)のある方はそのURLを記入。

STEP
このセクションに背景を設定

現在、灰色の背景になっているが
① メディアから背景を選択。そうするとその画像URLが自動的に挿入。
② オーバーレイの不透明度50
③ 固定背景をON。スクロールすると背景が連動してたのが、固定する。

サイドバーの非表示

サイドバーをトップページと固定ページでチェックを外し、非表示にする。

最後に「公開」をクリック。

フッター

設置先のイメージ

STEP
「フッター」→「その他の設定」

① フッターを選択。

② 「その他の設定」→「フッターにSNSアイコンを表示する」にチェックを入れる。

STEP
SNSアイコンリストが表示
STEP
使用中のSNSのURLを記載

SNS情報を選択。使用中のSNSリンクを設定。

最後に「公開」をクリック。

フッターのウィジットを編集

STEP
フッター→ウィジットの編集

① ウィジェット選択。

② フッター(PC)1
フッター(PC)2
フッター(PC)3

をそれぞれ編集。

STEP
フッター(PC)1,2,3の設定

フッター(PC)1

フッター(PC)2

フッター(PC)3

STEP
「公開」をクリック
STEP
完成
付箋サイズの電子メモパッド

価格:2,750円(送料無料)

仕様

まとめ

この記事では、Swellのトップページをカスタマイズすることで、サイトの魅力を最大限に引き出す方法について解説しました。効果的なレイアウト変更、ユーザーのニーズに応じたコンテンツ配置、そして視覚的に魅力的なデザインの追加を行うことで、訪問者の関心を惹きつけるトップページを実現可能です。カスタマイズを行う際は、目的に応じた変更を心がけ、ユーザー体験の向上を最優先に考えることが重要です。本記事が、Swellのトップページを一新しようと考えている方々への参考となり、より効果的かつ魅力的なウェブサイトの構築に寄与することを願っています。結果として、改善されたトップページは、より多くの訪問者を引き付け、サイト全体のパフォーマンス向上に貢献するでしょう。

下記の記事もお読みください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
【目次】タップで読みたい場所にジャンプ