MENU

【はてなブログプロ】グローバルメニューとお問い合わせフォームを作りました!

ブログにグローバルメニューを作成しました。

"Home"、"プロフィール"、"お問い合わせ"というとてもベーシックなものにしました。

しかしメニューをクリックしてもそのリンクに行かないのです。

これは困った、、、っという場面で、

 

現在参加しているオンラインサロンのりゅうけんさんからアドバイスがあり、あっという間に解決にいたる。

ちなみにこちらがりゅうけんさんのオンラインサロンです。

www.ryukke.com

ご興味のある方はぜひ!おすすめですよ!

 

っと話を本題に戻しますが、

HomeはブログのURLを、プロフィールのリンク先は先に書いたプロフィールの記事のURLを使用することで落ち着き、わりと簡単に終わったのでした。

しかし、お問い合わせフォームについてはちょっと手間取ったので、その様子を残しておこうと思います。

 

ブログのお問い合わせを作成する

困った時のグーグル頼み!ではありませんが、グーグル検索でお問い合わせフォームの作成で検索して、たどり着いたのがMUTANTさんのブログです。

このブログの説明にに沿って進めていきました。

 

www.mutant-tetsu.com

お問い合わせフォーム作成の手順

全くMUTANTさんのブログに書かれているように進めていくだけです!

ちなみに、MUTANTさんのブログを参考にして作った、私の作成過程をスクリーンショットで撮ってみました!

 

お名前とメールアドレス

回答形式は"Short answer"を選択。必須条件ということで"Required"にチェックを入れます。

f:id:EnjoyLife:20170416155558p:plain

ちなみにMUTANTさんのは日本語表記ですが、私のは英語表記になっています。

中身は一緒なので、問題ないです。

 

メッセージ

こちらもMUTANTさんのブログにあるように、回答形式は"Paragraph" にして、"Required"を選択します。

f:id:EnjoyLife:20170416155549p:plain

 

出来上がり

こちらが、私が作成したもの。

シンプルでスッキリしたものが出来上がりました!

 

f:id:EnjoyLife:20170416155605p:plain

 

ブログへの埋め込み

MUTANTさんのブログに書かれているように、ソースコードを自分のブログの投稿に貼り付けるだけで終了です。

ソースコードの貼り付けについては、MUTANTさんのブログに注意点が書かれているので、参考にします。

はてなブログで問い合わせフォームを作る方法 - MUTANT

 

最後に

自分でテストメールを送り、実際に作動するかを確認し、無事に終了!

初心者ブロガーの私ですが、上級者の方々からのアドバイスで無事に目標達成で来ました! 感謝です!

 

おまけ:スクリーンショットの方法

マックでスクリーンショットを撮る場合は、command + shift + 4でできます!

今まで知らなかったので、ちょっと嬉しい。