読者です 読者をやめる 読者になる 読者になる

こじらせ花子のブログ

こじらせた花子の奮闘日記です。

問い合わせフォームの作り方!いろいろ応用できるよ。

備忘録

おはようございます。花子(@kojirasehanako)です。

 

今回もブログの改造日記第三弾です。自分メモです。

 

問い合わせフォームのご紹介です。

 

誰も問い合わせとか来ないんですが、作ってて楽しかったです。

 

これは平野ヨウさんの記事を参考にさせていただきました。

 

 

 

www.mayoinu.com

 

 

いやぁ。楽しい。フォームメーラーも簡単でした。

 

 

問い合わせボタンの画像を探していたんですが、あんまり「いいなぁ」と思えるものがなかったので、

 

 

f:id:kojirasehanako:20161125213334j:plain

 

 

作っちゃいました。

 

製作時間5分強。低クオリティ。pc版のサイズは600×200

 

 

f:id:kojirasehanako:20161125214608j:plain

 

スマートフォン版のサイズは300×100

 

 

<a href='(メールフォームのURL)' target='blank'><img src='(画像のURL)'></a>

 

 

①(メールフォームのURL)にフォームメーラーで取得したURLを入力。

②画像のURLを取得し入力。(ヨウさんが書いてくれてます。)

③PC版ではサイドバー、スマートフォン版ではフッタのページ下に入力。

 

 

この原理を利用して、自己紹介の記事も埋め込んじゃいました。

 

①(メールフォームのURL)に自分の自己紹介記事のURLを入力。

②画像のURLを取得し入力。

③PC版ではサイドバー、スマートフォン版ではフッタのページ下に入力。

 

すると…

 

f:id:kojirasehanako:20170119080116j:image

 

ごちゃついてる~!!!www

 

まぁいっか!そのうち整理しよう。

 

スマートフォン版で、普通に挿入すると左に寄っててかっこ悪いのですが、最近中央に寄せる方法を習得しました。

 

<div align="center">をフッタのページ下に入力。

 

 

 ちなみにお問い合わせボタンを押すとこんな感じ。シンプル。

 

f:id:kojirasehanako:20170119080337j:image

 

 

こうゆう作業はまったら、すごく大好きになれます。

 

自分が知らなかったことするのは面倒くさいですけど楽しいですよね。

一度できたら、何度でもできますし。

 

こうゆう楽しみもブログは与えてくれますね。だから大好きなんです。

 

 

以上!