理系学生の茶の間のちゃ

理系学生の茶の間のちゃ

理系の私が日々の少し役に立ちそうなそうでもない情報をお届けします!

理系学生の茶の間のちゃ

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

こんにちは、ウタです

 

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

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

 

 

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

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

alcove.hatenablog.com

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

 

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

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

f:id:hyrasan:20170621184815p:plain

 

 

 

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

 

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

 

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

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

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

 

この記事に書いてある

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

ってとこの

f:id:hyrasan:20170802211833p:plain

 

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

 

ボタンの画像を作ろう!

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

Inkscapeを使おう

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

alcove.hatenablog.com

え?

AdobeIllustratorを持っているからそれでもいいか?

 

 

AdobeIllustrator.....?

 

 

 

知らない子ですね。

 

 

 

f:id:hyrasan:20170802225213p:plain

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

 

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

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

f:id:hyrasan:20170621192122p:plain

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

 

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

f:id:hyrasan:20170621192538p:plain

 

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

f:id:hyrasan:20170621192930p:plain

以上です。

 

 

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

とか、

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

とか、

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

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

 

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

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

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

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

 

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

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

f:id:hyrasan:20170621195810p:plain

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

 

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

f:id:hyrasan:20170621195923p:plain

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

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

 

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

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

f:id:hyrasan:20170621200842p:plain

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

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

 

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

 

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

 

あります!!

 

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

f:id:hyrasan:20170802212146p:plain

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

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

 

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

f:id:hyrasan:20170621201748p:plain

 

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

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

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

 

おわりに

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