• MENU●●●●
  • シリウスサイドメニューの拡張 横幅を広げるカスタマイズの方法


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

    スポンサー広告

    関連記事


    サイトメニュー見出しを柔らかな表現にカスタマイズ

    2015 0108
    シリウスカスタマイズテーマ  見出しの角丸カスタマイズ

     

    今回はサイドメニューの見出しのスタイルを角丸にカスタマイズする方法の
    ご案内ですがグローバルメニューの角丸化カスタマイズは
    こちらで詳細をご確認ください
    シリウスのグローバルメニューの直線スタイルを丸くするカスタマイズ


     

    シリウスサイトデザインは 確かにスタイルは恰好よいのですが
    直線的なラインのせいか優しさが感じられません

     

    ブログなどと比較してみるとご理解いただけると思います

     

    私は他のサイトによくお出かけしますが
    その際 優しさのあるサイト構築ですとなんか落ち着くのです 

     

     

    この雰囲気の違いは?

     

    シリウスでは表現できない!

     

    これが悩みの種で 他のサービスを利用していたものです

     

    けれど その問題は 私の知識不足

     

    シリウスサイトをやさしく 柔らかく 和やかに見せるということは

     

    各見出しやサイトメニュ―の枠を角丸とすれば良いことと

     

    気が付いたので 備忘録もかねてのご案内です

     

     

    新規サイトで角丸のテスト画像

     

     

     

    今回は 

     

    H3見出し

     

    サイトメニュー見出し

     

    サイトメニューの個別メニュー

     

    までの記載方法です

     

     

     

    ですが
    お断りがございます

     

    H3見出しは単独指定

     

    サイトメニュー見出しはフリースペースも同じ箇所で指定

     

     

    ですが サイトメニューの個別メニューは

     

    デフォルトでも指定できますが ここは画像があり
    然程の変化が確認できません

     

    個別メニューで反映を上手く表現する場合は 画像の削除等が
    必要となりますので デフォルトの場合は

     

    指定せずがよろしいいかと判断します

     


     

    手順はスタイルシートに以下記述を張り付れば完了します

     

    張り付けの際は 
    /* 左上 */
    /* 右上 */
    /* 左下 */
    /* 右下 */の文字は削除してください

     

    コピーコード

     

    border-top-left-radius: 10px; /* 左上 */
    border-top-right-radius: 10px; /* 右上 */
    border-bottom-left-radius: 10px; /* 左下 */
    border-bottom-right-radius: 10px; /* 右下 */

     

     

    詳細 

     

    border 以降の記述で角丸を指定してます
    -top-left-radius

     

    数値を大きくすると丸度合いが大きくなります
    小さくするのはその逆を指定します

     

     

    ここではスタイルシートで追加した箇所を支持していますので
    参考にしてください

     

     

    参照
    角丸スタイルの反映を
    下のみ
    上のみと 
    分ける場合は 反映させたくない記述を二つ削除してください

     

     

    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-top-left-radius: 10px;
    border-top-right-radius: 10px;

    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 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;
    }

     

    #menu li,#rmenu li {
    list-style-type: none;
    list-style-image: none;
    margin: 0px;
    display: block;
    _display:inline;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #E9E9E9;
    padding: 0px;
    }

     

    #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-top-left-radius: 7px;
    border-top-right-radius: 7px;

    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;

    }

     

    #menu .menubox, #rmenu .menubox {
    margin-bottom: 15px;
    background-color: #E5E5E5;
    padding: 4px;
    _padding: 4px;
    }

     

    #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-top-left-radius: 7px;
    border-top-right-radius: 7px;

    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;

     

    }

     


     

    今回はオールアバウトさんのサイト情報をもとに実行しております

     

    オールアバウトさん 有り難く情報を使わせて頂きました

     

    ありがとうございます

     

    スポンサーリンク

     

     

     

    シリウスサイトメニュー見出しをやさしくする角丸カスタマイズ
    シリウスサイドメニューの拡張 横幅を広げるカスタマイズの方法
    シリウスカスタマイズトップ

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

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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