【初心者ブロガー】サイドバーにお問い合わせボタンを作ろう！

こんにちは、ウタです

 

これを読むのはブロガーの方だけだと思いますが.....
サイドバーにいろいろくっつけたいですよね？ね？

今回は、サイドバーにお問い合わせフォームをつける方法を説明したいと思います！

 

 

まずはお問い合わせフォームを作ろう！ 

なにはともあれ、お問い合わせフォームを作りましょう

alcove.hatenablog.com

 こちらを見てもらえばなんとなくわかると思います

 

正直、なかなかめんどくさいですよね？

そんなアナタには２分でできる簡単な方法が.....こちら▼から！

 

 

 

はい。そんなの無いです。

 

上の雑なヤツもただの画像なんで、クリックしても何も起きません。
ちょっと大きく見れるだけです。

 

あるとすればアドレスをそのまま貼り付けるノーガード戦法ですけど、この記事を見に来てる時点で

ノーガードはちょっとな～

って思ってるはずなので頑張ってつくりましょう！ 

 

この記事に書いてある

「送信」から「リンク」を表示させてください！

ってとこの

 

リンクのアドレスが作れれば準備OKです！

 

ボタンの画像を作ろう！

次は押すところに必要なボタンの作成をしましょう

Inkscapeを使おう

やはりいちばんのオススメはInkscapeです  

alcove.hatenablog.com

え？

AdobeのIllustratorを持っているからそれでもいいか？

 

 

AdobeのIllustrator.....？

 

 

 

知らない子ですね。

 

 

 

この画像もInkscapeで作られています！

 

Inkscapeは少し使うのが面倒なので簡単に作成手順を説明します。

基本的に使うのは下の３つのボタンを使います

これらを使って四角形でボタンのサイズを決めて、文字を打ってボタンを作ります

 

また図形の色をかえたいときは「object」→「Fill and stroke」から変更できます

 

最後完成したらPNG画像として出力します

以上です。

 

 

いやいや、そんなんじゃできねーよ。手取り足取り教えてよ。

とか、

もっと丁寧に解説できないの？これじゃ、顧客満足度１位になれないぞ！

とか、

いつもブログ見てます！頑張ってください！

などなどがあれば、詳しい方法をまた記事にしたいと思います

 

パワーポイントでもできるよ

Inkscapeはインストールも面倒出し、もっと簡単にできないの？

という方もいると思います。

そんな方はパワーポイントを使いましょう！

 

パワーポイントでも四角と文字を入れることでボタンを描いていきます

自分で作りたいボタンを作ることができたら、画像として出力します

これでボタンの画像を作ることができます

 

ちなみにこれで作ったのがこちらです

びっくりするぐらい気合が入っていないものができました。

これはこれで、スッキリしていて良いので、気に入った方は使って見ても良いのでは？

 

サイドバーに設置しよう！

画像とアドレスができたらサイドバーに設置していきましょう ！

ここで追加のモジュールを選択した後にHTMLを選択します。

ここにコードを書いていくわけですが、なかなか面倒ですよね？

 

僕もなんかよくわからないコードを書くのはイヤですし、できるなら簡単に作りたいですよね

 

そんなアナタに簡単にできる方法が.........！！

 

あります！！

 

まずは新規で記事を作りましょう！
編集見たままモードで お問い合わせフォームを作っていきます。

お問い合わせフォームにしたい画像を貼り付けて、それにリンクを付ける方法でOKです

これで新規の記事の中にはリンクの付いたお問い合わせフォームしかありません
（もし他になにかある場合は消しておきましょう）

 

HTML編集モードにしてそこに書いてあるコードを全てコピーしてください。

 

コピーした内容を先程の「追加のモジュール」を選択した後のHTMLに貼り付けます。

これで、サイドバーにも画像にリンクが付いたお問い合わせボタンを作ることができます。

この方法でこのブログのお問い合わせフォームも作られているので、見てみてください

 

おわりに

お問い合わせフォームは少し面倒ですが、一度作ってしまえばそれでおしまいなので、一度頑張って作ってみてください。