うぃず FC2テンプレート

繝?せ繝?

yuta様、はじめまして。
スマートフォン用テンプレート｢01SP_Blue｣について少々伺いたい事があります。
タイトル部分をトップ絵に入れ替えたいのですが、どうしても左右にサイズが合わずに半分くらいしか表示されません。
画像サイズは幅640px。サイドにテンプレート画像のブルーの雲？画像が表示されています。
初歩的な質問で申し訳ありませんが、ご回答頂けると幸いです。

コメントありがとうございます。
HTML編集にて、<h1>～</h1>を以下のように変更したと仮定します。
<h1>
<a href="<%url>" title="<%blog_name>" alt="<%blog_name>"><img src="画像URL" border="0" /></a>
</h1>
この場合、私も確かに画像が中途半端な表示しかされないのを確認いたしました。


解決方法として、CSS編集にて、以下の赤い箇所を変更または追加してみてください。

/*============================================================
●●ヘッダー●●
============================================================*/
/****************************** ▼全体▼ */
#header {
position:relative;
min-height: 60px;
margin:0 0 0px;
padding: 0 0px;
background-color:#B22222; /* ヘッダ背景色（全体）*/
color:#FEFEFE; /* ヘッダ文字色 */
text-align: center; /* 中央寄せ */
background:url("http://blog-imgs-42.fc2.com/x/x/n/xxnostalgiaxx/17_s.jpg")

}
/****************************** ▲全体▲ */

/****************************** ▼タイトル文字部分▼ */
#header h1 {
overflow: hidden;
width: 100%;
margin:0 auto;
padding: 0px 0;
font-size:20px; /* 文字の大きさ */
text-overflow: ellipsis;
white-space: nowrap;
}
#header img {
width: 100%;
}

#header h1 a { color:#FFFFFF;} /* 文字色 */
#header h1 a :hover{ color:#FFFFFF; } /* 触れた時の文字色 */


/****************************** ▲ヘッダタイトル部分▲ */


もし不要でしたら
background:url("http://blog-imgs-42.fc2.com/x/x/n/xxnostalgiaxx/17_s.jpg")
は削除してくださいね。

#header imgで、width: 100%;を設定しています。
挿入したTOP画像がどんな大きさであろうとも、テンプレートの横幅100%の大きさの画像になるように調整してあります。もし、大きすぎる場合などがありましたら、値を変更してみてください。



yuta様、はじめまして。
スマートフォン用テンプレート｢01SP_Blue｣について少々伺いたい事があります。
タイトル部分をトップ絵に入れ替えたいのですが、どうしても左右にサイズが合わずに半分くらいしか表示されません。
画像サイズは幅640px。サイドにテンプレート画像のブルーの雲？画像が表示されています。
初歩的な質問で申し訳ありませんが、ご回答頂けると幸いです。

yuta様、ご丁寧に解説して頂きどうもありがとうございます。
当方全くの初心者なのでとても助かります。

該当部分の変更、追加したところ、お陰様でPC版のグーグルクロームではきちんと表示されるようになりました。
しかし、手持ちのスマホ3機種(GALAXYSⅢ等)のブラウザでは余白が出来てしまいます…
また、当初からなのですが、右下のメールアイコンが大きくなり、その他アイコンの下に空白部分が出来てしまっているので、もしかしたら私のスマホのブラウザ？画面サイズのせいできちんと表示できていないだけなのかもしれません。
お忙しいところ申し訳ありませんが、何か解決法があれば教えて頂きたく存じます。

http://10lab.blog.fc2.com/?spのように、当サイトのトップ絵を変更してみましたが、PC、スマホ（T-01D、F-06E）、タブレット（NEXUS7）共に特に余白は見られませんでした。
トップ絵の画像自身に余白などはないでしょうか？もしよろしければ、サイト又はトップ絵を見せていただけたらと思っています。その際は右下のメールフォームからURLを送って頂ければと思います。


バグのご指摘ありがとうございます。確かにメールアイコンだけが大きくなっていました(^_^;)


CSS編集にて、
/*============================================================
●●下部ナビ●●
============================================================*/
/****************************** ▼下部ナビ▼ */
#page_navi {
overflow:hidden;
border-bottom: 3px solid #B2D5E6; /* 枠線色 */

}
#page_navi li {
min-width:25%;
border: 0px solid #B2D5E6; /* 枠線色 */
}
#page_navi .page_home{ float:left; margin:0px;} /* ホーム 左寄せ */
#page_navi .page_top { float:left; margin:0px;} /* ページトップ 右寄せ */
#page_navi .login { float:left; margin:0px;} /* ログイン 左寄せ */
#page_navi .osieru { float:left; margin:0px;} /* 教える　　　 右寄せ */

赤の箇所のようにwidthをmin-widthとしてみてください。おそらく改善されるかと思います。

また、レイアウト自体に影響を与えるものではありませんが、青い箇所も訂正して頂ければと思います。完全に表記ミスをしておりました。申し訳ありません(´Д｀;)

yuta様、何度もご丁寧に解説して頂きどうもありがとうございます。

どうやら修正後の更新が上手くいっていなかったようで、何度も繰り返していたらきちんと表示されるようになりました。

この度はとても親切に対応して頂きましてどうもありがとうございました。
とても使いやすく素敵なテンプレートなので、これからも大事に使わせて頂きます。

題名:

名前:

URL:

COMMENT:


PASS:

SECRET:
管理者にだけ表示を許可する