SIRIUS　シリウス構成でのメニューは直線から直角へのスタイルで
ＣＳＳ指定されておりますが　コンテンツにより丸みをイメージする事が
できます

 

シリウスデフォルト記事内メニューのカスタマイズは各種ございます

 

当サイトでも関連ページで　ＣＳＳ指定によりの切り替え法は解説が
含まれてはおりますが　今回は単体の記述コードで各メニューごとに

 

見出しの　ｈ２　ｈ３枠からサイドバー見出し　サイトメニューボックスを
単体で　個別にスタイルを丸角にカスタマイズする手順のご案内になります

 

 

---

 

今回採用する記述コードは以下です

 

丸み度合いは　数値を変更するだけ
border-radius:7px;

 

 

以下に　ＤＥＭＯ表示と書き加える箇所を記載しておりますので
参考にしてください

 

丸み度合いが　少なく認識しずらい箇所は　数値を10px;にしてます

 

 

 

記述コードはすべて書き加えております

 

 

スタイルシートの項目行へ到達してください

 

/* サイドメニュー */

 

#menu ul,#rmenu ul {
list-style-type: none;
list-style-image: none;
margin-top: 0;
margin-right: 0;
margin-bottom: 0px;
margin-left: 0;
padding: 0px;
border: 1px solid #CCCCCC;
border-radius:10px;サイトメニュー全体枠を丸角
}

 

 

#menu h4 ,#rmenu h4 ,.menutitle {
line-height: 30px;
background-image: url(img/menu_h4.jpg);
height: 30px;
font-size:14px;
color: #FFFFFF;
text-align: left;
padding-left: 20px;
overflow: hidden;
border-radius:7px;　見出しの丸角指定
}

 

---

 

 

 

見出しは　丸角指定そのままで

 

サイトメニューのメニュー枠を単体で丸角にする例

 

 

#menu li a ,#rmenu li a{
line-height: 14px;
display: block;
font-size: 12px;
text-decoration: none;
background-image: url(img/menu_bg.gif);
background-repeat: no-repeat;
background-position: 5px center;
background-color: #FFFFFF;
margin-top: 0;
margin-right: 0;
margin-bottom: 0px;
margin-left: 0;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 20px;
_padding-top: 2px;
_padding-bottom: 2px;
color: #454545;
border-radius:10px;　単体指定
}

 

 

---

 

 

 

ｈ３見出しの丸角

 

ｈ２　ｈ３枠を丸角の指定します

 

/* 各種見出し */

 

h1 {
font-weight: normal;
font-size: 12px;
color: #666666;
line-height: 16px;
background-repeat: no-repeat;
position: absolute;
top: 5px;
padding-right: 10px;
padding-left: 10px;
font-family: sans-serif;
}

 

#main h2,#main h3,.blog .title {
font-size: 18px;
line-height: 20px;
background-repeat: no-repeat;
background-position: left top;
margin-bottom: 5px;
margin-top: 5px;
color: #FFF;
padding-left: 35px;
overflow: hidden;
padding-top: 7px;
padding-bottom: 7px;
background-color: #333;
background-image: url(./img/h3.jpg);
border-radius:10px;　ここで指定してます
}

 

 

記述コードをスタイルシートに書き加えるだけで　スタイル変更はすぐに
確認いただけます

 

 

追加後　保存をお忘れなく

 

スポンサーリンク

 

 

メニュー枠を単体で丸角スタイルに変更する
シリウスサイドメニューの拡張　横幅を広げるカスタマイズの方法
SIRIUS　シリウスカスタマイズトップ