2005年09月16日

過去ログに一覧を追加♪

カテゴリに一覧を追加♪」で、カテゴリのページトップに一覧を追加しましたが、過去ログ・・・月ごとのページにも一覧を追加しました。

問題は、Seesaaの仕様上、上に大きな日付が来てしまうんですよね。多分、変更する方法は・・・なさそう??「私は知ってる!」という人、よろしければご教授お願いします〜。


方法は下記の通りです。

マイ・ブログ → デザイン → コンテンツで、コンテンツ一覧を表示します。コンテンツ一覧に、種類が「記事(ページコンテンツ)」というのがあります(デフォルトではタイトルが記事です)ので、クリックして開きます。

「記事(ページコンテンツ)の設定」画面に移動しますので、その編集画面右上の「コンテンツHTML編集」をクリックします。
切り替わった画面は、カテゴリや過去ログを見る時のページになります。その中にあるHTMLのソースは念のために、テキストファイルにコピペして保存しておきましょう!失敗すると、最悪はページが全く表示されません。失敗した場合は、そのページの一番下に「初期値に戻す」というチェックボックスがあるので、コレをチェックして保存すれば最初の状態に戻ります。



実際のHTMLの編集ですが、下記の文字列を検索します。
これは過去ログページ表示の時にのみ表示しますという命令です。

<% if:page_name eq 'archive' -%>
 〜 (中略) 〜
<% /if -%>


ちなみに、私のテンプレート「さくら」では、こんな文章になっています。

<% if:page_name eq 'archive' -%>
<div class="navi">
<% if:previous_archive -%><;<;<a href="<% previous_archive.page_url %>"><% previous_archive.createstamp | date_format("%Y年%m月") %></a>|<% /if -%>
<a href="<% blog.page_url %>">Main</a>
<% if:next_archive -%>|<a href="<% next_archive.page_url %>"><% next_archive.createstamp | date_format("%Y年%m月") %></a>>;>;<% /if -%>
</div>

<% /if -%>



ここで、下記の文章を追加します。

<div id="clist">
<p><% archive.createstamp | date_format("%y年%m月") %>の記事一覧です。</p>
<ul>
<% loop:list_article -%>
<li>(<% article.createstamp | date_format("%y/%m/%d") %>)<a href="<% article.page_url %>"><% article.subject %></a></li>
<% /loop -%>
</ul>
</div>


私のテンプレートで追加した状態がコレです。

<% if:page_name eq 'archive' -%>
<div class="navi">
<% if:previous_archive -%><;<;<a href="<% previous_archive.page_url %>"><% previous_archive.createstamp | date_format("%Y年%m月") %></a>|<% /if -%>
<a href="<% blog.page_url %>">Main</a>
<% if:next_archive -%>|<a href="<% next_archive.page_url %>"><% next_archive.createstamp | date_format("%Y年%m月") %></a>>;>;<% /if -%>
</div>

<div id="clist">
<p><% archive.createstamp | date_format("%y年%m月") %>の記事一覧です。</p>
<ul>
<% loop:list_article -%>
<li>(<% article.createstamp | date_format("%y/%m/%d") %>)<a href="<% article.page_url %>"><% article.subject %></a></li>
<% /loop -%>
</ul>
</div>
<% /if -%>


これでOKです。
一番下の保存ボタンで保存し、再構築を行います。今回は過去ログのページのみ変更したので、再構築の範囲も「過去ログページ」だけでOKですよ。再構築が終わった後に、ブログの過去ログを見ると、リストが追加されていると思います。いかがでしょうか??



表示されたリストが中央寄りになっていてリストがガタガタだったので、見た目も変更しました。

マイ・ブログ → デザイン → スタイルシートで、スタイルシートを表示します。私の場合、リストにスタイルシートが1つしかないのですが、複数あった場合、「適応」にチェックがついているスタイルシートが現在使っているモノだと思います。


中身を表示したところで、これもテキストファイルにコピペして保存しておいた方がいいと思います。こっちは見た目だけを編集するため、そうそう無茶をしてもトラブルは起きません。

この内容の最後に、以下の文章を追加します。


/* カテゴリ記事リスト */
#clist {
margin: 20px;
padding: 10px;
border: 1px dotted #999999;
}

#clist li {
text-align:left;
margin-bottom: 0.5em;
font-size:12px;
}


あとは、「スタイルシートを変更する」ボタンで保存すれば完了です。


ブログをブラウザの「再読込」で読み直せば、過去ログ一覧のガタガタが左寄りになっていると思います。これで完了です。

内容的には、"clist"という文字列はテンプレートで追加した文章の"<div class="navi">"を指しています。
このスタイルシートの詳しい意味は、スタイルシートを解説しているサイトを参照にして下さい。私は「TAG index」さんが初心者にも判りやすくていいと思います。判りやすいので愛用してます。

"#clist"の内容の意味はコレコレです。
"#clist li"の内容の意味はコレコレです。



ついでに、カテゴリの一覧の追加方法も書いておきます。

上記に出てきた「記事(ページコンテンツ)」を表示し、下記の文字列を検索します。
これはカテゴリページ表示の時にのみ表示しますという命令です。

<% if:page_name eq 'category' -%>
<% /if -%>



ここで、下記の文章を追加します。

<div id="clist">
<p>このカテゴリの記事一覧です。</p>
<ul>
<% loop:list_article -%>
<li>(<% article.createstamp | date_format("%y/%m/%d") %>)<a href="<% article.page_url %>"><% article.subject %></a></li>
<% /loop -%>
</ul>
</div>



私のテンプレートで追加した状態がコレです。

<% if:page_name eq 'category' -%>
<div id="clist">
<p>このカテゴリの記事一覧です。</p>
<ul>
<% loop:list_article -%>
<li>(<% article.createstamp | date_format("%y/%m/%d") %>)<a href="<% article.page_url %>"><% article.subject %></a></li>
<% /loop -%>
</ul>
</div>
<% /if -%>


これでOKです。
後は保存して再構築でOKです。再構築の範囲は「カテゴリページ」だけでOKです。いかがでしょうか?


問題なかった場合、再構築の範囲を「すべて」で再構築して、トップページやカテゴリ、過去ログ、検索、記事別のそれぞれを一カ所以上チェックする事をオススメします。間違って触って見れなくなった等がないか確認しておきましょう!



いかがでしたでしょうか?
記事が増えてくると閲覧者にはどんな記事があるのかわかりにくいので、結構便利だと思います。

ココはこんな風にしたらいいとかあれば、教えてくださいね〜♪


【私の記事】
カテゴリに一覧を追加♪
トラックバックURLの表示変更


【参考記事】
Seesaa 質問 代表的な関数
Seesaa 質問 代表的な変数一覧(オブジェクト型)
Seesaa 質問 Seesaaブログ独自タグの基本文法
Seesaa 質問 関数について
Seesaa 質問 変数について
Seesaa デザインテンプレートさんのカテゴリで記事一覧を表示する [HTML+CSS]
TAG index


【追記】
スイマセン、< や > の表示が変でした!
& lt; と書くところを、& lt と、セミコロンが抜けていました。IE系だと勝手に補完されてちゃんと見えるようですね。失敗失敗(*ノノ)


【追記 07/07/14】
コメント欄のリクエストで「記事一覧の文言を中央寄りに、文字を大きくしたい」というのがありましたので、その変更方法を追記します。今回は、文章中の一部のみを大きくするという方針で書いてみます。

「コンテンツHTML編集」で太字部分を追加します。
<p class="list_h"><% archive.createstamp | date_format("%y年%m月") %>のこのページの<span class="list_hz">記事一覧です。</span></p>
<p class="list_h">カテゴリ「<% category.name %>」のこのページの<span class="list_hz">記事一覧です。</span></p>

「スタイルシート」で太字部分を最後に追加します。
.list_h {
font-size: 12px;
text-align: center
}
.list_hb {
font-weight: bold
}


「コンテンツHTML編集」ではclassを追加しました。これをタグに追加すると、同名のクラスのスタイルを適用できます。
今回は、記事一覧ですという文章全体に「list_h」のスタイルを適用し、「記事一覧」の単語だけに「list_hz」のスタイルを適用するというものです。単語の「記事一覧」を<span>タグで囲んでいますが、これは一つの単位にまとめる事を示すもので、このタグ単体では特に意味を持ちません。今回は、この<span>で囲んだ部分にスタイルシート「list_hz」を適用させるために使いました。

「スタイルシート」ではスタイル list_h と list_hz の2つのスタイルを追加しました。スタイルの内容は { } の中に記述します。スタイル名の頭に「.」が付いている事に注意してください。これは「classに対してのスタイル」という意味を持ちます。この場合、<span>タグでも<p>タグでも<h1>でも、タグの中にclass=〜を付ければ同じスタイルを適用出来ます。
スタイル list_h は、フォントサイズを12ポイントで、文章を中央寄りにという設定。
スタイル list_hz は、文字を太字にという設定。

スタイル list_h で、フォントサイズの後ろに「;」が付いているのは、要素の区切りです。フォントサイズと文字位置の2つの要素があるのでその区切りとなります。この他にも文字の色なども設定出来ますので、そこは頑張ってみてください。わかりやすいと思うのは「TAG index」さんです。


今のブログの設定は、上記の設定をした状態です。
参考になれば・・・と言うことで、このブログの07/07/14バージョンの「記事のコンテンツHTML」と「CSS」をアップします。
posted by 藍旋 at 01:24 | Comment(11) | TrackBack(4) | コンピュータ
この記事へのコメント
これは便利そうですねー。
暇をみつけて、さっそくチャレンジしたいと思います。
Posted by Yusuke @ Guides to the future at 2005年09月16日 07:10
Yusukeさん、こんにちわ〜♪
ゼヒ、使ってみてください〜。
折角書いた記事も、ずらずらっと並ぶと一覧もなく並ぶと、書いた本人さえもわからないですよね
〜。。。

あとは、日付が昇順で並ぶと読みやすいですよね。日記だと、下から記事を読むけど、記事一つ一つは上から読む・・・と、ちょこちょことスクロールして面倒です。Seesaaさん、仕様を増やして欲しいな・・・
Posted by 藍旋 at 2005年09月16日 15:01
TBのご挨拶が遅くなってしまい申し訳ありませんでした。たまたま私のブログで上の日付を消す方法を紹介させていただいていたのでTBさせていただきました。(素人が行き当たりばったりでやっているので正しいかどうか怪しいですが;)
こちらで紹介されていた↑の方法、凄く参考になりました!今度チャレンジしてみたいと思います。

最後になりましたが、当方へのTB有難うございました!
Posted by NEI at 2005年10月02日 16:26
NEIさん、こんばんわ〜♪
私はTB大歓迎なので、バシバシどうぞです(笑)
少しでも参考になったと言われると、スゴく嬉しいです(*ノノ)
テンプレの配布、ガンバって下さいね〜!
Posted by 藍旋 at 2005年10月02日 21:14
こんばんわ、BlogPetのグループの方で質問して、丁寧に答えてくださってありがとうございました。こちらの記事を参考にして、過去ログ・カテゴリを非常に見やすいものにすることができました。とても助かりました。どうもありがとうございました。
Posted by 水月 at 2005年12月03日 06:45
水月さん、こんばんわ〜♪
お役に立てて良かったです♪
私自身、書いた記事を探すのに苦労してましたので・・・この目次が付けれるようになったのは大助かりなんです!

Yahoo!ブログなどでは記事リストがでたり、5記事毎に改ページが出来たりと、羨ましいと思う事がしばしばですよね〜。
Yahoo!の人もSeesaaはBlogPetを付けやすくて羨ましい(Yahoo!はサイドバーにBlogPetは付けれず、ゲストブック等に住まわせるそうです)と、お互い様らしいですけど。。。
Posted by 藍旋 at 2005年12月03日 22:37
初めまして☆

過去ログとカテゴリ一覧表示、参考にさせてもらいました。
そこでお聞きしたいのですが、「〜の記事一覧」という文字だけを大きくしたりセンターにしたりなどしたいのですがどのようにすればよいかご存知でしょうか??

スタイルシートだとどこをいじればいいのか分からず悪戦苦闘しております(>_<)
Posted by ちー at 2007年07月14日 15:18
ちーさん、こんばんわ。
追記として記事に追加しましたので、参考にどうぞ!
ちゃんと言及していませんが、微妙にこの記事から変更している点もありましたので、コンテンツHTMLとスタイルシートのソースもダウンロードできるようにしました。
上手くいかない場合は、メモ帳の検索で同じ場所を探して比較してみるといいかも知れませんよ〜。
Posted by 藍旋 at 2007年07月14日 23:54
ありがとうございます☆
とても丁寧な説明だったので問題なく表示できるようになりました♪
あっちこっちいじってなかなかうまくいかなかったので^^;。
スッキリ解決いたしました☆
Posted by ちー at 2007年07月15日 10:07
藍旋さんこんにちは☆
先日はどうもありがとうございましたm(._.*)m
とても参考になり、感謝しています(*u_u)σ

参考になるなぁと過去の記事なども見ていたのですが、
実はわたしがやりたかったことがちょうどこのブログで表示されていたので、
ぜひ教えていただきたくてまたコメントさせていただきました。

藍旋さんのブログでは記事本文のリンクには下線がついていますが、
サイドバーのリンクには下線がないですよね??
実はちょうどコレと同じようにしたくてスタイルシートをいじっていたところなのです。
全体を指定している部分があるのは分かるのですが、
そこをいじってしまうとブログ全体のリンク下線が消えてしまうし、
サイドバーの設定のところでいろいろいじっていたのですが、
今度は記事のほうも下線が消えてしまったりとなかなかうまくいきません(:_;)
このブログはどのようにしているのでしょうか?
もしよろしければおしえていただけないでしょうか??
Posted by ちー at 2007年07月17日 14:32
ちーさん、こんばんわ。
人によってブログの構成が異なる可能性があるため、そのサイトを見てみないとなかなかアドバイスは難しかったりします。
なので、ツールの紹介をすることにしました。

07/07/21 Firebug 日本語版
http://twobcherry.seesaa.net/article/48716032.html

WebブラウザFirefoxの拡張機能です。
これを使うと、どのようにスタイルシートをいじればいいかがわかりやすいと思います。
使ってみて下さいね!
Posted by 藍旋 at 2007年07月21日 01:22
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※半角英数字のみのコメントは投稿できません。
この記事へのトラックバックURL

※半角英数字のみのトラックバックは受信されません。

この記事へのトラックバック

過去ログ・カテゴリ、一覧表示 ~ From The Wind of Blessing ~
Excerpt: BlogのHTMLとCSSを修正しました。 カテゴリおよび過去ログのページにおいて、そのページの先頭に「もくじ」が表示されるようになっています。 The Wind of Blessingさんを参考にし..
Weblog: Guides to the future
Tracked: 2005-09-16 23:40

上の大きな日付を消す
Excerpt:  他のブログを使っていた頃からここに日付が表示されるのがイヤだったんですよね。そんなわけで、ここで配布しているテンプレートについては予め日付の場所が移動されています。  日付は<h2>関連のスタイル..
Weblog: GARNET-BRIDE
Tracked: 2005-10-02 04:32

ブログペットの輪
Excerpt: 結構過去の記事って見づらいよなぁ…&amp;#63897;とか思ってたんですが、藍旋さんのブログで「過去の記事リスト」の作成方法が紹介されてました&amp;#63889;どうもありがとうございます&a..
Weblog: アホ部 部室
Tracked: 2005-12-08 01:32

迷子になりませんか?
Excerpt: 今回のカスタマイズは二日間合計で15時間はかけたと思います。 何をしたかと言うと、迷子の案内をしました 1.過去ログ、カテゴリページの記事の一覧を記事の上下につけました。しおりも埋め込みました。 ..
Weblog: 茨城に住む男のブログ
Tracked: 2006-08-16 20:11
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。