月別の記事一覧を表示!!
2007年03月30日
「ブログを見てくださる方が、見やすいようにしたい!!」と思いながら
なかなか出来ておりませんでした。
また少しずつ頑張っていこうと思います♪
自分自身が過去記事を探しにくいというのもありますし。(笑)
まずは「yozoの気が向いたと記2.0」のyozoさんの
月別に記事のタイトル一覧を表示させる(FC2)を参考にさせていただきました。
このカスタマイズは右サイドバーにある月別アーカイブで、ある月を選ぶと
その月の記事タイトル一覧が出るというもの。
これがない場合、ずらずらと記事が並んでしまいますので
探すのに時間がかかってしまいます。
記事タイトルを見れば大体どんな記事か想像できますので
こうして一覧になる方が分かりやすいですよね♪
なかなか出来ておりませんでした。
また少しずつ頑張っていこうと思います♪
自分自身が過去記事を探しにくいというのもありますし。(笑)
まずは「yozoの気が向いたと記2.0」のyozoさんの
月別に記事のタイトル一覧を表示させる(FC2)を参考にさせていただきました。
このカスタマイズは右サイドバーにある月別アーカイブで、ある月を選ぶと
その月の記事タイトル一覧が出るというもの。
これがない場合、ずらずらと記事が並んでしまいますので
探すのに時間がかかってしまいます。
記事タイトルを見れば大体どんな記事か想像できますので
こうして一覧になる方が分かりやすいですよね♪
ということでyozoさんの記事を参考にカスタマイズしました。
私はyozoさんと同じ小粋空間さんのテンプレを使っているので
そのままソースを使用させていただきました♪
簡単に手順を書いておきます♪
私はyozoさんと同じ小粋空間さんのテンプレを使っているので
そのままソースを使用させていただきました♪
簡単に手順を書いておきます♪
(1)htmlに記述を加えます。
yozoさんの月別に記事のタイトル一覧を表示させる(FC2)の5,6の手順に従い、
<!--topentry-->の前と、<!-- 中央カラム終了 --> の後に
記述を加えました。
yozoさんの月別に記事のタイトル一覧を表示させる(FC2)の5,6の手順に従い、
<!--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>
の部分ですが、日付、記事タイトルの順番に出るように下のように変更いたしました。<!--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>
と変更です。<!--topentry-->
<li>
<%topentry_month>/<%topentry_day>
<a href="<%topentry_link>#CommentHeader" title="<%topentry_title>へ"><%topentry_title> </a>
</li>
<!--/topentry-->
</ul>
(2)cssの追加
yozoさんのcssを参考に次のようにしました。
・marginの上部分が右サイドバーと揃うように数値調整
・font-sizeを11pxから12pxに変更
・backgroundの部分で背景色を変更
・borderの部分で枠の線の色を変更 サイドバーの枠と色をそろえました。
また今度時間があるときに画像を配置したりしようと
思っています♪
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;
}
赤字が変更部分です。.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さん、分かりやすい記事をありがとうござました!!(*- -)(*_ _)ペコリ
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ペコッ
私は今、メインブラウザを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 ニコニコッ
スポンサーサイト
コメント
わーー。これ、とっても見やすいですよねー☆
早速見てみました。
わーーー。しかも色とかもとっても可愛らしいですねーー☆
ホント、これって、便利だよなぁーと思います。
過去を振り返るときに自分もいいし、お友達もあれーーこんなのあったよなぁーと思って見るのもとっても見やすいし。
行きたい記事の所にすぐに行けるのもいいですよねー☆
参考になりました♪
ありがとうございます♪
Posted by enu at 2007.03.30 19:19 | edit
ちょっとばかりyozoの記事がお役に立ったようでうれしいでっす♪(*^.^*)
それにしても、こちらの月別一覧はとっても見やすいですね♪(゚-゚*)(。。*)ウンウン
行頭にアクセントの画像があって、日付、記事タイトルリンクとなっているところがポイントですね。
とゆーわけで、yozoも早速、まゆびさんの修正を取り入れてHTMLファイルを
改良させていただき、その旨追記させていただきました。(-ω☆)キラリ
大変参考になりました。ありがとーございまっす♪m(_ _)m
追伸:記事での紹介及びトラバありがとーございまっす♪
こちらからも、お返しのトラバ入れさせていただきました。m(_ _)m
Posted by yozo at 2007.03.30 19:49 | edit
見やすくなりましたか♪嬉しいです♪
前から記事を探すのが面倒だなぁと思っていたので。
>色とかもとっても可愛らしいですねーー☆
ヾ(@⌒▽⌒@)ノワーイ!ありがとうございます♪
出来るだけこれもテンプレートにあわせるようにと思って♪
色の設定って結構難しいんですよねぇ。。(;^_^A アセアセ・・・
またテンプレート変更のときに
見た目も変えていこうと思っています♪
励みになるコメントをありがとうございました♪(*- -)(*_ _)ペコリ
Posted by まゆび→enuさんへ at 2007.03.30 23:03 | edit
以前からやらなければと思っていたのですが、
やっと着手することが出来ました。
>こちらの月別一覧はとっても見やすいですね♪(゚-゚*)(。。*)ウンウン
ありがとうございます♪
アクセントの画像がつくのは、「ul、li」にそういう設定が
たまたま付いていたからなのですが、可愛いのでこれでよしとしました。(笑)
なんとyozoさんも修正されたのですね♪
その上うちの記事にリンクを入れて追記していただいただなんて
ありがとうございます!!(*- -)(*_ _)ペコリ
少しお役に立ててよかったです♪
本当に分かりやすい記事をありがとうございました♪
実はカテゴリの方もyozoさんの記事を参考にさせていただきましたので
後日トラバを入れさせていただきますね♪(*^-^)
お返しトラバもありがとうございました♪(*- -)(*_ _)ペコリ
Posted by まゆび→yozoさんへ at 2007.03.30 23:04 | edit
FC2の共有テンプレでも、作者さんによってはデフォルトで設定されている場合もありますが。。。
現在のうちのブログではそういえばなかったような。。。
折を見て、わたしもまゆびさんやyozoさんの記事を参考にさせていただこうと思います!
で。
>ソースの一部分に半角スペースが入ってしまった
ですが、うちではよくIE使用時にこの現象、よくありました。
だから、いつもサクラエディタにいったん貼り付けて、「編集→整形→右(末尾)の空白を削除」をかけていました。
改行コードが半角スペースとしてコピペされちゃったのかなぁなんて思っていましたが。
ホントのところはどうなんでしょうね・・・!?
Posted by mio at 2007.03.31 22:29 | edit
yozoさんのところの記事を見たときに
便利だなぁって思っていたのですが、
すっかり忘れてしまっていて。(;^_^A アセアセ・・・
記事検索のときに不便なんですよねぇ。
そうそう、テンプレートによっては標準で付いてますものね♪
またお暇なときにでも試してみてくださいね♪(=´ー`)ノ
(゜ロ゜;)エェッ!? IEでも起こるのですか???
(○ ̄ ~  ̄○;)ウーン・・・どうなんでしょうね?
>サクラエディタにいったん貼り付けて、「編集→整形→右(末尾)の空白を削除」をかけていました。
なるほどなるほど。もともと私もカスタマイズは
サクラエディタでやっているので、
こういった現象が起こったときは参考にさせていただきます♪
ありがとうございます。(*- -)(*_ _)ペコリ
>改行コードが半角スペースとしてコピペされちゃったのかなぁなんて思っていましたが。
ふむふむ。ただね、私の場合は言葉の途中にいきなりスペースが入ったのですよ。
改行なんてない部分に!!よく分からないです。。。(;^_^A アセアセ・・・
Posted by まゆび→mioさんへ at 2007.04.01 12:19 | edit