 |
 |
前号へ
このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。おちゃのこネットの刑部です。
今回のデザイン道場は、ランキングのタブデザインを変更する方法をご紹介します。
※カスタムパーツ「ランキングタブデザイン変更」を設定されている場合も上書きし適用されます。
 |
|
 |
 |
デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けてください。
背景色の変更は、各タブ通常/マウスオーバー/選択中のそれぞれのbackground-color(背景色)とborder(罫線)、color(文字色)のカラーコードを変更してください。
※他の箇所については、タブの表示上必要な指定となりますので、変更せずにご利用いただくことを推奨します。
横幅840px以下のデバイスでの表示
タブが4つ以上あり、タブ名が長い場合も各タブを改行せず横にスクロールして表示されます。
.responsive .ranking_page_body .inner_ranking_navigation,
.ocnk016.responsive .ranking_page_body .inner_ranking_navigation {
margin-bottom: 20px;
}
/* 各タブ通常 */
.responsive .ranking_navigation.anchor_nav_area .nav_btn,
.ocnk016.responsive .ranking_navigation.anchor_nav_area .nav_btn {
margin: 2px 3px -1px;
padding: 10px 8px;
background-color: #F5F5F5;
border: 1px solid #E5E5E5;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #999999;
}
/* マウスオーバー */
.responsive.use_hover .ranking_navigation.anchor_nav_area .nav_btn:hover,
.ocnk016.responsive.use_hover .ranking_navigation.anchor_nav_area .nav_btn:hover {
background-color: #FFFFFF;
border: 1px solid #E5E5E5;
border-bottom: 1px solid #FFFFFF;
}
/* 選択中 */
.responsive .ranking_navigation.anchor_nav_area .nav_btn.nav_on,
.ocnk016.responsive .ranking_navigation.anchor_nav_area .nav_btn.nav_on {
background-color: #FFFFFF;
border: 1px solid #E5E5E5;
border-bottom: 1px solid #FFFFFF;
color: #000000;
}
.inner_ranking_navigation::after {
content: "";
display: block;
width: 100%;
height: 1px;
background-color: #F5F5F5;
}
.anchor_nav_area.ranking_navigation .flex_wrap .wrapped_item {
width: auto;
flex: 1;
}
.ranking_navigation.anchor_nav_area .inner_ranking_navigation:has(.flex_layout .wrapped_item:nth-child(4)) .flex_layout .wrapped_item {
width: auto;
}
@media screen and (max-width: 840px) {
.inner_ranking_navigation:has(.flex_layout .wrapped_item:nth-child(4)) {
overflow-x: scroll;
overflow-y: hidden;
scrollbar-width: thin;
}
.touch_device .inner_ranking_navigation:has(.flex_layout .wrapped_item:nth-child(4)) {
scrollbar-width: none;
}
.ranking_navigation.anchor_nav_area .inner_ranking_navigation:has(.flex_layout > .wrapped_item:nth-child(4)) .flex_layout {
width: max-content;
}
}
@media screen and (min-width: 840px) {
.ranking_navigation.anchor_nav_area .inner_ranking_navigation:has(.flex_layout .wrapped_item:nth-child(4)) .flex_layout {
width: 100%;
}
}
なお、お問い合わせは下記ページからお願い致します。
Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.