ヘッダーの標準表示を解除する
シリウスのデフォルトレスポンシブサイトで表示される、ヘッダー画像は、
グローバルナビの下
2カラムであれば、サイドメニューの上に位置し、好みによりますが
なんか変なレイアウトと感じられるかもしれません
ま、好みによりますが、デフォルトの表示位置がお気に召さない
そんな場合は、削除することもできます
スマートフォンでの表示、非表示は操作画面で切り替えができますが
PC画面での切り替え選択メニューは備えがありません
で、スタイルシートで削除指定をすればと....
ですが、スタイルシートで指定するにはやや面倒もあるみたい....
うまく切り替わらい
そこで、HTMLテンプレートで非表示設定をするんですが
一つの作業では、完了しないのですね
ヘッダータイトルが残り、左端へレイアウトが、ずれ移動してしまうのです
ですので、サイトオプションでヘッダータイトル、テキストですが、
非表示を指定して完了となります
反映スタイルはサイドメニューが上に位置移動し、レイアウトもずれません
HTMLテンプレートでの作業
<body>の項目
以下の記述を削除します
<div id="headertxt">
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(div class="title") %>
ここから
<body>
<div id="wrapper">
<div id="top">
<h1 id="logo"><a href="<% pageDepth %>"><% logoImage | ifEmpty({%h1text%}) | str_replace(alt="",alt="{%h1text%}") | oneline %></a></h1>
</div>
<% topMenu2 | tag_put(<div id="topmenubtn">MENU</div>) | tag_insert(div id="topmenubox") | tag_insert(div id="nav") %>
<div id="headerbox">
<div class="inner">
<div id="header">
<img src="<% pageDepth %>img/header.jpg" />
<div id="headertxt">
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(div class="title") %>
<% pageDescription | str_replace(id="headertext",class="desc") %>
</div>
この作業は、トップテンプレート削除すれば、トップのみで繁栄
カテゴリー以下は、通常のデフォルト表示
全体で、同スタイルを反映する場合は、各テンプレートで同作業をしてください
捜査画面 サイトオプションでの指定
htmlで記述を削除した場合、ヘッダータイトルが横にはみ出てしまうので
非表示の設定をします
サイトオプション、文字サイズ、文字の位置で
ページタイトルの位置 表示メニューで非表示を選択
これでPC画面で非標示となりますが、htmlで記述を削除したので
スマートフォンでも画像は現れません
関連ページ
- ヘッダー画像上部の横ラインカラーの変更
- ヘッダー画像のやや上に横ラインが見られますが 、サイトカラーに合わせて表示されています。ま、イメージを少し変えたいという場合は参考にしてください
- ヘッダーテキスト(タイトル)の高さ位置、および横幅調整
- ヘッダー画像の縦サイズをデフォルト以外で取り入れるとタイトルも自動で位置調整されますが、それが適合位置とはなりえません。そんな時は手動で指定替えしましょう
- ヘッダー画像を階層別に組み分け表示する手順
- シリウスレスポンシブテンプレートでは、トップページで設定したヘッダー画像が下層でも表示される仕組みのようですが、3つまでの組み分け表示が可能です
- ヘッダーテキストの固定化
- シリウスで標準のヘッダー内、タイトルをスクロールを無視して固定するソース