サイトマップ
ヘッダー画像だけ..横サイズを拡張したい
読者様より、フォトコレクションサイトをシリウスのレスポンシブで運営しているが、当サイトで
採用しているヘッダー画像の指定方法をイチカラムのヘッダーのみで設定できないか？
サイト幅いっぱいにワイド化表示したい..との質問が寄せられましたので追記いたします。
お答えの前に...説明に不備があるかもしれないことお詫びしておきます。
私の場合、レスポンシブテンプレートは初期段階から弄り回してのカスタマイズで、原本、
デフォルト構成を忘却してしまっている状態で...デフォルト時期のＴＰ内容に関して理解違いを
してしまう例がございます。
要点
ヘッダー画像は横サイズ大きめ...でないと...どちらかに偏ります...
普通のノートパソコンではぴたりとサイズが合っていてもウルトラワイドで確認すると寸足らずに
なる事情があるので、できれば2000ｐｘほどのサイズでで作られてください。
検証してみました..
当サイトに置いてるＣＳＳを切り取ってデフォルトの1カラムＴＰ、スタイルシートで書き換え
確認はしておりますが、不備がございましたら再度ご連絡ください..
当サイトと同じ記載...を一部使います
以下スタイルシートの箇所を書き換える...だけ...
デフォルトのＣＳＳ
/* ヘッダー
==================================================
*/
#headerbox .inner {
text-align: center;
}
ここから.....
#header {
height: 350px;
margin: 0 auto;
position: relative;
text-align: left;
width: 900px;
}
ここまでを書き換えます
#header img {
left: 0;
position: absolute;
top: 0;
}
#header #headertxt {
left: 50%;
position: absolute;
top: 80px;
width: 45%;
<% pageTitlePlace %>
<% pageDescPlace %>
}
書き換え例
height: 350px;にしてますが、あくまで取り込む画像サイズが優先されるので
書き換えせずとも好いです
/* ヘッダー
==================================================
#headerbox .inner {
text-align: center;
}
ここから
#header {
height: 350px;
margin: 0 auto;
position: relative;
text-align: left;
position: fixed !important;
position: absolute;
top: 0px;
left: 0;
width: auto;
z-index: -10;
}
ここまでを入れ替えました
#header img {
left: 0;
position: absolute;
top: 0;
}
念のためですが、不要な箇所があるもしれません
一つの項目ごと順に入れ替えてみてください
関連ページ
- テーブルランキングのレスポンシブ不具合エラー
- テーブルランキングを導入以降、レスポンシブ作用後は、適合した比率で狭まらない、ある程度で作用が止まるという質問が寄せられました
- ブログモードでサブ階層の更新履歴が表示されない
- シリウスレスポンシブテンプレートのブログ仕様で3階層にした場合、2階層の関連ページが表示されない。対応策はこちらで....
- サイト幅いっぱいの画像を記事カラムに設定したい？
- レスポンシブの一カラムでＬＰを作っているが、サイト幅いっぱいの画像を記事カラムに設定できませんか？という質問です。ご返答はこちらで.....
- サイドメニューを右配置にしたはずが、保存されない
- 右サイドメニューでテンプレートを選択したはずが、 ＣＳＳ改行して保存すると元の左位置に戻ってしまう デフォルトに戻す、保存、いずれを指定しても結果は反映されない
- H1テキスト、背景スペースともに非表示にしたい
- h1 テキストおよび背景のスペースをPC,スマートフォンでも非表示したいが表示される部分の幅の調整（縮小）の方法がわかりません...という質問です...お答えはサポートで,,,
- ipone横画面ではPC画面が表示されるがスマホ対応にできないか
- シリウスのレスポンシブサイトをiponeの横画面で見ると正常反映なのですが、横にするとPC画面が表示されている。スマートフォン対応にできませんか？
- 巻末の更新履歴をサイドバーに移動した際のＣＳＳ不指示について
- シリウスレスポンシブサイト専用のサポート、何かしらの事情で当サイトにお寄せられた質問に対してのサポート対応
- 記事巻末と更新履歴とのスペースが狭まらない？
- シリウス記事画面で巻末の隙間を排除しているのですが、閲覧では、更新履歴とのスペースが空きすぎる空間が見られるのですが狭めることはできないのでしょうか？詳細はこちらでご覧ください..
- ヘッダー画像をページごとに個別表示設定はしたが反映されない？
- シリウスレスポンシブＴＰで、ヘッダー画像をトップ、カテゴリー、エントリーとも個別に表示したい..解説サイトを例にするとコードのみが表示されてしまうのです。解決策をお願いします....
