30代は創造する

画像を使ってデザインを行います。

01. 画像をアップロードする
使用する画像をアップロードします。

wp/　　← WordPressをインストールしたフォルダ
│
└　wp-content/
　　│
　　└　themes/
　　　　│
　　　　└　sample/
　　　　　　│
　　　　　　├　index.php
　　　　　　├　screenshot.jpg
　　　　　　├　style.css
　　　　　　└　images/　　← 作成
　　　　　　　　│
　　　　　　　　├　header.jpg　　← アップロード
　　　　　　　　└　titlebar.png　　← アップロード

02. ヘッダに画像を表示する
ヘッダに画像(header.jpg)を表示させます。
・記述
<p id="image"><img src="<?php bloginfo('template_url'); ?>/images/header.jpg" alt="*" width="760" height="200" /></p>
・出力
<p id="image"><img src="http://ranka.sub.jp/taroumatsu/wp-content/themes/sample/images/header.jpg" alt="*" width="760" height="200" /></p>

<?php bloginfo('template_url'); ?>は、テーマのディレクトリのURLを出力します。

03. 装飾（style.css）
style.cssを編集します。

/* ヘッダー */
div#header h1 {
  font-size: 1.875em;
  margin: 0;
  float: left;
  margin-bottom: 4px;
}

div#header p#desc {
  font-size: 0.75em;
  color: #444444;
  margin: 0;
  float: right;
  margin-top: 18px;
}

div#header {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 20px;
}

div#header p#image {
  margin: 8px 0 0;
}

div.post h2 {
  background-color: #a3d2f2;
  background-image: url(images/titlebar.png);
  font-size: 0.875em;
  padding: 10px;
  margin: 0;
}
 

[0回]