TOP

ヘッダータイトル、テキストの位置調整と横幅をCSS指定する

ヘッダー枠、縦幅はデフォルトサイズ外の画像を取り込めば自動で適合調整されますね
また、タイトルテキストの横位置はサイトオプションで簡単に位置替えできますが、
それはあくまで規定での調整範囲となります

 

また、タイトルが30文字などの長文の場合は、やはり規定範囲を超えることなく折り返されますね
折り返されずに一列化したい....等々、既定以外の調整....

 

そんな場合は、スタイルシートでCSS指定で調整ができますのでご参照ください

 

表示サイズを横拡張例

 

スタイルシートを開いて以下位置に到達

 

/* ヘッダー
==================================================
*/
#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%; (横幅を数値で指定します)

}
#header .title, #header .desc{
padding-left: 5px;
padding-right: 5px;
}
#header .title a {
color:#333333; (タイトルカラーを変えられます)
text-shadow: 0 0 1px rgba(51,51,51,.3);
font-size: 28px;
font-weight: 700;
line-height: 120%;
text-decoration: none;
word-wrap: break-word;
}

 

今日はここまで、後ほどその他詳細は書き加えます

 

ヘッダー枠、画像及び他内部CSSカスタマイズまとめ
トップページ

関連ページ

PC画面では、ヘッダー画像を非表示にする方法
シリウスのデフォルトレスポンシブサイトに標準表示されるヘッダー画像の位置が好みに合わないと感じられたら非表示にすることもできます 表示法カスタマイズまとめ
ヘッダー画像上部の横ラインカラーの変更
ヘッダー画像のやや上に横ラインが見られますが 、サイトカラーに合わせて表示されています。ま、イメージを少し変えたいという場合は参考にしてください
ヘッダー画像を階層別に組み分け表示する手順
シリウスレスポンシブテンプレートでは、トップページで設定したヘッダー画像が下層でも表示される仕組みのようですが、3つまでの組み分け表示が可能です
ヘッダーテキストの固定化
シリウスで標準のヘッダー内、タイトルをスクロールを無視して固定するソース