春木屋 HOME | 元記事
特徴 > 動作サンプル > 注意点 > ダウンロード > アップロード

外部スクリプト：Horizontal Archives Link

アーカイブリストを某日記ツールのような水平バー形式に書き換えます。

特徴

動作サンプル

↓

（注：リンクは実際のアーカイブに移動します）

HTML

<ul id="archives">
 <!--archive-->
  <li><a href="<%archive_link>" title="<%archive_count>件の記事">
<%archive_year>年<%archive_month>月(<%archive_count>)</a></li>
 <!--/archive-->
</ul>
<script type="text/javascript">
 horizontal( 'archives' );
</script>

CSS（一例）

/* スクリプトオフの観覧でもリストの高さをできるだけ抑えたい場合 */
ul#archives {
list-style-type: none;
}
ul#archives li {
display: inline;
margin-right: 1em;
}
ul.horizon li {
display: block;
}

/* スクリプトオフの場合には表示させない場合
（別途アーカイブへのリンクが必要になります） */
ul#archives {
display: none;
}
ul.horizon {
display: block;
}

注意点

アーカイブリストがul要素でマークアップされていて、各li要素にひとつだけa要素があることが条件のスクリプトです。（dlバージョンもいずれ作るかも）

スタイルシートでid: archivesまたはclassName: .horizonがすでに使用されている場合は適宜編集してください。

ダウンロード

> horizon.js

アップロード

  1. ”FC2管理画面”→”ファイルのアップロード”（ツール）→”アップロードするファイルの選択” と進み、jsファイルをアップロードします。
  2. ”ファイル情報”で”このファイルでエントリー”を選択をクリック。新しい窓が開き、投稿欄に以下のようなコードが書き込まれます。
    <a href="http://blogNO.fc2.com/IDの一文字目/ID/file/horizon.js" target="_blank">fold.js</a>
    このファイル名http://blogNO.fc2.com/IDの一文字目/ID/file/horizon.jsの部分をメモしておきます。
  3. ”FC2管理画面”→”テンプレートの設定”（環境設定）→”テンプレートの編集” と進み、現在選択されているスタイルの修正を開きます。
  4. ”HTMLの編集”の欄を以下のように編集します。（必須）
    <head>
    <meta http-equiv="content-type" content="text/html; charset=euc-jp" />
    <meta http-equiv="content-style-type" content="text/css" />
    <!-- 追加部分 始まり-->
    <meta http-equiv="content-script-type" content="text/javascript" />
    <!-- 追加部分 終わり-->
    <link href="<%css_link>" rel="stylesheet" type="text/css" />
    <link rel="alternate" type="application/rss+xml" title="RSS" href="<%url>?xml" />
    <!-- 追加部分 始まり-->
    <script src="http://blogNO.fc2.com/IDの一文字目/ID/file/horizon.js" type="text/javascript" charset="euc-jp"></script>
    <!-- 追加部分 終わり-->
    <title><%blog_name><%sub_title></title>

テンプレートのHTML編集欄にHTMLをコピーアンドペーストして”年””月”などリンク文字列を編集して完成です。

作成日 2005-04-26
©2004-2005 FC2