TOP

シリウスサイト レスポンシブウェブデザイン変更前の注意ごと

デフォルトテンプレートをレスポンシブデザインにカスタマイズする際

 

変更以前の注意として最低限 PC画面での表示法をかえねばならない
事情があります

 

事情とは 画面が縮小するに至り邪魔になるものをいいます

 

ここで大変申し訳ありませんが 今現在すべての障害を確認するに
いたっている状況ではなく 多くを語れないでおります

 

今回の障害について説明しますが 日々向上に
努めておりますので 確認でき次第情報は追記いたしますので
ご了承ください

 

 


 

 

レスポンシブウェブとiPhone機能の関連性 ここ大事

 

レスポンシブウェブデザインとしてサイトを公開するに至り
サーバー内にiPhoneファイルが必要であるという事実が判明したので
お知らせします

 

こちらで詳細をご確認ください
レスポンシブウェブデザイン公開にはではiPhone機能設定も必要

 

サイドメニューを押しやらないレイアウト構造追加

 

サイドメニューをサイト下方へ押しやらない 固定の位置で
表示する指定方法を追加してます

 

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

 

ヘッダー画像が伸縮しない

 

シリウス機能との相性の影響か?レスポンシブ化しても
ヘッダー画像のみが伸縮はしませんが 無理くりのカスタマイズで
伸縮は とりあえずですが可能となりました

 

面倒な作業がございますので無理にはお勧めしませんが
以下リンク先でご確認ください

 

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

 

<h3>タグは縮小されない</h3>

 

こちらは解決いたしました

 

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

 

上記コードを追加することで正常に長いテキストでも折返しされます

 

ここは過去記事になります
<h3>タグは縮小されない</h3>という現状です
長々のテキストでは折り返しされません

 

シリウス操作画面での記事タイトル1へ記載したテキストは
縮小されます

 

記事タイトル1は <h2>タグ</h2>ですが
ここは名がテキストでも縮小に従い折り返しされます

 

今後<h3>対応するよう努めますが

 

記事内で<h3>タグをご使用する際は

 

<h3>を<h2> へと改行するか
ショートテキストへ変更ください

 

ここまで過去記事になります
ご迷惑おかけいたしました

 

 

h4 見出し背景のつなぎ目

 

サイトメニュー フリースペースで表示される最上部の見出し背景は
レスポンシブ表示された際は サイト下部で横幅が延長され
表示されることで デフォルトの背景画像では横幅が足らず
繰り返し 連写表示されますが つなぎ目が見えてしまうのです

 

対処法は テンプレートフォルダのing画像ファイルの
h4画像をサイト幅ほどで作成し直してください

 

 

サイドメニュー背景の障害

 

レスポンシブでサイトが狭まるにつれて サイドメニューのグレー背景が
中央寄りしてきて邪魔になります

 

 

このように中央寄りして 閲覧の障害になります

 

対処法は テンプレートフォルダ内 ing画像から
contents.ファイル left right 
どちらか表示させているファイルを削除すれば 表示されなくなります

 

ですが これでよいと判断する方もおられますので
まずは作動を確認して見てからの判断と願います

 

 

見出しの文字が一部隠れる

 

h3見出しとテキストフォントの折り返し地点で
閲覧デバイスにより 一つの文字が隠れてしまう

 

各 レスポンシブウェブコードの

 

以下見出し調整記述では幅を100%;に指定しておりましたので
一部サイトで 一つの文字がサイドから見出し内に移動できず
隠れてしまいました

 

過去記載
h3{
height: 100%;
width: 100%;
}

 

新たな調整記述に切り替えております
右サイドにわずかなスペースを空けることで 折り返し文字の
左移動が速くなり 文字隠れは解消しました

 

改行記述

 

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

 

 


 

Windows 10でのプレビュー画面での背景画像不適合

 

サイトの背景をデフォルト以外の画像で設定している場合
Windows 10でのプレビュー機能では 画像背景全体がずれる 
範囲が狭められるという現象が見られますが プレビューに限る表示です
アップ後は正常に反映されます

 


 

 

 

記事画像1挿入は サイズ調整されない

 

シリウス操作画面に記事画像を挿入できるボックスがありますが
ここで挿入した画像は指定どころが異なるため縮小されません

 

ここですね

 

画像を並べたページで一つだけ縮小されないので確認しましたら
そんな理由でした

 

ページ上部に画像を置く際は 記事カラム上部に配置すればOK

 

ユーチュー動画のサイズについて

 

ユーチューブ動画は 閲覧サイズを狭めればスマホで閲覧可能な
サイズまで縮小しますが 携帯サイズまでは縮小しません

 

スポンサーリンク

 

 

フッターリンクの伸縮

 

デフォルトの白背景の際は フッターフォントが白なので
フッター画像下に狭められて移動するフォントが下段に
ずれ込み表示されますが 同色して認識できません

 

背景が単色を指定か 画像ですと認識できます

 

もしくはフォント職を変えれば認識できます

 

 

ボックス枠は伸縮されない

 

シリウスで表示機能のあるボックス枠は 記事カラム幅に合わせて
伸縮されるようレスポンシブコードは書き換えて完了しております

 

レスポンシブ化へと構造追加後 パソコン画面でのサイト縮小で
右側が縮小されていないと見えても スマートフォン画面では
伸縮されています

 

 

youtube.動画のリサイズは必要?

 

シリウス機能 iphone設定のスマーフォンサイトの場合 PC用で
記事内に設置した埋め込みコードのサイズは縮小画面に合わせた
リサイズが必要ですが当該レスポンシブウェブコードで貸す田水した際は
自動調整で適合化されます

 

しかし その自動調整サイズがお気に召さない場合は スマートフォン
サイト用にサイズ調整し切り替え表示に組み込んでください

 

 

 

 


 

レスポンシブデザインサイト障害事情は確認でき次第追記いたします

 

サイトレのスポンシブデザイン変更前の説明
SIRIUS シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ

レスポンシブウェブデザイン変更前の説明関連解説
サイトをレスポンシブウェブ化カスタマイズする今事情
SIRIUS シリウスサイトをレスポンシブウェブ化としてカスタマイズする事は今や避けることは出来ない今事情があります..その訳は
レスポンシブウェブデザイン設定事情を理解しよう
シリウスへレスポンシブウェブデザインを設定するカスタマイズは 特有の構造でもあり 充分にCSSを理解する必要がございます 当サイトのレスポンシブウェブ事情をご確認下さい
レスポンシブウェブデザインカスタマイズのレイアウト変更値
シリウスへレスポンシブウェブデザインを導入後 リキッドレイアウト変更値は どの位置でどのように変化するか また レイアウトを複合化する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 シリウスレスポンシブ導入テンプレートでは、ヘッダー画像を縮小させる、またはスマートフォンサイトでは小さな画像に切り替えるとかの考え方も合わせ含めた対処方法