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

Sirius.customize

TOP

トップページ

質問

シリウスカスタマイズサポート

ご案内

サイトマップ

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

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

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

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

ま、過去のカスタマイズ手法の一つで時代の流れにかき消されてしまう..
そんな過去記事なので...多分ですが、シリウス以外のHTMLテンプレート
ぐらいにしかお役立ちできない...ともご理解ください...
...

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

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

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

記事行が折り返される

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

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

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

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

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

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

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

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

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

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

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

現在のお知らせ

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

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

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

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

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

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

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

踏み込めば次の難題に？

ぶち当たるのですね

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

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

いや　お役立てください

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

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

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

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

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

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

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

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

と　判断されています

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

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

2015　0530です

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

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

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

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

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

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

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

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

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

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

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

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

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

この作業は大変です

私もやりたくありません

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

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

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

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

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

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

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

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

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

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画面確認サービスで
自分サイトが　あらゆるデバイスでどのように表示されているかを
確認しても　実際の表示状態は７０％ほどしか確認できません

二つ目の確認方法は？

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

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

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

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

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

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

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

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

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

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

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

当サイト例

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

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

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

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

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

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

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

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

作業は至って簡単です

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

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

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

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

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

スポンサー広告

レスポンシブオンリー