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

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

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

執筆者:

関連記事

レスポンシブ対応

メニューとフッターのレスポンシブ対応css装飾 ⇒ STINGER8設定その12

見出しと同じイメージを使う H2タグの装飾とイメージを同じにするため、メインメニューとフッターの背景画像を設定する。 H2タグを修飾 ⇒ STINGER8設定その9 最初は単純に背景画像を設定するだけ …

実質は国内シェア96%を握る ヤフー・グーグル提携の波紋

Amplify’d from diamond.jp 実際に検索サイト&#12 …

cssアニメーション

cssのanimationで文字に変化を付ける ⇒ トップページの作り込み1

animationとは cssのanimationを使うことで簡単に動きを付けられる。 animationプロパティは、要素にキーフレームアニメーションを適用する場合に、 アニメーションについてまとめ …

フェイスブック

FacebookがついにYahooを抜いて世界第三位の巨大Webサイトになった

Amplify’d from jp.techcrunch.com 今年丸一年かけて、ついにこうなった。comScoreによると、FacebookはYahooを追い越して世界三位のWebサイトになった。 …

ページで100%幅表示を可能にする ⇒ STINGER8設定その14

100%幅の表示を可能にする STINGER8では100%幅のコンテンツを表示できないので、固定ページは可能になるように設定する。 サイドバーを消し、幅を制限している設定をクリアしていく。 page. …