30代は創造する

サイドバーの装飾を行います。

01. ソースの確認、編集
ソースを見ると、サイドバーのリストは、ul要素で囲まれていないことが確認できます。
ul要素で囲むように、index.phpを編集します。
サイドバーのPHPタグをul要素で囲みます。
--- 編集前のHTMLソース（サイドバー部分） ここから--
<!-- サイドバー -->
<div id="sidebar">
<li id="categories-3" class="widget widget_categories">
    <h2 class="widgettitle">カテゴリー</h2>
    <ul>
        <li class="cat-item cat-item-3"><a href="http://ranka.sub.jp/taroumatsu/?cat=3" title="HTML、XHTML">(X)HTML</a> (6)</li>
        <li class="cat-item cat-item-4"><a href="http://ranka.sub.jp/taroumatsu/?cat=4" title="CSS">CSS</a> (6)</li>
        <li class="cat-item cat-item-5"><a href="http://ranka.sub.jp/taroumatsu/?cat=5" title="JavaScript">JavaScript</a> (4)</li>
        <li class="cat-item cat-item-6"><a href="http://ranka.sub.jp/taroumatsu/?cat=6" title="jQuery">jQuery</a> (2)</li>
        <li class="cat-item cat-item-7"><a href="http://ranka.sub.jp/taroumatsu/?cat=7" title="PHP">PHP</a> (3)</li>
        <li class="cat-item cat-item-8"><a href="http://ranka.sub.jp/taroumatsu/?cat=8" title="WordPress">WordPress</a> (3)</li>
        <li class="cat-item cat-item-1"><a href="http://ranka.sub.jp/taroumatsu/?cat=1" title="未分類 に含まれる投稿をすべて表示">未分類</a> (3)</li>
    </ul>
</li>
<li id="archives-3" class="widget widget_archive">
    <h2 class="widgettitle">月別アーカイブ</h2>
    <ul>
        <li><a href='http://ranka.sub.jp/taroumatsu/?m=201203' title='2012年3月'>2012年3月</a>&nbsp;(15)</li>
    </ul>
</li>
<li id="recent-posts-2" class="widget widget_recent_entries">
    <h2 class="widgettitle">最近の記事</h2>
    <ul>
        <li><a href="http://ranka.sub.jp/taroumatsu/?p=47" title="キャプションを付けてみる">キャプションを付けてみる</a></li>
        <li><a href="http://ranka.sub.jp/taroumatsu/?p=45" title="はみ出る">はみ出る</a></li>
        <li><a href="http://ranka.sub.jp/taroumatsu/?p=42" title="本文の左右に画像を挿入する">本文の左右に画像を挿入する</a></li>
        <li><a href="http://ranka.sub.jp/taroumatsu/?p=36" title="画像を挿入する">画像を挿入する</a></li>
        <li><a href="http://ranka.sub.jp/taroumatsu/?p=25" title="１０たいとる１０">１０たいとる１０</a></li>
    </ul>
</li>
</div>
--- 編集前のHTMLソース（サイドバー部分） ここまで--

・記述
<!-- サイドバー -->
<div id="sidebar">
<ul>
<?php dynamic_sidebar(); ?>
</ul>
</div>


02. サイドバーの装飾
style.cssに下記を追記します。

div#sidebar ul  {margin: 0;
  padding: 0;}

div#sidebar li  {list-style-type: none}

div#sidebar .widget {background-color: #0c8bcd;
  padding: 16px;
  margin-bottom: 10px}

div#sidebar h2  {font-size: 0.75em;
  color: #ffffff;
  border-bottom: solid 1px #ffffff;
  padding-bottom: 8px;
  margin: 0 0 10px}

div#sidebar li li {font-size: 0.75em;
  margin-bottom: 4px;
  background-image: url(listmark.gif);
  background-repeat: no-repeat;
  padding-left: 16px}

div#sidebar li li a {text-decoration: none;
  color: #ffffff}

[0回]

ウィジットを使って、サイドバーの中身を作ります。
ウィジットとは、簡易的なアプリのことです。

01. ウィジットの機能を有効にする
ウィジットは、「外観 ＞ ウィジット」で設定できます。
ただし、現状では使用できないので、まず使用できるようにします。


「functions.php」という殻のファイルを作成し、アップロードします。

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

「外観 ＞ テーマ編集」より、テーマのための関数（functions.php）を編集します。
・記述
<?php
// ウィジット
register_sidebar();
?>


これで、ウィジットが有効になりました。


02. 表示するメニューを選択する。
表示するメニューを、「利用できるウィジット」から、画面左の「サイドバー1」へドラッグします。
今回は、カテゴリー、アーカイブ、最近の投稿の３つを選択しました。


03. ウィジットを出力する
設定したウィジットを画面に出力するために、index.phpを編集します。
サイドバーのdiv要素を編集します。
・記述
<!-- サイドバー -->
<div id="sidebar">
<?php dynamic_sidebar(); ?>
</div>

画面をすると、サイドバーにメニューがリスト（ul要素）で表示されています。


04. メニューの編集
メニューを編集します。
タイトルを編集、投稿数を表示するように設定しました。

[0回]

２段組のレイアウトにします。
今回は、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回]