QHMの新世代のホームページ作成ソフト|簡単と安心で初心者に高評価、比較して見て下さい。

デザインの背景色を変更及び背景画像にする方法|QHMユーザーの為のカスタマイズ

デザインの背景色を変更及び背景画像にする方法




デザインの背景を、表現したい色に変更、若しくは背景画像を使って変更する方法です。




「css」を修正しないで、背景部分の変更

「QHM」では、編集画面でも「CSS」を定義することができます。
「CSSファイル」を、いじらないでスタイルシートを変更する場合のポイント

  • 背景を、表現したい色に変更する場合

以下のコードに、「カラーコード」及び「カラーネーム」を使って、表現したい色を指定して、
「ページ編集」「ナビ2編集」若しくは「その他のタグ」に、記述する

「その他のタグ」に記述する場合は、「#beforescript{{」と「}}」を省いて記述します。

#beforescript{{
<style type="text/css">
<!--
body {
background-color:#f5f5dc;
}
-->
</style>
}}


  • 背景画像に変更する場合

使用したい画像を「SWFU」でアップロードします。
若しくは、サーバー上で「skin」「hokukenstyle」「デザイン名」の中にアップロードします。

画像サイズは、「画像を繰り返し」の設定ですので、例えば「70x70」など小サイズで問題ありません。

次に、アップロードした画像名に修正します。 カッコの中に画像URLでも良いです。
「ページ編集」「ナビ2編集」若しくは「その他のタグ」に、記述する

「その他のタグ」に記述する場合は、「#beforescript{{」と「}}」を省いて記述します。

#beforescript{{
<style type="text/css">
<!--
body {
background-image:url(swfu/d/画像名);
background-repeat: repeat;
}
-->
</style>
}}


ただし、デザインによっては、「CSS」の設定上異なります。

背景とコンテンツが、同一上のデザインもあり、コンテンツの背景も変わってしまう場合は、
コンテンツを「ホワイト」と指定して以下のように記述します

  • 背景を、表現したい色に変更する場合
    #beforescript{{
    <style type="text/css">
    <!--
    body {
    background-color: #FFFF66;
    }
    #content{
    background-color: #FFFFFF;
    }
    -->
    </style>
    }}
  • 背景画像に変更する場合
    #beforescript{{
    <style type="text/css">
    <!--
    #wrapper {
    background-image:url(swfu/d/画像名);
    background-repeat: repeat;
    }
    #content{
    background-color: #FFFFFF;
    }
    -->
    </style>
    }}

  • また、、デザインによっては、「CSS」の設定が異なります。

    「g_wide系、g_wbeige01、g_wblue01、g_wbrown01」のデザインでは、
    CSSの指定が異なりますので、以下のコードが適用になります。

    • 背景を、表現したい色に変更する場合
      #beforescript{{
      <style type="text/css">
      <!--
      #wrapper {
      background-color: #FFFF66;
      }
      -->
      </style>
      }}
  • 背景画像に変更する場合
    #beforescript{{
    <style type="text/css">
    <!--
    #wrapper {
    background-image:url(swfu/d/画像名);
    background-repeat: repeat;
    }
    -->
    </style>
    }}




  • 「css」を修正して、背景部分の修正

    「main.css」に書かれてる定義を修正します。
    直接「CSS」スタイルシートを修正するポイント

    • 直接「スタイルシート」を修正する場合

    基本的には「body {」部分を修正する形になると思います。
    コンテンツを、修正しなければならない時は、「#content {」部分です。

    また「g_wide系、g_wbeige01、g_wblue01、g_wbrown01」のデザインを使う場合は、
    「#wrapper {」部分を修正することになります。

    いずれも、上記のコードを参考に修正して見て下さい。




    背景と共に「ヘットコピー部分、ナビ2部分、フッター部分、ライセンス部分」の変更

    「ヘットコピー部分、ナビ2部分、フッター部分、ライセンス部分」の背景を変更することで
    お好みのデザインに変えることも出来ます。

    ■プロパティ
    【 #headcopy { 】・・・・・・・ヘッダー上のヘットコピー部分の設定
    【 body { 】・・・・・・・・・背景部分の設定
    【 #wrapper { 】・・・・・・・メニュー+コンテンツ全体部分の設定
    【 #navigator2 { 】・・・・・・ナビ2部分の設定
    【 #footer { 】・・・・・・・・フッター部分の設定
    【 #licence { 】・・・・・・・ライセンス部分の設定

    不要な指定がありましたら削除してください。
    画像を使いたい場合は,プロパティの中に下記を入れます。

    background-image:url(swfu/d/画像名);
    background-repeat: repeat;


    #beforescript{{
    <style type="text/css">
    <!--
    #headcopy {
    background-color: #f4a460;
    border-bottom: 2px solid #FFFF66;
    }
    body {
    background-color: #fffacd;
    }
    #navigator2 {
    background-color: #bdb76b;
    }
    #footer {
    background-color: #8b0000;
    border-top: 1px solid #FFFF66;
    }
    #licence {
    background-color: #dcdcdc;
    }
    -->
    </style>
    }}




    このページは役に立ちましたか?

    選択肢 投票
    大変役に立った 13  
    多少役に立った 2  
    解かりづらかった 1  
    まったく必要ない 2  




    自動スパムコメントの回避の為、認証コードの4桁の数字を記入して下さい。




    a:5457 t:3 y:3

    powered by HAIK 7.1.0
    based on PukiWiki 1.4.7 License is GPL. HAIK

    最新の更新 RSS  Valid XHTML 1.0 Transitional