› ちょこっと試した備忘録2009年09月16日
アーカイブをフォトログ表示にする
滋賀咲くブログのテンプレートの中に、「フォトログ」 があります。このテンプレートでは、ブログの記事に挿入された 1 つめの画像に、記事のタイトルと投稿日を付記し、画像一覧が表示されます。
ブログのカテゴリ別や投稿月別のような、アーカイブ表示にした時に、フォトログ風の表示を行うように変更してみました。
このブログでは「オリジナル★テンプレート」を使っていますので、これをもとに説明していきます。
変更する所は、「テンプレート」の中の
・ スタイルシート
・ アーカイブ
の 2 つです。
1. スタイルシートの変更
スタイルシートに、次のコードを追記してください。
/*************************************
フォトログ風
*************************************/
.photo-list {
width: 160px;
height: 180px;
overflow: hidden;
text-align: left;
float: left;
padding: 0px 5px 0px 0px;
margin: 0px 5px 10px 0px;
}
.photo-list img {
width: 160px;
height: 120px;
border: 0px;
}
.photo-list h2.date-list {
margin: 0px;
padding: 5px 0px 0px;
font-size: 10px;
color: #777777;
font-family: nomal;
font-weight: nomal;
}
.photo-list h3.title-list {
padding: 0px 0px 5px;
font-size: 12px;
margin: 3px 0px 3px;
font-weight: bold;
line-height: 14px;
}
.title-box-top {
background: #ffffff;
padding: 0px 0px 0px 5px;
}
a.photo {
color: #000000;
text-decoration: 0px;
}
a.photo:link {
color: #000000;
text-decoration: 0px;
}
a.photo:visited {
color: #000000;
text-decoration :0px;
}
a.photo:active {
color: #000000;
text-decoration: 0px;
}
a.photo:hover {
color: #000000;
text-decoration: 0px;
}
a.photo-title {}
a.photo-title:link {}
a.photo-title:visited {}
a.photo-title:active {
text-decoration: 0px;
}
a.photo-title:hover {
text-decoration: 0px;
}
「登録」をクリックしますと、変更内容が保存されます。
2. アーカイブの変更
まず、アーカイブの、<EntrysLoop> から </EntrysLoop>を削除してください。
（<EntrysLoop> と </EntrysLoop> も、削除します）
そして、削除した部分に、次のコードを挿入してください。
<!-- フォトログ風 -->
<EntrysLoop>
<%TrackBackAutoDiscovery%>
<div class="photo-list">
<a name="<%EntryId%>">
</a>
<a class="photo" href="<%EntryPermalink%>">
<img src="<%EntryImg%>" alt="<%EntryDate%>" />
</a>
<div class="title-box-top">
<h2 class="date-list">
<%EntryDate%>
</h2>
<a class="photo-title" href="<%EntryPermalink%>">
<h3 class="title-list">
<%EntryTitle%>
</h3>
</a>
</div>
</div>
</EntrysLoop>
<br clear="all"/>
<!-- フォトログ風 END -->
「登録」をクリックしますと、変更内容が保存されます。
これで、編集作業は終わりです。
今回ご紹介した表示では、記事中に画像がない場合は、画像を表示する部分が空欄になります。
また、画像の横対縦の表示比を 4 : 3 で縮小していますので、もとの画像の横対縦の比が 4 : 3 でない場合は、横長や縦長に歪んだ画像になりますので、ご了承ください。
このブログの場合、アーカイブ表示にした時に、1 行当たり 3 つの画像が表示されます。
アーカイブ表示にした時に、表示される記事数を 3 の倍数にしておくと、縦と横の画像がタイルのように綺麗に並ぶようになります。
記事の表示数は、「ブログ環境設定」の「表示内容の設定」の、
・ 月別アーカイブページで表示される記事数
・ カテゴリーページで表示される記事数
の数値を変更することで設定できるようになっています。
2009年09月13日
ページ上部へするする移動させる
このブログで使っている「オリジナル★テンプレート」では、ページの下の方に「このページの上へ▲」というリンクが付けられています。このリンクをクリックしますと、表示しているページの一番上、すなわちヘッダー画像が表示されます。
「ページ上部への移動リンクを付ける」では、この、「このページの上へ▲」と同じ機能のリンクを、それぞれの記事の終わりに付けましたが。
この時のページの上への移動を、パッ! と一瞬で移動させずに、するする～っと戻ってますよ～という状態を表示しつつ移動させる方法を説明します。
Javascript を使って実現させるのですが。
こちら ↓ のページで公開されている方法を使わせて戴きました。
+ このページの先頭へ、をちょこっとおしゃれに／SIMPLE*SIMPLE +
http://www.simplexsimple.com/archives/2006/09/post.html
変更するテンプレートは、
・ トップページ
・ 個別記事
・ アーカイブ
の 3 つ全てで。
それぞれについて、次の作業を行います。
1. テンプレートに Javascript を記述する
2. リンクの記述を変更する
1. テンプレートに Javascript を記述する
トップページ、個別記事、アーカイブ、それぞれのテンプレートの </head> の直前に、Javascript のプログラムを挿入します。
変更前
</head>
変更後
<!-- 「このページの上へ」をするする移動 -->
<script language="JavaScript">
<!--
function backToTop() {
var x1 = x2 = x3 = 0;
var y1 = y2 = y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
x3 = window.scrollX || 0;
y3 = window.scrollY || 0;
var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));
window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));
if (x > 0 || y > 0) {
window.setTimeout("backToTop()", 25);
}
}
//-->
</script>
<!-- 「このページの上へ」をするする移動 END -->
</head>
上記のように、赤い文字のコードを追加してください。
「登録」をクリックしますと、変更内容が保存されます。
2. リンクの記述を変更する
「ページ上部への移動リンクを付ける」の変更を行われていない場合は、
<a class="aposted" href="#top">
の部分を変更します。
「ページ上部への移動リンクを付ける」の変更を行われた場合は、
<a class="aposted" href="#top">
と
<a class="aposted" href="#top" title="このページの上へ">
の部分を変更します。
変更前
<a class="aposted" href="#top">
または
<a class="aposted" href="#top" title="このページの上へ">
変更後
<a class="aposted" href="#top" title="このページの上へ" onclick="backToTop(); return false">
「登録」をクリックしますと、変更内容が保存されます。
これで、編集作業は終わりです。
2009年09月13日
ページ上部への移動リンクを付ける
このブログで使っている「オリジナル★テンプレート」では、ページの下の方に「このページの上へ▲」というリンクが付けられています。このリンクをクリックしますと、表示しているページの一番上、すなわちヘッダー画像が表示されます。
この、「このページの上へ▲」と同じ機能のリンクを、それぞれの記事の終わりに付けることにしました。右が、リンクを付ける前の状態です。
そしてこちらが、リンクを付けた後の表示です。「▲」の▲の部分をクリックしますと、表示しているページの一番上を表示します。
変更の手順は、次のようになります。
1. 「個別記事」テンプレートに「▲」印を付ける
2. 「アーカイブ」テンプレートに「▲」印を付ける
1. 「個別記事」テンプレートに「▲」印を付ける
次の部分を変更します。
変更前
<IfEntryCategory>│<a class="aposted" href="<%EntryCategoryUrl%>"><%EntryCategory%></a></IfEntryCategory></div>
変更後
<IfEntryCategory>│<a class="aposted" href="<%EntryCategoryUrl%>"><%EntryCategory%></a></IfEntryCategory>│<a
class="aposted" href="#top" title="このページの上へ">▲</a></div>
上記のように、赤い文字のコードを追加してください。
「登録」をクリックしますと、変更内容が保存されます。
2. 「アーカイブ」テンプレートに「▲」印を付ける
次の部分を変更します。
変更前
<IfEntryCategory>│<a class="aposted" href="<%EntryCategoryUrl%>"><%EntryCategory%></a></IfEntryCategory>
変更後
<IfEntryCategory>│<a class="aposted" href="<%EntryCategoryUrl%>"><%EntryCategory%></a></IfEntryCategory>│<a
class="aposted" href="#top" title="このページの上へ">▲</a>
上記のように、赤い文字のコードを追加してください。
「登録」をクリックしますと、変更内容が保存されます。
これで、編集作業は終わりです。
2009年08月29日
2009年08月29日
個別記事表示は、記事の先頭から表示する
例えば、トップページを表示していて …。右のように、記事のタイトルをクリックしますと …。
個別記事が表示はされるんですけれど、右のように、ブログのヘッダー画像がブラウザの一番上に来るような表示になります。このブログの場合、ヘッダー画像自体の高さは低めになっているんですけれど。
その下にカスタムプラグインを使ってメニューを表示していたり、最近の記事を表示していたりしますので、個別記事を表示させようとしているにも関わらず、目的の個別記事の先頭を探さなくてはならなくなるという不都合が発生していました。
そこで。個別記事を表示させるために、個別記事へのリンクをクリックしたら …。
個別記事の先頭あたりを表示するように、テンプレートを変えてみました。
（広告の固定配信を停止していないブログの場合、広告配信の仕様上、個別記事の先頭からずれた位置を表示してしまいますが、ご了承ください）
変更の手順は、次のようになります。
1. 「個別記事」テンプレートに記事の始まりの印を付ける
2. 「トップページ」「個別記事」「アーカイブ」テンプレートを変更する
1. 「個別記事」テンプレートに記事の始まりの印を付ける
次の部分を変更します。
変更前
<h2 class="date"><%EntryDate%></h2>
変更後
<!-- 記事の始まりの印 -->
<a name="entrytop"></a>
<!-- 記事の始まりの印 END -->
<h2 class="date"><%EntryDate%></h2>
「<h2 class="date"><%EntryDate%></h2>」の前に、赤い文字のコードを追加してください。
「登録」をクリックしますと、変更内容が保存されます。
2. 「トップページ」「個別記事」「アーカイブ」テンプレートを変更する
まず、
・ トップページ
・ 個別記事
・ アーカイブ
の 3 つのテンプレートの、次の部分を書き換えてください。
変更前
<h3 class="title"><%EntryTitle%></h3>
変更後
<h3 class="title"><a href="<%EntryPermalink%>#entrytop"><%EntryTitle%></a></h3>
次に、
・ トップページ
・ アーカイブ
の 2 つのテンプレートの、次の部分を書き換えてください。
変更前
<a class="aposted" href="<%EntryPermalink%>"><%EntryTime%></a>
変更後
<a class="aposted" href="<%EntryPermalink%>#entrytop"><%EntryTime%></a>
「登録」をクリックしますと、変更内容が保存されます。
これで、編集作業は終わりです。
