TOP

グローバルメニューの直線スタイルを丸くする方法

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;

 


 

最後の調整

 

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

 

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

 

 

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

 

基本レイアウトの項目から 
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; 書き換え箇所
}

 

 


 

 

スポンサーリンク

 

 

 

 

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

シリウスのグローバルメニューの直線スタイルを丸くするカスタマイズ関連解説
グローバルメニューに仕切り線を設定するカスタマイズ
シリウスのデフォルトテンプレートではグローバルメニューに仕切り線がありませんがCSSに記述追加でカスタマイズが完了します コピーコード用意してますので即実行頂けます
グローバルメニューCSS背景カラー変更カスタマイズ
シリウスのグローバルメニューはサイト上部で重要な情報を伝えるものですね  デフォルトでも綺麗なのですがカスタムすると場合によりカスタマイズ変更しなければならない事も....