【最終手段】どうしてもはてなブログでグローバルメニューが作れない人向けに一番シンプルで力技な直書きをする方法を考えてみました

f:id:msnjnp:20150707143652j:plain

できればお勧めしません

これから解説する方法はhtmlにCSSを直接書いてしまう方法なのでお勧めはしません。
ただ、どうしても他の人の方法をコピペしてもうまくいかなかった時に使ってください。

私も、おそらくテンプレートの影響か、どうしてもうまくいかなかったので詳細を調べるのも面倒になって直書きしてしまいました。
ちなみにhtmlに直書きなのでレスポンシブル対応にしてしまっていると対応できませんので注意してください。

使い方は下のソースをコピーしてグロナビを作成したい箇所に貼り付けてください。
通常は「設定」→「カスタマイズ」→「ヘッダ」→「タイトル下」の部分みたいです。



<!-- ここから選択 -->
<style>

.gNavi {  

    margin:10px 0;  

    padding:0;  

    width:726px;  

    height:30px;  

    overflow:hidden;  

    background:#242424;  

    font-family: Helvetica;

}  

.gNavi li { list-style:none; width:242px; float:left; }  

.gNavi li a {  

    display:block;  

    line-height:30px;  

    color:#fff;  

    text-align:center;  

}  

.gNavi li a:hover { background:#8b8b8b; }  
</style>




<ul class=\"gNavi\">  

    <li><a href=\"＃\">TOP</a></li>  

    <li><a href=\"＃\">新着一覧</a></li>  

    <li><a href=\"＃\">おすすめ記事</a></li>  

</ul>  
<!-- ここまでコピー -->

調整方法

グロナビ全体の幅は6行目のwidthのピクセル数を変えてください。
グロナビ一つ一つの幅は12行目のwidthのピクセル数を変えてください。
色はbackgroundの部分を変えてください。二つあって上は通常表示、下はマウスオーバーした時の色です。
#の部分はURLを入力してください。日本語部分はそのまま変更可能です。