タイトルのバナー画像を自作のものに変えようとしましたが上半分しか表示されません。
デザイン画像は沢山あってもレイアウトや文字の配分、大きさなどでなかなか気に入ったものがなく色々試した結果、今はスタンダード(ブルー 2カラム)を使っています。そこでタイトル画像を自作のものに変えてみたのですが縦が半分ぐらいしか表示されません。
画像の大きさは十分だと思うのですが。
スタイルシートの画面を何度眺めても素人の悲しさ、どうしてなのかわかりません。
お分かりになる方、是非お教えください。
回答(2)
2.

#banner {
clear:both;
border:solid #3d78f9;
border-width:1px 1px 0;
background: url(http://image.blog.livedoor.jp/roko913jp/imgs/5/9/599580ad.gif) no-repeat top;
height:250px;
margin:0;
text-align:left;
}
画像領域の高さが指定されてなかったので、縦方向の高さ領域としては、bannerタグ内のブログタイトルが入ってるタグの開始位置(親のbannerタグの上辺からどれだけ下に下げた位置から書き出すのか)とタイトルの文字フォントの高さ+下のブログの説明文の文字フォントの高さ分の高さしか用意されてなかったようです。デザインカスタマイズで#banner内にheight属性を新たに設定して画像の高さをしてあげましょう。見た目で微調整したので正確な数字かわかりませんがheight=250pxぐらいで全部表示されました。
これだとブログタイトルと説明が上にきすぎているので、位置の微調整が必要です。
h1.blogtitle{
padding:80px 30px 55px;
margin:0;
font-size:20px;
}
まあこれはお好みですが、ブログタイトルの位置を上部から45px→80px、ブログタイトルと説明の間を余裕があるので大きく採って5px(ブログタイトルの下部領域)→55pxとしてみました。
これでどうでしょうか?設定がわからないなら、この設定でみんなのブログにテンプレートを上げますよ。
反映させたブログ:
丁寧な解答をいただき感謝感謝です。
解答用or実験用にアカウントまで取られたんですね。私は勿論、ナレッジ利用者全員に成り代わってお礼を申し上げます。
で、<jikken>サイトでバナー画像を全面表示していただいたものをみましたが、仰る通りで間抜けに見えますね。
懇切丁寧な回答をいただきましたのでこれを元に、これからいろいろやってみます。
あとは自分の努力と根性ですね、ハイ。(笑
なにしろ年寄り(70歳ですが、何か!?びくーりなさいました?)なので、少し時間が掛かるかもしれませんが、出来たかどうか結果をご報告します。
「ちょこっと戻ってきた」なんておっしゃらずに、回答をずっと続けてください。
本当にありがとうございました。
1.
画像を以前のものと同じサイズにするか、CSSで画像サイズに合わせて幅を広げるか。
具体的なサイトがわからないとこれ以上アドバイスしようがないですな。
コメント(2)
ブーニンさん。早速アドバイスをありがとうございました。
デザインの↓
background:#fff url(http://parts.blog.livedoor.jp/img/usr/standard_blu...)
の部分に
オリジナルの画像↓
<img class="pict" src="http://image.blog.livedoor.jp/roko913jp/imgs/5/9/5...; border="0" alt="blog top banner" hspace="5" width="935" height="286" />
をはめ込んで表示しようとしたのですが勉強不足でダメでした。
現在は簡単な方法を選んで、別のデザインの気になるバナー部分のフォントを変えて使っています。
が、お時間があるようでしたら後学のためにご教授ください。
知識不足のため、当を得た質問になっていないかもしれません。
<必要な情報>が欠けているでしょうか。
よろしくお願いいたします。
でも画像を差し替えてみて思うのですが、あのままの方がかっこいいような。。。背景素材なので全部表示しなくてもあれくらいの領域で表示した方がシャープで僕は好きですね。あまり広げちゃうとなんだか違うような。。。まあ人それぞれですが。




