月別の記事一覧を表示!!

「ブログを見てくださる方が、見やすいようにしたい!!」と思いながら
なかなか出来ておりませんでした。
また少しずつ頑張っていこうと思います♪
自分自身が過去記事を探しにくいというのもありますし。(笑)
まずは「yozoの気が向いたと記2.0」のyozoさんの
月別に記事のタイトル一覧を表示させる（FC2）を参考にさせていただきました。
このカスタマイズは右サイドバーにある月別アーカイブで、ある月を選ぶと
その月の記事タイトル一覧が出るというもの。
これがない場合、ずらずらと記事が並んでしまいますので
探すのに時間がかかってしまいます。
記事タイトルを見れば大体どんな記事か想像できますので
こうして一覧になる方が分かりやすいですよね♪

ということでyozoさんの記事を参考にカスタマイズしました。
私はyozoさんと同じ小粋空間さんのテンプレを使っているので
そのままソースを使用させていただきました♪
簡単に手順を書いておきます♪

(１)htmlに記述を加えます。
yozoさんの月別に記事のタイトル一覧を表示させる（FC2）の５，６の手順に従い、
<!--topentry-->の前と、<!-- 中央カラム終了 --> の後に
記述を加えました。

何点か変更させていただいたところは

<span style="color:#ff3300; font-size:15px;"><%now_year>年<%now_month>月の全記事一覧< /span>

の部分が「○年△月の全記事一覧」と一番上に書かれる部分なのですが、
この部分の文字色などを変更。

<span style="color:#ff2b60; font-size:15px; font-weight:bold;"><%now_year>年<%now_month>月の全記事一覧</span>

としました。赤字の部分が変更部分です。

また

<ul>
<!--topentry-->
<li>
<a href="<%topentry_link>#CommentHeader" title="<%topentry_title>へ"><%topentry_title> （<% topentry_month>/<%topentry_day>）</a>
</li>
<!--/topentry-->
</ul>

の部分ですが、日付、記事タイトルの順番に出るように下のように変更いたしました。

<ul>
<!--topentry-->
<li>
<%topentry_month>/<%topentry_day>
<a href="<%topentry_link>#CommentHeader" title="<%topentry_title>へ"><%topentry_title> </a>
</li>
<!--/topentry-->
</ul>

と変更です。

(２)cssの追加
yozoさんのcssを参考に次のようにしました。

/* 月別一覧表示部分*/
.date_area {
margin: 10px 230px 10px 30px;
padding: 15px;
color: #444444;
font-size: 12px;
line-height: 140%;
background: #ffeaef;
border: 1px solid #e2a1a1;
}

赤字が変更部分です。
・marginの上部分が右サイドバーと揃うように数値調整
・font-sizeを11pxから12pxに変更
・backgroundの部分で背景色を変更
・borderの部分で枠の線の色を変更　サイドバーの枠と色をそろえました。
また今度時間があるときに画像を配置したりしようと
思っています♪

これで少し記事を探しやすくなったと思います。
yozoさん、分かりやすい記事をありがとうござました!!(*- -)(*_ _)ペコリ

少し話が変わるのですが、このカスタマイズ中に不可解なことが起こりました。
私は今、メインブラウザをFirefox2.0.0.3にしているのですが、
今回もFirefox2.0.0.3でカスタマイズをしておりました。
そのときにyozoさんの記事をコピペしていたのですが、
何故かソースの一部分に半角スペースが入ってしまったのです。Σ(・ω・ノ)ノ!
そのため初め、カスタマイズ失敗か？と思ったのですが。。。
あ、yozoさんの記事がおかしいわけではないですよ!!
yozoさんの記事ではちゃんとスペースがない状態になっています。
実際IEでコピペするとそんな現象は起こらなかったんですもの。
これはFirefox2.0.0.3で起こる現象なんでしょうか？
前の1.5のときは起こらなかったような気がしているのですが。。。
なのでもしもFirefox2.0.0.3でカスタマイズをされる方は
コピペしたものが記事どおりであるか確認した方がいいかもしれません。
他の原因だったらごめんなさい。(o*。_。)oペコッ

↓ポチっとしてくれると嬉しいです♪d(*⌒▽⌒*)b ﾆｺﾆｺｯ