2015　0108
シリウスカスタマイズテーマ　　見出しの角丸カスタマイズ

 

今回はサイドメニューの見出しのスタイルを角丸にカスタマイズする方法の
ご案内ですがグローバルメニューの角丸化カスタマイズは
こちらで詳細をご確認ください
シリウスのグローバルメニューの直線スタイルを丸くするカスタマイズ

---

 

シリウスサイトデザインは　確かにスタイルは恰好よいのですが
直線的なラインのせいか優しさが感じられません

 

ブログなどと比較してみるとご理解いただけると思います

 

私は他のサイトによくお出かけしますが
その際　優しさのあるサイト構築ですとなんか落ち着くのです　

 

 

この雰囲気の違いは？

 

シリウスでは表現できない！

 

これが悩みの種で　他のサービスを利用していたものです

 

けれど　その問題は　私の知識不足

 

シリウスサイトをやさしく　柔らかく　和やかに見せるということは

 

各見出しやサイトメニュ―の枠を角丸とすれば良いことと

 

気が付いたので　備忘録もかねてのご案内です

 

 

新規サイトで角丸のテスト画像

 

 

 

今回は　

 

Ｈ３見出し

 

サイトメニュー見出し

 

サイトメニューの個別メニュー

 

までの記載方法です

 

 

 

ですが
お断りがございます

 

Ｈ３見出しは単独指定

 

サイトメニュー見出しはフリースペースも同じ箇所で指定

 

 

ですが　サイトメニューの個別メニューは

 

デフォルトでも指定できますが　ここは画像があり
然程の変化が確認できません

 

個別メニューで反映を上手く表現する場合は　画像の削除等が
必要となりますので　デフォルトの場合は

 

指定せずがよろしいいかと判断します

 

---

 

手順はスタイルシートに以下記述を張り付れば完了します

 

張り付けの際は　
/* 左上 */
/* 右上 */
/* 左下 */
/* 右下 */の文字は削除してください

 

コピーコード

 

border-top-left-radius: 10px; /* 左上 */
border-top-right-radius: 10px; /* 右上 */
border-bottom-left-radius: 10px; /* 左下 */
border-bottom-right-radius: 10px; /* 右下 */

 

 

詳細　

 

border　以降の記述で角丸を指定してます
-top-left-radius

 

数値を大きくすると丸度合いが大きくなります
小さくするのはその逆を指定します

 

 

ここではスタイルシートで追加した箇所を支持していますので
参考にしてください

 

 

参照
角丸スタイルの反映を
下のみ
上のみと　
分ける場合は　反映させたくない記述を二つ削除してください

 

 

Ｈ３見出し　記載例
追加コードは赤で指定

 

各種見出しの項目の位置へお進みください

 

/* 各種見出し */

 

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-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 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;
}

 

#menu li,#rmenu li {
list-style-type: none;
list-style-image: none;
margin: 0px;
display: block;
_display:inline;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #E9E9E9;
padding: 0px;
}

 

#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-top-left-radius: 7px;
border-top-right-radius: 7px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}

 

#menu .menubox, #rmenu .menubox {
margin-bottom: 15px;
background-color: #E5E5E5;
padding: 4px;
_padding: 4px;
}

 

#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-top-left-radius: 7px;
border-top-right-radius: 7px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;

 

}

 

---

 

今回はオールアバウトさんのサイト情報をもとに実行しております

 

オールアバウトさん　有り難く情報を使わせて頂きました

 

ありがとうございます

 

スポンサーリンク

 

 

 

シリウスサイトメニュー見出しをやさしくする角丸カスタマイズ
シリウスサイドメニューの拡張　横幅を広げるカスタマイズの方法
シリウスカスタマイズトップ