流行のゴーストボタンを取り入れる
続いて、ナビゲーションバーの右側「contac」を流行りのゴーストボタンにしましょう。
現在のボタン（左）から右のようなゴーストボタンに
ゴーストボタンとは、枠線のみで背景が透過しているボタンのことをいいます。HIGH QUALITY RESOURCE For Designerサイトの「A ghost button gallery」が参考になります。
HIGH QUALITY RESOURCE For Designerの「A ghost button gallery」
index.htmlのcontact記載部分のコードにあるa要素に対して、「ghost-button」というclass属性を追記します。
■変更前のソースリスト（index.htmlの一部、緑の部分を変更）
<ul class="nav navbar-nav navbar-right">
<li><li><a href="#contact">contact</a></li></li>
</ul>
■変更後のソースリスト（index.htmlの一部、緑の部分を変更）
<ul class="nav navbar-nav navbar-right">
<li><li><a class="ghost-button" href="#contact">contact</a></li>
</ul>
変更後のindex.htmlの全コードはGithubにあります。
navbar.lessの「// Default navbar」のセクションに.ghost-buttonのスタイルを追記します。
■変更前のソースリスト（navbar.lessの一部）
.navbar-nav {
> li > a {
color: @navbar-default-link-color;
&:hover,
&:focus {
color: @navbar-default-link-hover-color;
background-color: @navbar-default-link-hover-bg;
}
}
■変更後のソースリスト（navbar.lessの一部、緑の部分を追記）
.navbar-nav {
> li > a {
color: @navbar-default-link-color;
&:hover,
&:focus {
color: @navbar-default-link-hover-color;
background-color: @navbar-default-link-hover-bg;
}
}
> li > a.ghost-button{
color: #7ED321;
border: 3px solid #7ED321;
}
変更後のnavbar.lessの全コードはGithubにあります。
navbar.lessを保存してから、bootstrap.lessをコンパイルしてCSSフォルダ内のbootstrap.cssを書き換えます。ブラウザーをリロードすると、図のように表示されます。
完成したナビゲーションバー
※ ※ ※
以上で、ナビゲーションバーのカスタマイズができました。次回は、メインイメージ部分を作っていきましょう。
