ブログのカテゴリ、記事一覧の作り方

HTMLとCSSをいじります。
ブログ管理画面右上の「ブログデザイン設定」をクリック
赤い旗が付いている右の、「編集」クリック
すると、わけのわからん窓が上下に２つ出てきますね。
上がHTMLで下がCSSです。


まず、必ずしなければいけないのが、バックアップですよ。
こいつは必ず行ってください。
でないと、レイアウトが崩れた時など、元に戻せなくなります・・・

こ、こ、これは後悔しても、しきれません・・・
（経験あり（涙））



バックアップは、HTMLとCSSをぜーんぶメモ帳か何かに貼り付けておきましょう。
こうすると何かあっても、貼りつけた物を、修正窓に貼り付け直せば元に戻ります。



それでは、まず、HTMLの編集です。
HTMLの編集窓の中から、<!--topentry-->を探します。
少し上の方にあると思います。
その上に、以下を貼り付けます。


*******ここから*******

<!--category_area-->
<div class="free_category">
<p>
カテゴリ：<%sub_title> の記事一覧
</p>
<ul>
<!--topentry-->
<li><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></li>
<!--/topentry-->
</ul>
<p class="content-nav" align="center">
<!--prevpage-->
<a href="<%prevpage_url>" title="前のページへ" id="category_nav_previous" name="category_nav_previous">≪新しい記事一覧へ </a>
<!--/prevpage-->
| |
<!--nextpage--><a href="<%nextpage_url>" title="次のページへ" id="category_nav_next" name="category_nav_next"> 古い記事一覧へ≫</a>
<!--/nextpage-->
</p>
</div>
<!--/category_area-->

*******ここまで*******



で、HTML窓の下の「更新」をクリックします。
次にCSSです。
CSSの一番下に、以下を貼り付けます。

ただし、各ブログによってデザインは違います。
以下は、私のブログの例です。解説付けときますので参考にしてください。



*******ここから*******


.free_category {
width : 490px; text-align: left;
font-size: 13px;
background-color:#FFFFFF;
padding: 5px; margin-top: 0px;
margin: 0px 0px 10px 0px;
color: #666666;
line-height: 130%; border: 1px solid #ccc;
}


*******ここまで*******

width : 490px;
記事一覧の幅

text-align: left;
記事一覧を、左寄せにする。left→centerにすると、中央寄せ。

font-size: 13px;
記事一覧の、字の大きさ

background-color:#FFFFFF;
記事一覧部分の背景色

padding: 5px;
枠線から文字までの余白

margin: 0px 0px 10px 0px;
まわりから、枠線までの余白

color: #666666;
文字色

border: 1px solid #ccc;
枠線の太さが１で、種類は実線


↑ご自由に変更してください。

CSS窓の下の「更新」をクリックします。

お・わ・り



最初は、な、なんじゃこりゃー！！って感じでしょうが、慣れてくると分かります。
頑張ってくださいね。
これで、カテゴリページ表示時だけ、記事の上に記事一覧が表示されます。


ただし、ブログの設定での表示記事数分の表示となります。
これ調整してください。


管理画面、左サイドメニューの「環境設定の変更」クリック
↓
上部メニューの「ブログの設定」クリック
↓
最上行の「１ページに表示する記事の数」を設定する。



これで、OKですよ。
分からなかったら、メールくださいね！



ポチポチッとしてくれたら、応援しに行きますよー！
人気ブログランキング
ＦＣ２ブログランキング
にほんブログ村