サイトマップ
トップページ全体をワイドヘッダー画像で表示したい？の構造 勘違を検証
すみませ～ん
下へスクロールして下さい
ここからスタート？
スポンサーリンク
トップページをパソコンサイズいっぱいのワイドヘッダーで表示したい
という方がおられます
で その画像の中に少々のメニューやらを配置
で スクロールすると 記事項目に突入する
そこからが コンテンツのスタート,....のようです
で 当ページでも エントリーページでそんな構成にしてみました
が
説明はデフォルトの一カラムのトップページで進めます
（エントリー頁ですと手順がことなるので適応しません）
でもヘッダータイトルやグローバルメニュー グーグル検索窓 Ｈ３見出しは
面倒なので外しません
また 記事上部に 横三つとかのメニュ－窓は シリウス機能テーブルで
配置できますが きらいなんで配置しません
では よく見てください
記事がある位置は 見た目ワイドサイズのヘッダー画像の下から
スタートしているように見えますが
そうではありません
単にサイト背景の切れた箇所位置から 記事をスタートさせているだけのこと
上に色々お邪魔なものがありますが 削除か 書き換えて
何かのメニューを配置すれば 海外サイトみたいな構成になるのではないですか
こんなスタイルは海外サイトには見られます
ヘッダ＝画像をワイド化して パソコン画面いっぱいに表示することは
可能ですが
コンテンツや メニューの配置も可能ですけど ヘッダー位置にあれこれ
置物を置くのもあまり良い構成ではありません
で どうすればこの構成になるかというと
まずは シリウス機能でサイト背景に画像を設定します
（サイトオプションより設定）
背景画像の固定化はしません
（シリウス機能にはありませんけど）
デフォルト指定
です
固定しないため 記事カラムみたいな台紙が現れるのです
通常のヘッダー画像は設定しておいて 表示をＣＳＳ指定で透明に指定
とします
ヘッダーをＨＴＭＬから削除することもできますが スペースまでを削除すると
タイトル表示が出来なくなります
グローバルメニューも非表示ですね
そして 実際のヘッダー画像の以下
そこに記事カラムがありますので
良い位置にメニューやらテキストをうまく配置して
画像切れの位置から 記事をスタートさせればよいのです
フォントカラーの違い
画像内と 記事カラムでのフォントカラーの違いが必要な場合は
当サイトの場合 スタイルシートでのフォントカラーの指定は白です
ですが 今記事の範囲は 操作画面のフォントカラー指定で
範囲を囲い＃333に色図けしています
また 気が付いたことありましたら追記いたします
当ページはエントリー頁なのでスタイルの割り込みでカスタマイズを
指定しております
スポンサーリンク
トップページ全体をワイドヘッダー画像で表示したい？の勘違い
SIRIUS シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ
下へスクロールして下さい
ここからスタート？
スポンサーリンク
トップページをパソコンサイズいっぱいのワイドヘッダーで表示したい
という方がおられます
で その画像の中に少々のメニューやらを配置
で スクロールすると 記事項目に突入する
そこからが コンテンツのスタート,....のようです
で 当ページでも エントリーページでそんな構成にしてみました
が
説明はデフォルトの一カラムのトップページで進めます
（エントリー頁ですと手順がことなるので適応しません）
でもヘッダータイトルやグローバルメニュー グーグル検索窓 Ｈ３見出しは
面倒なので外しません
また 記事上部に 横三つとかのメニュ－窓は シリウス機能テーブルで
配置できますが きらいなんで配置しません
では よく見てください
記事がある位置は 見た目ワイドサイズのヘッダー画像の下から
スタートしているように見えますが
そうではありません
単にサイト背景の切れた箇所位置から 記事をスタートさせているだけのこと
上に色々お邪魔なものがありますが 削除か 書き換えて
何かのメニューを配置すれば 海外サイトみたいな構成になるのではないですか
こんなスタイルは海外サイトには見られます
ヘッダ＝画像をワイド化して パソコン画面いっぱいに表示することは
可能ですが
コンテンツや メニューの配置も可能ですけど ヘッダー位置にあれこれ
置物を置くのもあまり良い構成ではありません
で どうすればこの構成になるかというと
まずは シリウス機能でサイト背景に画像を設定します
（サイトオプションより設定）
背景画像の固定化はしません
（シリウス機能にはありませんけど）
デフォルト指定
です
固定しないため 記事カラムみたいな台紙が現れるのです
通常のヘッダー画像は設定しておいて 表示をＣＳＳ指定で透明に指定
とします
ヘッダーをＨＴＭＬから削除することもできますが スペースまでを削除すると
タイトル表示が出来なくなります
グローバルメニューも非表示ですね
そして 実際のヘッダー画像の以下
そこに記事カラムがありますので
良い位置にメニューやらテキストをうまく配置して
画像切れの位置から 記事をスタートさせればよいのです
フォントカラーの違い
画像内と 記事カラムでのフォントカラーの違いが必要な場合は
当サイトの場合 スタイルシートでのフォントカラーの指定は白です
ですが 今記事の範囲は 操作画面のフォントカラー指定で
範囲を囲い＃333に色図けしています
また 気が付いたことありましたら追記いたします
当ページはエントリー頁なのでスタイルの割り込みでカスタマイズを
指定しております
スポンサーリンク
トップページ全体をワイドヘッダー画像で表示したい？の勘違い
SIRIUS シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ
トップページ全体をワイドヘッダー画像で表示したい？の勘違い関連解説
- サイトをレスポンシブウェブ化カスタマイズする今事情
- SIRIUS シリウスサイトをレスポンシブウェブ化としてカスタマイズする事は今や避けることは出来ない今事情があります..その訳は
- レスポンシブウェブデザイン設定事情を理解しよう
- シリウスへレスポンシブウェブデザインを設定するカスタマイズは 特有の構造でもあり 充分にＣＳＳを理解する必要がございます 当サイトのレスポンシブウェブ事情をご確認下さい
- レスポンシブウェブデザイン変更前の説明
- SIRIUS シリウスサイトをレスポンシブデザインへ変更前のご注意ごとです デフォルトテンプレートカスタマイズをそのまま変更すると画面縮小の際 障害になるものがありますのでご説明します
- レスポンシブウェブデザインカスタマイズのレイアウト変更値
- シリウスへレスポンシブウェブデザインを導入後 リキッドレイアウト変更値は どの位置でどのように変化するか また レイアウトを複合化する2重構造をｃｓｓ指定値カスタマイズを含めて複数解説します
- ヘッダー画像をレスポンシブウェブ構造で作動させる方法
- シリウスへレスポンシブウェブデザインを追加構築してもヘッダー画像だけがレスポンシブ化作動不能という場合は こちらのサイト解説を参考にしてください 取り合えずは伸縮致します
- ヘッダー画像をレスポンシブウェブでは切り替え表示する方法
- シリウスのヘッダー画像をレスポンシブウェブサイト構造追加後 スマートフォンで閲覧の際 別画像を表示する手順を」ご案内いたしております
- デフォルト一カラムレスポンシブウェブデザイン設定
- シリウスデフォルト一カラムテンプレートへレスポンシブウェブデザイン構築を追加する事は 2カラム同様簡単に設定ができます
- 2カラムテンプレート レスポンシブデザイン設定方法
- SIRIUS シリウス２テンプレートへサイト内構成が 伸縮化変する全てのデバイスに対応可能なレスポンシブウェブデザインを設定追加するカスタマイズ方法のご案内です 作業は2分で終了
- 3カラムテンプレート レスポンシブウェブデザイン追加方法
- SIRIUS シリウス3カラムテンプレートへレスポンシブウェブデザイン設定を追加するカスタマイズ手順をご案内しております... 検証済み 面倒はありませんよ
- 2カラムのトップとカテゴリー以下のレイアウトを変えたレスポンシブ
- SIRIUS シリウスサイト2カラムをトップページとカテゴリー以下でレイアウトサイズを異なるスタイルで表現する2段階表示のレスポンシブデザインのカスタマイズの解説です
- トップページのみをレイアウト替えした際のカスタマイズ色々
- シリウスのトップページのみをレイアウト替えした際のサイドメニューは 構成次第でブログや大手サイトみたく色々なカスタマイズが表現出来ます
- レスポンシブサイトの見出しメニューを調整するカスタマイズ
- シリウスのレスポンシブウェブデザインサイトでは 機能を確認すると稼働後 見出しメニューにつなぎ目が見られますが 画像フォルダを編集すれば解消することが出来ます
