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

コリラックマに恋する男子の写真練習帖

北海道札幌市で写真を撮ってます。リラックマ・コリラックマ写真とネイチャー写真が多めです。オリンパスの「OM-D E-M1 Mark Ⅱ」「STYLUS TG-4」、フジフィルムの「X-T1」で主に撮影してます。

超簡単!「CSS MenuMaker」でブログのメニューバーを作ってみた

ブログカスタマイズ

どうも、madです。

 

ブログやHPにメニューバーを設置したいなぁ。

でも作るの面倒くさいなぁ・・・と思って着手していなかったら、簡単にメニューバーを作れるジェネレータを見つけたので作ってみました。

 

その名も CSS MenuMaker

 

CSS MenuMaker | Drop Down Menu Generator

 シンプルな縦・横形式からドロップダウン式までたったの3ステップで簡単にメニューバーが作れちゃいます。

ちなみに、ここで作ったメニューバーをブログタイトル下に設置するとこんな感じになりました。わーい。

f:id:madhatter87:20140302182858p:plain

  • ブログトップ
  • プロフィールページ
  • 記事一覧ページ
  • RSSフィード
  • Facebookページ
  • Twitter
  • Tumblr

へのリンクを配置してみましたよ。

 

・・・はてなブログ、「*******.hatenablog.com/archive」で記事一覧ページにいけることを今回メニューバーを作って初めて知ったmad。

 

それでは以下、画面コピーを添えて作り方をご紹介します。

 

1. 作りたいメニューバーの形式とデザインを選ぶ

f:id:madhatter87:20140302175703p:plain

CSS MenuMaker | Drop Down Menu Generator

リンク先の"Menu"から、作成したいメニューバーの形式を選択します。

今回は試しに Horizontalで作ってみます。

単純に項目が横並びになってるタイプですね。

 

f:id:madhatter87:20140302180340p:plain

 Horizontalをクリックすると様々なデザインが表示されますので、この中からお好みのデザインを選んでさらにクリック。

 

2.  必要項目を入力する 

f:id:madhatter87:20140302181428p:plain

すると、こんな画面に遷移するので左下の「Build / Download」をクリック。 

 

f:id:madhatter87:20140302181438p:plain

メニューバーの作成画面に遷移しました。

それぞれのタブに以下の2項目を入力します。

  • タブタイトル(メニューバーに表示される見出し)
  • リンク先URL

なお、タブの数は画面左のサイドバー部分で増減可能です。

 

さて、お疲れさまでした。

メニューバーの作成自体はこれで終わりです。

ちょー簡単!

 

3. 表示されるHTMLとCSSをブログに貼りつける

f:id:madhatter87:20140302182548p:plain

 あとは自動生成されたHTMLとCSSのコードをブログ管理画面で貼り付けるだけです。

 

 すごいぞ!CSS MenuMaker!

CSS MenuMakerを使えば、あっけないほど簡単にメニューバーが作れます。

ブログにメニューバーを設置したいなぁと思っている方は、ぜひお試しください。

 

関連記事