テーマ「Twenty Eleven」のカテゴリーウィジェットのメニューをボックス状にするための CSS

以下のCSSを追加すると

#secondary aside {
padding:30px 0 0;
}

aside[id*=categories] ol,aside[id*=categories] ul {
list-style:none outside none;
}

aside[id*=categories] li:hover,aside[id*=categories] li.hover {
position:static;
}

aside[id*=categories] li {
float:left;
clear:both;
padding:10px 15px;
}

aside[id*=categories] li ul li,aside[id*=categories] li {
background-image:url('https://comemo508.files.wordpress.com/2012/03/lzk8cl.png');
background-repeat:repeat-x;
background-position:0 90%;
box-shadow:rgba(0,0,0,0.4) 0 1px 2px;
line-height:26px;
width:15em;
}

aside[id*=categories] li:hover {
background-image:url('https://comemo508.files.wordpress.com/2012/03/lzk8cl.png');
background-repeat:repeat-x;
background-position:0 10%;
}

aside[id*=categories] a {
color:#cccccc;
}

aside[id*=categories] li:hover > a {
color:#373737;
}

aside[id*=categories] ul li ul li {
border:medium none;
line-height:36px;
margin:8px 0 -8px 15px;
padding:5px 0 5px 10px;
}

aside[id*=categories] ul li ul li ul li {
margin:0 0 0 15px;
}

aside[id*=categories] li ul li a {
border:0 none;
line-height:36px;
margin:-10px 0;
}

aside[id*=categories] li ul {
left:-999em;
position:absolute;
width:12em;
}

aside[id*=categories] li:hover ul,aside[id*=categories] li li:hover ul {
left:-999em;
}

aside[id*=categories] li:hover ul.sub-menu li ul.sub-menu {
left:-999em;
}

aside[id*=categories] li ul.sub-menu li:hover ul.sub-menu {
left:-999em;
}

カテゴリーがボックス状になります。

categorybox01

rect3015

kategorybox02

#2013

記事中に注意書きの欄を入れる -丸い記号版-

以前、「記事中に注意書きの欄を入れる」という記事を作成しましたが、前回は注意を喚起するというよりも、ポイント・要点を目立たせる、という感じのものだったので、今回は、「気をつけて!」というニュアンスが出るような感じにしてみました。どうでしょう?

dsfgsdfgdfs

続きを読む

#2013

テーマ「Ari」のカテゴリーを大カテゴリー毎にボックス分割するためのCSS

aricategory01

rect3015

aricategory02

続きを読む

#2012

WordPress.com のテーマ「AutoFocus」のカテゴリーをボックス状にするためのCSS

autofocuscategories01

rect3015

aucofocuscategories01

続きを読む

#2012

WordPress.com のテーマ「Forever」のカテゴリーをボックス状にするためのCSS

forever14

rect3015

forever15

続きを読む

#2012, #nodisplay

WordPress.com のテーマ「Ari」のメニューをボックス化するためのCSS

aribox01

rect3015

aribox02

続きを読む

#2012

テーマ「Twenty Eleven」のカテゴリーを大カテゴリー毎にボックス分割するためのCSS

カテゴリーの数が多くなったときに見やすくするためのCSSの紹介です。


続きを読む

#2012