MENU

ー おすすめの記事 

SWELL全レビュー

SWELL購入から使い始めるまでの全レビュー!
迷ったけれど、やっぱり選んで良かった

SWELLデメリットまとめ

SWELL導入前に知りたいデメリット!
後悔しないための注意点まとめ

ジューン・マイマイ
パッタン・ブログ主催者
在宅ワーク応援ライター|SWELL×副業×スキルアップ情報をお届けします

在宅フリーランス18年目。
パソコン相談なんでもOKの、40代フリーランスです。
WordPree テーマ【SWELL】
シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』

【初心者向け】SWELLでメインビジュアルにボタンを設置する方法

当ページのリンクには広告が含まれています。
こんな方にオススメ
  • SWELLで、最も目立つメインビジュアルにボタンを設定して使いやすさを向上させたい
  • SWELLのメインビジュアルボタンを、もっと「推したい」と思わせるようにしたい

今回は、SWELLでメインビジュアルにボタンを設定する方法をご紹介します。

私はSWELLに出会う前は、他のWordPressテーマでメインビジュアルにボタンを設定するのに苦戦していました。

ただのボタンをつけることなら、他のテーマでもできるのですが、SWELLの魅力は、ボタンを自由にカスタマイズできる点です!【初心者向け】【中級者向け】と2回に分けてご紹介します。

今回は、【初心者向け】として、初心者でも簡単に設定できる方法をお伝えします。
この方法は、WordPressの管理画面で、設定を確認しながら簡単に編集できます。

\ 本当に使いやすいテーマなら/

目次

メインビジュアルって、どこ?

メインビジュアルとは、サイトのトップページや記事の上部に表示される大きな画像や背景のことを指します。
いわば「サイトの顔」となる部分で、訪問者が最初に目にする重要なエリアです。

メインビジュアルの場所

例えば、メインビジュアルには、企業のホームページではブランドのイメージを伝える写真やキャッチコピーが配置されることが多く、個人ブログではおすすめの記事やプロフィールを目立たせるデザインになっていることが一般的です。メインビジュアルは、サイト全体の雰囲気や目的を瞬時に伝える役割を持っています。

メインビジュアルにボタンを設置するメリット

メインビジュアルに「ボタン」を設置することで、2つのメリットがあります。

クリック率の向上
メインビジュアルに「講座に申し込む」「レッスン体験申込み」「商品の購入」などボタンを配置することで、読者が目的のページへスムーズに移動しやすくなります。視覚的に分かりやすい導線を作ることで、クリック率が向上します。

回遊率アップ
サイトに訪れた人が「次にどこをクリックすればいいのか」迷ってしまうと、そのまま離脱してしまうことがあります。しかし、メインビジュアルに適切なボタンを設置することで、「もっと読んでみたい!」と思ってもらいやすくなり、自然と色々なページを見てもらいやすくなります。

このように、メインビジュアルにボタンを追加することは、ブログやサイトの運営において非常に重要なポイントです。

それでは次から、初心者でも簡単に設定できる方法を紹介します。

SWELLの「カスタマイズ」画面からボタンを設定する(簡単)

SWELLでは、テーマの「カスタマイズ」機能を使うことで、簡単にメインビジュアルにボタンを設置できます。特に初心者の方におすすめの方法で、コードを使わずに直感的な操作で設定できるのが魅力です。

STEP
「外観」→「カスタマイズ」を開く

まず、WordPressの管理画面(ダッシュボード)にログインし、左側のメニューから 「外観」→「カスタマイズ」 をクリックします。

カスタマイズ画面出しかた
STEP
「トップページ設定」からメインビジュアルの設定を変更

カスタマイズのメニューの中から 「トップページ」 を選択します。「メインビジュアル」という項目が表示されるので、ここをクリックしてください。

トップページ
メインビジュアル
STEP
「メインビジュアル」で設定をする

ここでは、以下のような設定ができます。

  • メインビジュアルの画像・動画の設定(PC用・スマホ用)
  • キャッチコピーの入力
  • ボタンの設定 ← ここが今回のポイント!

「メインビジュアル」で以下の①〜④を設定します。

① リンク先URL:クリック時に移動させたいページのURLを入力します。(例:https://pattan.tyn-c.com)

② ボタンテキスト:ボタンに記入するテキストを書きます。 (例:「詳しく見る」「今すぐチェック!」など)

③ テキストの位置:ボタンの位置です「左」「中央」「右」から選びます。

④ テキストカラー・テキストシャドウカラー・ボタンカラー:メインビジュアルの画像と合うカラーで、読みやすいものを選びましょう。

⑤ ボタンタイプ:「白抜き」「ボーダー」から選択できます。

「白抜き」と「ボーダー」は以下のようになります。

◾️ボーダー

白抜きボタン

◾️白抜き

ボーダーボタン

まとめ

今回は、【初心者向け】として、初心者でも簡単にメインビジュアルにボタンを設定できる方法をお伝えしました。

SWELLのメインビジュアルにボタンを設置することで、サイトの使いやすさが向上し、クリック率や回遊率のアップにつながります。特に初心者の方でも、「カスタマイズ」画面を使えば、直感的な操作で簡単に設定が可能です。

今回紹介した方法を実践すれば、訪問者が迷わず目的のページへ移動できる導線を作ることができます。サイトのコンバージョン向上にも効果的なので、ぜひ試してみてください!

次回は、もう一歩進んだ【中級者向け】のカスタマイズ方法として、「ブログパーツ」を活用したボタン設置について解説します。SWELLならではの自由なデザインを楽しみながら、自分のサイトをさらに魅力的にしていきましょう!

\ 本当に使いやすいテーマなら/

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