アスリート系ですがプログラミング始めました。

プログラミング初心者三十路越えアスリート系女がフリーランスプログラマーを目指すブログ

ナビゲーションバーを均等に配置してリンクを設置する

スポンサーリンク

続き

simpledancer.hatenablog.com

さて続きです!

 

昨日までに見た目(css)とリンクの大元のコードはhtmlに書き込みましたので

f:id:simpledancer:20170120182638p:plain

こんな感じでできましたが、まだこの状態だと左よりになっていて、さらにリンク先が入っていないのでメニューをクリックしても何も出てきません。

 

まずメニューを均等に並べる

デザインCSSを変更していきます。

#menu-content > li > a{
position: relative;
display: block;
height: 100%;
width: 100%;/*ここを追加*/

line-height: 40px;/*2*/
background: #444;/*9*/
color: #fff;/*10*/
font-size: 70%;
text-decoration: none;
z-index: 2;
}

 

そして

#menu-content > li{
position: relative;
float: left;
height: 100%;
text-align: center;
width: 20%;/*ここを自分のカテゴリ数を考慮して%を入れる。

私の場合は100/5カテゴリ=20なので20%*/

 

そうすると

f:id:simpledancer:20170121122406p:plain

均等になりました!

 

カテゴリーの中身の変更

ヘッダ<タイトル下

ここのhtmlを変更/追加します。

参考にさせていただいたブログはたくさんカテゴリや子カテゴリがあるのでそれを削除していきます。(私の場合必要なのは今の所5カテゴリ2子カテゴリとして)

 <ul id="menu-content">
        <li>
            <a href="1階層目のリンク">カテゴリ1 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="2階層目のリンク">カテゴリ1-1</a></li>
                <li><a href="2階層目のリンク">カテゴリ1-2</a></li>
                <li><a href="2階層目のリンク">カテゴリ1-3</a></li>
                <li><a href="2階層目のリンク">カテゴリ1-4</a></li>
            </ul>
        </li>

こちらの内容を例えば私の場合だと

<ul id="menu-content">
<li><a href="#">プロフィール</a></li>
<li><a href ="http://simpledancer.hatenablog.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA">ブログカスタマイズ</a></li>
<li>
<a href="#">プログラミング <i class="blogicon-chevron-down"></i></a>
<ul class="second-content">
<li><a href="http://simpledancer.hatenablog.com/archive/category/Ruby">Ruby</a></li>
<li><a href="http://simpledancer.hatenablog.com/archive/category/JavaScript">Javascript</a></li>

のように変更します。""の中身をカテゴリーのリンク先URLをつけ、hrefタグの間にカテゴリ名を挿入します。

するとカテゴリーのボタンをクリックするとリンク先のURLに飛ぶことができます。

アドセンス張ってる方への注意点

  • Googleアドセンスの上にドロップダウンメニューがかぶさってしまうと、規約違反になってしまい、広告を止められる可能性があります。特にサイドバーの上に広告を貼っている方は、被りやすいので気をつけて下さい。

 

ということなので気をつけながらやりましょう!

スマホ版も改良してみました!

simplelifedancer.hatenablog.com