TOP

記事内ニュー枠を単体で丸角スタイルに変更

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

 

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

 

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

 

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

 

 


 

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

 

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

 

 

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

 

丸み度合いが 少なく認識しずらい箇所は 数値を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; 単体指定
}

 

 


 

 

 

h3見出しの丸角

 

h2 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-radius:10px; ここで指定してます
}

 

 

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

 

 

追加後 保存をお忘れなく

 

スポンサーリンク

 

 

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

 

 

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