スタイリッシュに!メルマガ登録フォームを美しく配置するアイデア

ワードプレスでブログを作って、メルマガを始めたばかりの方、こんなお悩みありませんか?

メルマガ登録フォームを作ったのだけど、なんかダサくてこれじゃ登録してもらえないかも?

もっとスマートに、登録ボタンを配置しちゃったりして、かっこよくしたいな。

わかります。私もそうでした。

今まではこんな感じでした。

ビフォー

ブログ本文下に、こんなふうに作ってただけでした。

アフター

テキストに画像を貼りリンクさせる方法

スマートにできないものかと試行錯誤しました。こんな感じで作ってみました。

この画像をクリックすると、メルマガの申し込みができるようにリンクを貼っています。

ダッシュボード外観ウィジェットをクリックします。

配置したい場所(今回は本文下)に、テキストを選択し、ウィジェットを追加をクリックします。

メディアを追加をクリックして、貼り付けたい画像(今回はCanbaで作成した画像)を挿入します。

🔗リンクの挿入/編集をクリックして、リンク先のURLを貼り付けます

↵ボタンをクリックして、保存をクリックします。

画像の大きさや中央揃えなどの配置を、微調整したい場合は、編集し変更することができます。

ワードプレスのテーマCocoon(コクーン)のCTAボックスを活用する方法

下の画像は、ワードプレスのテーマCocoon(コクーン)の場合の画像です。

ブログ本文下にこのような感じで作ってみました。

CocoonにはCTAボックスというものがあります。CTAとは、「Call To Action(コール トゥ アクション)」の略称で、日本語では「行動喚起」という意味です。

CTAボックス作成方法

ダッシュボード→外観→ウィジェットをクリックします。

CTAボタンを配置したい場所(今回は固定ページ本文下)に、CTAボックスを選択し、ウィジェットを追加をクリックします。

今回は以下の画像のように入力しました。

CTA画像の欄には、アップしたい画像のURLを貼ってください。

CTAボタンURLの欄には、マイスピーのリンク先のURLを貼ってください。

CocoonのCTAボックスを使った方法は以上です。

サイドバーにCTAボタンを作成する方法

同様にCocoonのCTAボックスをサイドバーに配置する方法も、参考に載せておきます。

ダッシュボード→外観→ウィジェットをクリックします。

CTAボタンを配置したい場所(今回はサイドバー)に、CTAボックスを選択し、ウィジェットを追加をクリックします。

尚、Cocoon(コクーン)以外でも、CTAボタンが標準装備されているテーマもあるそうです。例えば、Emanon(エマノン)、Xeory(セオリー)、LIQUID PRESS(リキッドプレス)など。

その他のテーマについては、プラグインもしくは、CSSを設定するとCTAボタンが使えるようになるそうです。

閲覧者がわかりやすくスムーズにメルマガ登録してもらえるように工夫し、スマートにかっこよく、ブログ運営していきたいものですね。

ご参考になれば幸いです。

最後までお読みくださりありがとうございました。

WEB関係のことってわかりにくかったりしますよね。もしかしたら、あなたも「やってみたいけど不安」「自分にできるかな?」と感じているかもしれません。 そんな時は、以下のお悩み相談窓口(初回30分無料) をぜひご利用ください!! 小さな疑問や不安でも大丈夫!あなたのペースで一歩を踏み出すお手伝いをします。

   

初心者向け!Wordpress個別相談!ブログ制作の無料お悩み相談窓口

~無料メルマガのご案内~

お悩み相談に申し込むのはちょっとまだいいかなと思われた方へ。まずは無料メルマガを読んでみませんか?

一歩踏み出したいあなたへ!パソコン・ブログ応援する無料メルマガ、配信中!

煩わしい手続きは必要ありません。メールアドレスを登録するだけです!

無料メルマガ登録はこちらから!

メルマガの詳細はこちらをクリック

 

人生を楽しく生きる為のパソコン講座
無料メルマガ登録フォーム
 

あなたのペースで無理なくパソコンスキルアップのお手伝いをします!

初心者向けWordpressのお悩み相談受付けます 1ヶ月質問し放題とビデオチャット30分オンライン個別講座

《新着記事》

Thumbnail of new posts 166

: ワードプレス

ブログ閲覧数が2倍に!SNS発信と時間帯で見えた意外な効果

「あれ?なんでこんなに見てもらえたの?」という、私自身のちょっとした驚きの体験で ...
Thumbnail of new posts 191

: YouTube

Zoomから直接YouTubeライブ配信!カンタン設定で始める方法【初心者必見】

YouTubeを始めたばかりだけども、パソコンでYouTubeでコラボライブ配信 ...
Thumbnail of new posts 013

: LINE

知らなきゃ損!パソコンでLINEができる便利な使い方ガイド

スマホでLINEの操作していて「やりにくいなぁ」と感じたことありませんか? 例え ...
Thumbnail of new posts 065

: ブログの作り方

続ける力は心のゆるやかさから!ブログ初心者が知りたいヒント集

専門家じゃないからこその強み 専門家じゃなくても、発信していいんだよ。 ブログを ...
Thumbnail of new posts 128

: ワードプレス

Google AIモードで検索はどう変わる?ブログ運営者が知っておきたいこと

最近、「Google AIモード」という言葉を耳にする機会が増えてきました。 初 ...

ワードプレス

Posted by Thank you