アミアンインターナショナル

貴社の売り上げアップをとことん支援します。オンラインショップ専門コンサルタント

CMS css 新着情報

カテゴリーのデザイン-サイドバーメニューの成形(3) ⇒ STINGER8設定その5

投稿日:2019年4月29日 更新日:

カテゴリーが長すぎる

サイドバーのカテゴリーだが、項目数が多すぎて縦にやたら長くなってしまう。

before

そこで、第一階層をリストにして第二階層はボタンにして並べることにした。

まず、第二階層をボタン化


.cat-item .cat-item a{
float: left;
margin: 0.5em;
-moz-box-shadow:inset 0px 1px 3px 0px #91b8b3;
-webkit-box-shadow:inset 0px 1px 3px 0px #91b8b3;
box-shadow:inset 0px 1px 3px 0px #91b8b3;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
background-color:#768d87;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #566963;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:11px 15px;
text-decoration:none;
text-shadow:0px -1px 0px #2b665e;
}
.cat-item .cat-item a:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #768d87));
background:-moz-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
background:-webkit-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
background:-o-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
background:-ms-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#768d87',GradientType=0);
background-color:#6c7c7c;
}
.cat-item .cat-item a:active {
position:relative;
top:1px;
}

次に第一階層のリスト表示がそれっぽくなるように線を引く。


#mybox > div > ul > li.cat-item > a{
border-left:double 10px #000;
border-bottom:solid 1px #000;
display: block;
font-size: larger;
padding: 0.5em;
margin-bottom: 0.5em;
}

このままだと次の項目でfloatが解除されず表示が崩れるので、STINGER8設定その3でやった「.menu_underh2」に

clear:both;

を追加。

これでいいだろう。

-CMS, css, 新着情報
-,

執筆者:

関連記事

Dropboxから乗り換えるべき? トレンドマイクロの容量無制限オンラインストレージ「SafeSync」の実力は?

Amplify’d from trendy.nikkeibp.co.jp SafeSyncの最大の魅力は、年間4980円を支払えば保存容量が無制限という点だ。普段、Dropboxを使いながら「保存容量 …

ホーム画面に入れておきたいiPhoneアプリ

2011年にホーム画面入りした新しいiOSアプリ5選

あっという間に大晦日。 最近特に月日の経つのが早くなってしまい、焦り気味である。 一年を振り返ってみると、俺のiPhoneのホーム画面に入れているアプリも大きく様変わりしている。 今年最後のブログ更新 …

jetpack関連記事

jetpack関連記事とwordpress関連記事タイトルの修飾 ⇒ STINGER8設定その13

修飾を合わせる コンテンツエリアを見ると、jetpack関連記事とwordpress関連記事タイトルが手つかずになっている。 これをH2と同じフォーマットにする。 ついでに全てレスポンシブ対応にする。 …

pagespeed insight

STINGER8でwordpess構築しpagespeed insightで満点を取る方法 ⇒ カスタマイズの手順と方法を順番に解説

STINGER8とは STINGER8は国産wordpressテーマであり、SEOに強いことで知られる。 現在STINGER8の系統のテーマは4つあり、そのうち2つが無料テーマだ。 STINGER8は …

ビール券をプレゼント

ビール券が当たる!QUOカードも当たる!応募はフォロー&ツイートするだけ。簡単応募の365日懸賞、好評開催中。

ビール券をプレゼント ビール券を2枚組にして2名様にプレゼント★グイッと飲んじゃってくださいねw★応募はフォロー&ツイートするだけ。twitterで簡単に応募できます #365kD9YX #3 …