• MENU ●●●●
  • グローバルメニューのデザインカスタマイズ


    シリウスカスタマイズ 記事一覧を記事中段へ移動して情報を解り易く明示しましょう グーグル検索で好評かを得られるかも?

    当該サイトコンテンツ関連記事

     スポンサーリンク

    グローバルメニューのカスタマイズ解説

    グローバルメニュー

     

     

     

    グローバルメニューは読者に訴えたい重要な情報

     

    又は 読者が求めるであろう情報をいち早く認識していただくために
    メニューとして表示するものです

     

     

    グローバルメニューはデフォルトでも充分綺麗な見やすい構成なのですが

     

    カスタムするに至り スタイルシートで変更が必要になることもあります

     

     

    ここではグローバルメニューのイメージを変えるための

     

    フォント 文字色 大きさ 変更に伴う位置変更を

     

    何処をどうするかを簡単に説明しております

     

    2014 1231更新
    シリウスグローバルメニューカスタマイズテーマ イメージ変更

     

     


     

     

    変更箇所と変更方法

     

    背景カラー変更については サイドの左メニュー内

     

    カラーテンプレート作成手順内で解説されております

     

     

    カスタマイズする場合スタイルシートで記述変更します

     

     

    ご注意 
    各ユーザー使用のスタイルシートにより 数字の順位が異なることもあります

     

     

    スタイルシートを開いてグローバルメニューの欄を見てみましょう

     

    /* グローバルメニュー */

     

    #topmenu {
    background-repeat: repeat-x;
    height: 48px;
    line-height: 42px;
    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: #FFFFFF;
    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;

     

    変更説明

     

    文字サイズを変更したり上下幅を小さくしているサイトは
    まれに見かけることがございます

     

    縦幅数値を小さくしたら 文字位置も合わせてずらしてください

     

     

    フォント 文字カラー変更

     

    デフォルトのグローバルメニューフォントカラーは白ですね

     

    白が一番きれいなのですが 何かしらの事情で薄いカラー

     

    グレーの薄いカラー  または白に近いカラーでグローバルメニューの
    背景カラーにした場合は 白文字ですと 認識しずらくなります

     

    やはり見えにくいとなると 読者様も情報収集に迷割れるかもしれません

     

    それなら 見やすいフォントカラーに変更しましょう

     

    color: #FFFFFF;のカラーコードを変えてください

     


     

    フォント 文字サイズ
    font-size: 13px;の数値変更

     

     


     

    フォント上下の位置

     

    line-height: 42px; 数値変更
    文字の上下位置を変更できます  以下は少し上げたもの

     


     

    背景画像の高さサイズ

     

    標準

    height: 45px; 数値変更
    _height:47px;

     

     

    例 数値を35にしてみました

     

    メニューの縦数値を デフォルトより大きくしても背景は画像なので
    隙間が下にできることになります

     

    縦幅のおおきいメニューをお作りになる場合は 画像ファイルも大きなものと
    入れ替えます

     

    スポンサーリンク

     

     

    グローバルメニューのデザインカスタマイズ記事一覧

    シリウスグローバルメニューに仕切り線を設定するカスタマイズ

    2014 1231シリウスグローバルメニューカスタマイズ  仕切り線設定デフォルトテンプレート対応シリウスのデフォルトテンプレートではグローバルメニューのメニューとメニューを仕切る 仕切り線が備えられておりません他サイトなど見てみますと仕切り線表示をしているサイトは多く見かけますメニューとメニューを...

    ≫続きを読む

     

    シリウスグローバルメニューCSS背景カラー変更カスタマイズ

    2014 1231シリウスグローバルメニューカスタマイズ  CSS指定で背景カラー変更デフォルトテンプレート対応シリウスデフォルトのグローバルメニューは画像を呼び込み事でそのスタイルが確認できます通常は画像を切り替えることでカラー変更やデザインを変更するのですがスタイルシートからでも カラーコード変...

    ≫続きを読む

     

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

    2015 0109シリウスグローバルメニューカスタマイズ 角に丸みをつけるシリウスデフォルト3カラムテンプレート対応シリウスのデフォルトグローバルメニューは力強くて恰好が良いですねしかし 柔らかさが感じられず ブログタイプヤ女性向サイトのような構築をする場合やや抵抗もありますがメニューの角に丸みを加...

    ≫続きを読む

     

     

     

    グローバルメニューのデザインカスタマイズ
    シリウスカスタマイズ

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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