• MENU●●●●
  • メニュー枠を単体で丸角スタイルに変更する


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

    スポンサー広告

    関連記事


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

    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を改行指定で進めます

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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