別の記事へ簡単にアクセスできるようにするため、プルダウンメニューから別の記事のリンクに飛べるような機能を実装したのでまとめておきます。
HTMLを用いてプルダウンメニューを作成する方法はたくさん紹介されていましたが、はてなブログではうまくいかなかったのでいろいろ試した結果、良いやり方を見つけました。はてなブログユーザーはもちろん、困っているブロガーの助けとなれば幸いです。
＊ブログ仲間の(つくたろうのブログ)さんにはたくさん助けていただきました。ありがとうございます！
筆者のブログ環境
使用サービス：はてなブログプロ
編集モード：見たままモード
実装したい機能
当ブログでは、都道府県別の記事を扱っています。別の都道府県の記事に飛ぶ際に簡単に飛べるように、プルダウンメニューから任意のリンクに飛べるような機能を実装したいと考えました。
HTMLでリンクメニュー実装に挑戦
検索してみると、HTMLを使ってプルダウンメニューをリンクメニューにする方法が紹介されていました。
HTML プルダウンメニューをリンクメニューにする方法 - by Takumi Hirashima
はてなブログでも、「見たままモード」という編集モードの中の「HTML編集」があるので上記記事を参考に実装しようとしてみました。
はてなブログでは一部Javascriptの機能が使えない
しかし、プルダウンメニューを作ることはできても、別の記事のリンクへ自動的に飛ぶ機能が反映されてないです。打ち込んだコードと、その時のプレビューを画像で紹介しています。
コードを見ると、別のリンクに飛ぶときに必要なJavascriptのコード
”onChange=""movePage();”
がはてなブログの仕様によって勝手に消えることが分かりました
解決策：Markdownモード
はてなブログに詳しいブロガー仲間に相談したところ、「見たままモード」の仕様に問題があるようです。詳しいことはわかっていませんが、Javascriptを使うときは「Markdownモード」を使うと良いようです。
実装することができました
こちらの記事が完成した機能になります。プルダウンメニューから都道府県を選ぶことで、都道府県別の各記事に自動で飛ぶことができます。機能を確認したい方はこちらからどうぞ。
以下、Markdownモードで使用する際のコードのひな型です。
<html>
<body>
<h1>便利なテニス草トー検索機能</h1>
<p>↓プルダウンメニューです↓</p>
<select id="select" onChange="movePage();">
<option value="#">都道府県を選択してください</option>
<option value="1">北海道</option>
<option value="2">宮城</option>
</select>
<script type="text/javascript">
function movePage(){
if(document.getElementById("select").value == "1"){
document.location.href = "https://URL1";
}
else if(document.getElementById("select").value == "2"){
document.location.href = "https://URL2";
}}
</script>
</body>
</html>
【使い方①】プルダウンメニューに表示される候補数を増やす
<option value="2">宮城</option>の下に、
<option value ="n"><好きなタイトル></option>
を加えることで、プルダウンメニューに表示される候補が増えます。「好きなタイトル」に当たるものがプルダウンメニューに表示される名前になります。"n"の部分はなんでもよいです。この後紹介するページ指定に使います。
【使い方②】どのページに飛ぶか指定する
else if(document.getElementById("select").value == "2"){document.location.href = "https://URL2";}の下に
else if(document.getElementById("select").value == "n"){document.location.href = "任意のURL";}を加えることでプルダウンメニューから候補を選んだ際に飛べるページを指定することができます。"n"は使い方①で紹介した値と同じものを入れてください。"任意のURL"には、飛びたいURLを入れましょう。
まとめ：はてなブログで別の記事に飛べるようにするにはMarkdownモードを使おう
今回は、プルダウンメニューから別のリンクに飛べる機能を実装しました。
困っているブロガーさんのお役に立てれば幸いです。
では今回はここまで。
