【はてなブログ】グローバルメニュー作り方2019-10-20【はてなブログ】グローバルメニュー作り方BLOGみなさん、こんにちは。チー丸日記のチー丸です。みなさん、「グローバルメニュー」ってなんだかわかりますか。名を「ブローバルナビゲーション」というらしいです。ブログの上の方(ヘッダー)にある、記事をカテゴリー別に分けて案内するメニューの事です。ちなみに、青枠の箇所は「パンくずリスト」と呼ぶようです。設定方法を検索しようにも、なにをどう検索していいかわからず、「ブログのヘッダーの上のところ」「カテゴリー」などと検索して、やっとグローバルメニューがグローバルメニューであることを知りました。作り方」などで検索を開始できました。この「グローバルメニュー」があるかないかでは、ブログの見易さは断然かわります。作る事が出来た時には、声をあげて喜ぶほどうれしかった事を思い出します。記事が表示されません...。グローバルメニューを作っただけでは、ダメだったのです!それから、グローバルメニューから記事を表示させる方法を探しに探し...やっと、グローバルメニューから記事へ飛ばすことができましたのでその方法をご案内します。この記事を読み終える頃には、はてなブログでグローバルメニューを作って、そこから記事を確認できるようになれるようになります。私が使っているはてなblogのテーマは「Haruni」ですが、どのテーマでも、原理原則は同じだと思います。最初に、HTMLやCSSに変更を加える場合には、必ずバックアップをとりましょう。万が一間違えて、訳が分からなくなってもとっておいたバックアップをはりなおせば元に戻すことができます。【はてなブログ】グローバルメニュー作り方FontAwsomeを呼び出すHTMLを張り付けるHTMLを編集する記事はカテゴリー別に分けておく最後に.....FontAwsomeを呼び出すFontAwsomeとは、WEB上で使われているアイコンをWEBフォントで使う事が出来る様にしたもので、CSSを変えるだけで色々なフォントが使えるらしいです。選択2.「headに要素を追加」で以下のコードを張り付ける。コードはこのサイトからコピーしてはりつけました。「デザイン」を選択2.「カスタマイズ」を選択、「ヘッダ」の中の「タイトル下」の四角をクリック。以下のコードをコピペします。{$body.classList.remove('menu-active');});}})();</script>すると、グローバルコードがタイトルの下に表示されます。FOUND」になってしまいます。FOUND」のままなのです!”URLを入力”に記事のURLをいれます。「TOP」のところを任意のタイトルに変更します。私の場合は、↓のようにしました。href="https://www.chimarubonito3.com/archive/category/Line">LINE</a></li>青→記事をカテゴリー別に分けた所のURL赤→自分が決めたカテゴリー名これで、グローバルメニューから記事を出すことができます。記事はカテゴリー別に分けておくはてなblogでは記事の編集画面右に↓の画面があります。「ファイルの絵を選択」→「新しいカテゴリー」を選択し、カテゴリー名を入力。自分で作ったカテゴリー名がでています。↓のようにHTMLの中に入れます。href="https://www.chimarubonito3.com/archive/category/BLOG">BLOG</a></li>もしかしたら、もっと簡単な方法はあるかもしれません...。自分への備忘録の意味でも作ってみました。最後に.....これから、次のステップとして、ドロップダウンリストも必要になると思います。ドロップダウンは、記事が増えてきたら作成していこうと思います。ご拝読ありがとうございました。Tumblr関連記事2019-10-23【はてなブログ】ラインスタンプURLの埋め込み方法みなさんこんにちは。チー丸日記のチー丸です。ラインスタン...2019-10-23スマホ一つで完結。みなさん、こんにちは。チー丸日記のチー丸です。英語科を卒業後、イギリスへ単独語学留学。