彼此ともつかぬ場所


□ スポンサー広告 □

スポンサーサイト

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




*    *    *

Information

□ 修正報告 □

for_novel シリーズ ヘッダメニューバーの改良(2009/5/26以前版)

 2009/5/26 に、「for_novel_sky」において一ヶ月未更新広告が表示される際にサーバ側で挿入されるタグの影響で、個別記事画面の表示が崩れてしまうのを修正いたしました。
 その際に、残る「for_novel_w」と「for_novel_olive」も、「for_novel_sky」と同じ仕様のメニューバーにひっそりとバージョンアップしていたのです。

 そんなわけなので、今回の「for_novel シリーズ ヘッダメニューバーの改良」に記載された修正方法は、2009/5/26 以前にテンプレートをダウンロードして、そのままお使いの方には当てはまりません。
 一番簡単なのは、新たにテンプレートをダウンロードしていただく事なのですが、色々カスタマイズしてしまっていては、そう簡単にはいかないだろうと思います。
 ので、最新版メニューバーに変更するためのパッチを用意いたしました。
 ちなみに、「for_novel_sky」については「for_novel_sky 一ヶ月未更新広告の表示崩れ」の修正後からの説明ですので、未処理の場合は、そちらから先に修正をお願いします。


 今回は始めに、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ファイルの作業はこれで終わりです。

 次に、HTMLの修正です。

「for_novel_w」の109~116行目、「for_novel_olive」の129~136行目、「for_novel_sky」の124~132行目、

<!-- ▽ エントリ一覧画面 -->
<!--titlelist_area-->
    <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>(この行は「for_novel_sky」のみ)

    <h2 class="headline">□&nbsp;更新履歴&nbsp;□</h2>

の赤字部分を、全部削除してください。

<!-- ▽ エントリ一覧画面 -->
<!--titlelist_area-->
    <h2 class="headline">□&nbsp;更新履歴&nbsp;□</h2>


 こうなればOKです。

 次に、「for_novel_w」の149~158行目、「for_novel_olive」では169~178行目を見てください。
(上で4行+空白行を削除しているので、実際はそれぞれ144~153行目ならびに164~173行目になっていると思います)

<!-- ▽ 固定リンク画面 -->
<!--permanent_area-->

<!--topentry-->
    <div class="navi navitop"><a href="<%url>" title="インデックス画面へ">INDEX</a></div>
    <div class="navi navitop"><a href="<%topentry_category_link>" title="<%topentry_category> 目次へ">Contents</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>

    <h2 class="headline">□&nbsp;<%topentry_category>&nbsp;□</h2>


「for_novel_sky」では165~175行目です。(同じく、上で5行+空白行を削除しているので、実際はそれぞれ159~169行目になっていると思います)

<!-- ▽ 固定リンク画面 -->
<!--permanent_area-->

    <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="通常ブログ画面へ">Blog</a></div>
    <div class="navi naviright"><a href="<%url>?admin" title="管理画面へ">Admin</a></div>
  </div>

<!--topentry-->
    <h2 class="headline">□&nbsp;<a href="<%topentry_category_link>" title="<%topentry_category> 目次へ"><%topentry_category></a>&nbsp;□</h2>



これらの赤字部分を削除の上、青字の部分を以下のように修正してください。

<!-- ▽ 固定リンク画面 -->
<!--permanent_area-->

<!--topentry-->
    <h2 class="headline">□&nbsp;<a href="<%topentry_category_link>" title="<%topentry_category> 目次へ"><%topentry_category></a>&nbsp;□</h2>



 最後に、「for_novel_w」262~268行目、「for_novel_olive」282~288行目、「for_novel_sky」279~286行目
(これまでの作業の結果、252~258行目ならびに272~278行目、267~274行目になっていると思います)も、

<!-- ▽ 固定リンク画面以外 -->
<!--not_permanent_area-->

    <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>(この行は「for_novel_sky」のみ)

の赤字を……

<!-- ▽ 固定リンク画面以外 -->
<!--not_permanent_area-->


のように削除。

 それから、ファイルの上のほうに戻って、ヘッダに新しいメニューバーを追加します。

「for_novel_w」は……

<!-- ▼ ヘッダ -->
    <div class="space">+</div>
    <h1><%blog_name></h1>
<!-- ▲ ヘッダ -->

という部分に、以下の赤字部分を付け足してください。

<!-- ▼ ヘッダ -->
    <div class="space">+</div>
    <h1><%blog_name></h1>
    <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>
<!-- ▲ ヘッダ -->



「for_novel_olive」の場合も同様に……

<!-- ▼ ヘッダ -->
    <h1><%blog_name></h1>
<!-- ▲ ヘッダ -->

に、以下の赤字部分を付け足して、

<!-- ▼ ヘッダ -->
    <h1><%blog_name></h1>
    <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>
<!-- ▲ ヘッダ -->



「for_novel_sky」の場合も……

<!-- ▼ ヘッダ -->
    <div class="header">
      <h1><%blog_name></h1>
<!-- ▲ ヘッダ -->

に、以下の赤字部分を付け足して、

<!-- ▼ ヘッダ -->
    <div class="header">
      <h1><%blog_name></h1>
      <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>
<!-- ▲ ヘッダ -->




 これで作業は完了です。
 お疲れ様でした!



*    *    *

Information

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

Comment

コメントの投稿

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







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

Trackback

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

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