知ッタメ!

読者です 読者をやめる 読者になる 読者になる

知ッタメ!

くらしや仕事などの知ったら思わず試したくなることや知っていると為になることを記録しているブログ

はてなブログにグローバルナビゲーションを設置するカンタンな方法。

ブログ

スポンサーリンク

ナビゲーションの設置方法

おや、何をしているんだい宗平君、そんな難しい顔をして?
ふむふむ、ブログにグローバルナビゲーションを設置したいだって?
なんだ、そんなこと。
君があまりにも難しい顔をしているから、何かトラブルがあったのかと心配したよ。

え、グローバルナビゲーションの設置のしかたが分からないから教えてだって?

しかたないなぁ、今回だけだよ。CSSやHTMLが分からない宗平君でもカンタンにグローバルナビゲーションを設置できる方法を教えてあげるよ!

いつか、またグローバルナビゲーションの設置のしかたを忘れて困っている、ほんの少しだけ未来の朝比奈宗平君へ。
今回の記事は、そんな君のための備忘録だよ。

実践、はてなブログにグローバルナビゲーションを設置

CSSやHTMLが分からない宗平君に打ってつけなサイトがあるんだよ。それが「CSS MenuMaker」!え、何だかネコ型ロボットみたいだって?多分、気のせいだよ。

この「CSS MenuMaker」は、好みのグローバルナビゲーションを選んでメニューとリンクを設定すると、自動でCSSとHTMLを組んでくれる便利なサイトなんだよ。でもお金がかかるんじゃないかって?基本的には無料だから安心して。

それじゃあ、「CSS MenuMaker」の使い方を説明するよ、宗平君。

グローバルナビゲーションの設置手順

ちなみに「CSS MenuMaker」は海外のサイトなんだ。
だからサイト内は、もちろん英語。もし英語が苦手なら、検索サイトの翻訳機能を使ってアクセスするといいよ。
なので不親切かもしれませんが、リンクを貼りませんのであしからず
なんだい、宗平君。
誰に向かって話してるのかって?まあ、いいじゃない

グローバルナビゲーションの設置方法1 検索する

まず、検索欄に「Make Awesome Menus」と入力してね。
すると検索結果が表示されるから、「CSS MenuMaker|Drop Down Menu Generator」を選んで左クリックするんだよ。

グローバルナビゲーションの設置方法2 好きなデザインを選ぶ

サイトに移動したかい、宗平君?じゃあ、次は画面の上にある「Menu」を左クリックしてみて。
するとメニューがプルダウンするから好きなタイプを選んで、もう一度左クリック。
次は、グローバルナビゲーションのデザインを選ぼう。これも好きなものを選んで、左クリックしてね。

グローバルナビげーションの設置方法3 メニューを設定する

今度は選んだデザインをカスタマイズする作業に入るよ。
まず、グローバルナビゲーションで表示するメニューを設定から。
画面の左を見て、宗平君。そこに入力欄があるでしょ?
そこにナビゲーションに入れたいメニュー名を入力して「+」をクリックするんだ。
すると、今入力したものがメニューに追加されただろう?
次はそれをメニューの数だけ繰り返して。

なになにメニューの順番は変えられるのかだって?

大丈夫だよ。
カーソルを移動させたいメニューに合わせて左クリック(ドラッグという)してみて。そのままの状態で移動しクリックを止める(ドロップという)と、ほら移動できたでしょ。

ちなみに使わないメニューは、メニューの右端にある「×」をクリックすれば削除できるよ。

グローバルナビゲーションの設置方法4 Edit Itemを設定する

次はつくったメニューのリンク先を設定するよ。メニューをひとつ選んで、左クリックしてみて。
画面の右側にある「Edit Item」の「title」欄に選んだメニューの名前が表示されるんだ。
メニュー名が表示されたら、その下の「Link」にリンクしたい自分のブログのURLをコピー&ペーストしてね。
これをメニューの数だけ繰り返そう。

「Edit Item」の下にある「Preview」をクリックすれば、作成したグローバルナビゲーションを確認することができるよ。

グローバルナビゲーションの設置方法5 自動作成されたHTMLを貼る

「Edit Item」の下にある「HTML」を左クリックしてみて、宗平君。
HTMLが表示されるから全部コピーして。
次にはてなブログにログインしてメニュー内の「デザイン」を左クリック。
そして「カスタマイズ」を選択し、その中にある「ヘッダ」を左クリックしよう。
すると、ヘッダのメニューがプルダウンされるので、そこにある「ヘッダ下」をクリックしてみて。するとHTMLを記入できるようになるから、そこにコピーしたHTMLを貼り付けよう。できたかい<宗平君?

グローバルナビゲーションの設置方法6 自動作成されたCSSを貼る

もう少しで終わるから頑張ろう、宗平君!
「Edit Item」の下にある「CSS」を左クリックしてみて。
CSSが表示されるから、HTMLのときと同じように全部コピーして。
次にはてなブログの画面を表示してメニュー内の「デザイン」を左クリック。
そして「カスタマイズ」を選択し、その中にある「デザインCSS」を左クリックしよう。
すると、CSSを記入できるようになるから、そこにコピーしたCSSを貼り付けよう。
最後に「変更を保存する」を左クリックすれば作業は終わりだ。宗平君、お疲れさま。

まとめ

宗平君、はてなブログにグローバルナビゲーションを設置できたかい?
そう、ちゃんとできたのか。
それから、とてもカンタンだったって?
良かったね、宗平君。
どれ僕にも見せてよ。
へえ、君にしては上手にできたね。
それに随分とブログらしくなったし、見栄えも良くなったね。

え、『君にしては』が余計だって?
ごめんごめん・・・・・・

関連記事

当ブログには下記のようなエントリーがございます。
よかったら、お読みくださいませ。