空に向かって走る

ときどき英会話、ときどきTOEIC、ときどき便利なこと。思いついたことを書きためます。

【初心者向け】グローバルメニューを設置しよう!コピペでおしゃれに

ついに念願のグローバルメニューを設置しました!

サイトの誘導で重要な役割を果たすということで、ちょっとした憧れ。

試行錯誤してたら時間がかかりました。f:id:upasan:20160403221814j:plain

そして、こんな感じで形になりました!

単に設置するだけなら難しくはないのですが、自分の思ったようなデザインにしようとすると案外大変・・・。 

 そんなこんなで、今回はグローバルメニューを簡単に設置する方法をまとめます!

http://www.flickr.com/photos/16493883@N00/5583330608

photo by sekihan

 テンプレートを探す

CSSを編集して作り上げるのは私には無理なので、テンプレートを元に仕上げました。

 

色と配置だけは自分で変更しました。

Listamatic

今回私が利用したサイトがこちら「Listamatic」、無料です。

 「Vertical lists」:縦にメニューを展開

 「Horizontal lists」:横にメニューを展開・・・など

いろいろな種類がありますが、「Horizontal lists」が私のスペース的にGOOD!

縦に展開するのはサイドバーで使うのかな??

 

デザイン名を選択すると次のように実例とHTMLとCSSコードが分かります。

ここでは「Rollver horizontal list navbar」で説明します。

f:id:upasan:20160403215413j:plain

HTMLコードを編集

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

」をリンク先のURLに変更します。

Item」はグローバルメニューでの表記になります。

私はとりあえずカテゴリ名にしました。

カテゴリ名に文字だけだと寂しいので、アイコンWebフォントで味付けします。

「しろかい!」さんのサイトを参考にしました。

shirokai.hatenablog.com

 今回はHTML上のタイトルにアイコンを付け加えたいので、先程の「Item」内に記載します。

<li><a href="#">Item two</a></li>

 はてなフォトからの画像を使う方法もあるみたいですが、素材探しが大変なので現状はこの方法で行いました。

 CSSコードを編集

#navcontainer ul{
padding-left: 0;
margin-left: 0;
background-color: #036;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a{
padding: 0.2em 1em;
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover{
background-color: #369;
color: #fff;
}

表示された通りでよければこのままコピペですが、色等を変更したいので一部書き換えます。

「background-color」が背景色ですので、カラーコードを参考に変更します。

CSS/HTML色見本

 各コードをコピーし、【デザイン設定】に貼り付けます。

f:id:upasan:20160403220817j:plain

HTLMは「ヘッダ」へ、CSSは「デザインCSS」へ貼り付けます。

 配置をカスタマイズ

Listamatic」のデザインを使って、色と配置を変更するだけでもイメージが大きく変わります。

配置を変更するのは私には難しいので、こちらのサイトのお力を借りました。

www.acky.info 

 私はまだ記事数もカテゴリも少ないので、横に並べるやつです。

記事数が増えたらブルダウン式に変更してもいいのかな。

その他オススメテンプレート

  「CSS Menu Builder」 

www.cssmenubuilder.com

プレビューを見ながら色やデザイン等のカスタマイズが可能です。

こちらも無料です。

ボタンの色や陰の色、マウスオーバー時の色など初心者でも簡単に設定できます。

f:id:upasan:20160404220015j:plain

実際の画面です。実際のイメージをしながら作成できるので楽しい!

最後にCSSとHTMLコードを取得できるので、先程と同様に自分のブログに貼り付けます。