• MENU●●●●
  • トップページのみ背景画像を切り替える 1カラム背景画像設定済み例


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

    スポンサー広告

    関連記事


    トップページのみ背景画像を異なる表示とするCCS指定手順


     

    今回はシリウスサイトの背景をすでに画像で設定しているサイト..

     

    もしくは、今後サイト背景を画像にするとした場合..の参照記事..

     

    トップページのみを以下階層と異なる背景で表示するというCSS指定手順を
    ご案内いたします..

     

    イメージは当ページみたいなもんです(オール画像)
    ただし、当ページはエントリーページであり、イメージとして画像配備して
    いるのであって、トップページも画像ありきでも異なる画像となります。

     

     

    さて、シリウスのデフォルトテンプレートでは、2カラムでも3カラムでもトップページのみを
    一カラムに変更できることは...class指定することにより可能です..

     

    こちらでclass指定での変更詳細をご確認ください
    2カラムトップページのみ一カラム個別指定変更カスタマイズ

     

     

    トップページのみ背景画像を変更する場合は、やはりclass指定することに
    よって可能となります。

     

    上記例サイトでトップページのみ一カラムとはご確認できたと理解し...
    先へ進みますね

     

     

    スポンサーリンク

     

     

     

     


     

    トップページのみ画像の表示指定の理解

     

    スタイルシートを開きます

     

    以下の原本記載へ到達してください

     

    ここはいじりません

     

    /* 基本スタイル */

     

    body {
    margin: 0px;
    padding: 0px;
    text-align: center;
    color: #333333;
    font-size: 0.9em;
    line-height: 140%;
    background-color: #F5F5F5;
        <% backgroundImage %>
    <% backgroundDisplay %>
    <% backgroundColor %>
    <% bodyFontSize %>
    }

     

    上記の少々下へ以下class指定 および加えた改行記載を張り付けます

     

    改行されている箇所をご確認ください

     

    body.top {
    margin: 0px;
    padding: 0px;
    text-align: center;
    color: #333333;
    font-size: 0.9em;
    line-height: 140%;
    background-color: #F5F5F5;
    background-image: url(./img/.背景の画像コードjpg);(追加する画像コード)
    <% backgroundColor %>
    <% bodyFontSize %>
    }

     

     

     

    原本CSS
        <% backgroundImage %>
    <% backgroundDisplay %>
    の記述が、シリウスデフォルト機能で指定した画像を読み込んでいますが

     

    class指定の記述では、シリウス管理画面から別画像を読み込みますので
    不要となり削除します..

     

    削除しないとデフォルトが読み込まれます..

     

     

    次に削除した記述の箇所へ
    ...管理画面から読み込むための新たな記載を付け加えます..

     

    以下記述です
    background-image: url(./img/.背景の画像コードjpg);

     

     

    背景としたい画像のコードを書き込んでください

     


    background-image: url(img/1acc.png);

     

     

    で、class指定の記述では書き換えた画像コードが読み込まれ表示されるわけです

     

    長々と書いてますが作業はこれだけです(簡単ですね)

     


     

    すみません...
    大事なこと書き忘れです...

     

    スクロールした際..画像を固定する場合は

     

    スタイルシートのbody要素内に背景画像を、固定化する指定コード

     

    background-attachment:fixed;

     

    を追記してください...

     

    bodyの下、囲い枠内のどこかに..以下参照...
    /* 基本スタイル */

     

    body {
    margin: 0px;
    padding: 0px;
    text-align: center;
    color: #FFFFFF;
    font-size: 0.9em;
    line-height: 140%;

    background-attachment:fixed (ここですね)
    }

     

     

    無指定の場合は、スクロールすると画像まで上に移動してしまいます...

     

    また,、トップページHTMLをclass指定することだけは忘れないでください。

     

     

    トップページの背景画像をCSS指定で切り替える一カラム
    トップページのみ背景画像を切り替える 1カラムデフォルト背景例
    シリウスカスタマイズ

    トップページのみ背景画像を切り替える 1カラム背景画像設定済み例関連解説
    一カラムのレスポンシブレイアウトはスマホ用のダブルページを追加
    SIRIUS シリウスの一カラムの場合 PCレイアウト記事列はスマホでは 画面縮小に従い途中折れしますが ページ内にもう一つスマホ用構成のページを いれとけば対処可能です カスタマイズ詳細はサイトで....
    エントリーページ一カラムをブログスタイルへカスタマイズ
    SIRIUS シリウスのエントリーページを一カラムとして背景を他ページと異なるよう切り替えて見るとブログみたいなスタイルにカスタマイズできますね
    トップページのみ異なる背景でブログスタイルへカスタマイズ
    SIRIUS シリウスのデフォルトでは 背景画像はすべて同じ画像が表示されますが CSS指定により切り替えすることで異なる表示が可能です カスタマイズ詳細はサイトで....
    トップページのみ背景画像を切り替える 1カラムデフォルト背景例
    SIRIUS シリウスのデフォルト背景は白台紙ですが トップページのみ背景を画像として表示することが出来ます カテゴリー以下はお堅いサイト トップページは海外サイト見たくカスタマイズできるかな?