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

forever14

rect3015

forever15

WordPress.com のテーマ「Forever 」に以下のCSSを追加すると、カテゴリーをボックス状にすることができます。

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 5%;
}

aside[id*=categories] li ul li,aside[id*=categories] li {
background: #222;
background: -moz-linear-gradient(#252525, #0A0A0A);
background: -o-linear-gradient(#252525, #0A0A0A);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0A0A0A));
background: -webkit-linear-gradient(#252525, #0A0A0A);
box-shadow:rgba(0,0,0,0.4) 0 1px 2px;
line-height:26px;
width:100%;
margin:0;
}

aside[id*=categories] li:hover {
background: #F9F9F9;
background: -moz-linear-gradient(#F9F9F9, #E5E5E5);
background: -o-linear-gradient(#F9F9F9, #E5E5E5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F9F9F9), to(#E5E5E5));
background: -webkit-linear-gradient(#F9F9F9, #E5E5E5);
}

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:0 0 0 15px;
padding:5px 20px;
width:100%;
}

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;
}

aside[id*=categories] li:hover ul,aside[id*=categories] li li:hover ul {
left:auto;
position:absolute;
}

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

aside[id*=categories] li ul.sub-menu li:hover ul.sub-menu {
left:auto;
position:absolute;
}

aside[id*=categories]:after {
content:".";
display:block;
clear:both;
height:20px;
visibility:hidden;
}

.children {
margin:0 0 0 1.6em;
}

#secondary .widget > ul > li,#secondary .widget > div > ul > li {
border:none;
}

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。