• MENU ●●●●
  • シリウスカラーテンプレート作成手順|siriusシリウスカスタマイズ


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

    スポンサー広告

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

    カラーテンプレート作成手順を詳細に解説しております

    シリウステンプレート作成カスタマイズ

     

     

    ここでの解説は シリウスデフォルトカラーテンプレートのカラースタイルを
    変更するものです

     

    オリジナルもきれいですね

     

    しかし オリジナリティな自分スタイルのカラーにしたい方に
    おすすめの手法です

     

     

    シリウスカラーテンプレート作成をする前に ご注意ごと 準備するもの
    がございます

     

    作成の途中途中で説明を入れますと 理解しずらくなるので
    ここでご確認ください

     

     

    作成と言っても 新たに作るのでは無く 今あるテンプレートを

     

    基礎として もう一つのテンプレートフォルダを作り改編 改造するものです

     

    別フォルダに新た名な テンプレートフォルダとして追加 保存することで
    以降再利用も デフオルト同様行えます

     

     

    今回はデフォルトテンプレート3カラムでの説明になりますが
    2カラム 1カラムでも応用はできます

     

     

    テンプレートのカラーは スタイルシートで設定するのではなく
    表示されるカラー画像の変更とご理解ください


     

    単体カラー?

     

    単体のカラーでカラー変更しますが 場所により複数の色分けも可能です

     

    問題なのが グローバルメニューなんです

     

    デフォルトでは 上下の明暗がありますね

    ここを単体で表示すると カラーによりけりですが なんか いまいちと
    感じられるかもしれません

     

    多少なりとも変化を見せたいなら 画像ソフトで作るか

     

    余りお勧めしませんが どこかのサイトのナイスなグローバルメニューの
    一部画像を参考に作ればよいかも 
    これぐらいのサイズがあればOK   

     


     

     

    準備するもの

     

    今回のカラーは 紫を使います
    このぐらいの画像を作りパソコンに保存しときましょう

     

    カラー画像を 何処から用意すれば という方は サイトデザインから
    背景画像を設定して表示させ切り取り保存もできます
    また 当サイトで案内している無料画像ソフトで作成することもできます

     

     

     


     

    ここ大事 フッター スタイルシートの一行改編

     

    フッター画像についてはなぜか? 面倒がございます

     

    サイト下部のフッター部分なのですが ただ単に画像ファイルを変更しても 
    ザラメ画像になってしますのです

     

     

    原因は フッターに限り画像がgfi画像ファイルになっているのですね

     

    スタイルシートでの指定は gif指定
    background-image: url(./img/footer.gif);
    シリウステンプレートにあるfooterファイルの画像をそのまま変更しても
    ザラメ画像となるのです

     

    gifの指定をするとザラメ画像

     

    シリウス運営もとで設定しているデフォルトはなぜかザラメになりませんし
    なぜ ここだけ違うのかも疑問ですが?

     

     

    そこで
    PNGファイルを指定表示するよう 変えます

     

    変更箇所は スタイルシートで指定している gif をpngに変えてください

     

    /* フッター */

     

    #footer {
    text-align: center;
    color: #FFFFFF;
    line-height: 64px;
    height: 64px;
    background-image: url(./img/footer.gif);
    background-repeat: repeat-x;
    background-position: left top;
    }

     

    #footer a{
    color: #FFFFFF;
    text-decoration: none;
    }

     

    #footermenu{
    text-align:center;
    padding:6px;
    }

     

     

     

    改行例
    background-image: url(./img/footer.png);

     

     

     

    また カラー変更後の画像ファイルをpngファイルとして呼び出しのため
    名称変更をしなければリなません
    ステップ2で解説追記しております

     


     

    フッター追加情報 もう一つのカラー変更方法

     

     

    フッターについては 上手く反映されないという質問が稀にございます

     

    ここは多少面倒かなとは思っていたのですが......

     

     

    画像を編集しなくても

     

    スタイルシートでカラーを指定すれば 即変更が可能です

     

     

    問題は  画像編集ができないので 画像上部のわずかな
    ラインが表示できないこと

     

    画像参照

    ライン表示だけ気にしなければ即反映されます

     

    スタイルシートでのラインを指定表示にするための詳細は 後日
    追記いたしますのでお待ちください

     

     

    スタイルシートでのカラー変更手順は
    background-image: url(./img/footer.gif);の記述から

     

    image: url(./img/footer.gif)を削除して好みのカラーコードに書き換えます

     

     

    例   以下
    background-color: #FFFFFF;

     

    画像の呼び出し記述が変わることで
    画像の呼び出しは指定されず 
    記載したカラーコードが表示される事になるのです

     

    書き換え後 保存選択をすればプレビューで変更は確認できます

     

    スタイルシートでの位置をお確かめください
    一行のみ

     

    /* フッター */

     

    #footer {
    text-align: center;
    color: #FFFFFF;
    line-height: 64px;
    height: 64px;
    background-image: url(./img/footer.gif);ここです
    background-repeat: repeat-x;
    background-position: left top;
    }

     

    #footer a{
    color: #FFFFFF;
    text-decoration: none;
    }

     


     

    スポンサーリンク

     

     

    シリウスカラーテンプレート作成手順|siriusシリウスカスタマイズ記事一覧

    テンプレートフォルダ選択 ステップ1

    カラーカスタマイズテンプレートを作る場合 デフォルトのテンプレートをそのままカスタムすると そのもののフォルダ内容が変わってしまいます後で それを他のサイトで使いたいなんてことになると元に戻すにも 面倒が増えてしまいますカスタム用に 別にもう一つフォルダを作るのです新しくテンプレートのフォルダを作り...

    ≫続きを読む

     

    ファイル画像カラー変更手順  ステップ2

    サイトカラーを変更するには上からグローバルメニューサイドメニューカラーh3タイトル表示背景カラーフッターカラーこれだけで大まかにカラー変更はできます他の小さな変更もする場合は 解説を参考におすすめください画像ファイル欄の中から以下のファイルをカラー変更しますグローバルメニュー二つの画像がありますが ...

    ≫続きを読む

     

    シリウスカラーテンプレートカスタマイズで気を付けること

    シリウスのテンプレートカスタマイズを進めるにあたり 注意しなければならないことがありますカスタマイズは 今更新中のサイトで進めるには危険があります何かしらの事情で混乱することも必ず 新規サイト作成でカスタマイズ完了後 エクスポートしたテンプレートを選択すれば切り替えが正常に行えますシリウステンプレー...

    ≫続きを読む

     

     

     

     

    カラーテンプレート作成手順を詳細に解説しております
    テンプレートフォルダ選択 ステップ1
    ファイル画像カラー変更手順  ステップ2
    シリウスカスタマイズ

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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