ブログ

トピック詳細

コメント一覧 6件中、1～6件表示

• スタイルシートで
  backgroundのプロパティを使って背景画像を敷いた場合
  これまではサイズが違っていてもＩＥでは伸縮させてくれなかったんですが
  
  
  新しいHTMLだからなのかしら
  背景画像が拡大されてるみたいですね。
  わ～、重宝だなぁ。
  
  ちなみに
  タイトルが手書きになっちゃうと
  この部分にリンクされていたインデックスページへのリンクがなくなっちゃいますので、次のように変更すると画像全体がクリック できるようになります。
  
  <!-- ヘッダー -->
  <header id="header">
  <a href="<%url>">
  <section>
  ～～中略～～
  </section>
  </a>
  </header>
  <!-- /ヘッダー -->
  
  HTML5の手引きサイトを覗いてみたけど
  ちゃんと推奨されるやり方のようでした。

  2011年10月15日 08:21 by 標野ゆき

• 標野ゆきさま
  
  ありがとうございます！
  
  なんとかうまくいきました！
  
  コロンの後のurlを入れると画像がきちんと出ました。
  
  そして、いろいろ触っているうちに幅もひろげることができました！
  
  もうちょっと微調整してみます。
  
  
  本当に助かりました～
  
  
  ご丁寧な回答、心から感謝してます＾＾
  
  ありがとうございました。
  
  

  2011年10月14日 22:20 by せだゆりか

• 質問者さんのUPなさったテスト画像をお借りして
  #header {
  margin: 10px 0 0 10px;
  background-image:url(http://blog-imgs-48.fc2.com/s/e/d/seda yurika/test.jpg);
  }
  このように編集してみると
  
  ＜＜クリックすると原寸の画像が表示されます。
  
  上のような表示になりました。
  
  
  画像にブログ名を入れる場合はテンプレートのHTML編集で
  
  <!-- ヘッダー -->
  <header id="header">
  <section>
  <h1><a href="<%url>"> <%blog_name></a></h1>
  <!--△ブログタイトル -->
  <p><%introduction></p>
  <!--△ブログ概要 -->
  </section>
  </header>
  <!-- /ヘッダー -->
  
  フォントによるブログ名と概要を表示させないように
  赤文字の変数を削る必要がありそうですね。
  
  
  ちなみに
  画像をくり返し表示させないためのスタイル指定は
  background-repeat : no-repeat;
  
  背景を天合わせの左詰めで配置する場合のスタイル指定は
  background-position: top left;
  （このほか右寄せや中央合わせなどいろいろあります）
  　　　　　　　　　　　　　　　　････のようになります。
  
  
  まとめて記述する方法もあるんですが
  中身がわかりづらくなるので、ここでは触れないことにしますね＾＾；

  2011年10月14日 21:38 by 標野ゆき

• このテンプレートのヘッダー部分は
  おそらく955ピクセル×65ピクセルと思われますので
  このサイズで作った画像を使ってみてください。
  
  あっ、ごめんなさい！
  background-image:url(画像ファイルのアドレス);
  コロンの後ろに赤文字の部分「url」を落としてました！
  
  修正してみてください＜m(_ _)m＞
  ごめんなさい～～～～～！！！

  2011年10月14日 20:17 by 標野ゆき

• 標野ゆきさま
  
  早々に、丁寧なご回答を本当にありがとうございます。
  
  
  やってみたのですがうまくいきません；；
  
  こんな感じに記しました。↓　間違えてたらご指摘ください。
  
  -----------------------------
  ▼ヘッダー
  -----------------------------
  */
  #header {
  margin: 10px 0 0 10px;
  background-image:(http://blog-imgs-48.fc2.com/s/e/d/sedayur ika/test.jpg);
  }
  
  /*ブログ概要*/
  #header p {
  padding: 0 0 10px 8px;
  }
  /*
  
  
  新しいＨＴＭＬ５という形なのですね。
  
  いろいろ難しいです。。。
  
  標野さま、お時間割いて頂きありがとうございました。
  
  
  
  他にどなたか詳しい方いらっしゃいましたら、
  どうぞ教えて下さいませ。
  
  
  

  2011年10月14日 20:04 by せだゆりか

• 言及しておられるテンプレートのheader部分に
  CSSで背景色を設定してみると
  ＜＜クリックすると原寸のものが開きます
  
  上のように表示されますので
  この色のついた部分と同じ範囲になら背景画像が敷けると思います。
  背景画像を設定するための指示は
  
  #header {
  margin: 10px 0 0 10px;
  background-image:(画像URL);
  }
  
  大抵はこんな感じだと思うのですが。
  
  必要に応じて「繰り返しをする or しない」とか
  「繰り返さない画像をどんな風に配置するか」とか
  そういった設定を追加するといいと思います。
  
  ただこのテンプレートは
  HTML5という新しい形式で作ってあって
  この型のテンプレートはほとんどいじったことがないので
  うまくいくかどうかはよくわかりません＾＾；
  

  2011年10月14日 16:06 by 標野ゆき