特徴 > 動作サンプル > 注意点 > ソース(X)HTML > 導入方法 > 実行

Fview：アルバム風テンプレート

管理用目的で、エントリー内（追記を除く）の画像を一覧表示するテンプレートです。元テンプレートから呼び出す形で使用します。

特徴

サムネイル風にサイズをそろえて一覧できます。（150px x 150px）
1ヵ月単位でエントリーを読み込みます。引数にdate=XXXXXXが含まれていない場合は<%now_year><%now_month>が補完されます。
サムネイル内のリンクは、元のテンプレでその画像が含まれるエントリーへ移動します。
前後月へリンク・月別アーカイブ一覧はFviewを保持したまま移動します。
サイト名のリンクは呼出し元テンプレのトップに移動します。

動作サンプル

> Fview

注意点

このテンプレートの使用には、ブラウザのjavascriptが有効になっていることが前提になります。

実際に画像を縮小しているわけではないので、回線速度によっては重いです。
本文すべて読み込むのに表示は画像だけなので、非常にムダです。

ソース（HTML）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
 
<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">
 
<title><%blog_name>アルバム</title>
 
<script type="text/javascript">
<!--
function init () {
 if ( document.getElementsByTagName ) {
  var ul = document.getElementsByTagName( "UL" )[0];
  for ( var i=0; i<ul.childNodes.length; i++ ) {
   node = ul.childNodes[i];
   if ( node.nodeName == "LI" ) {
    node.style.cursor = "pointer";
    node.onmouseover = function() {
     this.className += " over";
    }
    node.onmouseout = function() {
     this.className = this.className.replace(/\bover\b/, "");
    }
   }
  }
 }
}
 
function rewritUrl () {
 if ( document.getElementsByTagName ) {
  var tmp = "?style2=fview&";
  var as = document.getElementsByTagName( "A" );
  for ( var i=0; i<as.length; i++ ) {
   var ah = as[i].href;
   as[i].href = ah.replace(/\?(.*page=\d+)/i,tmp +'$1').replace( /blog-category-(\d+)/i,tmp +'cat=$1' ).replace(/blog-date-(\d+)/i,tmp +'date=$1').replace(/(=\d+).html/i,'$1');
  }
 }
 init ();
}

div a {
background: #fff;
border: 1px solid #666;
text-align: center;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}

div a span {
margin-left: auto;
margin-right: auto;
}
 
div a span img {
border: none;
}

dl {
display: none;
height: 1px;
visibility: hidden;
}

p {
clear: left;
text-align: center;
padding: 2em 0;
}
 
p strong {
font-weight: 100;
}
-->
</style>

</head>
<body>
<h1><a href="./" title="Home"><%blog_name>アルバム</a></h1>
 
<ul>
	<li><a href="<%prev_month_link>" title="前の月へ">&lt;&nbsp;<%prev_year>-<%prev_month></a></li>
	<li><strong title="年月選択"><%now_year>-<%now_month></strong>
		<ul>

			 <li><a href="<%archive_link>" title='"<%archive_year>年<%archive_month>月"のログ'><%archive_year>-<%archive_month>（<%archive_count>）</a></li>

		</ul>
	</li>
	<li><a href="<%next_month_link>" title="次の月へ"><%next_year>-<%next_month>&nbsp;&gt;</a></li>

			<li><a href="<%category_link>" title='"<%category_name>"関連のログ'><%category_name>（<%category_count>）</a></li>

		</ul>
	</li>

	<li><a href="<%nextpage_url>">&lt;&nbsp;前のページ</a></li>


	<li><a href="<%prevpage_url>">次のページ&nbsp;&gt;</a></li>

-->
</ul> 
 
<script type="text/javascript">

</script>
 
<div>

<dl id="entry<%topentry_no>">
	<dt><a href="<%topentry_link>" title="<%topentry_year>年<%topentry_month>月<%topentry_day>日 : <%topentry_title>"><%topentry_title></a></dt>
	<dd><%topentry_body>
	</dd>
</dl>
<script type="text/javascript">

</script>

 
</div>
 
<p><%ad2>&nbsp;|&nbsp;<%ad></p>
 
</body>
</html>

ソース（XHTML）

<?xml version="1.0" encoding="EUC-JP"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
 
<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" />
 
<title><%blog_name>アルバム</title>
 
<link href="<%url>file/fview.css" rel="stylesheet" type="text/css" />
 
<script src="<%url>file/fview.js" type="text/javascript" charset="euc-jp"></script>
 
<script type="text/javascript">
if ( !window.location.href.match( /fview_x&date=/ ) ) {
 window.location.href = "<%url>?style2=fview_x&date=<%now_year><%now_month>";
}
</script>
 
</head>
<body>
<h1><a href="./" title="Home"><%blog_name>アルバム</a></h1>
 
<ul>
	<li><a href="<%prev_month_link>" title="前の月へ">&lt;&nbsp;<%prev_year>-<%prev_month></a></li>
	<li><strong title="年月選択"><%now_year>-<%now_month></strong>
		<ul>

			 <li><a href="<%archive_link>" title='"<%archive_year>年<%archive_month>月"のログ'><%archive_year>-<%archive_month>（<%archive_count>）</a></li>

		</ul>
	</li>
	<li><a href="<%next_month_link>" title="次の月へ"><%next_year>-<%next_month>&nbsp;&gt;</a></li>
</ul> 
 
<script type="text/javascript">
 rewritUrl ();
</script>
 
<div>

<dl id="entry<%topentry_no>">
	<dt><a href="<%topentry_link>" title="<%topentry_year>年<%topentry_month>月<%topentry_day>日 : <%topentry_title>"><%topentry_title></a></dt>
	<dd><%topentry_body>
	</dd>
</dl>
<script type="text/javascript">
 pickupImg ( "entry<%topentry_no>" );
</script>

 
</div>
 
<p><%ad2>&nbsp;|&nbsp;<%ad></p>
 
</body>
</html>

導入方法

Fviewは共有テンプレートに登録されていませんので、手動で登録します。使用中、または使用予定のテンプレートに上書きしないように注意してください。

”FC2管理画面”→”テンプレートの設定”でFviewを上書きするテンプレの修正画面を開きます。（無い方は任意のテンプレをダウンロードして、修正画面を開いてください）
”名称[xxx]の変更 (半角英数字、ハイフン、アンダーバー 20文字まで)”の下のインプットフィールドに”fview”（XHTML版は”fview_x”）と名前をつけます。スクリプト中で使用しますので、この名前を使ってください。すべて半角小文字です。ここで一度更新ボタンを押します。
”HTMLの編集 fview（fview_x）を編集しています。”の下のテキストエリア内をすべて削除して、この上のソースをコピーして貼り付けます。
XHTML版は以下の2つのファイルをダウンロードした後、自サイトの管理画面よりアップロードしてください。自動でリンクされます。
- fview.js（スクリプトファイル）
- fview.css（スタイルシート）
更新ボタンを押して完了です。

実行

Fviewの呼び出しは、ブラウザのブックマークを利用するか、元テンプレの表示させたい場所、または投稿欄に

<a href="./?style2=fview">画像一覧</a>

などと記述します。この場合は最新月アーカイブが読み込まれます。任意の月を指定する場合は

<a href="./?style2=fview&date=200505">5月の画像一覧</a>

のように引数にdate=XXXXXXを付けて呼出してください。ページ・カテゴリー・個別エントリー・サーチ結果などの引数は無視されます。

スクリプトオフのユーザに呼び出せないようにするには

<script type="text/javascript">

<!--

var s = <a href="./?style2=fview">画像一覧</a>

document.write( s );

//-->

</script>

XHTML版では

<script type="text/javascript">

var s = <a href="./?style2=fview">画像一覧</a>

document.write( s );

</script>

のようにスクリプトで書き出すと良いでしょう。

作成日 2005-06-01