当ブログではアフィリエイト広告を利用しています

【Blogger】ページ内にお問い合わせフォームを設置!スマートフォン表示がスマートになった!?(Vaster2)

 

【コンタクトフォーム】ブロハット

Bloggerのページ(WordPressでいう固定ページ)内に、お問い合わせフォームを設置するのは簡単ではありません。

今回は『Bloggerのページにお問い合わせフォームを設置できた!』という参考記事です!


ページ内にお問い合わせフォームを設置したくなった理由!

 Bloggerでは「連絡フォーム」ガジェットを使用して、簡単にお問い合わせフォームを設置することができます。

【コンタクトフォーム】「連絡フォーム」ガジェット
「連絡フォーム」ガジェット

「連絡フォーム」ガジェットを設置できる場所はサイドバーやフッターのみとなり、ページ内には設置できないため、常時表示になります。

パソコン表示の場合は、サイドバーに常時「お問い合わせフォーム」が表示されていてもあまり気になりません。

しかし、スマートフォン表示の場合は、記事の下に常時「お問い合わせフォーム」が表示されています。これは、不自然でスマートではないように感じます!

【コンタクトフォーム】Blogger「連絡フォーム」ガジェット
【コンタクトフォーム】Blogger「連絡フォーム」ガジェット

そこで、お問い合わせページ内に「お問い合わせフォーム」を設置し、「お問い合わせフォーム」が、常に表示されないようにカスタマイズしてみます!

調べると・・・。すでに良質な紹介記事がありました!

WordPressの場合はプラグインで簡単にできるのですが、Bloggerではどうでしょうか?
調べてみると、たいへん参考になる紹介記事がありました!

それが、こちら。

そのまま設定して完了です。

結果は、どうなった?

当ブログは『Vaster2』を利用させて頂いています。スマートフォンで『お問い合わせフォーム』までの画面遷移を確認してみます!

【1】メニューを開きます。
【コンタクトフォーム】スマートフォン表示「メニューを開く」

【2】「お問い合わせ」をタップします。
【コンタクトフォーム】スマートフォン表示「お問い合わせ」メニュー

【3】「お問い合わせフォーム」が表示されました!
【コンタクトフォーム】スマートフォン表示「お問い合わせフォーム」

イメージ通りに仕上がりました!

補足:Vaster2

Vaster2通常版を利用している方には、必要ないと思いますが補足です。私がCSSを追加した位置のスクリーンショットです。

【コンタクトフォーム】vaster2「CSS追加位置」
【コンタクトフォーム】vaster2「CSS追加位置」

※最後になりましたが、『1983Note』様の記事に感謝いたします。