2015　0109
シリウスグローバルメニューカスタマイズ　角に丸みをつける
シリウスデフォルト3カラムテンプレート対応

 

 

シリウスのデフォルトグローバルメニューは力強くて恰好が良いですね

 

しかし　柔らかさが感じられず　ブログタイプヤ女性向サイトのような
構築をする場合やや抵抗もありますが

 

メニューの角に丸みを加えるとイメージが大幅に変わります

 

 

今回の方法はスタイルシート指定で行いますので
グローバルメニュー全体の両端ではなく　一つのメニューごとが角丸と
なることになります

 

 

こちらはサイドメニューも角に丸みをつけてみた例です
全体的に丸みを付け加えるとブログみたいになります

サイドメニューの角を丸くする詳細はこちらでご確認ください

 

 

ご注意ごと

 

今回のスタイルを実行する場合　グローバルメニューを
呼び込むための画像フォルダーにあるデフォルト画像の場合では
画像にラインや斜陽があるため
何ともおかしなイメージになってしまいます

 

ブログなどのイメージにするためには単色で編集しなおされることを
おすすめします

 

また　今回は　デフォルトの縦サイズですと縦幅がありすぎるため
見出しとほぼ同サイズにしております

 

以下記述のスタイルシートをコピーして利用する場合

 

いま運営しているサイトではなく　新規サイト作成でテンプレートを
選んで　新しいお名前でテンプレートのエクスポートして
デザインが完成しましたら　再度テンプレートのエクスポートを行い
運営サイトにテンプレートを呼び込むという手順で進めてください

 

---

 

 

スタイルシートの追加した指定箇所です

 

原本は自分サイトのスタイルシートを開いて見て
どこが違うかをご確認ください

 

 

 

青ラインは数値改行
赤ラインは付け加えた記述です

 

 

 

/* グローバルメニュー */

 

#topmenu {
background-repeat: repeat-x;
height: 0px;　　　　　　数値改行しました
line-height: 32px;　　数値改行しました
width: 900px;
position: absolute;

margin: 0px;
padding: 0px;
background-image: url(img/topmenu.jpg);
background-position: left top;
font-size: 13px;
}

 

#topmenu span a {
overflow: hidden;
width: 20%;
_width:19.6%;

text-align: center;
color: #FFF;
font-weight: bold;
text-decoration: none;
float: left;
height: 45px;
_height:47px;
background-image: url(img/menu_item.jpg);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
padding-bottom:3px;
display: block;
border-left: 1px solid #FFF; 　仕切り線指定カラー
overflow: hidden;
display: inline;
margin-left: -1px;
height: 30px; 仕切り線の縦数値

 

border-top-left-radius: 6px; 以下数値は角丸の大きさ指定
border-top-right-radius: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;

 

}

 

---

 

全体の両端のみ丸くする場合　以下記述を削除して
その他数値を変更調整すれば出来るのですが　ここはびみょな
ところでして　わずかのミスで　たてはばが変わってしまうとか　
レイアウト崩れもありで　確定的な説明が出来ない状況です
現在　簡単に進められる方法を模索しておりますので
今しばらくお待ちください

 

border-left: 1px solid #FFF; 　
overflow: hidden;
display: inline;
margin-left: -1px;
height: 30px;

 

---

 

最後の調整

 

ここまででグローバルの形は出来るのですが　表示してみると
一番上の箇所にヘッダー画像の下の1ＰＸの横ラインが重なりずれが
生じます

 

横ラインは削除でもよいのですが後々再利用することもあるので
透明にするという処置にします

 

 

透明化記述に書き換えするには

 

基本レイアウトの項目から　
border-bottom:solid 1px #EBEBEB;の行を透明コードに書き換えます

 

書き換え後コード
border-bottom:solid 1px transparent;

 

 

/* 基本レイアウト */

 

#container {
width: 900px;
_width: 910px;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
margin-right: auto;
margin-left: auto;
background-image: url(./img/cnt_bg.png);
background-repeat: repeat-y;
}
#header {
height: ;
background-image: url(img/header.jpg);
overflow:hidden;
background-repeat: no-repeat;
background-position: left top;
width: auto;
border-bottom:solid 1px #EBEBEB;　書き換え箇所
}

 

 

---

 

 

スポンサーリンク

 

 

 

 

シリウスのグローバルメニューの直線スタイルを丸くするカスタマイズ
グローバルメニューのカスタマイズ
シリウスカスタマイズトップ