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

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

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, 新着情報
-,

執筆者:

関連記事

ツイッター鯨

twitterは死んだのか?

ツイッター大丈夫? 友人と話をしている際に、「最近ツイッターが元気が無いのではないか?」という意見が出た。 どうやら、最近はフォロワー数の伸びに以前のような勢いが感じられないらしい。 また別の友人の意 …

iphone4s

Siriちゃんで話題沸騰のiOS5.1の本当のキモはバッテリーの長寿命化だった

iOSが5.1にアップデートされたのが3月8日。 それからというもの、iPhone4Sユーザーの間ではもっぱらSiriの日本語化の話題で持ちきりだった。 今まで英語、フランス語、ドイツ語でしか使えなか …

MacBook Pro with Retina Display

MacBook Pro with Retina Displayを設定した3日の戦い

MacBook Pro with Retina Display MacBook Pro with Retina Displayを購入した。 macでは実に4年ぶりとなるリプレイスで、今回初めてtime …

コード表示の最適化 ⇒ STINGER8設定その8

コードが見にくい preタグでコードを表示した時に困るのが、いまいち見づらいことだ。 コードのハイライト表示を導入したことで、多少は見やすくはなっていた。 google code-prettifyでコ …

au 無線ルータ DATA08W

auのポータブル無線ルータWiFi Waker DATA08Wを導入した人柱報告

au WiFi Waker DATA08Wを契約した 12月1日に発売になったau WiFi Waker DATA08Wを、さっそく契約した。 取り急ぎ使ってみた感想を書いてみる。 DATA08W D …