2016年04月07日

グローバルナビゲーション設置方法

スポンサーリンク

さくらブログに、グローバルナビゲーションを設置する方法を解説します。

グローバルナビゲーションというのは、ブログの上にあるリンクがメニューになっているものです。
当ブログは「ド素人でいーんです!ブログ作りを簡単にするテクニック」というブログタイトルの下に、ブログ説明文があり、その下にある四角が並んだものです。

グローバルナビゲーションは、グローバルナビ、ナビメニュー、ナビバーとも呼ばれます。

ナビを設置しなくても問題ありませんが、1クリックで目的の場所に移動できるので親切です。
グローバルナビゲーションと共に目次、サイトマップ、記事一覧などを設置すれば、知りたい記事を探しやすくなります。

グローバルナビゲーションの1つを選ぶと下に項目が出てくるものもあります。
ウェブ内の階層が多い場合は、そういった階層的なグローバルナビも有効です。

このブログに関しては、階層が深く無い事もありますが、スマホ等でクリックしやすくするため階層構造のあるグローバルナビにはしていません。

グローバルナビ本体の設置

グローバルナビを設置するには、HTMLにナビ項目を記述し、CSSで並び方や装飾を設定します。
このブログで使っているグローバルナビを例に解説します。

他のブログパーツと同じく、グローバルナビも色々なサイトでサンプルが手に入ります。
設置方法もいくつかやり方があるようです。
色々なデザインがありますので、検索して好みのナビデザインを見つけてください。


では、設置して行きましょう。

【デザイン】→【HTML】→適用されているHTML名をクリックします。
HTMLの画面が表示されます。

初めてHTMLの編集をする方は、「HTMLの追加」を押して新しくHTMLを作ってください。
既に1度HTMLを作成されている方は、同じものに追記して行きます。

ソースコード内から「<% content_header %>」を探します。
(CTRL)+(f)で検索します。

私の使用している「超シンプル(右サイドバー)」は、ソースコードの上の方にありました。
下記のようなソースコードが見つかるはずです。

<body>
<div id="container">
<script type="text/javascript" language="JavaScript" src="<% site_info.blog_url %>/contents/js/ad_plugin.js"></script>
<div id="banner">
<% content_header %>
</div>

ここにナビ本体を追加します。


上記の場所に、下のナビ本体を追加します。
<!-- ▼グローバルナビ本体▼ -->
<navi>
<ul>
<li><a href="http://・・・" target="_blank">目次</a></li>
<li><a href="http://・・・" target="_blank">手順案内</a></li>
<li><a href="http://・・・" target="_blank">ブログについて</a></li>
<li><a href="http://・・・" target="_blank">免責事項</a></li>
<li><a href="http://・・・" target="_blank">お問合わせ</a></li>
</ul>
</navi>
<!-- ▲グローバルナビ本体 ここまで▲ -->
このブログでは、ナビ項目を5つにしています。

もっと欲しい方は、
「<li><a href="http:/・・・" target="_blank">項目名</a></li>」
これを欲しい数分追加してください。
あまり多くし過ぎると、文字が入りきらなくなります。

「http:/・・・」という部分に、リンク先のURLを記入してください。

「TOPページ」や「記事一覧」などの項目名は、内容に合った好きなワードを入れてください。

「target="_blank"」は、クリックしたときに、新しいウインドーで開くかどうかの設定です。
同じウインドーのまま画面を切り替えたい方は、削除してください。


グローバルナビ本体を追加した状態は、下記の様になります。
lt;/head>
<body>
<div id="container">
<script type="text/javascript" language="JavaScript" src="<% site_info.blog_url %>/contents/js/ad_plugin.js"></script>
<div id="banner">
<% content_header %>
</div>
<!-- ▼グローバルナビ本体▼ -->
<navi>
<ul>
<li><a href="http://・・・" target="_blank">目次</a></li>
<li><a href="http://・・・" target="_blank">手順案内</a></li>
<li><a href="http://・・・" target="_blank">ブログについて</a></li>
<li><a href="http://・・・" target="_blank">免責事項</a></li>
<li><a href="http://・・・" target="_blank">お問合わせ</a></li>
</ul>
</navi>
<!-- ▲グローバルナビ本体 ここまで▲ -->
<% if:have_content_left -%>
<div id="links-left">
<% content_left %>
</div>
<% /if -%>
追記出来たら【保存】ボタンを押してください。


画面の一番上にグローバルナビを設置したい方は、上記方法ではなく下記手順で行ってください。

【デザイン】→【コンテンツ】→ヘッダーの一番上にある【ブログタイトル】ブログパーツをクリック。
【ブログタイトル】のウインドーが開いたら、右上にある「コンテンツHTML編集」をクリック。
HTML編集ウインドーが表示されますので、下記の場所にナビを追記してください。
<% content.header -%>

ここにグローバルナビ本体を追記

<h1><a href="<% blog.page_url %>" accesskey="1"><% blog.title %></a></h1>
<% content.footer -%>
【保存】してHTMLウインドーを閉じ【コンテンツ】下の【保存】を押します。
これでページを確認すれば、ブログタイトルの上にグローバルナビが設置されるはずです。

ナビボックスの配置と装飾

現時点で「ブログを見る」を押してブログの状態を見てみましょう。
先ほど追加したナビ本体の項目が、縦に並んでいると思います。

CSSで横並びにして、装飾をしていきます。

【デザイン】→【デザイン設定】→適用中のテーマタイトルをクリックすると、CSS画面になります。

一番下までスクロールして下記を追記します。
/* ▼-----グローバルナビ-----▼ */
navi {
width: 100%;
margin-bottom: 30px;
overflow: hidden;
}
navi ul {
list-style: none;
overflow: hidden;
}
navi li a {
background: #F5F5F5;
border-right: 5px solid #fff;
color: #fff;
display: block;
float: left;
padding: 3px;
text-align: center;
width: 18%;

/*TRANSISTION*/
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
transition: background 0.5s ease;
}
/*HOVER*/
navi li a:hover {
background: #222;
}

/* メディアクエリ */
@media only screen and (max-width : 960px),
only screen and (max-device-width : 960px){
nav li a {
width: 25%;
border-bottom: 5px solid #fff;
}
}
@media only screen and (max-width : 767px),
only screen and (max-device-width : 767px){
nav li a {
width: 60;
border-bottom: 5px solid #fff;
font-size : 94%;
}
}
@media only screen and (max-width : 480px),
only screen and (max-device-width : 480px){
nav li a {
width: 85%;
border-bottom: 5px solid #fff;
}
}
/* ▲-----グローバルナビ ここまで-----▲ */
naviで基本のナビの形を設定しています。
margin-bottom: 30px;でボタンの横幅の長さを設定しています。

「navi li a」の「border-right: 5px solid #fff;」は、ナビのボックスの中間線太さを指定しています。
隙間が空いているように見えるのは、背景と同じ色の線を書いてあげているからです。

HOVERというのは、マウスが乗った時の色変化を指定しています。
ちょっと遊んでみました。
ふわっと変わるのが要らない人は、「HOVER」と「TRANSISTION」をカットしてください。


メディアクエリで、画面の横幅に応じたグローバルナビの切り替わりを指定しています。

メディアクエリ「nav li a{ 」内の「font-size : 94%;」は、画面サイズが縮むと文字が折り返して2段になるのを防ぐため、微妙にナビの文字を小さくしています。
ナビの文字数次第ですが、もし、ナビ文字数と画面幅の関係でレイアウトが崩れるようなら、数値を変更してください。

これをパソコンのブラウザで見ている方は、横幅をぐぐっと縮めてみてください。
横幅が短くなると段階的に、グローバルナビの形状が変化して行くのが確認できます。

480ピクセル、767ピクセル、960ピクセルという3段階でナビバーの形状を変え、画面幅に合うようにしています。

メディアクエリは、さくらブログをレスポンシブ化した際に生きてくる内容です。
グローバルナビ設置と同時に、ブログ自体をレスポンシブ化する事をお勧めします。
レスポンシブ化しなくて良い方は、メディアクエリを丸ごと削除して構いません。


CSSに追記するグローバルナビは、ちょっとソースコードが長いですが、個々に見て行くと大した事はしていません。
というか、私にはこれが限界です。

【プレビュー】してナビゲーションバーが、綺麗に並んでいたら成功です。
【保存】ボタンを押してセーブしておきましょう。

スマホ表示がどう見えるか確認する方は、ブックマークしておくと便利です。

お疲れさまでした〜!

スポンサーリンク
posted by ノービス at 16:01 | Comment(0) | さくらブログ カスタマイズ
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: