彼此ともつかぬ場所


□ スポンサー広告 □

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




*    *    *

Information

□ 修正報告 □

for_novel シリーズ ヘッダメニューバーの改良

 小説用テンプレートを、自分でも実際に小説ブログとして使い始めて、やっと、ヘッダメニューバー(INDEX とか Archive とか Blog とかのリンクの並んでいるアレ)の使い勝手の微妙さに気が付きました……。

 せっかくの Novel List へのリンクが、Archive 画面にしか出てこないのって、とても不便ですよね……。
「Archive」クリックしてから「Novel List」クリックすれば良いやん、ってこれまで思ってたのですけれど、1クリック増えるのって、結構、いや、物凄く、面倒くさいですよね……orz

 デザインを重視するあまり、メニューバーの項目は三つまで! と思い込んでしまっていましたが、別に四つあったっていいじゃないか、と漸く思い当たった次第です。

 というわけで、メニューバーに常に「Novel List」へのリンクが表示されるようにテンプレートを修正いたしました。
 2009/6/25 20:00 までにダウンロードしてくださった方は、新しいものをダウンロードし直してくださるか、以下のようにパッチをあてていただけたら、と思います。
 ※ 2009/5/26以前にダウンロードして、そのままテンプレートをお使いの方へ。
 今回の改良の前に一度メニューバーの部分をバージョンアップしているため、以下の説明はお手持ちのテンプレートに当てはめる事が出来ません。「for_novel シリーズ ヘッダメニューバーの改良(2009/5/26以前版)」をご覧ください。


 修正ポイントは、HTMLにそれぞれ二箇所、CSSは一箇所です。

 まずはHTML。
「for_novel_w」……111~114行目、149~152行目
「for_novel_olive」……131~134行目、169~172行目
「for_novel_sky」……126~129行目、165~168行目

 それぞれ、

    <div class="navi navitop"><a href="<%url>" title="インデックス画面へ">INDEX</a></div>
    <div class="navi navitop"><a href="<%url>?tag=*" title="小説一覧へ">Novel List</a></div>
    <div class="navi navitop"><a href="<%url>?page=0" title="通常ブログ画面へ">Blog</a></div>
    <div class="navi naviright"><a href="<%url>?admin" title="管理画面へ">Admin</a></div>



    <div class="navi navitop"><a href="<%url>" title="インデックス画面へ">INDEX</a></div>
    <div class="navi navitop"><a href="<%url>archives.html" title="更新履歴&記事検索へ">Archive</a></div>
    <div class="navi navitop"><a href="<%url>?page=0" title="通常ブログ画面TOPへ">Blog</a></div>
    <div class="navi naviright"><a href="<%url>?admin" title="管理画面へ">Admin</a></div>

という部分が見つかると思います。
 この二箇所にそれぞれ一行ずつ、付け足して、以下のようにしてください。

    <div class="navi navitop"><a href="<%url>" title="インデックス画面へ">INDEX</a></div>
    <div class="navi navitop"><a href="<%url>?tag=*" title="小説一覧へ">Novel List</a></div>
    <div class="navi navitop"><a href="<%url>archives.html" title="更新履歴&記事検索へ">Archive</a></div>
    <div class="navi navitop"><a href="<%url>?page=0" title="通常ブログ画面へ">Blog</a></div>
    <div class="navi naviright"><a href="<%url>?admin" title="管理画面へ">Admin</a></div>



    <div class="navi navitop"><a href="<%url>" title="インデックス画面へ">INDEX</a></div>
    <div class="navi navitop"><a href="<%url>?tag=*" title="小説一覧へ">Novel List</a></div>
    <div class="navi navitop"><a href="<%url>archives.html" title="更新履歴&記事検索へ">Archive</a></div>
    <div class="navi navitop"><a href="<%url>?page=0" title="通常ブログ画面TOPへ">Blog</a></div>
    <div class="navi naviright"><a href="<%url>?admin" title="管理画面へ">Admin</a></div>



 二箇所の記述がまったく同じものになればOKです。

(新しいバージョンのテンプレートでは、これを一つにまとめて記述しましたので、以前のよりも若干コンパクトになった事になります。この変更に合わせて、他のカスタマイズ方法の記事に記した行番号も訂正してありますので、カスタマイズする時はご注意ください)


 次に、CSSファイルです。
「for_novel_w」……103~104行目
「for_novel_olive」……111~112行目
「for_novel_sky」……122~123行目

/* ナビゲーション 上部右側 */
.naviright { text-align:right; padding:3px 2em 2px 2em; margin:15px 0px 0px 19.5em; }

の赤字部分を……、

/* ナビゲーション 上部右側 */
.naviright { text-align:right; padding:3px 2em 2px 2em; margin:15px 0px 0px 26em; }

と変えていただければ、作業は完了です。
 CSSの読み込みを確実にするために、一度ブラウザの再読み込み(リフレッシュ)ボタンを押して、表示を確認してみてください。


 こんな調子で、これからもちょこちょこと改良を重ねていくと思いますが、より良いテンプレートを目指すが故の事ですので、どうかご理解ください。



*    *    *

Information

Date:2009/06/25
Trackback:0
Comment:0

Comment

コメントの投稿

コメント書き込みの前に、是非一度「コメントについて」に目をお通しください。







 ブログ管理者以外には秘密にする

Trackback

TrackbackUrl:http://greenbeetle2.blog117.fc2.com/tb.php/40-685f7ca7
この記事にトラックバックする(FC2ブログユーザー)

 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。