FC2 サイドバーのカテゴリーに画像をつける

FC2ブログのサイドバーのカテゴリーに

画像をつけてみました

カテゴリーのプラグインの原型は

このようになっていて

<!--category-->

<div &align>

<!--category_sub_hasnext-->┣<!--/category_sub_hasnext-->

<!--category_sub_end-->┗<!--/category_sub_end-->

<a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a>

</div>

<!--/category-->

ここに

赤字と青字の部分を追加します。

<div class="cate">

<!--category-->

<div &align>

<!--category_sub_hasnext-->┣<!--/category_sub_hasnext-->

<!--category_sub_end-->┗<!--/category_sub_end-->

<a href="<%category_link>" title="<%category_name>"><img src="

http://blog-imgs-66.fc2.com/m/o/n/monhappystyle/category_img_<%category_no>.png"/><%category_name> (<%category_count>)</a><br/>

</div>

<!--/category-->

</div>

青地の部分は

カテゴリーに表示する画像です

FC2ブログのカテゴリーには

自動的に番号が付くので

アップロードする画像にも

あらかじめ同じ番号をつけて

アップロードします

カテゴリーの番号は

ブラウザでも確認できますし

カテゴリーの編集画面でも

確認できます

＃をクリックすると数字がでます

私は

category_img_1.png

category_img_2.png

.

.

.

としてアップロードしました

画像ファイルの数字の部分が<%category_no>になるようにします

<img src="http://blog-imgs-66.fc2.com/abeceda/category_img_<%category_no>.png"/>

次にcssの編集で

細かな位置や

画像の大きさなどを変更します

.cate img {

float:left;

border: 0;

margin-right:5px; /* 画像の右余白 */

margin-bottom:5px; /* 画像の下余白 */

width: 50%; /* 画像表示サイズ */

}

サイドバーがさらに

賑やかになりました

FC2 記事一覧ボタンを追加する

アメブロには

サイドバーのカテゴリー欄に

記事の一覧を表示させる

「一覧を見る」
ボタンがありますが

FC2ブログには付いていないので

追加してみました

(テンプレートによってはついているかも？)

プラグインの設定画面から

記事一覧ボタンをつけたい

プラグインの詳細設定を開き

htmlの設定画面に

以下のように追加します

<a href="<%url>archives.html">記事一覧</a>

これだけでも記事一覧ボタンは表示されますが

このままだと

記事一覧ボタンが左側に表示されるので

位置を変更したい場合は

htmlを次のように変更し

<div class="listLink"title="記事一覧">

<a href="<%url>archives.html">記事一覧</a>

</div>

さらに

css編集画面で

細かな位置を調整します

/**** サイドバー　記事一覧ボタン一変更 ****/

.listLink a{

margin-left:148px;

margin-top: 20px;

margin-bottom; 30px;

font-size: 13px;

}

htmlは

追加したいプラグインそれぞれの画面で

編集します

FC2 最新記事の左側に画像をつける

FC2ブログのサイドバーが

少しさびしいので

このアメブロ版ブログのように

記事タイトルの左側に

画像を入れてみました

プラグインの設定画面にある

最新記事の詳細設定から

htmlの編集画面を開き

赤文字の部分を追加します

<ul><div class="recent">

<!--recent-->

<li &align>

<a href="<%recent_link>" title="<%recent_title>"><%recent_title> (<%recent_month>/<%recent_day>)</a>

</div></li>

<!--/recent-->

</ul>

css編集画面の最後に

次のように追加します

/********** 最新の記事の左側に画像をつける **********/

.recent li a {

background-image:url(画像1 );

background-repeat:no-repeat;

background-position:left center;

padding-left:20px;/* 左に余白　画像サイズにあわせて調整 */

}

ロールオーバーしたときに

別の画像を表示する場合は

さらに次のように追加します

/********** 最新の記事の左側に画像をつける（ロールオーバー）**********/

.recent li :hover{

background-image:url(画像2 );

background-repeat:no-repeat;

background-position:left center;

padding-left:20px;/* 左に余白 　画像サイズにあわせて調整*/

}

アップロードした好きな画像を

画像1と画像2に入れます

画像サイズに合わせて

左側の余白を調整します

文字だけのサイドバーが

少し賑やかになりました