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

 

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

 

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

 

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

 

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

 

 

---

 

 

レスポンシブウェブと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画像ファイルの
ｈ４画像をサイト幅ほどで作成し直してください

 

 

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

 

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

 

 

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

 

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

 

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

 

 

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

 

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

 

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

 

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

 

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

 

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

 

改行記述

 

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

 

 

---

 

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

 

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

 

---

 

 

 

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

 

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

 

ここですね

 

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

 

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

 

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

 

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

 

スポンサーリンク

 

 

フッターリンクの伸縮

 

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

 

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

 

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

 

 

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

 

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

 

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

 

 

youtube．動画のリサイズは必要？

 

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

 

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

 

 

 

 

---

 

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

 

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