30代は創造する

２段組のレイアウトにします。
今回は、WordPressだからといって、特別なことをやるわけではありません。
普通にfloatを使うだけです。

01. サイドバーのdiv要素を追加
サイドバーのdiv要素を、コンテンツのdiv要素(id="content")とフッターのdiv要素（id="footer"）の間に挿入します。
<!-- サイドバー -->
<div id="sidebar">
サイドバーのdiv要素
</div>

02. CSS(style.css)の編集
下記記述を、style.cssに追記します。
全体(div#container）の横幅は760pxで、
その中にコンテンツ、サイドバーが入っています。

/* コンテンツ */
div#content {width: 515px;
  float: left}

/* サイドバー */
div#sidebar {width: 220px;
  float: right;
  background-color: #9f9;}

[1回]

キャプションをつけて画像を挿入します。
ここでのキャプションとは、画像の説明とか見出しとかそんな感じの意味です。

01. 記事を用意し、画像を挿入する
いつもどおり記事に画像を挿入します。
キャプションは、"緑色の葉っぱ"と入力。
配置は中央、サイズは中です。



02.入力画面、HTMLソース確認
入力画面では、画像が枠で囲まれ、入力したキャプションが画像の下に表示されています。

HTMLソースは、
[caption id="attachment_48" align="aligncenter" width="300" caption="緑色の葉っぱ"]
<a href="http://ranka.sub.jp/taroumatsu/wp-content/uploads/2012/03/green.jpg">
<img class="size-medium wp-image-48" title="green" src="http://ranka.sub.jp/taroumatsu/wp-content/uploads/2012/03/green-300x225.jpg" alt="はっぱ" width="300" height="225" />
</a>
[/caption]
となっています。
[caption]はショートコードタグといって、WordPress独自のタグです。

03. 投稿記事の確認、HTMLソースの確認
投稿記事を公開し、画面で確認してみると、画像に枠は表示されていません。


画像部分のHTMLソースを確認すると、下記のようになっていました。

<div id="attachment_48" class="wp-caption aligncenter" style="width: 310px">
<a href="http://ranka.sub.jp/taroumatsu/wp-content/uploads/2012/03/green.jpg">
<img class="size-medium wp-image-48" title="green" src="http://ranka.sub.jp/taroumatsu/wp-content/uploads/2012/03/green-300x225.jpg" alt="はっぱ" width="300" height="225" />
</a>
<p class="wp-caption-text">緑色の葉っぱ</p>
</div>

04. 装飾
画像部分を枠で囲み、キャプションを中央へ表示するように、style.cssに下記を追加します。

.wp-caption {border: solid 1px #aaaaaa;
    text-align: center;
    padding-top: 5px}

[0回]

前回と同じように記事に画像を挿入し、
画像を記事が回りこむように表示させます。
左も右も行うことは同じなので、今回は左のみ開設します。

01.記事の準備、画像のアップロード
前回と同じように、記事を準備し、画像をアップロードします。



今回は、配置を左、サイズをサムネイルにします。

02.ソースの確認

HTMLタグを押下し、ソースの確認をします。

<a href="http://ranka.sub.jp/taroumatsu/wp-content/uploads/2012/03/paper.jpg">
<img class="alignleft size-thumbnail wp-image-43" title="paper" src="http://ranka.sub.jp/taroumatsu/wp-content/uploads/2012/03/paper-75x75.jpg" alt="本文の左右に画像を挿入する" width="75" height="75" />
</a>

img要素のclass属性について、
alignleftは、配置が左のクラス、
size-thumbnailは、サイズがサムネイルのクラス
です。

03. 表示の確認、CSS編集
記事を公開後、表示を確認すると、画像は左にありますが、記事は回り込んでいません。



style.cssに下記を記述します。
alignrightは画像の配置を右にした場合の記述です。

.alignleft  {float: left;
  margin-right: 10px;
  margin-bottom: 10px}

.alignright {float: right;
  margin-left: 10px;
  margin-bottom: 10px}

04.floatの注意
画像が大きい場合、下記のように表示されてしまう場合があります。
このような状態にならないように、CSS（clear:both等）で対処をする必要があります。

[0回]

記事に画像を挿入します。

01.準備
画像サイズの設定をします。
　設定 ＞ メディア ＞ 画像サイズ ＞ サムネイルのサイズ
サムネイルのサイズを75x75に設定します。



02.記事を書く
投稿 ＞ 新規追加 より記事を書きます。



03. 画像をアップロードする
画面上のアップロード挿入のアイコンをクリックし、
画像をアップロードします。



04.画像を挿入する
アップロード後の画面で、代替テキスト、配置、サイズを設定します。
ここでは、配置を中央、サイズを中とします。



投稿に挿入を押下します。
画像が記事に挿入されます。



05. ソースの確認
HTMLタブをクリックし、ソースを確認します。

<a href="http://ranka.sub.jp/taroumatsu/?attachment_id=37" rel="attachment wp-att-37">
<img class="aligncenter size-medium wp-image-37" title="flower" src="http://ranka.sub.jp/taroumatsu/wp-content/uploads/2012/03/flower-300x225.jpg" alt="フラワー" width="300" height="225" />
</a>

img要素のclass属性の、
aligncenterが配置の中央を指定したときのクラス
size-mediumがサイズの中を指定したときのクラス
となります。
wp-image-37は、この画像固有のクラスです。


06.表示の確認、CSS編集
公開を押下し、記事を公開します。



この段階では、画像は中央に表示されていません。
style.cssに下記記述を追加します。

/* 記事内の画像 */
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}



中央に表示されましたが、IEで確認すると、画像に枠が表示されています。
下記記述をstyle.cssに追加し、枠を非表示にします。

div.post img  {border: none}

[0回]

記事個別のページを作成します。
編集するファイルは、index.phpです。
記事個別のページは、トップページに表示された記事のタイトルをクリックすると表示します。

01. タイトル
title要素に、記事のタイトルを追加します。
・記述
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
・出力
<title>太郎松の備忘録 &raquo; ０９タイトル</title>

02.前の記事、次の記事
前の記事、次の記事へのリンクを追加します。
・記述
<p class="pagelink">
<span class="oldpage"><?php previous_post_link(); ?></span>
<span class="newpage"><?php next_post_link(); ?> </span>
</p>
・出力
<p class="pagelink">
<span class="oldpage">&laquo; <a href="http://ranka.sub.jp/taroumatsu/?p=20" rel="prev">#08たいとるぇ</a></span>
<span class="newpage"><a href="http://ranka.sub.jp/taroumatsu/?p=25" rel="next">１０たいとる１０</a> &raquo; </span>
</p>

03. 調整
トップページを表示すると、前の記事、次の記事へのリンクが表示されています。



これを表示させないために、下記記述を追加します。
・記述
<?php if(is_single()): ?>
<p class="pagelink">
<span class="oldpage"><?php previous_post_link(); ?></span>
<span class="newpage"><?php next_post_link(); ?> </span>
</p>
<?php endif; ?>
・出力


<?php if(is_single()): ?> ～ <?php endif; ?>は、記事個別のページが表示されている場合に、内容を出力します。

[0回]