第2弾の共有テンプレートを申請しました。
現在適用されているものがその改造版 ( 記事下部のナビゲーションがボタンになっています ) ですが、基本設計は同じなので変更も簡単に行えます。前回申請した 『 ex-t2st 』 と機能的にカブっている部分もありますが、改めて説明をしたいと思います。
■ ナビゲーションタブ
説明不要だとは思いますが、各々 URI と 名称を差し替えてご利用ください。
デフォルトでは一番右側が 『 全エントリの表示 』 機能となっていて、ちょっとした見せ方をしています。FC2 の画面が気に入らなかったのですが、あまり利用頻度の高い画面ではないので 『 お遊び 』 程度です。タイトルが長すぎる場合に表示の乱れることもありますが、そのあたりは各自調整してください。
<!-- Header TAB menu start -->
<div id="navitab">
<ul>
<li><a href="<%url>" class="tabs" ><span>タブ1</span></a></li>
<li><a href="<%url>" class="tabs" ><span>タブ2</span></a></li>
<li><a href="<%url>" class="tabs" ><span>タブ3</span></a></li>
<li><a href="<%url>archives.html" class="tabs" ><span>全ての記事</span></a></li>
</ul>
</div>
<!-- Header TAB menu end -->
■ パンくずリスト
月間アーカイブ表示・カテゴリ表示・タググループ表示をしたときには、エントリタイトル上にパンくずリスト ( 現在地のナビゲーション ) を表示します。難しい仕掛けではありませんので、好みに応じてカスタマイズすることも簡単です。以下のセクションを書き換えてください。
<!--category_area-->
<div class="nv">
<a href="<%url>" title="ブログのトップページ">HOME</a> > <%sub_title> ( カテゴリグループ表示中 )
</div>
<!--/category_area-->
<!--tag_area-->
<div class="nv">
<a href="<%url>" title="ブログのトップページ">HOME</a> > <a href='<%topentry_category_link>' title='カテゴリ' target='_self'><%topentry_category></a> > <%tag_word> ( タググループ表示中 )
</div>
<!--/tag_area-->
<!--date_area-->
<div class="nv">
<a href="<%url>" title="ブログのトップページ">HOME</a> > <%now_year>年<%now_month>月 ( 月間アーカイブ表示中 )
</div>
<!--/date_area-->
■ コメントなどをボタンにする場合
デフォルトではテキストリンクとなっていますが、このブログのようにボタンにする場合は下記を差し替えてご利用ください。ただし、コメントや拍手の数は判らなくなりますので、ご注意ください。
<table style='margin:0px auto;' summary="Entry footer navigation">
<tr>
<td width='55'>
<a href='http://blogvote.fc2.com/pickup/<%blog_id>/<%topentry_no>' title='BLOG 拍手'>
<img src='http://blog-imgs-27.fc2.com/j/d/o/jdog/g_wh.png' alt='ブログ拍手' border='0' /></a>
</td>
<td width='55'>
<a href='<%topentry_link>' title='この記事の URI'>
<img src='http://blog-imgs-27.fc2.com/j/d/o/jdog/g_uri.png' alt='URI' border='0' /></a>
</td>
<td width='55'>
<a href='<%topentry_link>#trackback' title='トラックバックはこちらから'>
<img src='http://blog-imgs-27.fc2.com/j/d/o/jdog/g_tb.png' alt='トラックバック' border='0' /></a>
</td>
<td width='55'>
<a href='<%topentry_link>#comment_post' title='コメントはこちらから'>
<img src='http://blog-imgs-27.fc2.com/j/d/o/jdog/g_cm.png' alt='コメント' border='0' /></a>
</td>
<td width='55'>
<a href='#pagetop' title='このページのトップへ'>
<img src='http://blog-imgs-27.fc2.com/j/d/o/jdog/g_t.png' alt='トップ' border='0' /></a>
</td>
</tr>
</table>
■ テキストの廻り込み用クラス
過去すでに別の設定を行っている人には不要ですが、当ブログでたまに検索ヒットがありますので、必要な方は利用してください。
『 Image settings 』 セクション
imgL ( 左寄せ用 )
imgC ( センタリング用 )
imgR ( 右寄せ用 )
これらを
<img class=" [ それぞれのクラス ] " src=" URI " />
という具合に利用します。
■ 投稿者簡易判別機能
さまざまなブログで紹介されていますが、いざ導入となると面倒でサジを投げる人も多いかと思います。色々なパターンがあり、背景色を変えたり写真を表示するものもありますが、今回は管理人の名前表示だけを他の人と差別化したいと思います。
『 コメント欄の管理人表示設定 』 セクション
.c { display: none; }・・・・・・・・・・・変更しないで下さい
.master { display: none; }
.master1 { display: inline; }
赤字部分が、自分の名前として
入力する文字列になります。
HTML の真ん中あたり
・・・<span class="cm_master">■■■</span>・・・
■■■部分が
実際に表示される文字列になります。
なお通常入力時には敬称 ( 〜さん ) が付き、時刻はアバウトに表示されます。また
安全性を考慮してメールアドレス入力と、投稿後の編集ができなくなっていますので、削除は管理画面からのみ行います。
■ その他
前回と同じく一通りのチェックを済ませてありますが、特定の環境でエラーの出る可能性があります。その場合にはお手数ですが 『 使用ブラウザや OS のバージョンなどを添えて 』 お知らせいただけると助かります。
またこのテンプレートでは XML 宣言を記述していません。 『 XHTML では XML宣言をすることが強く求められています 』 と出ますが、わかっていてわざと外しています。理由はゲイツツール IE6 の後方互換モード対策ですので、もしも他に有用な対策があればスライドする予定です。
その他、質問等はコメント欄からお願いいたします。
最後まで読んでくださり、ありがとうございました。
Copyright © 2001-2008 t2 and Project GROWING All rights reserved.