• MENU ●●●●
  • SIRIUS シリウスレスポンシブウェブデザインテンプレート設定


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

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

     スポンサーリンク

    シリウスへレスポンシブ構造を組み込むカスタマイズ情報まとめ

    当解説は、シリウスで従来より配布される、テンプレートをノンレスポンシブへ
    構造改変する詳細を記載しておりまして、2018 7月より追加されたニュー
    テンプレートのカスタマイズではございません...

     

    ニューテンプレートは、基本レスポンシブ構造なのでいじる必要が無い..です。

     

    ですので、従来バージョンをお使いする方だけの対応...

     


     

    出来る限りは、多くのデバイスに自動対応する可変レイアウトが
    レスポンシブウェブデザインを取り入れたサイトです

     

    PC画面で見るサイトレイアウトが、閲覧する状況のおいて

     

    スマートフォンとかアイフォンとかでは、縮小画面にサイトレイアウトが
    自動であわされる...です

     

    記事行が折り返される

     

    サイドメニューが、巻末に移動

     

    配置する画像も、自動で小さくなる...とまあ、こんな感じ

     

     

    まれに見かける、スマートフォンの横サイズに合わせた PCサイトも
    ございますが、PCで見るとなんやこの狭いサイトは?ですね

     

    そんなサイトわざわざ作らずとも今あるサイトにレスポンシブ構造を取り入れれば
    PCでは通常サイト、スマートフォンでは、適合レイアウトサイズに変化しますので
    労力を省くことができます

     

    スマートフォンの小さい画面でもサイトを自動調整して表示させるというもの...

     

     

     

    一つのページで複数の違いのコンテンツを端末により切り替える手段

     

    各種指定可変テンプレート設定

     

    レスポンシブウェブのサイトとして公開するならではのあらゆる必須情報を
    常に発信しております

     

    念のため
    ここでいうレスポンシブウェブデザインテンプレートは、シリウスで
    2015 4月より無料配布されているレスポンシブテンプレートを
    指していることではありません

     

    ノンレスポンシブとして以前より備えあるテンプレートでの対応です

     

     

    現行標準装備のレスポンシブテンプレートのカスタマイズは
    こちらになります
    シリウスのレスポンシブテンプレート専用カスタマイズサイト

     

     

     

    現在のお知らせ

     

    シリウスへレスポンシブウェブデザインを組み込むことは容易に
    できましたが

     

    精度を高めるにつれ あれこれと知るにつれ深みにはまりました

     

    レスポンシブウェブデザインとは 簡単なようで奥が深すぎます

     

    現時点 気が付いての修正や追加も多くございますが 
    説明するにも混乱状態で全てを書ききれない状態です

     

    そんな事情で
    私の説明文が何言ってんだか意味不明と感じられましたら
    サポートよりご指摘ください

     

     

     

     

    永く運営している大事なシリウスサイトをそのままの形で
    スタイル違いのテンプレートなど入れ替えることもなく 
    当サイトで用意した記述コードをHTML スタイルシートへ張り付ければ
    モバイルデバイスに適合するレスポンシブウェブデザイン構造のサイトへと
    設定が完了致します

     

    でも レスポンシブウェブデザイン構造サイトとはそれだけではないのです

     

    踏み込めば次の難題に?

     

    ぶち当たるのですね

     

    そんな障害や こんなことできないのかなとか?

     

    いろんなこと書いてますのでご参考に!

     

    いや お役立てください

     


     

    シリウス特典でも、2カラム 1カラムのレスポンシブテンプレートは
    配布されております

     

    当該解説が理解不能と判断された場合、販売元のテンプレートで
    あれば、改行せずともそのままご利用できますので
    そちらのご使用をお勧めします

     


     

    各カスタマイズは 巻末以降のエントリーメニューで
    ご確認ください

     

    responsive web design
    レスポンシブウェブデザインへとバージョンアップカスタマイズ

     

    スポンサーリンク

     

     

    当サイトでご案内していますのは 独自の構築法であり導入に不安を
    感じられる方もおられるでしょうね

     

    けれど
    当サイトはシリウスで用意されているiPhoneサイト設定は行わず
    レスポンシブウェブ構築サイトとしておりますが

     

    Googleの モバイル フレンドリー テストでは

     

    問題ありません このページはモバイル フレンドリーです

     

    と 判断されています

     

    テスト表示される画面は 当サイトがレスポンシブ化されたスタイルで
    ....です!

     

     

     

    レスポンシブウェブ構造のご案内は 逐一精度を上げておりまして 
    モバイル フレンドリーテストで確認後 追加や指定の調整など

     

    2015 0530です

     

    モバイル フレンドリー テストはこちらでお試しください
    モバイル フレンドリー テスト

     


     

    当サイトの解説に従いレスポンシブウェブデザインを導入すれば
    レスポンシブ化の切り替わりの表示も即時確認いただけます

     


     

    レスポンシブデザインに対応ということはあらゆるデバイスからストレスなく
    情報を求められる事でGoogleが1番に推奨しているウェブサイトの構築法です

     

    今後の端末増加の流れを見ればレスポンシブ化対応は必然と成り得ることで
    全てのサイトを主流に適合させましょう....等々

     

    ウェブ上では レスポンシブデザインであることが必須条件みたいに
    宣伝されてはおりますね

     

    シリウスにはiPhone機能が備えてあるが スマホサイズでのみの反映

     

    レスポンシブデザインであればすべてのデバイスに順応する可変サイズ

     

    実際はレスポンシブデザイン構築のほうが優れて入る様な....?

     

     

    しかし ここでお断りがございます

     

    レスポンシブウェブデザイン構造を追加したとしても すべてのデバイス

     

    Apple -iPhone  iPad Tablets などは複数の画面サイズが
    ございますね

     

    しかし
    その全てにぴしゃりと適合させるのは それらに全て合うようなサイト構成を
    しなければならないのです

     

    大手の企業なら総合力で できるかもしれませんが

     

    この作業は大変です

     

    私もやりたくありません

     

    全てに合わせなければ検索上位にランクインされるという条件も
    有りませんので ある程度は大まかに考えましょう

     

    当サイトで公開しているレスポンシブウェブデザイン構造を反映させる
    レスポンシブコードは パソコン画面は未指定で
    スマートフォンでは確認されます

     

    とりあえずは二つのデバイス表示ですが 追加指定を加えることで

     

    iPad Tabletsサイズでも 縦横で閲覧サイズが変わるに対応して
    3つでも 4つでも表示法を変えられます

     

    この手順は 明日までお待ちください
    詳細を追記いたします

     


     

    パソコン上で このサイトはレスポンシブウェブデザインかを確認するには
    画面のサイズを狭めてみます
    縮小すればレスポンシブ化サイトであり 縮小しても変化なしは
    未対応サイトです

     

     

    ネット上の個人判断の見解などに惑わされてはおりませんが
    私は どちら有利かは判断できるレベルに到達しているわけでもなく
    レスポンシブデザインを追加した事実でのみ検証結果をお伝えします

     

     

    デフォルトテンプレートで実施

     

    初期段階は 一カラム 右2カラムでしたが 

     

    3カラムでのスポンシブデザインも追加いたしました

     

    シリウス機能のiPhoneサイトを設定をしているサイトへ

     

    ipad画面にでも合うようなサイトサイズにできないものかと

     

    さらにレスポンシブデザイン構築を追加いたしました

     

    ipadの画面サイズでレスポンシブ指定をしたのです

     

     

    閲覧上では スマホサイズですとシリウス機能のiPhone設定で
    指定した画面構成で表示されます

     

    ipad画面7.9インチでは レスポンシブデザインでの指定画面が
    表示されました

     

     

    ipadの画面は スマホ画面より大きいためサイト内の並び順は
    異なりますが レスポンシブ縮小で別段違和感は感じられない程度

     

    私はこのスタイルでもよいと判断しています

     

    なぜなら スマホ画面でもレスポンシブとは異なるものの
    シリウス機能のiPhone設定画面でも充分綺麗な構成ですからね

     

    しかしながら シリウス機能のiPhone設定のみでの指定では
    ipad画面7.9インチサイズには パソコンサイズが表示されてしまいます
    結果 認識しずらいとなる事情もございます

     


     

     

    以前は
    シリウスサイトは携帯サイト iPhoneスマホサイトと同時設定が可能で
    モバイルへの対応は出来ることでレスポンシブ化までは
    取り入れる必要もなかろうと理解していたのです....が.....

     

    サポートフォーラムへ

     

    パソコン上で画像を狭めても サイト幅が狭まらない?

     

    というとタブレットではどのような表示になるのでしょう?と
    ご質問がありまして... はてなと?

     

    質問者様ご指摘受け いくつかのサイトをパソコン上で見てますと 
    サイト画面を狭めると それなりのサイトもしかりですが画像
    記事列も変化し小さくなる....
    対応のサイトがあるのですね

     

    未対応サイトも多くありました

     

     

    シリウスでiPhoneサイト設定しても それはスマホモバイルでの
    設定で多くのデバイスに通じた自動サイズ調整とまでの機能では
    無いのです

     

    シリウスの機能iPhoneサイト設定した際は デバイスが(max640pxまでと
    なっております

     

    以下参考記載 シリウスの機能iPhoneサイト設定振り分けコード
    <link rel="alternate" media="only screen and (max-width: 640px)" href="iPhoneサイトのページURL" />

     

     

    検証方法

     

    一つはパソコンの画面上からの確認

     

    自分サイトをiPhoneサイト設定にしてサイトを確認し 画面を
    マウス操作で狭めてみましょう

     

    狭めても 画面は狭まりますが
    サイトサイズはそのままですので 認識画面が狭まリ 閲覧者は
    隠れた記事を探すのが面倒になる

     

     

    レスポンシブデザインに切り替えますと
    画面を狭めれば サイトも狭まるので 閲覧者はストレスなく
    記事を情報を確認できる

     

     

    以上は PCサイトをレスポンシブデザインへとカスタマイズした際の
    ネット上で言われている一般的な確認方です

     

     

    しかしながら パソコン上の画像をipad画面サイズに狭めたところで
    または
    シリウス機能 システム設定 シリウスプレビュー機能での画面
    iPhoneサイト画面で ipad画面サイズでの閲覧を確認したところで

     

    更には ネット上でのスマホ ipad画面確認サービスで
    自分サイトが あらゆるデバイスでどのように表示されているかを
    確認しても 実際の表示状態は70%ほどしか確認できません

     

    二つ目の確認方法は?

     

    正確に自分サイトが ipad画面サイズでどのように表示されているかを
    確認するには
    ipadを手に入れるしかありません

     

    私も パソコン上での表示に不安がありやむなくipadを購入しましたが

     

    やはり パソコンでは正確に表示されているようでも ipadで確認すれば
    異なるずれはありますね

     

    正確な構築をするにはきちんとした確認手段も必要ということです

     

     

    そんなわけで シリウスサイトをレスポンシブデザイン切り換えに挑戦した
    次第で 何とか完ぺきではないですがとりあえずは出来ました

     

    作動精度は 日々向上に勤めておりますので後々ご確認ください

     


     

    シリウスiPhoneサイト設定での表示構成なら カテゴリーメニューは
    レスポンシブ同様サイト下部に一覧表示されますがデザインの構成に
    違いがみられます

     

    iPhoneサイト設定をしている場合は
    スマホサイトからの閲覧時は シリウスiPhoneサイト設定画面構成が
    優先されますが

     

    非設定の場合は レスポンシブデザインでスマホサイズに合わせ
    表示されます

     

    どちらの表示が見やすいかは スマホサイトからの閲覧で
    自己判断ください 

     

    当サイトは 初期時 iPhoneサイト設定をしており スマホサイトで
    閲覧する際は シリウスデフォルトのスマホ構成でしたが
    一度 iPhone設定をは省きレスポンシブスタイルで確認をしたところ
    見やすさに優れていること 更にカスタマイズ性を比較判断 
    以降iPhone設定は不採用としております

     

     

     

    当サイト例

     

    当サイトは サイトメニューとフリースペースで右に2列のサイドバーを
    表示しておりまして スタイルシート記載はデフォルト3カラムとは
    やや異なりやや面倒で 構築法によっては意味不明に至ることも
    あり 解説を追加することはご遠慮します

     

     

    リバースメニューで レスポンシブデザインを実行したい方は
    サポートより リバースメニュー記載を含めてスタイルシート記載を
    お知らせいただければ改行CSSをご案内します

     


     

    初めは当サイトに取り付けようとあれこれ試行錯誤

     

    サイト幅は狭まるものの 記事カラムが作動不能

     

    後で解ったことですが 当サイトみたいにあれこれ弄り回していると
    レスポンシブという作動にいまいち障害がでます

     

    そんなこと知らず 作動不能状態が延々と

     

    然し 別なノーマルサイトで施行すると 簡単に正常作動が
    確認できました

     

    複数のノーマルサイトで検証しましたが ま 何とかですが
    作動します

     

    作業は至って簡単です

     

    スタイルシートに用意した記述をコピーして完了

     

    一分もかからず確認できますが  サイトが狭まれば 何かがサイト内で
    変化しますのでその説明も含めてまいります

     

    以下メニューでお進みください

     

    SIRIUS シリウスレスポンシブウェブデザインテンプレート設定記事一覧

    サイトをレスポンシブウェブ化カスタマイズする今事情

    シリウスサイトのカスタマイズとして レスポンシブウェブを組み込む事は今や避けられないウェブサイトの進行形ですねあの天下のNHKでさえ ニュース内でネット関連のサービスを案内する際 パソコン画面ではなく スマートフォン画面をTV画面に映し出す範疇が9割です民放でも同様の傾向メディアを必要とする事情は増...

    ≫続きを読む

     

    レスポンシブウェブデザイン設定事情を理解しよう

    レスポンシブウェブデザインについては ネット上でも多くの情報が散乱?しておりますねでも シリウスカスタマイズとして 当てはまると思われる解説サイトは僅かですそんな中からやっと見つけたメディアクエリレスポンシブウェブデザイン記述コードでも レスポンシブウェブデザイン構造を組み込み以降作動はするがなんか...

    ≫続きを読む

     

    レスポンシブウェブデザイン変更前の説明

    デフォルトテンプレートをレスポンシブデザインにカスタマイズする際変更以前の注意として最低限 PC画面での表示法をかえねばならない事情があります事情とは 画面が縮小するに至り邪魔になるものをいいますここで大変申し訳ありませんが 今現在すべての障害を確認するにいたっている状況ではなく 多くを語れないでお...

    ≫続きを読む

     

    レスポンシブウェブデザインカスタマイズのレイアウト変更値

    シリウスでのレスポンシブウェブデザイン構造追加によるカスタマイズを実行する際リキッドレイアウトが発動する指定値はどの地点か?デバイスにより指定値でどのように表示されるか?また レスポンシブウェブデザイン構造を2重配置で複数のデバイスに対応表示する手順以上を説明します各端末により レスポンシブ化はメデ...

    ≫続きを読む

     

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

    シリウスのデフォルトhtmlテンプレートに レスポンシブウェブ構造は組み込まれておりませんが @media記述を加えることでレスポンシブ化サイトとしての機能表示が可能となりますしかし 当サイトおよびネット上で得られるレスポンシブウェブデザイン構造記述コードではシリウステンプレートのヘッダー画像のみが...

    ≫続きを読む

     

    ヘッダー画像をレスポンシブウェブでは切り替え表示する方法

    PC画面では認識しやすい 適合サイズのヘッダー画像でもスマートフォン用のヘッダーを配備していないとPC用の画像がそのまま反映されてしまいますシリウスサイトにレスポンシブウェブデザイン構造を追加後スマートフォンで閲覧の際は PC タブレット画面以下の縮小サイズですね画像がデザイン もしくは模様無しの単...

    ≫続きを読む

     

    デフォルト一カラムレスポンシブウェブデザイン設定

    シリウス一カラムサイトをレスポンシブウェブデザインへと構築を追加する事は 当該ページで用意している記述コードをhtmlテンプレート内に組み込めば容易にレスポンシブウェブサイトとしてネット上に公開が可能となりますしかし 組み込み追加は容易であるものの 一カラムであるが故のサイト構成に注意すべき点がござ...

    ≫続きを読む

     

    2カラムテンプレート レスポンシブデザイン設定方法

    当ページ来られた読者様へここでの説明は、シリウスのノンレスポンシブテンプレートへこ構造を追加するというもので、販売元がレスポンシブテンプレートを追加以前に記載したもので性能は劣りますですので、2カラム使用でしたら販売元のレスポンシブテンプレートをお使いください当サイトの説明は、単なる記述のお勉強程度...

    ≫続きを読む

     

    3カラムテンプレート レスポンシブウェブデザイン追加方法

    シリウス3カラムテンプレートのレスポンシブ機能追加が完了致しました当初 スマホ閲覧が主流となる現状で 今後は1.2カラムがメインだろうとのネット情報に影響され3カラムは不要だろうと判断しておりましたがECサイトみたいな大手サイトでは 3カラムでメニューてんこ盛りの賑やかサイトでガンガン攻め込んでいる...

    ≫続きを読む

     

    2カラムのトップとカテゴリー以下のレイアウトを変えたレスポンシブ

    シリウスは通常トップページと以下の階層ではサイトレイアウトは2カラム 3カラムではサイトメニュー フリースペースメニューは左右交互に入れ替え 位置替えはできますが基本構成は同じですねまた エントリーページでも個別に一カラムは指定できるものの操作機能で指定できるのはここまでとなます一つのサイトレイアウ...

    ≫続きを読む

     

    トップページのみをレイアウト替えした際のカスタマイズ色々

    シリウスの2カラムサイドメニュー構成を デフォルトよりカスタマイズして横幅を拡張した際は 表現方法の範囲が大きくなりますデフォルトでも充分に解り易く良いスタイルですが それだけでは不満とするならブログみたいな配置へカスタマイズすることが簡単にできるのですね対応は デフォルト2カラムですすめますトップ...

    ≫続きを読む

     

    レスポンシブサイトの見出しメニューを調整するカスタマイズ

    当サイトで公開しておりますレスポンシブウェブデザイン構造を組み込んだ際 稼働後スマートフォンでサイトを確認しますとサイドに置く見出しメニューはサイトの巻末へ移動しますその際 見出しサイズがレイアウトサイズによりつなぎ目が画像に現れています原因としてシリウスのデフォルトでは見出しメニューは CSS指定...

    ≫続きを読む

     

    レスポンシブウェブデザイン公開ではiPhoneサイト設定も必要

    シリウス機能にはiPhoneサイト設定機能がございますがシリウスにレスポンシブウェブデザイン構造を追加したならもう必要ないとiPhoneサイト設定操作画面で同時公開の指定を外しますねそこまでは良いのですがアップロード画面で確認できるPC側とローカルサーバーのiPhoneファイルはそのまま残しておきま...

    ≫続きを読む

     

    レスポンシブウェブサイトにPC SP画面切り替えスイッチは不要

    当サイトでカスタマイズ公開している シリウスサイトに追加するレスポンシブウェブデザイン情報に付随してスマホからの閲覧の際 PC画面を閲覧できるよう 切り替えは出来ないものか?という疑問を お持ちの方からお質問のお便りが寄せられますシリウスのデフォルトで用意されている機能で iPhoneサイトを設定す...

    ≫続きを読む

     

    レスポンシブウェブサイトへアドセンスを表示する際の注意ごと

    シリウス 2カラム 3カラム対応での広告配置グーグルアドセンの広告配置マニュアルでの説明では良い広告の配置説明として最初の画面内で 3カラムの説明がありました記事の一番上 横置き右サイドバー内配置 縦置き左サイドバー内は位置 縦置きその他記事内途中ビックバナーしかしながら googleさんの広告配置...

    ≫続きを読む

     

    レスポンシブ構造ではサイドバーのアドセンス配置は指定処理が必要

    SIRIUS シリウス2カラム、3カラムをレスポンシブ構造のウェブデザインテンプレートへとカスタマイズした際....サイドバー(左右いずれか)の位置にアドセンス広告を配置するレイアウトを指します...モバイル、スマートフォンの画面サイズではサイドスペースがページ巻末へフリースペースもろとも押しやられ...

    ≫続きを読む

     

    レスポンシブウェブデザイン構造では画像の数値指定を必ずしましょう

    シリウスにレスポンシブウェブデザイン構造を組み込む場合は閲覧端末により サイトの掲載画像がぼやける 拡大表示されることへの対策を施す事情がありますシリウスに限ることかもしれませんが もしくはソフト対応のウェブ制作機能windowsには 画像編集機能 sinippngツールがございますね無償や自己制作...

    ≫続きを読む

     

    パソコン スマートフォン画面でどちらも記事列を適合表示する指定

    パソコンサイトでは整えられた記事の並びでもレスポンシブ化されたサイトのレイアウトでは記事列に違いが生じますサイドメニューののレイアウト移動は構成上仕方ないものとしても記事列は出来る限りパソコンサイト同様に配列したいものですねでは スマートフォンでもパソコン画面と同様に記事配列を表示できるか? をあれ...

    ≫続きを読む

     

    iPhone ipadでサイト背景を固定化する仕様設定

    シリウスサイトで背景に画像を置いて さらにスクロールしない背景の固定化を設定しておられる環境もあるでしょうしかし iPhone ipadのios端末では 背景が固定されていない未反映の状態となっています通常CSSで サイトで背景の固定化を設定するには スタイルシート内CSSbody内に 背景固定を指...

    ≫続きを読む

     

    サイドメニューを押しやらない固定するレスポンシブウェブレイアウト

    デフォルトのレスポンシブ構造では スマートフォンサイズもしくはipadサイズで閲覧の際は メディアクエリの指定値に当てはまればサイドのメニューが後方へ押しやられてしまいますがCSS指定を加えればその位置に固定することが出来ますサイトのサイドメニュー動かさないということですねそのレイアウトは 大手のサ...

    ≫続きを読む

     

    レスポンシブウェブデザイン構造でのフォントサイズ指定

    シリウスで反映されるレスポンシブウェブデザイン構造は 操作画面サイトオプションで16pxを指定していた場合iPhoneサイトで確認してみれば 自動縮小で小さなフォントサイズで 人によりけりですが読みずらいとなりますシリウス機能では iPhoneサイト設定もできますがそちらでもデフォルトでは11pxに...

    ≫続きを読む

     

    レスポンシブウェブデザインに適合する画像サイズ

    パソコン画面では見やすいサイズの画像は レスポンシブウェブデザインでは 縮小されますサイト内の画像が複数で みな同一サイズならスマートフォンサイズでも綺麗に配置されるでしょうけれど ならば一番良いサイズは?となりますね ネット上にはいろんな説がございますが出来る限りは 記事横カラム幅 の90%ほどで...

    ≫続きを読む

     

    大きな縦サイズヘッダー画像はレスポンシブサイトでは読み込みが遅い

    シリウスレスポンシブウェブサイトで 大きな縦サイズのヘッダー画像通常は240px程度かと記憶しておりますが 400pxとか500pxで配置している場合 スマートフォンでサイト確認致しますと ヘッダーが表示されないいったんスクロールして戻ると表示されているという状況がみられますスポンサーリンクパソコン...

    ≫続きを読む

     

    端末により記事コンテンツを切り替え表示する

    メディアクエリを組み込むレスポンシブサイトでは パソコンでは表示するコンテンツをスマートフォンやタブレットサイズの端末では 非表示とするまたは パソコンサイトとコンテンツは同類でも スマートフォンサイズの端末では別な記事を表示させるということもできます大手サイトでもそんなサイトありますねパソコンと ...

    ≫続きを読む

     

    スマートフォン PCコンテンツ切り替え時のシリウス機能操作

    シリウスのサイト内ページで スマートフォン パソコンサイトで記事コンテンツを切り換え表示する手順を関連ページでご案内しておりますが 些細な作業の違いで 反映が異なる結果となりますのでその点を説明いたしますスマートフォン パソコンサイトで記事コンテンツを切り替え表示する際のターゲット 目標物を要素で囲...

    ≫続きを読む

     

    スマートフォン パソコンサイトで画像を切り替え表示指定する

    シリウスに取り入れたレスポンシブ化構造では パソコンでは表示する画像でも スマートフォンでは非表示とするまた 非表示とした配置箇所へ異なる画像を表示することもCSS指定により可能ですパソコンでは大きな画像でもスマートフォンではコンテンツは同じながらもデザインを替えた異なる画像の表示同一画像が綺麗に縦...

    ≫続きを読む

     

    スマートフォンサイトではスライダー画像は必要か?

    シリウスでカスタマイズ導入したスライダー画像は手違いでもなければ、パソコンサイトで反映が確認される..と理解してお話を進めます。さて、スマートフォンで動くスライダー画像とは如何なものでしょうか?タブレットクラスなら、なんら違和感もないことでしょうけれど...画面サイズが小さいスマートフォンでは然程、...

    ≫続きを読む

     

    トップページ全体をワイドヘッダー画像で表示したい?の勘違い

    すみませ~ん下へスクロールして下さいここからスタート?スポンサーリンクトップページをパソコンサイズいっぱいのワイドヘッダーで表示したいという方がおられますで その画像の中に少々のメニューやらを配置で スクロールすると 記事項目に突入するそこからが コンテンツのスタート,....のようですで 当ページ...

    ≫続きを読む

     

    レスポンシブウェブ構造でのワイドPC画面対応背景画像設定方法

    今回のシリウスのレスポンシブカスタマイズは サイト背景を画像として設定している場合です背景をシリウス機能で単色カラーで指定している場合または スーパーワイド ウルトラPCサイズに匹敵する大きな画像をファイルに置いている場合は なんら問題ありません問題があるのは 背景画像をペイイン等で編集したものもし...

    ≫続きを読む

     

    スマートフォンでは、固定のグローバルは出現させない

    シリウスに組み込んだレスポンシブ構造でスマートフォンからの閲覧の際、視覚認識の邪魔になるのが、グローバルナビゲーションのスクロール固定化を設定している場合ですグローバルナビゲーションのスクロール固定化は、レスポンシブ構造で閲覧の際、横サイズは縮小されるのすが、位置が固定しているので認識障害小さな画面...

    ≫続きを読む

     

    iphone設定からレスポンシブデザインへ移行する際の注意事

    シリウスサイトをレスポンシブデザインへ移行するサイトも昨今のウェブ事情でしょうか、多く見られますね..しかし、以前にスマ―トフォン対応のiphone設定をしていた場合、指定のチェックを外せばレスポンシブ化が確認されますが、それだけではサイトファイルに置く外部導入scriptへの障害やスマートフォンで...

    ≫続きを読む

     

    ヘッダー画像のレスポンシブウェブデザイン構造、追加記載方法

    シリウスのデフォルトhtmlテンプレートに レスポンシブウェブ構造は組み込まれておりませんが、全体的な範囲では @media記述を加えることでレスポンシブ化サイトとしての機能表示が可能となりますしかし、当サイトおよびネット上で得られるレスポンシブウェブデザインの構造、記述コードではシリウステンプレー...

    ≫続きを読む

     

     

     

     

    SIRIUS シリウスレスポンシブデザインテンプレート公開
    シリウスカスタマイズ

     

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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