• MENU●●●●
  • ヘッダー画像をレスポンシブウェブ構造で作動させる方法


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

    スポンサー広告

    関連記事


    シリウスのヘッダー画像をレスポンシブウェブデザイン構造として表示するカスタマイズ

    シリウスのデフォルトhtmlテンプレートに レスポンシブウェブ構造は
    組み込まれておりませんが 
    @media記述を加えることでレスポンシブ化サイトとしての機能表示が
    可能となります

     

    しかし 当サイトおよびネット上で得られるレスポンシブウェブデザイン構造
    記述コードではシリウステンプレートのヘッダー画像のみが
    スマートフォンデバイスでは伸縮されず 左位置画像が認識できる
    範囲におさえられているようです

     

    事情はシリウス機能が影響していると判断しておりますが
    現在のところ解明できてはいませんが サポートより稼働状態に
    できないものかと?

     

    ご質問がよせられておりますので 無理くりのカスタマイズではありますが
    ご案内いたします

     

    ですが 面倒もあり採用する しないは充分にご検討後
    ご判断ください

     

    解説は当サイト公開のレスポンシブウェブデザイン構造記述を
    対象にしておりますので他の構造に関しての対応は不明です

     

     

    反映度合いは

     

    タブレット関連ではモニター画面が小さくもないので 然程の影響は
    ないものの スマートフォンフォンでの閲覧の際は 中心が右に隠れ
    画像の一部が不認識になってしまうのですね

     

    レスポンシブウェブデザイン構造がヘッダー画像にのみ 影響を
    与えることが出来ない!という状況

     

    ヘッダー画像にのみレスポンシブ化不作動という状況を正常に
    するためHTMLおよびCSSにあらゆる指定を追加をしたのですが

     

    スタイルシートの
    background-image: url(img/header.jpg)行;記述に置く
    ヘッダー画像は全然動いてくれません

     

    なぜなんでしょう?

     

    そこで シリウス機能でヘッダー画像を読み込むのではなく
    html内に画像をおいて スタイルシートで読み込むという方法で
    進めましたところ とりあえずはヘッダー画像をレスポンシブウェブデザイン
    構造として作動表示できるようになりました

     

    スポンサーリンク

     

     

    お断り

     

    ヘッダー画像を伸縮する方法として ロゴ画像を拡大表示させ
    スタイルシートで指示すれば とりあえずは伸縮するヘッダー画像は
    設定はできますが ロゴ機能はヘッダータイトルの箇所を画像に切り替えて
    表示するもので タイトル表示機能が使えなくなります

     

    ロゴ画像を編集して タイトルをフォントデザイン画像として
    入れ込みはできますがあくまで画像なので狭まると意味不明?
    となるのです

     

    ページ追加ごとにタイトルを含めたヘッダー画像編集するのも大変面倒!

     

    ですので
    ここでの解説は 通常にタイトルをシリウス機能で切り替え可能な
    方法で進めています

     

     

     

     

    通常

     

    レスポンシブウェブ化のスタイル

     

    以上のようにレスポンシブウェブ化しての反映されますが
    シリウス機能を無視した構造なのでスタイルに制限がございます

     

    作動状況をご案内します

     

    ヘッダー画像は右から左へ伸縮変化します

     

    縮小は横幅が伸縮するもので 縦サイズは変化しません
    縦サイズをレスポンシブウェブ化もできたのですが ここにはタイトルやその他が
    3つほど置かれているので 縦稼働すると意味不明な構成になってしまうので
    不指定としました

     

    ですので 横幅のみの縮小でのヘッダー画像をご確認の上
    採用するかどうかはご判断ください

     

     

    サイトタイトル h1タイトルも伸縮変化します

     


     

    構築の状況

     

    デフォルトで今置いてるスタイルシート内のヘッダー画像呼び出し指定
    記述はあるものの 
    レスポンシブ化しませんが 削除や改行はせずそのままの状態に
    しておきます

     

     

    レスポンシブ化しないヘッダー画像の上に 作動する別なヘッダー画像を
    上乗せして表示しますので 置いといても問題なし

     

    上乗せするヘッダー画像は htmlテンプレート
    トップから その他リンク集までございますが

     

    無理やりhtmlテンプレート内に画像を置いてスタイルシートから
    呼び出しますので トップ カテゴリー エントリーページが指定範囲
    3種類となります

     

    トップページのみレスポンシブウェブとして作動する際は html
    カテゴリー エントリーページはなにも指定しなければ 最初からサイトに
    設定しているヘッダー画像がデフォルトで反映されます

     

     

    レスポンシブウェブ構造追加詳細

     

    html指定

     

    html内にヘッダー画像を置きます

     

    ヘッダー画像は 初期設定のデフォルトヘッダー画像サイズと
    サイズと同サイズのものを用意します

     

    サイズ違いがあると空きスペースが表れてしまいます

     

    ヘッダー用画像画決定できましたら 表示用記述改行作成のため
    画像コードをシリウス記事内で呼び出して編集します

     

     

    例 画像コード
    <img src="<% pageDepth %>img/rleghi.jpg" alt="" />

     

    次に スタイルシートで読み込むため div要素で記述を
    囲みます

     

    idを含め読み込む認識指定としてsiriusを入れ込みます
    <div id="sirius">画像コードを置く</div>

     

    siriusという認識コードは任意ですので 他の名称でも構いません

     

    記載例
    <div id="sirius"><img src="<% pageDepth %>img/rleghi.jpg" alt="" /></div>

     

    次にhtmlテンプレートを開いて 以下の行に到達
    <div id="header">の下に作成した記述を張り付けます

     

    記載例
    <body>
    <div id="container">
    <!-- ★ヘッダーここから★ -->
    <% pageTopic %>
    <div id="header">
    <div id="si">画像コード</div> ここに置きます
    <% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %>
    <%pageDescription %>
    </div>
    <!-- ★ヘッダーここまで★ -->

     

     

    ここで一言

     

    div要素で囲まず 画像コードのみを置いた場合で サイトを
    レスポンシブ構造にしているなら この段階でも画像だけは作動は
    反映されますが

     

    画像だけならです
    h1テキストやサイトタイトルは 画像の下階層にあるので
    認識できないのですね

     

    もし 
    ヘッダー画像内にサイトタイトルをデザインとして組み込んでいる場合は
    この段階で終了することも可能です

     

    画像のみ横変化の際は div 要素で囲まず 画像コードのみ

     

    以下のdiv要素で囲むと 通常のサイトに置く画像伸縮になりますが
    何とも?
    調整不能なスタイルになります

     

    お試し参考程度に
    <div>画像コード</div>

     

     

     

     

    次は h1テキストやサイトタイトルをレスポンシブウェブデザイン構造として
    正常に表示させるためのスタイルシートでのcss指定に進みます

     


     

    スタイルシート指定

     

     

    以下行に到達してください

     

    /* 基本レイアウト */

     

    #container {
    width: 900px;
    _width: 910px;
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 5px;
    margin-right: auto;
    margin-left: auto;
    background-image: url(./img/cnt_bg.png);
    background-repeat: repeat-y;
    }

     

     

    #header {
    height: <% headerHeight %>;
    background-image: url(img/header.jpg);
    overflow:hidden;
    background-repeat: no-repeat;
    background-position: left top;
    width: auto;
    border-bottom:solid 1px #EBEBEB;
    }

     

    以下行にサイトタイトルを上部階層で表示するための改行を加えます

     

    原本
    #header h2 ,#header .title {
    width: 550px;
    font-size: 36px;
    line-height: 36px;
    position: relative;
    left: 30px;
    top: 50px;
    <% pageTitleFontSize %>
    <% pageTitlePlace %>
    }

     

     

     

     

    変更後
    #header h2 ,#header .title {
    width: 550px;
    font-size: 28px;
    line-height: 50px;
    position: relative;
    left: 20px;
    top: -70px;
    z-index: 10
    <% pageTitleFontSize %>
    <% pageTitlePlace %>

     

    }

     

     

    変更説明
    font-size: 28px; フォントサイズ
    line-height: 50px; タイトル位置

     

    left: 20px;
    top: -70px;

     

    タイトル位置を調整しました
    自己調整する際が数値変更で進めます

     

    ここでサイトタイトルが一番上に表示されるよう階層指定をしています
    z-index: 10

     

    z-index: はサイト階層の重なりを指定します
    5とか6では不正常なので10で指定しました

     

    ここまでは シリウスのスタイルシート原本への改行でした

     

     


     

    次は レスポンシブウェブデザイン構造へ追加行

     

    @mediaへの追加例

     

    赤コードが追加行です

     

    以下のレスポンシブコードは一部例ですので シリウステンプレート全てに
    対応されるわけではありません

     

    あくまで いまあるサイトの記述内に追加する例です

     

     

    @media(max-width:900px){
    #container{
    width: 100%;
    }

     

     

     

    #main {
    width:100%;
    padding:1% 1%;
    }

     

     

     

    #main {
    float: left;
    width: 100%;
    }

     

     

     

    #contents {
    padding-right: 0%;
    padding-left: 0%;
    }

     

     

     

    img{
    max-width: 100%;
    height: 100%;
    width: auto;
      display:block;
    }

     

     

    サイトのいちばん上左に表示される小さなサイトタイトル

    h1 {
    font-weight: normal;
    font-size: 12px;
    color: #666666;
    line-height: 16px;
    background-repeat: no-repeat;
    position: absolute;
    top: 5px;
    padding-right: auto;
    padding-left: auto;
       z-index: 10;
        width: 100%;
    font-family: sans-serif;
    }

     

     

     

    h3{
    max-width: 95%;
    height: 100%;
    width:auto;
    }

     

     

    HTMlに追加行の画像コードを読み込みする記述です
    div#sirius {
    position: relative;
    z-index: 1;
    height: 200px;
    width: 100%;
    }

     

     

     

    #header {
    height: <% headerHeight %>;
    background-image: url(img/header.jpg);
    overflow:hidden;
    background-repeat: no-repeat;
    background-position: left top;
    width:100%;
    border-bottom:solid 1px #EBEBEB;

     

    }

     

     

    ヘッダータイトルをレスポンシブ化した際 一番上に表示するための
    追加行が加えられた記述

     

    #header h2 ,#header .title {
    max-width: 95%;
    width: auto;
    font-size: 25px;
    line-height: 30px;
    position: relative;
    left: 2px;
    top:-70px;
    z-index: 10;
    margin: 2px;
    padding: right;2px;
    <% pageTitleFontSize %>
    <% pageTitlePlace %>
    }

     

     

     

     

    #header h2 a, #header h2 a:visited,#header .title a,#header .title a:visited {
    color: #DE7E14;
    text-decoration: none;
    <%pageTitleColor%>
    }
    #topmenu {
    background-repeat: repeat-x;
    height: 48px;
    line-height: 42px;
    width: 100%;
    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%;
    <% topMenuWidth %>
    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;
    }
    #topmenu span a:hover {
    background-image: url(img/menu_item_hover.jpg);
    background-position: right top;
    color: #FFFFFF;
    }

     

     

    #menu {
    float: left;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    }

     

     

    #searchbox {
    position: absolute;
    top: 33px;
    width: 100%;
    padding-right: 5px;
    padding-left: 5px;
    text-align: right;
    line-height: 20px;
    height: 20px;
    font-size:12px;
    padding-top: 4px;
    }
    }

     

     

    当サイトで公開しているレスポンシブコードへ改行追加行を加えれば
    今回のレスポンシブ化するヘッダー画像の追加作業は完了します

     

     

    追加説明

     

    html内に置いた画像は サイトに初期設定のヘッダー画像 サイトタイトル
    の上に重なるのですべてが覆い隠されます

     

    しかし
    サイトタイトルが下階層ではタイトル表示ができないもので
    z-index: 10;指定で一番上に移動しました

     

    #header h2 ,#header .title {
    max-width: 95%;
    width: auto;
    font-size: 25px;
    line-height: 30px;
    position: relative;
    left: 2px;
    top:-70px;
    z-index: 10;
    margin: 2px;
    padding: right;2px;
    <% pageTitleFontSize %>
    <% pageTitlePlace %>
    }

     


     

    html内に置いたヘッダー画像をレスポンシブ化の際

     

    階層をz-index: 1;指定で下層に移動しました

     

    div#sirius {
    position: relative;
    z-index: 1;
    height: 200px; 
    width: 100%;
    }

     

     

    height: 200px; はデフォルトのヘッダー画像サイズと同じ数値にします
    width: 100%;はレスポンシブ化するための指定

     


     

    z-index: とはサイトの表示階層を指定します

     

    サイトは背景画像や記事 メニュー枠等 すべてが同じ重なり位置に
    あるのではないのですね

     

    一階層ずつにあるコンテンツが重なり一つのサイト構成として
    確認できることになるのです

     

    シリウスもそのような階層の重なりで構成されているのですが
    カスタマイズを加えることでデフォルトの指定を一部ですが
    変更としました

     

    サイト構築のカスタマイズでは使う機会も多い指定値です

     


     

    h1指定行について

     

    今回のカスタマイズでは 通常のヘッダー画像内に表示される
    テキストが指定なしでは 覆い隠され表示されなくなります

     

    サイト左上に表示されるh1タイトルもpc画面では認識できるものの
    未指定では縮小画面では消えてしまいます

     

    h1タイトルは 非表示としている方もおられるので 
    必要か 不要かは判断できませんが 

     

    不要の方は以下記載を削除すれば表示されません

     

    記載は スマートフォンサイズの際 テキストは配列が
    縮小するようレスポンシブ構造としています

     

    h1 {
    font-weight: normal;
    font-size: 12px;
    color: #666666;
    line-height: 16px;
    background-repeat: no-repeat;
    position: absolute;
    top: 5px;
    padding-right: auto;
    padding-left: auto;
       z-index: 10;
        width: 100%;
    font-family: sans-serif;
    }

     


     

     

    以上ですが 以降精度を上げるための事実が判明次第
    追記いたします

     


     

    異なる意見

     

    ここまで来て失礼ながら最終章に異なる意見を追記いたします

     

    画像にタイトルフォントを画像として構成している場合は
    レスポンシブ化すると フォントまで画像なので縮みます

     

    今回は サポートへ ヘッダー画像もレスポンシブ化できないかとの
    ご質問がよせらましたので追記いたした次第ですが

     

    画像をレスポンシブ化すると 丸が卵になるわけで何とも?
    イマイチ!

     

    あちこちの大手サイト見てみると 2種類か3種類のヘッダーを
    用意しておいて 端末のサイズに合わせてレスポンシブせずの
    通常画像を読み込んでいる様子

     

    そちらのほうが良いのではと?

     

    思う次第で!

     

    ある程度大まかに サイズ違いでヘッダー画像を複数用意して
    閲覧される端末の画面サイズに合わせて読み込ませる方法も
    シリウスではカスタマイズが可能です

     

    こちらは 2種類の仕様方法ですが
    シリウスヘッダー画像をレスポンシブウェブでは切り替え表示する方法

     

    こちらは コンテンツ違いですが メディアクエリを解釈すれば 
    とりあえず3種類が可能
    パソコン スマートフォン画面でどちらも記事列を適合表示する指定

     

    細かくメディアクエリを分割すれば4つでも5つでも

     

    でもそんなに必要ないかも?

     

    当サイトは ヘッダー画像はレスポンシブ化指定とせずに通常画像を
    二つ パソコン用と スマートフォン タブレットアイフォンサイズで
    切り替え表示しています

     


     

    例外

     

    ビジネステンプレートみたいなグローバルの下にヘッダーが位置する
    サイトも多くございますね

     

    ビジネステンプレートスタイルでグローバル下にヘッダーもどきを
    表示させることもできます

     

    WPでよく見かけますが

     

     

    ヘッダーは縦を縮小して単色でタイトルのみ

     

    グローバルメニュー下に画像としてサイト幅同様の画像を置くのです
    画像なので綺麗に縮小はしますが

     

    スタイルシートをいじらねばなりません

     

    メニュー位置を下げるとかですね

     

    ご参考でした

     

    では頑張ってください?

     

    ヘッダー画像をレスポンシブウェブデザイン構造で作動させる方法
    SIRIUS シリウスレスポンシブデザインテンプレート公開
    シリウスカスタマイズ

     

     

    ヘッダー画像をレスポンシブウェブ構造で作動させる方法関連解説
    サイトをレスポンシブウェブ化カスタマイズする今事情
    SIRIUS シリウスサイトをレスポンシブウェブ化としてカスタマイズする事は今や避けることは出来ない今事情があります..その訳は
    レスポンシブウェブデザイン設定事情を理解しよう
    シリウスへレスポンシブウェブデザインを設定するカスタマイズは 特有の構造でもあり 充分にCSSを理解する必要がございます 当サイトのレスポンシブウェブ事情をご確認下さい
    レスポンシブウェブデザイン変更前の説明
    SIRIUS シリウスサイトをレスポンシブデザインへ変更前のご注意ごとです デフォルトテンプレートカスタマイズをそのまま変更すると画面縮小の際 障害になるものがありますのでご説明します
    レスポンシブウェブデザインカスタマイズのレイアウト変更値
    シリウスへレスポンシブウェブデザインを導入後 リキッドレイアウト変更値は どの位置でどのように変化するか また レイアウトを複合化する2重構造をcss指定値カスタマイズを含めて複数解説します
    ヘッダー画像をレスポンシブウェブでは切り替え表示する方法
    シリウスのヘッダー画像をレスポンシブウェブサイト構造追加後 スマートフォンで閲覧の際 別画像を表示する手順を」ご案内いたしております
    デフォルト一カラムレスポンシブウェブデザイン設定
    シリウスデフォルト一カラムテンプレートへレスポンシブウェブデザイン構築を追加する事は 2カラム同様簡単に設定ができます
    2カラムテンプレート レスポンシブデザイン設定方法
    SIRIUS シリウス2テンプレートへサイト内構成が 伸縮化変する全てのデバイスに対応可能なレスポンシブウェブデザインを設定追加するカスタマイズ方法のご案内です 作業は2分で終了
    3カラムテンプレート レスポンシブウェブデザイン追加方法
    SIRIUS シリウス3カラムテンプレートへレスポンシブウェブデザイン設定を追加するカスタマイズ手順をご案内しております... 検証済み 面倒はありませんよ
    2カラムのトップとカテゴリー以下のレイアウトを変えたレスポンシブ
    SIRIUS シリウスサイト2カラムをトップページとカテゴリー以下でレイアウトサイズを異なるスタイルで表現する2段階表示のレスポンシブデザインのカスタマイズの解説です
    トップページのみをレイアウト替えした際のカスタマイズ色々
    シリウスのトップページのみをレイアウト替えした際のサイドメニューは 構成次第でブログや大手サイトみたく色々なカスタマイズが表現出来ます
    レスポンシブサイトの見出しメニューを調整するカスタマイズ
    シリウスのレスポンシブウェブデザインサイトでは 機能を確認すると稼働後 見出しメニューにつなぎ目が見られますが 画像フォルダを編集すれば解消することが出来ます
    レスポンシブウェブデザイン公開ではiPhoneサイト設定も必要
    シリウスをレスポンシブウェブデザインとして公開するに至り iPhoneサイト設定も必要ということが判明しましたのでお知らせいたします
    レスポンシブウェブサイトにPC SP画面切り替えスイッチは不要
    SIRIUS シリウスレスポンシブウェブサイトにPC SP画面切り替えスイッチは必要か?ですが 今時代のスマートフォンではフィンガータッチで適正サイズに調整できるため不要と思われます
    レスポンシブウェブサイトへアドセンスを表示する際の注意ごと
    シリウスサイトをレスポンシブウェブデザインへと機能カスタマイズを追加した際 googleアドセンスをサイドのメニュー位置に置いたままではアドセンスのポリシーガイドラインに違反してしまうのです
    レスポンシブ構造ではサイドバーのアドセンス配置は処理が必要
    シリウスへのレスポンシブ構造追加ではサイドバーのアドセンス配置は スマホサイズでは広告が巻末に押しやられポリシー違反となります 対処法は指定処理が必要...詳細はサイトで
    レスポンシブウェブデザイン構造では画像の数値指定を必ずしましょう
    シリウスへレスポンシブウェブデザイン構造を設定したなら掲載する画像の事情により正常に表示されない場合があります 事情解説対処はこちらで.....
    パソコン スマートフォン画面でどちらも記事列を適合表示する指定
    シリウスレスポンシブ構造の記事列はパソコンと横サイズが異なるためスマートサイズだと自動で折り返されてしまいますが どちらも同様の記事列で表示することもできますが?  詳細はこちらで...
    iPhone ipadでサイト背景を固定化する仕様設定
    シリウスサイトの背景を固定化している場合でレスポンシブ化された際 iPhone ipadではサイト背景がスクロールしてしまう障害が発生します 対処法はサイトで......
    サイドメニューを押しやらない固定するレスポンシブウェブレイアウト
    シリウスへのデフォルトレスポンシブウェブレイアウトでは サイドメニューが後方へ押しやられますが 位置を動かさない または メニューのサイズを固定可変がCSS指定により可能となります
    レスポンシブウェブデザイン構造でのフォントサイズ指定
    シリウスレスポンシブウェブデザイン構造でのフォントサイズは シリウス機能で16pxを指定していた場合 iPhoneサイトでは自動で縮小されてしまいます 見やすくする対応は?
    レスポンシブウェブデザインに適合する画像サイズ
    シリウスレスポンシブウェブデザインではスマートフォン パソコンの各画面では 掲載画像がどのように変化するのか?各端末に適合するサイズは?いろんな解釈がありますね
    大きな縦サイズヘッダー画像はレスポンシブサイトでは読み込みが遅い
    シリウスレスポンシブサイトでは大きな縦画像サイズのヘッダー画像を設置している場合 スマートフォンでは出現スピードの読み込みが遅くなります
    端末により記事コンテンツを切り替え表示する
    シリウスサイトをスマートフォンサイトでは記事列を横幅内に収めて または多少のコンテンツを替えて パソコンサイトと異なるコンテンツに切り替えて表示するカスタマイズ方法の詳細
    スマートフォン PCコンテンツ切り替え時のシリウス機能操作
    SIRIUS シリウススマホ PCデバイスでの切り替えコンテンツについて 初期指定の反映スタイル 付け加えたカスタマイズ説明による反映確認の詳細です
    スマートフォン パソコンサイトで画像を切り替え表示指定する
    当サイトのシリウスレスポンシブウェブデザイン構造ではスマートフォン パソコンサイト画面で画像の表示非表示の切り替え または異なる画像を表示することが指定出来ます
    スマートフォンサイトではスライダー画像は必要か?
    SIRIUS シリウスパソコンサイトでは綺麗に表示されるスライダー画像ですがスマートフォン閲覧サイトでは表示が必要ののでしょうか?
    トップページ全体をワイドヘッダー画像で表示したい?の勘違い
    SIRIUS シリウステンプレートへトップページ全体をワイドヘッダー画像で表示したい?といわれる方がおりますが ウェブ初期時の勘違い?ではないでしょうか とりあえずの講釈はこちらで....
    レスポンシブウェブ構造でのワイドPC画面対応背景画像設定方法
    シリウスのレスポンシブサイトに編集された背景画像を配置する際は ワイドサイズのウルトラPC画面でも 自動拡張されるようclass指定で設定を追加します
    スマートフォンでは、固定のグローバルは出現させない
    SIRIUS シリウスサイトでグローバルナビゲーションのスクロール固定化を指定している場合、スマホ閲覧の際、邪魔になるので出現しないよう指示しましょう
    iphone設定からレスポンシブデザインへ移行する際の注意事
    SIRIUS シリウスのiphone設定からレスポンシブデザインへ移行する際は、指定の解除およびサーバーファイルのiphone削除が必要です
    ヘッダー画像のレスポンシブウェブデザイン構造、追加記載方法
    SIRIUS シリウスレスポンシブ導入テンプレートでは、ヘッダー画像を縮小させる、またはスマートフォンサイトでは小さな画像に切り替えるとかの考え方も合わせ含めた対処方法

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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