【シリーズB】見出しが２行になるとアイコンに文字被りが気になる場合

トップページ＞シリウス特典テンプレートシリーズB説明書＞【シリーズB】見出しが２行になるとアイコンに文字被りが気になる場合

シリーズBでアイコンに文字が被る場合

シリウス特典テンプレートでアイコンに文字が被る対処法

SIRIUS(シリウス)のシリーズBテンプレートサイトをスマートフォンで見ると、スマホ用ブラウザの自動調節機能が働いて、メインカラムの文字が勝手に大きくなります。

これはこれでありがたいことですが、画像と組み合わせで表示されている見出しの場合、見出しの文字が長いと文字が２行になってアイコンに被ってしまうことがあります。

この対処法は、以下の２つ。

フォントサイズを変更する
アイコンを使わない

ごめんなさい。アイコンはそのままにして、文字を被らないようにはできません。

本来見出しは長すぎない文字列に収めるべきと考えており、元々１行に収まる想定で制作したテンプレートです。

かといって見出し背景を画像パーツにしてしまうと、見出しのフォントサイズを大きくしたり小さくしたりすると、アンバランスになったり、文字が全て表示されない可能性も出てきます。

PC,スマホ、両方の見栄えを統一できれば１番良いのでしょうが、OSやブラウザによってCSSの意味合いと、スマホの自動調節が絡んできますので、こればかりはどうにもできませんでした。

ですので、どうしても見出しの文字列が長くなる場合は、フォントサイズを変更するか、アイコンを消してください。

具体的な対処方法

H2、H3見出しの場合

では具体的な対処方法です。例としてH2タグのフォントサイズを変更したり、見出しアイコンを削除します。

シリーズBシアンテンプレートのCSSファイルから、以下の箇所を探してください。

#main h2,.blog .title {
background:#FEA6B4;
color: #FFF;
background-image:url(img/h2_02.png);　　←消す（アイコン消去）
background-repeat:no-repeat;　　　　　　←消す（アイコン消去）　
background-position: left center ;　　　　←消す（アイコン消去）　
text-indent:40px;　　　　　　　　　　　　　←適宜調整（文字列の開始位置）　
text-shadow: 1px 1px 2px #666;
font-size: 22px; 　　　　　　　　　　　　　←適宜調整（フォントサイズ調整数値）　
font-weight:700;
margin-left:-25px;
margin-bottom:20px;
position:relative;
padding:5px;
box-shadow:
10px 0 0 0 #FEA6B4,
-10px 0 0 0 #FEA6B4,
0 3px 3px 0 rgba(0,0,0,0.2);

Ｈ３も同様です。

サイドバーの場合

サイドバー見出しの場合も、利用者によっては長い文字列になって２行になる可能性があります。
その場合、アイコンを消去した方が手っ取り早いです。

同じくCSSを編集しましょう。

#menu h4 ,#rmenu h4 ,.menutitle {

position: relative;
color: #fff;
background-color: #9BD5DD;
background-image: url(img/sidebox_title02.png);　　←消す（アイコン消去）
background-repeat: no-repeat;　　　　　　　　　　　←消す（アイコン消去）
background-position: 5px center ;　　　　　　　　　　←消す（アイコン消去）
font-size: 16px;　　　　　　　　　　　　←適宜調整（フォントサイズ調整数値）　
font-weight:700;
text-shadow: 1px 1px 1px #666;
text-indent:30px;　　　　　　　　　　　←適宜調整（文字列の開始位置）　
margin: 0px 0px 3px 0px;
padding: 7px;
border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px;
-webkit-border-radius: 8px 8px 0px 0px;
/* box-shadow */
box-shadow:rgba(177,211,224,0.6) 0px 0px 3px 1px;
-webkit-box-shadow:rgba(177,211,224,0.6) 0px 0px 3px 1px;
-moz-box-shadow:rgba(177,211,224,0.6) 0px 0px 3px 1px;
}