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


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


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

    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背景カラー変更カスタマイズ
    シリウスのグローバルメニューはサイト上部で重要な情報を伝えるものですね  デフォルトでも綺麗なのですがカスタムすると場合によりカスタマイズ変更しなければならない事も....

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト