グローバルナビゲーションの構造をコピペでカスタムする方法です。当サイト作者が作成した次のテンプレートについてです。
- valid-seo-2c と valid-seo-3c (ver1.0.0～ver1.1.0)
- customtemplate (ver1.1.0)
概要
グローバルナビゲーションをコピペでカスタムするためのサンプルコードを載せています。HTMLの編集のみです。
グローバルナビゲーションをカーソルでホバーしても展開する必要がない場合に、１段目のみのシンプルで短いコードを用意しました。下図で赤色の破線で囲った部分がデフォルトからの主な変更点です。
グローバルナビゲーション(１段目)をカーソルでホバーすると、２段目として関連項目が展開されるコードも用意しました。下図で赤色の破線で囲った部分が、１段目をホバーすると展開される部分の具体例です。
２段目をホバーするとさらに３段目が展開されるコードも用意しました。ただし、すべてを記載するとあまりにも冗長になりますので、２段目まで展開するコードに組み込める部分的なコードとなります。下図で赤色の破線で囲った部分が、２段目をホバーすると展開される部分の具体例です。
１段目の数は、それぞれのテンプレートのデフォルト数に準拠しました。
- valid-seo-2c (６こ)
- customtemplate (７こ)
- valid-seo-3c (８こ)
2012年9月3日追記：新着コメントなどが自動で表示されるようにするには次の記事が参考になります。
コピペするメリット
グローバルナビゲーションの構造を完全に把握しているわけでなくても、コピペでとりあえずカスタムできます。
コピペをベースにカスタムすれば、想定外のレイアウト崩れが生じにくくなります。(多分)
テンプレートのHTMLを編集
HTML内でコピペする場所
次のコメントで挟まれているコードをコピペでまるごと入れ替えます (下図で黄色の枠で囲まれている部分)。
<!-- ▼▼▼ ページ上部のナビゲーション 開始 ▼▼▼ --> (中略) <!-- ▲▲▲ ページ上部のナビゲーション 終了 ▲▲▲ -->
ホバーしても展開しないコード(１段目のみ)
１段目が６こあるコードです。
<div id="nav-wrapper"> <ul class="round" id="nav"> <!-- ▼左端（左側が角丸です） 開始 --> <li id="nav-home" class="round-l"><a href="<%url>" title="<%blog_name>">HOME</a></li> <!-- ▲左端 終了 --> <!-- ▼左から２番目 開始 --> <li><a href="/">左から２</a></li> <!-- ▲左から２番目 終了 --> <!-- ▼左から３番目 開始 --> <li><a href="/">左から３</a></li> <!-- ▲左から３番目 終了 --> <!-- ▼左から４番目 開始 --> <li><a href="/">左から４</a></li> <!-- ▲左から４番目 終了 --> <!-- ▼右から２番目 開始 --> <li><a href="<%url>?xml" title="RSSフィード：最新記事の更新が分かります">RSS</a></li> <!-- ▲右から２番目 終了 --> <!-- ▼右端（右側が角丸です） 開始 --> <li id="nav-sitemap" class="round-r"><a href="<%url>archives.html" title="<%blog_name>記事一覧">サイトマップ</a></li> <!-- ▲右端 終了 --> </ul><!-- /#nav --> </div><!-- /#nav-wrapper -->１段目が７こあるコードです。
<div id="nav-wrapper"> <ul class="round" id="nav"> <!-- ▼左端（左側が角丸です） 開始 --> <li id="nav-home" class="round-l"><a href="<%url>" title="<%blog_name>">HOME</a></li> <!-- ▲左端 終了 --> <!-- ▼左から２番目 開始 --> <li><a href="/">左から２</a></li> <!-- ▲左から２番目 終了 --> <!-- ▼左から３番目 開始 --> <li><a href="/">左から３</a></li> <!-- ▲左から３番目 終了 --> <!-- ▼左から４番目 開始 --> <li><a href="/">左から４</a></li> <!-- ▲左から４番目 終了 --> <!-- ▼左から５番目 開始 --> <li><a href="/">左から５</a></li> <!-- ▲左から５番目 終了 --> <!-- ▼右から２番目 開始 --> <li><a href="<%url>?xml" title="RSSフィード：最新記事の更新が分かります">RSS</a></li> <!-- ▲右から２番目 終了 --> <!-- ▼右端（右側が角丸です） 開始 --> <li id="nav-sitemap" class="round-r"><a href="<%url>archives.html" title="<%blog_name>記事一覧">サイトマップ</a></li> <!-- ▲右端 終了 --> </ul><!-- /#nav --> </div><!-- /#nav-wrapper -->１段目が８こあるコードです。
<div id="nav-wrapper"> <ul class="round" id="nav"> <!-- ▼左端（左側が角丸です） 開始 --> <li id="nav-home" class="round-l"><a href="<%url>" title="<%blog_name>">HOME</a></li> <!-- ▲左端 終了 --> <!-- ▼左から２番目 開始 --> <li><a href="/">左から２</a></li> <!-- ▲左から２番目 終了 --> <!-- ▼左から３番目 開始 --> <li><a href="/">左から３</a></li> <!-- ▲左から３番目 終了 --> <!-- ▼左から４番目 開始 --> <li><a href="/">左から４</a></li> <!-- ▲左から４番目 終了 --> <!-- ▼左から５番目 開始 --> <li><a href="/">左から５</a></li> <!-- ▲左から５番目 終了 --> <!-- ▼左から６番目 開始 --> <li><a href="/">左から６</a></li> <!-- ▲左から６番目 終了 --> <!-- ▼右から２番目 開始 --> <li><a href="<%url>?xml" title="RSSフィード：最新記事の更新が分かります">RSS</a></li> <!-- ▲右から２番目 終了 --> <!-- ▼右端（右側が角丸です） 開始 --> <li id="nav-sitemap" class="round-r"><a href="<%url>archives.html" title="<%blog_name>記事一覧">サイトマップ</a></li> <!-- ▲右端 終了 --> </ul><!-- /#nav --> </div><!-- /#nav-wrapper -->
２段目まで展開するコード
１段目が６こあるコードです。２番目から４番目までは５つ展開されます。
<div id="nav-wrapper"> <ul class="round" id="nav"> <!-- ▼左端（左側が角丸です） 開始 --> <li id="nav-home" class="round-l"><a href="<%url>" title="<%blog_name>">HOME</a></li> <!-- ▲左端 終了 --> <!-- ▼左から２番目 開始 --> <li><a href="/">左から２ <span class="small">▼</span></a> <ul> <li><a href="/">２－１</a></li> <li><a href="/">２－２</a></li> <li><a href="/">２－３</a></li> <li><a href="/">２－４</a></li> <li><a href="/">２－５</a></li> </ul> </li> <!-- ▲左から２番目 終了 --> <!-- ▼左から３番目 開始 --> <li><a href="/">左から３ <span class="small">▼</span></a> <ul> <li><a href="/">３－１</a></li> <li><a href="/">３－２</a></li> <li><a href="/">３－３</a></li> <li><a href="/">３－４</a></li> <li><a href="/">３－５</a></li> </ul> </li> <!-- ▲左から３番目 終了 --> <!-- ▼左から４番目 開始 --> <li><a href="/">左から４ <span class="small">▼</span></a> <ul> <li><a href="/">４－１</a></li> <li><a href="/">４－２</a></li> <li><a href="/">４－３</a></li> <li><a href="/">４－４</a></li> <li><a href="/">４－５</a></li> </ul> </li> <!-- ▲左から４番目 終了 --> <!-- ▼右から２番目 開始 --> <li><a href="<%url>?xml" title="RSSフィード：最新記事の更新が分かります">RSS</a></li> <!-- ▲右から２番目 終了 --> <!-- ▼右端（右側が角丸です） 開始 --> <li id="nav-sitemap" class="round-r"><a href="<%url>archives.html" title="<%blog_name>記事一覧">サイトマップ</a></li> <!-- ▲右端 終了 --> </ul><!-- /#nav --> </div><!-- /#nav-wrapper -->１段目が７こあるコードです。２番目から５番目までは５つ展開されます。
<div id="nav-wrapper"> <ul class="round" id="nav"> <!-- ▼左端（左側が角丸です） 開始 --> <li id="nav-home" class="round-l"><a href="<%url>" title="<%blog_name>">HOME</a></li> <!-- ▲左端 終了 --> <!-- ▼左から２番目 開始 --> <li><a href="/">左から２ <span class="small">▼</span></a> <ul> <li><a href="/">２－１</a></li> <li><a href="/">２－２</a></li> <li><a href="/">２－３</a></li> <li><a href="/">２－４</a></li> <li><a href="/">２－５</a></li> </ul> </li> <!-- ▲左から２番目 終了 --> <!-- ▼左から３番目 開始 --> <li><a href="/">左から３ <span class="small">▼</span></a> <ul> <li><a href="/">３－１</a></li> <li><a href="/">３－２</a></li> <li><a href="/">３－３</a></li> <li><a href="/">３－４</a></li> <li><a href="/">３－５</a></li> </ul> </li> <!-- ▲左から３番目 終了 --> <!-- ▼左から４番目 開始 --> <li><a href="/">左から４ <span class="small">▼</span></a> <ul> <li><a href="/">４－１</a></li> <li><a href="/">４－２</a></li> <li><a href="/">４－３</a></li> <li><a href="/">４－４</a></li> <li><a href="/">４－５</a></li> </ul> </li> <!-- ▲左から４番目 終了 --> <!-- ▼左から５番目 開始 --> <li><a href="/">左から５ <span class="small">▼</span></a> <ul> <li><a href="/">５－１</a></li> <li><a href="/">５－２</a></li> <li><a href="/">５－３</a></li> <li><a href="/">５－４</a></li> <li><a href="/">５－５</a></li> </ul> </li> <!-- ▲左から５番目 終了 --> <!-- ▼右から２番目 開始 --> <li><a href="<%url>?xml" title="RSSフィード：最新記事の更新が分かります">RSS</a></li> <!-- ▲右から２番目 終了 --> <!-- ▼右端（右側が角丸です） 開始 --> <li id="nav-sitemap" class="round-r"><a href="<%url>archives.html" title="<%blog_name>記事一覧">サイトマップ</a></li> <!-- ▲右端 終了 --> </ul><!-- /#nav --> </div><!-- /#nav-wrapper -->１段目が８こあるコードです。２番目から６番目までは５つ展開されます。
<div id="nav-wrapper"> <ul class="round" id="nav"> <!-- ▼左端（左側が角丸です） 開始 --> <li id="nav-home" class="round-l"><a href="<%url>" title="<%blog_name>">HOME</a></li> <!-- ▲左端 終了 --> <!-- ▼左から２番目 開始 --> <li><a href="/">左から２ <span class="small">▼</span></a> <ul> <li><a href="/">２－１</a></li> <li><a href="/">２－２</a></li> <li><a href="/">２－３</a></li> <li><a href="/">２－４</a></li> <li><a href="/">２－５</a></li> </ul> </li> <!-- ▲左から２番目 終了 --> <!-- ▼左から３番目 開始 --> <li><a href="/">左から３ <span class="small">▼</span></a> <ul> <li><a href="/">３－１</a></li> <li><a href="/">３－２</a></li> <li><a href="/">３－３</a></li> <li><a href="/">３－４</a></li> <li><a href="/">３－５</a></li> </ul> </li> <!-- ▲左から３番目 終了 --> <!-- ▼左から４番目 開始 --> <li><a href="/">左から４ <span class="small">▼</span></a> <ul> <li><a href="/">４－１</a></li> <li><a href="/">４－２</a></li> <li><a href="/">４－３</a></li> <li><a href="/">４－４</a></li> <li><a href="/">４－５</a></li> </ul> </li> <!-- ▲左から４番目 終了 --> <!-- ▼左から５番目 開始 --> <li><a href="/">左から５ <span class="small">▼</span></a> <ul> <li><a href="/">５－１</a></li> <li><a href="/">５－２</a></li> <li><a href="/">５－３</a></li> <li><a href="/">５－４</a></li> <li><a href="/">５－５</a></li> </ul> </li> <!-- ▲左から５番目 終了 --> <!-- ▼左から６番目 開始 --> <li><a href="/">左から６ <span class="small">▼</span></a> <ul> <li><a href="/">６－１</a></li> <li><a href="/">６－２</a></li> <li><a href="/">６－３</a></li> <li><a href="/">６－４</a></li> <li><a href="/">６－５</a></li> </ul> </li> <!-- ▲左から６番目 終了 --> <!-- ▼右から２番目 開始 --> <li><a href="<%url>?xml" title="RSSフィード：最新記事の更新が分かります">RSS</a></li> <!-- ▲右から２番目 終了 --> <!-- ▼右端（右側が角丸です） 開始 --> <li id="nav-sitemap" class="round-r"><a href="<%url>archives.html" title="<%blog_name>記事一覧">サイトマップ</a></li> <!-- ▲右端 終了 --> </ul><!-- /#nav --> </div><!-- /#nav-wrapper -->
３段目まで展開するコード
２段目まで展開されるコードの一部を３段目まで展開されるようにするには、次のとおりカスタムします。変更前と変更後を載せます。
変更前。下記コードだけコピペしても機能しません。
<!-- ▼左から２番目 開始 --> <li><a href="/">左から２ <span class="small">▼</span></a> <ul> <li><a href="/">２－１</a></li> <li><a href="/">２－２</a></li> <li><a href="/">２－３</a></li> <li><a href="/">２－４</a></li> <li><a href="/">２－５</a></li> </ul> </li> <!-- ▲左から２番目 終了 -->変更後。下記コードだけコピペしても機能しません。２段目まで展開されるコードの一部置き換え用としてご利用いただけます。
<!-- ▼左から２番目 開始 --> <li><a href="/">左から２ <span class="small">▼</span></a> <ul> <li><a href="/">２－１ <span>►</span></a> <ul> <li><a href="/">２－１－１</a></li> <li><a href="/">２－１－２</a></li> <li><a href="/">２－１－３</a></li> <li><a href="/">２－１－４</a></li> <li><a href="/">２－１－５</a></li> </ul> </li> <li><a href="/">２－２ <span>►</span></a> <ul> <li><a href="/">２－２－１</a></li> <li><a href="/">２－２－２</a></li> <li><a href="/">２－２－３</a></li> <li><a href="/">２－２－４</a></li> <li><a href="/">２－２－５</a></li> </ul> </li> <li><a href="/">２－３ <span>►</span></a> <ul> <li><a href="/">２－３－１</a></li> <li><a href="/">２－３－２</a></li> <li><a href="/">２－３－３</a></li> <li><a href="/">２－３－４</a></li> <li><a href="/">２－３－５</a></li> </ul> </li> <li><a href="/">２－４ <span>►</span></a> <ul> <li><a href="/">２－４－１</a></li> <li><a href="/">２－４－２</a></li> <li><a href="/">２－４－３</a></li> <li><a href="/">２－４－４</a></li> <li><a href="/">２－４－５</a></li> </ul> </li> <li><a href="/">２－５ <span>►</span></a> <ul> <li><a href="/">２－５－１</a></li> <li><a href="/">２－５－２</a></li> <li><a href="/">２－５－３</a></li> <li><a href="/">２－５－４</a></li> <li><a href="/">２－５－５</a></li> </ul> </li> </ul> </li> <!-- ▲左から２番目 終了 -->
リンク先URLの編集
グローバルナビゲーション内の各項目には＜a＞タグでハイパーリンクを設定できます。デフォルトではハイパーリンクにブログのHOMEページが設定されています。
＜a＞タグ内の
href="/"の「/」(スラッシュ)をリンク先ページに指定したいURLに変更します。たとえば、
http://customtemplate.blog112.fc2.com/blog-entry-1.htmlにリンクしたい場合は、＜a＞タグは次のようになります。<a href="http://customtemplate.blog112.fc2.com/blog-entry-1.html">customtemplate の説明</a>自サイト内リンクであれば次の書き方でもOKです。
<a href="/blog-entry-1.html">customtemplate の説明</a>自サイト内カテゴリーページへのリンクの一例は次のとおりです。
<a href="/blog-category-1.html">便利な機能説明</a>
以上です。
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
