Powered By FC2ブログ
ブログやるならFC2ブログ
今すぐブログを作っちゃおう!

--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2007年04月03日

カテゴリページにカテゴリーの記事一覧を表示するカスタマイズ

今回は、FC2ブログのカテゴリページ上部にそのカテゴリのエントリリストを表示するカスタマイズです。あまり融通が利かないので、表示されてるエントリのリストのみ(FCブログの、環境設定→ブログの設定にある、1ページ上に表示するエントリ数だけ)しか表示できないようです。
それでもリストで表示してあれば、エントリの内容がわかりやすくなりますので、興味のある方はお試し下さい。
また、折角エントリ上部にフリーエリアを設定していますので、カテゴリのリストはそちらに表示することにします。

カテゴリリスト

1.blogtube_basicを使う場合

blogtube_extraでは、エントリ上部のフリーエリアを増やす場合を考えて、blogtube_basicから少し変更を行っています。ですので、お使いのテンプレートに合わせてカスタマイズしてください。

エントリ上部のフリーエリアを使用していない場合

この場合はそのままテンプレートのフリーエリアを使って表示します。以下の箇所を追加してください。
現在フリーエリアを使用していない場合、!-- メイン開始 --から!-- エントリ開始 --の間に挿入してください。(わかりやすくするためにメイン開始とエントリ開始は表記してありますが、もちろんこれは重複して追加しないで下さい。それぞれの間だけです。)blogtube_basic、blogtube_basic01共に同じです。


<div id="box-main"><!-- メイン開始 -->

<!--category_area-->
<!-- エントリ上部フリーエリア -->
<!-- 使用しない場合はここから下を削除↓ -->
<div id="rss">
<div id="rsstitle">
カテゴリーの記事一覧
</div><!-- rsstitle -->

<div id="rssmain"><!-- ここから下に挿入↓ -->

<ul><!--topentry-->
<li><a href="<%topentry_link>"><%topentry_title></a> - (<%topentry_month>/<%topentry_day>)</li>
<!--/topentry--></ul>

</div><!-- rssmain --><!-- ここから上に挿入↑ -->

</div><!-- rss -->
<!-- 使用しない場合はここから上を削除↑ -->
<!-- エントリ上部フリーエリア終了 -->
<!--/category_area-->

<!-- エントリ開始 -->

標準でカスタマイズする場合と同様に、タイトル部分と表示部分に今回のカスタマイズを挿入します。これだけで大丈夫です。

2.エントリ上部のフリーエリアを使用している場合

追加する場合、スタイルシートもカスタマイズする必要があります。以下を変更して下さい。(idをclassに変更します。)


/*     RSS     */

.rss{
margin: 0 auto 10px;
border: solid 1px #000;
background: #fff;
}

.rsstitle{
padding: 3px;
text-align: center;
font-size: 12px;
color: #000;
background: #ebebeb;
border-bottom: solid 1px #000;
}

.rssmain{
padding: 3px;
text-align: left;
font-size: 12px;
color: #000;
line-height: 175%;
}

/*     RSS     */

次はhtmlです。スタイルシートを変更したのは、エントリ上部のフリーエリアを追加しやすくするためです。この変更により、フリーエリアをそのままコピー&ペーストでいくつでも追加できます。

使用しているフリーエリアの変更


<div class="rss">
<div class="rsstitle">
<div class="rssmain">

構成は同じだとして、idをclassに変更します。これにより、フリーエリアをそのまま増やすことができます(idはそのページで一回しか使用できない)。
カテゴリリストの追加ですが、現在使用しているフリーエリアの上でも下でもお好きな位置に以下を追加します。


<div id="box-main"><!-- メイン開始 -->

<!--category_area-->
<!-- エントリ上部フリーエリア -->
<!-- 使用しない場合はここから下を削除↓ -->
<div class="rss">
<div class="rsstitle">
カテゴリーの記事一覧
</div><!-- rsstitle -->

<div class="rssmain"><!-- ここから下に挿入↓ -->

<ul><!--topentry-->
<li><a href="<%topentry_link>"><%topentry_title></a> - (<%topentry_month>/<%topentry_day>)</li>
<!--/topentry--></ul>

</div><!-- rssmain --><!-- ここから上に挿入↑ -->

</div><!-- rss -->
<!-- 使用しない場合はここから上を削除↑ -->
<!-- エントリ上部フリーエリア終了 -->
<!--/category_area-->

<!-- エントリ開始 -->

これも全部idからclassに変更しています。違いはそれだけです。

3.blogtube_extraの場合

blogtube_extraの場合、最初からclassにしてありますので、スタイルシートの変更は必要ありません。エントリ上部のフリーエリアを使用していない場合はエントリ上部に、使用している場合はお使いのフリーエリアの上か下に追加します。


<div id="box-main"><!-- メイン開始 -->

<!--category_area-->
<!-- エントリ上部フリーエリア -->
<!-- 使用しない場合はここから下を削除↓ -->
<div class="rss">
<div class="rsstitle">
カテゴリーの記事一覧
</div><!-- rsstitle -->

<div class="rssmain"><!-- ここから下に挿入↓ -->

<ul><!--topentry-->
<li><a href="<%topentry_link>"><%topentry_title></a> - (<%topentry_month>/<%topentry_day>)</li>
<!--/topentry--></ul>

</div><!-- rssmain --><!-- ここから上に挿入↑ -->

</div><!-- rss -->
<!-- 使用しない場合はここから上を削除↑ -->
<!-- エントリ上部フリーエリア終了 -->
<!--/category_area-->

<!-- エントリ開始 -->

!-- メイン開始 --から!-- エントリ開始 --の間に挿入してください。フリーエリアを使用している場合も同様に、この間の、フリーエリアの上か下に挿入します。

4.いくつかのヒント

ここではカテゴリページにエントリの一覧を表示しましたが、変数を理解していれば、同様のカスタマイズをトップページなどでも表示できます。以下に関連するFCブログ用の変数を掲載しますので、カスタマイズにチャレンジしてみて下さい。


<!--category_area-->
カテゴリー画面(blog-category-x.html)の時に表示するブロック(フラグ)
<!--/category_area-->

<!--index_area-->
トップの時(?mode 等のクエリーが無し)のみに表示するブロック(フラグ)
<!--/index_area-->

次は日付の表示です。簡単に月/日の表記ですが、変数を変更すれば好きな表示にカスタマイズできます。


<%topentry_year> - 年を表示
<%topentry_month> - 月を表示
<%topentry_day> - 日を表示
<%topentry_hour> - 時を表示
<%topentry_minute> - 分を表示
<%topentry_second> - 秒を表示
<%topentry_youbi> - 曜日(洋風)を表示
<%topentry_wayoubi> - 曜日(和風)を表示
<%topentry_wayoubi> - 曜日(和風)を表示

スポンサーサイト

コメント

お久しぶりです♪

フォントサイズのことなのですが、
記事を書き込んでいる時、文字を大きくしたくて、
<span style=font-size:x-large>●●</span>を使っているのですが、カラーを入れた時、文字が小さいままになってしまいます・・・。
カラー文字を大きくするにはどうすればいいのですか?

よろしくお願いします。

こんにちは★

☆みぅ☆さん、こんにちは。

文字サイズを指定する場合、できたらx-largeなどではなくて、
pxで指定して下さい。
また、カラーを指定する場合は、フォントサイズ指定の後に
追加します。例としては、

<span style="font-size: 24px; color: #ff8080;">テストテスト</span>

などになります。font-sizeは大きくしたいだけ大きい数字を
指定して、その次のcolorで16進数の文字カラーを指定します。

投稿時のプレビューでも確認できますのでお試し下さい。
ちなみに☆みぅ☆さんのコメントの例ですと、
x-largeの後に;が必要です。

こんばんわ♪

できました☆
ありがとうございました。

グルタチオンのダイエット効果

グルタチオンは、ペプチドの一種です http://latten.victoriaclippermagazine.com/

コメントの投稿

サイト管理者にのみ通知する

トラックバックURL

http://templatetube.blog78.fc2.com/tb.php/25-62c35f40
プロフィール

Author:templatetube
FC2ブログへようこそ!

最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
ブロとも申請フォーム

Appendix


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。