サイトマップ
h1 テキストおよび背景スペーの非表示について
シリウスを愛用しています
レシポンシブテンプレートのヘッダー画像上の h1 テキストが表示される
部分の幅の調整（縮小）の方法がわかりません。
色々探しのですが...
h1テキストを非表示にすると、その部分がかなり大きく空いてしまうので、
縮小したいです。
宜しくお願いします。
※使用してるのは、レシポンシブ健康系です
という、SK様からの質問ですが、PC画面用で対応しましたら
スマートフォン、アイフォンでも同作動にしたい,,との趣旨でしたので
まとめての返答となります
h1 テキストのデフォルトスタイルは、個人差によりますが、好まれない
レイアウトと理解する方もおられるようですね
操作画面からでは、指定ができないものの変更はいたって簡単
今回の質問は、スタイルシートで改行、追加で完了します
以下に到達
/* トップ
==================================================
*/
#top {
margin: 0 auto;
text-align: left;
width: 900px;
}
#top #logo, #top h1 {
padding: 28px 0; ここ 28を １か 0 にしてください 改行個所
width: 900px;
}
#top #logo a, #top h1 a {
color: #888888;
text-shadow: 0 0 1px rgba(153,153,153,.3);
font-size: 26px;
font-weight: 600;
text-decoration: none;
display: none; 追加行
}
ここまで
説明
サイト上部のスペースを埋めるコード
padding: 28px 0; をpadding: 0px 0;にする
H１テキストを非表示にするコード
display: none; 追加した行
日本語文字は削除してください
ここまでは、PC用で反映される私事ですが、ここだけではアイフォンや
スマートフォンでは、反映されませんので
小画面での支持も追加します
念のため記述追加後の変化は検証しております
わかりやすい箇所に以下コードを張り付けてください
@media screen and (max-width: 640px) {
#top #logo, #top h1 {
padding: 0px 0;
width: auto;
display: none;
}
}
@media screen and (max-width: 899px) {
#top #logo, #top h1 {
padding: 0px 0;
width: auto;
display: none;
}
}
ここまで
640pxはスマートフォンで反映する指示
899px)はアイフォンサイズ反映する指示
で、正常反映するかと思いますが
しませんでしたらご連絡ください
参照
当サイトの場合、別な仕組みでレイアウトを構成してますので
上記コードは入れ込まなくとも同作動してます
関連ページ
- テーブルランキングのレスポンシブ不具合エラー
- テーブルランキングを導入以降、レスポンシブ作用後は、適合した比率で狭まらない、ある程度で作用が止まるという質問が寄せられました
- ブログモードでサブ階層の更新履歴が表示されない
- シリウスレスポンシブテンプレートのブログ仕様で3階層にした場合、2階層の関連ページが表示されない。対応策はこちらで....
- サイト幅いっぱいの画像を記事カラムに設定したい？
- レスポンシブの一カラムでＬＰを作っているが、サイト幅いっぱいの画像を記事カラムに設定できませんか？という質問です。ご返答はこちらで.....
- サイドメニューを右配置にしたはずが、保存されない
- 右サイドメニューでテンプレートを選択したはずが、 ＣＳＳ改行して保存すると元の左位置に戻ってしまう デフォルトに戻す、保存、いずれを指定しても結果は反映されない
- ipone横画面ではPC画面が表示されるがスマホ対応にできないか
- シリウスのレスポンシブサイトをiponeの横画面で見ると正常反映なのですが、横にするとPC画面が表示されている。スマートフォン対応にできませんか？
- 巻末の更新履歴をサイドバーに移動した際のＣＳＳ不指示について
- シリウスレスポンシブサイト専用のサポート、何かしらの事情で当サイトにお寄せられた質問に対してのサポート対応
- 記事巻末と更新履歴とのスペースが狭まらない？
- シリウス記事画面で巻末の隙間を排除しているのですが、閲覧では、更新履歴とのスペースが空きすぎる空間が見られるのですが狭めることはできないのでしょうか？詳細はこちらでご覧ください..
- ヘッダー画像のみワイド化できませんか？との質問です
- レスポンシブテンプレートのイチカラム対応でヘッダー画像のみワイド化、拡張できませんか？との質問が寄せられました
- ヘッダー画像をページごとに個別表示設定はしたが反映されない？
- シリウスレスポンシブＴＰで、ヘッダー画像をトップ、カテゴリー、エントリーとも個別に表示したい..解説サイトを例にするとコードのみが表示されてしまうのです。解決策をお願いします....
