２０２１年２月２７日更新
こんにちは いつもご訪問下さいましてありがとうございます。
当ブログではテーマストアからインストールしたＢｒｏｏｋｌｙｎを使わせて頂いています。
今回は、はてなブログで私が参考にさせて頂いた記事を元にﾚｽﾎﾟﾝｼﾌﾞ対応のｸﾞﾛｰﾊﾞﾙﾅﾋﾞｹﾞｰｼｮﾝをﾄﾞﾛｯﾌﾟﾀﾞｳﾝ表示する方法についてお伝えして行きます。
※この設定をすることで以下の事が出来るようになります。
①ＰＣではグローバルメニューにカーソルを移動すると各項目毎に登録された記事がドロップダウンで表示されます。（カテゴリー毎４記事）
②スマホではトグルメニューで表示されますがＰＣで表示される各ナビゲーションの先頭記事が表示されます。
目次
参考にさせていただいた記事
テーマストアからインストールしたＢｒｏｏｋｌｙｎ制作者様の記事を参考にさせていただきました。
尚、ＰＣへのグローバルナビゲーション設置やスマホのトグルメニュー設置方法に関してもＢｒｏｏｋｌｙｎ制作者様が書かれた記事で詳しく解説されています。
参考にさせていただいた記事はこちらです ↓ ↓
ドロップダウン表示の効果
このドロップダウン表示が出来るようになると、注目記事では表示されない部分の記事（おすすめ記事）等を任意に表示させることが出来るようになります。
ブログに訪問された方に、トップメニューから移動しなくても、興味のあるカテゴリーにある記事を探してもらうことも簡単に出来ます。
以前から使わせて頂いているカッコイイデザインテーマのＢｒｏｏｋｌｙｎが更に便利に使えるようになります。
ドロップダウン表示登録手順
➀参考にさせて頂いた記事内のナビゲーションコードを一旦メモ帳等にコピー
➁グローバルメニューに表示させたい①～⑤の各カテゴリーを決める
➂ドロップダウン表示させたいカテゴリー毎の先頭になる記事タイトルとＬＵＲを貼り付けます。
④各カテゴリー毎に３記事を選んで記事タイトルとＵＲＬを貼り付けます。
※貼り付ける部分等の細かい説明も全て参考にさせて頂いた記事内に書かれていましたので大変助かりました。
⑤各カテゴリーや記事のタイトル・ＵＲＬ貼り付けが終わったら、コード全体をコピーしてデザイン⇒カスタマイズ⇒ヘッダー⇒記事下へ貼り付け
以上の方法でグローバルナビゲーションがドロップダウンで表示出来るようになります。
参考にさせて頂いた記事のコードに自分が表示させたい記事タイトルやＵＲＬを入れることで、自由に編集が出来ます。
当ブログのグローバルメニューコード
下の票は、実際に当ブログで使っているグローバルメニューのコードです。
記事のＵＲＬを入れる部分とタイトルを入れる部分が分かり易いように色分けして表示させてみました。
ナビゲーションコードを作って行く場合は下の表の様に分けておくと作業がし易くミスも発生し難いと思います。
グローバルメニューの固定とスマホトグル表示
上に表示させた図の半分から下の部分には、グローバルメニューを上にスクロールした時に固定させる部分とスマホでトグルメニューを表示させるのに必要なコードになっています。
グローバルナビゲーションの固定と併せてスマホのトグル機能も使ってみたい方は下記のコードをナビゲーションコードの下へ貼り付けてみることで再現出来ます。
※このコードは上で示した図の下半分に書かれているコードになります。
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function (){
// 変数に代入
var $nav = $('#global-menu');
var $content = $('#content');
var $offsetTop = $('#trigger-point').offset().top;
// 固定メニューの設定
function fixedNav() {
if($(window).scrollTop() > $offsetTop){
$nav.addClass('fixed');
} else {
$nav.removeClass('fixed');
}
};
$(window).scroll(fixedNav);
$('body').on('touchmove', fixedNav);
// Toggle メニューの設定
$('#nav-toggle').click(function (){
$nav.toggleClass('open');
});
$('#content').click(function (){
if($nav.hasClass('open')){
$nav.removeClass('open');
}
})
});
</script>
スポンサーリンク
レスポンシブにチェックを！
スマホのトグルメニューが一旦表示されて直ぐに消えてしまう問題については
ダッシュボード→デザイン→スマホ→ヘッダー→詳細設定欄→レスポンシブにチェックを入れる。
にこの設定をしておけば問題は解決します。
まとめ
はてなブログのテーマストアでＢｒｏｏｋｌｙｎをお使いの方でＰＣやスマホにも対応出来るグローバルメニューの設置やドロップダウン表示させたいと思っている方の参考になれば幸いです。
