• MENU●●●●
  • シリウスサイド見出しメニューの縦幅拡張カスタマイズ


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

    スポンサー広告

    関連記事


    サイドメニュー見出し縦幅拡張

    2015 0119
    シリウスサイドメニューカスタマイズテーマ 見出しの縦幅拡張

     

    デフォルトテンプレート対応

     

     

    シリウスのサイドメニュー見出しはデフォルトで縦サイズが
    CSS指定されています

     

    サイト形式で運営しているならこれでもよいかと思われますが

     

    ブログ的イメージを打ち出す場合や 特殊的な意味合いを持たせる場合は

     

    やや縦幅を拡張してみることもよいかと思われます

     

    通常スタイルですね

     

    スタイルシートでの変更箇所を御確認ください

     

     

    /* サイドメニュー */

     

    #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;
    }

     


     

    数値変更のみでサイズ指定ができます

     

    line-height: 30px;
    拡張した場合のフォント位置

     

    height: 30px;
    拡張サイズの指定

     

     

     

    以下例50px;にしてみました

     

    line-height: 50px;
    ここの数値はheight: 50pxと同様にする必要があります

     

    height: 50px;

     

     

     

    拡張して確認してみると シリウスでデフォルトで用意されている見出し
    画像より枠が大きくなり その空きスペースに画像の一部が連写される
    という特性で明暗違いの箇所が表示されました

    デフォルト画像は明暗が施してあるためのこのような表示になってしまいます

     

    この対処は シリウステンプレートフォルダの

     

    h4画像ファイルを編集でたて数値を大きな画像にすることで対処可能です

     

    参考例

     

     

    それ以外の画像をお探しの場合 どこかで画像を取り寄せなければなりませんが

     

    参考として テスクチャ画像から切り取ってみてはいかがでしょう

     

    配布されている画像は サイズが大きいですが一部だけツールで切り取り
    ペイント内で編集すればよいだけです
    背景用テクスチャ画像フリー配布サイトまとめ

     

     

    また 見出しの角を角丸にする場合は CSSの追加が必要です
    同関連ページで変更手順詳細をご案内しております
    シリウスサイトメニュー見出しをやさしくする角丸カスタマイズ

     

    縦数値拡張に伴い横幅も拡張する場合は 
    シリウス機能 テンプレートの横幅設定でサイズ指定します

     

    スポンサーリンク

     

     

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

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

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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