ほかの方のブログを見ていると
とてもカッコいいものも多く
勉強になります。
ほかのサイトをみてから
自分のページを見なおすと
なにかトップページが素っ気ない。
ブログのタイトルは
以前に好みの感じに変更しましたが
タイトルの下に記事が並んでいるだけの
物足りない構成なのが
ちょっと気になっていました。
少しでも格好よくするために
グロナビを追加することにしました。
Contents
1.グロナビってなに？
正直、グロナビという呼び方すら知りませんでした。
グローバルナビゲーション
というらしいのですが、
よくページの上のほうに並んでいる
ホームに戻ったり
ほかのページにジャンプしたりする
あのボタンのことです。
個別の記事ページでも常に表示されて
いつでも目的のページへ
ジャンプできるので
そう呼ぶのかな？
まあ、とりあえず
これがあるかないかで
トップページの見た目も
かなり変わってくるので
頑張って追加してみます。
2.HTMLを変更してみる
まずトップページのHTMLを
変更していきます。
下のような文を追加します。
追加する場所は
ヘッダーと記事の間に追加しました。
"CATEGORY"や"PROFIEL"のリンク先は
まだないので
とりあえず # をいれておきます。
この変更で
とまあこんな感じで
".gnav ul li a:hover"内に
グレーに色付けされるようになりました。
このHTMLの変更を
HTML
<nav class="gnav">
<ul>
<li class="current"><a href=" http://marumassa.blog.jp/ ">HOME</a></li>
<li><a href=" # ">CATEGORY</a></li>
<li><a href=" # ">PRIVACY POLICY</a></li>
<li><a href=" # ">PROFIEL</a></li>
<li><a href=" # ">CONTACT</a></li>
</ul>
</nav>ここで使用した "nav要素" については
こちらをご覧ください。
この変更で
もともとは下のようなトップページでしたが
タイトルの下に
リンクのリストが追加されました。
でもタテ並びなので
横並びに変更するために
CSSを変更していきます。
3.CSSを追加してみる
最初からすべて自分で
指定できるわけもないので
コピペOKのサイトから
自分のイメージに近いものを
ひろってきました。
そこから少し自分好みに
アレンジしたいと思います。
とりあえず上のような文を追加すると
CSS
.gnav ul{
display: table;
margin: 0 auto;
padding: 0;
width: 80%;
text-align: center;
}
.gnav ul li{
display: table-cell;
min-width: 50px;
}
.gnav ul li a{
display: block;
width: 100%;
padding: 10px 0;
text-decoration: none;
color: #000000;
font-weight: bold;
}
.gnav ul li.current{
}
.gnav ul li.current a{
color: #555;
}
.gnav ul li a:hover{
color: #E71B1F;
}
とりあえず上のような文を追加すると
タテ並びだったリンクのリストが
横並びになります。
とまあこんな感じで
ナビゲーションが追加されました。
4.上下のスペースを調整する
コピペのままだと
ナビゲーションと
記事の間がせまくて
窮屈なので
少しスペースをつくります。
上側のスペースは
ナビゲーションのセクションではなく
ヘッダー側のスペースとして
指定されているので
下側も記事の上側スペースを
増やして対応します。
Livedoorブログでは
トップページの記事セクションは
"article-wrapper" で指定されています。
このなかの "margin-top" を
"-5"→"15" に変更します。
CSS
.article-wrapper{
zoom:1;
margin-top:15px;
}
ナビゲーションセクションの
下側のスペース、
というか記事セクションの
上側スペースが広がり
バランスがよくなりました。
5.文字のサイズと色を変更する
次に
まわりの文字にくらべて
文字サイズが小さく
あまりパッとしないので
文字サイズを少し大きくします。
ナビゲーションセクション内の
すべての文字サイズを大きくしたいので
".gnav ul" 内の "font-size" を
"80%" → "120%" へ変更します。
このほかに
現在表示中のページ以外の文字が
黒色で表示されているため
こっちが表示中のページにみえますね。
表示中のページ以外のボタンを
グレーに変更します。
これは現在表示中のページ以外の変更なので
しかも文字部分のみの変更なので
".gnav ul li a" のなかを変更します。
適当なグレーのカラーコードを選んで
"color: #848484"
としました。
変更部分だけですが
変更後のCSSは以下の通りです。
CSS
.gnav ul{
display: table;
margin: 0 auto;
padding: 0;
width: 80%;
text-align: center;
font-size: 120%;
}
.gnav ul li{
display: table-cell;
min-width: 50px;
}
.gnav ul li a{
display: block;
width: 100%;
padding: 10px 0;
text-decoration: none;
color: #848484;
font-weight: bold;
}
文字が全体的に大きくなり
現在表示されている "HOME" が
濃いめの色で表示され
残りが薄いグレーで表示されました。
6.文字のデザインを変更する
さらに分かりやすくするためと
カッコよくするために
デザインを少し変更します。
まず表示中のページのボタンを
黒地に白抜き文字へ変更します。
".gnav ul li.current" 内に
背景色を指定する
"background-color" を追加し
少し薄い黒のカラーコード
"#1C1C1C"を指定します。
このとき".gnav ul li.current a" 内に
指定してしまうと
ボタン全体ではなく
文字領域の背景だけが
色付けされてしまうので
注意が必要です。
逆に白抜き文字にするには
".gnav ul li.current a" 内の
文字色 "color" を追加し
白のカラーコード
"#FFFFFF" を指定します。
次にポインタを置いたときに
背景がグレーに変わるよう設定します。
".gnav ul li a:hover"内に
"background-color" を追加し
グレー "#BDBDBD" を指定します。
CSS
.gnav ul li.current{
background-color: #1C1C1C;
}
.gnav ul li.current a{
color: #FFFFFF;
}
.gnav ul li a:hover{
background-color: #BDBDBD;
}
これで表示中ページのボタンが
黒地に白抜き文字で表示され
ポインタをあててみると
グレーに色付けされるようになりました。
このHTMLの変更を
"個別記事ページ"
"カテゴリアーカイブ"
"月別アーカイブ"
にもそれぞれ追加して完了です。
コメント