--
--/--
--:--
スポンサー広告

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

Related Posts Plugin for WordPress, Blogger...
3p1-5
2013
10/15
01:39
ブログカスタマイズ
CM:0
TB:0

どうも!
こんにちはっ✩


ありのごとくあつまりてさんのサイトを参考にして
「カテゴリー」をテキスト表示から画像表示に変更してみました。


ソースコード



HTML内に記載する
<%category_name> (<%category_count>)」が不要だったので
その部分を削除しました。


しかし、
CSSに「list-style:none;」と、記述しているのに
以前使用していたリストアイコンが表示されていました。



削除した「<%category_name> (<%category_count>)」を
再度記述したら、この現象は治りました。



ちょっとイミフだったので
CSS内のリストアイコンのURLだけ削除して使用することにしました。







カテゴリ記事一覧のカスタマイズ



サイドバーのカテゴリをクリックした際に
本文記事の上に、カテゴリ記事一覧が表示されたら
便利だなぁと思い作りました。


こんな感じに、背景画像やアイコンをつけて可愛い感じにしてみました。
ソースコード



↓ちなみに、ダブルクリックで選択できます✩

【HTML部分】
<!--category_area-->
<div id="cm2" class="content2">
<TABLE cellpadding=0 cellspacing=0>
<TBODY>
<TR>
<TD height=64px style="background:url(タイトルの背景画像URL) no-repeat"><p class="sub_header2"><b>カテゴリ:<%sub_title> の最新記事一覧</b></p>
</TD>
</TR>
<TR>
<TD style="background:url(記事一覧の背景画像URL) repeat-y">
<ul class="entry_title">
<!--topentry-->
<li><img src="リストアイコンのURL" width="13" height="13" border="0"><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></li>
<!--/topentry-->
</ul>
<p class="page_navi2" align="center">
<!--prevpage-->
<a href="<%prevpage_url>" title="前のページへ"> << *Back Page* </a>
<!--/prevpage-->
<img src="ページおくりのアイコン画像URL" width="21" height="27" border="0">
<!--nextpage-->
<a href="<%nextpage_url>" title="次のページへ"> *Next Page* >> </a>
<!--/nextpage-->
</p>
</TD>
</TR>
<TR>
<TD><img src=下部に表示させる画像のURL>
</TD>
</TR>
</TBODY>
</TABLE>
</div>
<!--/content2-->
<!--/category_area-->





【CSS部分】
.cm2 {
  font-family:'Comic Sans MS';
  font-weight:bold;padding-left:0px;
  text-align:center;
  height:54px;
}

.content2 {
  margin: 10px 0px 10px 10px;
  padding: 0px 0px 0px 0px;
  text-align: left;
}

.sub_header2 {
  text-align: center;
  margin-bottom: 10px;
  padding: 10px 0px 20px 0px;
         color:#ff0066;
}

.entry_title {
  background-image: url(背景画像のURL);
  line-height: 25px;
  background-repeat: no-repeat;
  background-position: right bottom;
  margin: 0px 10px 0px 0px;
  padding: 10px 0px 0px 20px;
}


/*ページナビゲーターの設定*/
.page_navi2 {
         padding: 0px 0px 0px 0px;
  margin: 20px 0px 5px 0px;
  text-align: center;
}


.page_navi2 li {
         display: block;
}



画像の大きさ(width・height)、余白(paddin・gmargin)などは調節して下さい。
素人が見よう見真似で作ったので、おかしな箇所があるかもしれません;;ヽ(;▽;)ノ


何かあっても責任はとれませんので、
必ずバックアップをとってから試してみてくださいね┌(┌^o^)┐


3p1-5
*関連記事*

Related Posts Plugin for WordPress, Blogger...
3p1-5

゜・:*:.☆,。・:*:・゜’☆ Track Back ☆..:*:・゜’☆,。・:*:・゜☆・:*:・゜

゜・:*:.☆,。・:*:・゜’☆ Comment ☆..:*:・゜’☆,。・:*:・゜☆・:*:・゜

゜・:*:.☆,。・:*:・゜’☆ コメントの投稿 ☆..:*:・゜’☆,。・:*:・゜☆・:*:・゜

非公開コメント


≪ 【FC2】検索結果を画像サムネイルで表示する!!

【FC2】関連記事にサムネイル画像&リストマークを画像に! ≫


このブログは主に、
コスプレ、同人、コミケ等、オタク
について書いています❤


❤ 本家サイト ❤
 [ strawberry-milk ] CHERRYのサイトに飛びます!



 [ コミケ webカタログ ]
 [ コミケ コスプレコミュニティ ]
 [ コスプレイヤーズアーカイブ ]
 [ Cure World Cosplay ]  [ facebook ]  [ mixi ]
*Ranking*
ランキングに参加しています。
よければ ポチッ とお願いします❤

 [ 人気Blog Ranking ]  [ ブログランキング・にほんブログ村へ ]
 [ FC2ブログランキング ]  [ ブログランキング ドット ネット ]
 [ ブログ王 ランキング ]  [ ブログの殿堂 ]
*profile*
素材 バナー CHERRY コスプレ
名前 : CHERRY
性別 : 女性
血液型 : A型
生年月日 : 04月 07日
現住所 : 愛知県
出身地 : 静岡県
自己紹介 :
コスプレイヤーのCHERRYです。アニメやコスプレ、同人活動などについて描いています☆
AJ、栄コスフェス、コスサミ、コミケに出没しますw
*Tweets Wind*
*pixiv*
*Archives*
 
*Search*
*Recent Entries*

Powered by FC2ブログ

FC2Ad

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