画像を表示

画像のアップロード

  • テーマフォルダーに「images(またはimg)」を作成する
  • 画像フォルダーの中に画像をアップロード

ビルボードに画像を表示

  • header.jpg(760×200px)を用意する
<p id="image"><img src="<?php bloginfo('template_url'); ?>/img/header.jpg" alt="" width="760" height="200" /></p>

画像の表示を指定

  • ヘッダーの罫線を削除する
border-bottom: solid 5px #a3d2f2; /*この記述を削除する*/
#header {
  margin: 0 0 20px 0;
  padding: 0 0 10px 0;
}
#header p#image {
  margin: 8px 0 0 0;
}




ブログ名と説明を左右に並べて表示

  • h1と説明文のベースラインが揃うように設定する
#header h1 {
  font-size: 1.875em;
  float: left;
  margin: 0 0 5px 0;
}
#header p#desc {
  font-size: 0.75em;
  color: #444;
  float: right;
  margin: 22px 8px 0 0;
}




記事のタイトルバーを画像で表示

  • 背景画像のパスの記述に注意する
.post h2 {
  font-size: 0.875em;
  padding: 10px;
  background-color: #ddefc0;
  background-color: #a3d2f2;
  background-image: url(img/titlebar.png);
}