TOP

タイトル、テキストの表示幅を拡張

ヘッダー内に表示されるテキスト(タイトル)の表示は、文字数が横幅がサイズの
範囲内でしたら一列表示となりますが、範囲に収まり切れないときは、
行が折り返され2列表示となります

 

文字行が折り返される原因は、デフォルト指定で表示範囲が
サイト幅の45%と指定されているからなんです

 

で、45%以上の範囲を超えての表示はできず、折り返されるのです

 

では、この指定を変えてみれば、ですね

 

2列表示を解消できます

 

制限幅は、スタイルシートで改行することで対応可

 

 


 

では、変更へ進みます

 

スタイルシートを開きます

 

ヘッダー項目の433付近へ到達、以下行の

 

width: 45%;を書き換え

 

例として、75とか80でよいかなと思います

 

 

 

/* ヘッダー
==================================================
*/
#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 %>
}

 

 

レスポンシブですので、PCでは1列表示でもスマートフォンでは、横幅の縮小に従い
2列、3列化と可変します

 

 

改行後、保存をお忘れなく

 

 

ヘッダーのタイトル、テキストの表示幅変更
フォント、文字のカスタマイズまとめ
トップページ

関連ページ

サイトタイトル、説明文の表示指定
シリウスのレスポンシブテンプレートで、サイトタイトル、説明文の表示指定は、サイトオプションで設定します
PCとスマートフォンでの文字サイズの切り替え表示
シリウスレスポンシブテンプレートのスタイルシートで、PCとスマホ画面での文字サイズ切り替え表示