小粋空間: テンプレートアーカイブ

Top ＞ livedoorブログ＞テンプレート [全て開く]

2007年11月23日

livedoor テンプレート不具合のお知らせ（前後ページへのリンク追加）

November 23,2007 12:30 AM
Tag：[livedoor, Template]
Permalink

配布中の「livedoor ブログテンプレート」で、下記の不具合がありましたのでお知らせ致します。
ご利用中の皆様にはご迷惑をおかけして申し訳ございません。

１．問題点

1ページに表示するアーカイブの件数が、そのアーカイブ全体の件数より少ない場合、前後ページへのリンクが表示されない
個別記事ページの前後記事のリンクが表示されない

２．対処方法

カテゴリーアーカイブ、月別アーカイブ、個別記事ページの各テンプレートに、下記の前後ページへのリンク（青色）、および CSS を追加してください。

カテゴリーアーカイブ

　　　　：
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
 
<div class="content-nav"><a href="<$BlogUrl$>">Top</a> &gt; <$CategoryName$> アーカイブ</div>
 
<div class="page-nav"><IfPrevPage><a href="<$CurrentUrl$>?p=<$PrevPage$>">&lt; 前のページへ</a></IfPrevPage>&nbsp;<IfNextPage><a href="<$CurrentUrl$>?p=<$NextPage$>">次のページへ &gt;</a></IfNextPage></div>
 
<!-- Loop Start -->
<CategorizedArticlesLoop>
<$TrackBackAutoDiscovery$>
　　　　：

月別アーカイブ

　　　　：
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
 
<div class="content-nav"><a href="<$BlogUrl$>">Top</a> &gt; <$MonthLabel$> アーカイブ</div>
 
<div class="page-nav"><IfPrevPage><a href="<$CurrentUrl$>?p=<$PrevPage$>">&lt; 前のページへ</a></IfPrevPage>&nbsp;<IfNextPage><a href="<$CurrentUrl$>?p=<$NextPage$>">次のページへ &gt;</a></IfNextPage></div>
 
<!-- Loop Start -->
<MonthlyArticlesLoop>
<$TrackBackAutoDiscovery$>
　　　　：

個別記事ページ

　　　　：
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
 
<div class="page-nav">
<IfPrevArticle><a href="<$PrevArticle$>">&lt; 前の記事</a></IfPrevArticle>&nbsp;<IfNextArticle><a href="<$NextArticle$>">次の記事 &gt;</a></IfNextArticle>
</div>
 
<$TrackBackAutoDiscovery$>
　　　　：

CSS

/* ページナビゲーション */
.page-nav {
    margin: 5px 0;
    text-align: center;
    font-size: 12px;
}

以上です。

Comments [2] | Trackbacks [0]

2007年9月24日

テンプレート不具合のお知らせ（カレンダーリンクの改善） for livedoor ブログ

September 24,2007 1:03 AM
Tag：[livedoor]
Permalink

配布中の「livedoor ブログテンプレート」に不具合がありました。下記に具体的な内容と、修正方法についてお知らせ致します。

１．問題

カレンダーのリンクをクリックしても、該当の記事（月別アーカイブのフラグメント位置）にジャンプせず、常に該当記事がある月別アーカイブのページ先頭が表示されます。

２．原因

月別アーカイブの日付表示部分にある a 要素の src 属性に設定された URL のフラグメントに対応する id 属性の設定がもれていました。

注：フラグメントとは、下記の青色部分を指します。

<a href="http://blog.livedoor.jp/user/archives/2007-09.html#20070918" class="acalendar">18</a>

３．対処

月別アーカイブの本文日付を表示する下記の部分を修正してください。

修正前

　　　　：
<IfDateChanged>
<h2 class="date"><$ArticleDate$></h2>
</IfDateChanged>
　　　　：

修正後

　　　　：
<IfDateChanged>
<h2 class="date" id="<$ArticleDateTag$>"><$ArticleDate$></h2>
</IfDateChanged>
　　　　：

４．その他

配布テンプレートについては修正済です。

Comments [0] | Trackbacks [0]

2006年9月 1日

livedoor ブログテンプレート

September 1,2006 12:55 AM
Tag：[livedoor, Template]
Permalink

livedoor ブログ用のテンプレートを作りました。サンプルのスクリーンショットは3カラムですが、2カラム・1カラムも用意しております。またリキッドレイアウトへの変更も可能です。カラムレイアウトの設定方法につきましては本エントリーを参照ください。

１．動作確認環境

動作確認は下記の環境で行っています。

OS：Windows2000/XP
ブラウザ：IE6.0/Firefox1.0.7/Netscape7.1/Netscape8.0.4/Opera8.5

２．利用規定

ご利用の前にテンプレートのページを必ずご覧くださいますよう、よろしくお願い致します。

３．カラムレイアウト変更方法

このテンプレートではカラムレイアウトのバリエーションとして、

3カラム（カラム幅固定）
3カラムリキッドレイアウト（中央カラム幅可変）
2カラム（右サイドバー：カラム幅固定）
2カラム（左サイドバー：カラム幅固定）
2カラムリキッドレイアウト（右サイドバー：左カラム幅可変）
2カラムリキッドレイアウト（左サイドバー：右カラム幅可変）
1カラム（カラム幅固定）
1カラムリキッドレイアウト（カラム幅可変）

の計8種類を用意しています（それぞれの完成例は下のスクリーンショットをご覧ください）。

カラムレイアウトは、HTMLテンプレートの body 要素の class 属性を書き換えることで変更することができます（カラム数を変更する場合はHTMLテンプレートの修正が必要ですがこれについては後述します）。例えば、3カラムレイアウトから2カラム・リキッドレイアウト（右サイドバー）に変更したい場合は、HTMLテンプレートの

<body class="layout-three-column">

の赤色部分を

<body class="layout-two-column-liquid-right">

と、青色の内容に変更します。このテクニックは Designing with Web Standards でも紹介されています。

以下にそれぞれのレイアウトに対する class 属性値を示します。なおサンプル画像は Movable Type のものを流用しておりますので予めご了承ください。

<body class="layout-three-column">

3カラム

<body class="layout-three-column-liquid">

3カラム・リキッドレイアウト

<body class="layout-two-column-left">

2カラム（左サイドバー）

<body class="layout-two-column-liquid-left">

2カラム・リキッドレイアウト（左サイドバー）

<body class="layout-two-column-right">

2カラム（右サイドバー）

<body class="layout-two-column-liquid-right">

2カラム・リキッドレイアウト（右サイドバー）

<body class="layout-one-column">

1カラム

<body class="layout-one-column-liquid">

1カラム・リキッドレイアウト注：左右のマージンをなくすことも可能です。

配布時は一番上の3カラム固定レイアウトの状態で表示されるように設定しております。

次にカラム数を変更する場合の修正方法です。例えば3カラムから2カラム（左サイドバー）に変更する場合は、右カラムを表示する

<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
<$PluginList_B$>
<div class="elsehead"></div>
<div class="elsebody">
　　　　　　：
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->

の間に書かれている <$PluginList_B$> をコピーし、左カラム

<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
<$PluginList_A$>
<$PluginList_B$>
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->

にペーストしてください。そのあと

<!-- 右カラム開始 -->
　　　　　　　：
<!-- 右カラム終了 -->

を丸ごと削除します。
1カラムに変更される場合は左右両方のカラムをごっそり削除してください。

４．1カラムレイアウトについて

1カラムレイアウトはポータル的な要素を排除して、個人の日記サイトとして気軽に書けるデザインにしています（言い換えると単にサイドバーをとっぱらっただけです）。個別エントリーとコメント・トラックバックは機能しますので、サイトを初めて訪れる方でも戸惑わずに閲覧することが可能です。

1カラムでご利用になる際は前項での左右カラムの削除および、テンプレート内に設定されている

<!-- for one column
<!-- BEGIN archives -->
<div id="archive">{archives_list}</div>
<!-- END archives -->
 
<div id="footer-one">
Powered by <a href="{script_webpage}"><strong>{script_name} {script_version}</strong></a><br />
<a href="http://www.koikikukan.com/"><img src="{site_parts}koikikukan.gif" alt="小粋空間" width="128" height="22" /></a>
</div>
/for one column -->

の赤色部分を削除してください。

５．その他

タイトルバナー上部に表示されている livedoor のヘッダは削除しないでください（削除は livedoorブログの規約違反となります）。

基本的な動作は確認したつもりですが、Serene Bach の確認を全て理解できていない状態ですので、不具合等ございましたらご連絡ください。

６．ダウンロード

下のリンクからテンプレートをダウンロードできます。

2006.09.01 初版
2006.09.10 IE+リキッドレイアウト対処
2006.09.18 個別記事ページの追記の不具合修正

テンプレートの設定方法については、「livedoor ブログ設定方法」をご覧ください。またアーカイブを解凍した中にある README.txt にも記しております。

Comments [31] | Trackbacks [5]

小粋空間 - a cheap joke and a play on words site