<< Googleがケータイ絵文字を世界標準化を提案
Firefox3.1 Beta1 >>
  1. HOME
  2.  > -
  3.  > スポンサーサイト

スポンサーサイト

  • 2016.11.05 Saturday
  • -
  • Permalink
    • -
    • -
    • by スポンサードリンク

一定期間更新がないため広告を表示しています

  1. HOME
  2.  > Blog カスタマイズ
  3.  > サイドバー部分のカテゴリーリンクCSSをカスタマイズしました

サイドバー部分のカテゴリーリンクCSSをカスタマイズしました

  • 2008.11.30 Sunday
  • 12:42
  • Blog カスタマイズ
  • Permalink
    • comments(0)
    • trackbacks(1)
    • by ポンポン

カテゴリリンク部分をボタン状に見えるようにCSSをカスタマイズしてみました。

カテゴリリンクの部分は。リストタグで括ってありますので、他の部分のリストタグに影響が出ないようにIDを設定し、本来ならCSSのセレクタは、li aとなるはずですが、こうするとカテゴリ内エントリー数が改行されてしまします。悩んだ挙句、borderを追加するだけにしました、背景色もマウスオーバーで変更させればもっとボタンっぽくなるんですが、 Jugemの独自タグの影響でここまでしかできません。訂正の為、追記しました。レディーファースト | カテゴリ部分のリンクを変更 はてなブックマーク数 livedoor Clip数

カテゴリーリンク部分のXHTMLとCSS

XHTML

<!-- BEGIN category -->
<div id="category">
	<dl>
	<dt>Categories</dt>
	<dd>
	{category_list}
	</dd>
	</dl>
</div>
<!-- END category -->

CSS

/* サイドカテゴリー */
#side #category li {
	color: #3f3596;
	margin: 0;
	padding: 5px 8px;
	background: #edf2f2;
	border-top: 1px solid #FFF;
	border-right: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	border-left: 1px solid #FFF;
	outline: none;
}
#side #category li a:link     { color: #3f3596; }
#side #category li a:visited  { color: #3f3596; }
#side #category li a:hover    { color: #5647c9; }
#side #category li a:active   { color: #4c42b7; }

リンク部分の領域が狭いので、もしかしたら余計分かりにくいかもしれません。

  1. HOME
  2.  > -
  3.  > スポンサーサイト

スポンサーサイト

  • 2016.11.05 Saturday
  • -
  • Permalink
    • -
    • -
    • by スポンサードリンク
コメント
コメントする

   
この記事のトラックバックURL
トラックバック
勝手に オリンピック 面白い!
2008年11月30日 16時です。おかだだれだです。今年はオリンピックあったねー。オンリーピックってのもあったねー。どちらもいまいち。おかだは ↓ の方が面白いとおもいます。===================デジタルライフ・エブリディShopはこちら!===
  • Digital Life Everyday :デジタルライフ・エブリデイ
  • 2008/12/01 1:35 AM
Access Ranking
ブログパーツ
Search this site.
Calendar
    123
45678910
11121314151617
18192021222324
252627282930 
<< June 2017 >>
Categories
Selected entries
Recent comment
Recent trackback
Profile
Recent
Recent
現場のプロから学ぶXHTML+CSS
現場のプロから学ぶXHTML+CSS (JUGEMレビュー »)
益子 貴寛,堀内 敬子,小林 信次,千貫 りこ,伊藤 学,山田 あかね,西畑 一馬
Links
Software
カラメル
Sponsored Links
Mobile
qrcode
Others
Powered
  • みんなのブログポータル JUGEM

pageup