TOP

レスポンシブ導入の際の見出し画像調整編集

当サイトで公開しておりますレスポンシブウェブデザイン構造を
組み込んだ際 稼働後スマートフォンでサイトを確認しますと
サイドに置く見出しメニューはサイトの巻末へ移動します

 

その際 見出しサイズがレイアウトサイズによりつなぎ目が
画像に現れています

 

 

原因として
シリウスのデフォルトでは見出しメニューは CSS指定ではなく
シリウス内に置く画像のフォルダーを読み込み表示しているからなのです

 

画像は サイズが固定であり レスポンシブ化の際 横幅が
デフォルトサイズより 長ければ自動で連写され表示されるので
連写の箇所がつなぎ目となって見えるのです

 

サイト閲覧の際 やはりつなぎ目は少なからず消し去りたいものですね

 

 

スポンサーリンク

 

 

 

対処法

 

対処法は 当該サイトのテンプレートフォルダを開きます

 

 

次にテンプレートの中身の ingフォルダーを開いて

 

menu h4を確認
ここが見出しメニューの画像ファイルです

 

 

サイズは 

 

3カラムなら180PX

 

2カラムなら200PXのサイズです

 

この画像を編集機能で記事カラム幅程度に横長に延長します

 

 

画像を横長に編集修正したとしても 通常のPC画面では

 

シリウススタイルシートで横サイズは指定されておりますので

 

いつものサイズで表示されるので問題はありません

 

 

横幅が延長されるのは レスポンシブ化されたデバイスで見出しメニューが
サイト巻末に移動した際のみです

 

 

編集後必ず保存を指定

 

 

次に
テンプレートの再設定を行いますとレスポンシブ化の際

 

見出しメニューのつなぎ目が消えたことがご確認頂得ます 

 

 

 

レスポンシブサイトの見出しメニューを調整するカスタマイズ
SIRIUS シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ

レスポンシブサイトの見出しメニューを調整するカスタマイズ関連解説
サイトをレスポンシブウェブ化カスタマイズする今事情
SIRIUS シリウスサイトをレスポンシブウェブ化としてカスタマイズする事は今や避けることは出来ない今事情があります..その訳は
レスポンシブウェブデザイン設定事情を理解しよう
シリウスへレスポンシブウェブデザインを設定するカスタマイズは 特有の構造でもあり 充分にCSSを理解する必要がございます 当サイトのレスポンシブウェブ事情をご確認下さい
レスポンシブウェブデザイン変更前の説明
SIRIUS シリウスサイトをレスポンシブデザインへ変更前のご注意ごとです デフォルトテンプレートカスタマイズをそのまま変更すると画面縮小の際 障害になるものがありますのでご説明します
レスポンシブウェブデザインカスタマイズのレイアウト変更値
シリウスへレスポンシブウェブデザインを導入後 リキッドレイアウト変更値は どの位置でどのように変化するか また レイアウトを複合化する2重構造をcss指定値カスタマイズを含めて複数解説します
ヘッダー画像をレスポンシブウェブ構造で作動させる方法
シリウスへレスポンシブウェブデザインを追加構築してもヘッダー画像だけがレスポンシブ化作動不能という場合は こちらのサイト解説を参考にしてください 取り合えずは伸縮致します
ヘッダー画像をレスポンシブウェブでは切り替え表示する方法
シリウスのヘッダー画像をレスポンシブウェブサイト構造追加後 スマートフォンで閲覧の際 別画像を表示する手順を」ご案内いたしております
デフォルト一カラムレスポンシブウェブデザイン設定
シリウスデフォルト一カラムテンプレートへレスポンシブウェブデザイン構築を追加する事は 2カラム同様簡単に設定ができます
2カラムテンプレート レスポンシブデザイン設定方法
SIRIUS シリウス2テンプレートへサイト内構成が 伸縮化変する全てのデバイスに対応可能なレスポンシブウェブデザインを設定追加するカスタマイズ方法のご案内です 作業は2分で終了
3カラムテンプレート レスポンシブウェブデザイン追加方法
SIRIUS シリウス3カラムテンプレートへレスポンシブウェブデザイン設定を追加するカスタマイズ手順をご案内しております... 検証済み 面倒はありませんよ
2カラムのトップとカテゴリー以下のレイアウトを変えたレスポンシブ
SIRIUS シリウスサイト2カラムをトップページとカテゴリー以下でレイアウトサイズを異なるスタイルで表現する2段階表示のレスポンシブデザインのカスタマイズの解説です
トップページのみをレイアウト替えした際のカスタマイズ色々
シリウスのトップページのみをレイアウト替えした際のサイドメニューは 構成次第でブログや大手サイトみたく色々なカスタマイズが表現出来ます
レスポンシブウェブデザイン公開ではiPhoneサイト設定も必要
シリウスをレスポンシブウェブデザインとして公開するに至り iPhoneサイト設定も必要ということが判明しましたのでお知らせいたします