TOP

サイトメニュー見出しを柔らかな表現にカスタマイズ

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

 

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


 

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

 

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

 

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

 

 

この雰囲気の違いは?

 

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

 

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

 

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

 

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

 

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

 

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

 

 

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

 

 

 

今回は 

 

H3見出し

 

サイトメニュー見出し

 

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

 

までの記載方法です

 

 

 

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

 

H3見出しは単独指定

 

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

 

 

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

 

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

 

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

 

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

 


 

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

 

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

 

コピーコード

 

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

 

 

詳細 

 

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

 

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

 

 

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

 

 

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

 

 

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

 

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

 

/* 各種見出し */

 

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;

 

}

 


 

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

 

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

 

ありがとうございます

 

スポンサーリンク

 

 

 

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

シリウスサイトメニュー見出しをやさしくする角丸カスタマイズ関連解説
サイドメニュー拡張後の画像つなぎ目修正カスタマイズ
SIRIUS シリウスのサイドメニューを拡張したものの サイドバーメニュー画像に延長追加のつなぎ目が見えるのですね! よい感じではないので修正カスタマイズしましょう
サイドメニューの位置をずらすカスタマイズの方法
シリウスデフォルトのサイト幅は 900pxサイズですね あまり気になることでもありませんがサイト幅を拡張してカスタマイズするとサイドメニューを少し外側に位置移動したくなります
サイドメニュー幅拡張のカスタマイズに不安な方へ
シリウスのサイドメニュー幅拡張については 面倒とか 大変ですとか 初心者はやらないほうが良いですとか の不安を煽るサイトがございます
メニュー枠を単体で丸角スタイルに変更する
SIRIUS シリウスの記事内に表示するサイト見出し ページメニュー及びh2 h3タグ枠をCSS指定で単体にスタイルを角丸化するカスタマイズのご案内です
シリウスサイド見出しメニューの縦幅拡張カスタマイズ
SIRIUS シリウスのサイド見出しメニューの縦サイズ幅を拡張するとデフォルトスタイルとはまた違うブログみたいなイメージが打ち出せますね カスタマイズはCSSを改行指定で進めます