ダウンロードしてすぐにご利用いただける、ウェブ標準XHTML+CSSレイアウトの無料デザインテンプレートです。

テンプレート一覧

ダウンロードしてすぐにご利用いただける、ウェブ標準XHTML+CSSレイアウトの無料デザインテンプレートです。

テンプレート一覧

ダウンロードしてすぐにご利用いただける、ウェブ標準XHTML+CSSレイアウトの無料デザインテンプレートです。

テンプレート一覧

ダウンロードしてすぐにご利用いただける、ウェブ標準XHTML+CSSレイアウトの無料デザインテンプレートです。

テンプレート一覧

ダウンロードしてすぐにご利用いただける、ウェブ標準XHTML+CSSレイアウトの無料デザインテンプレートです。

テンプレート一覧

ダウンロードしてすぐにご利用いただける、ウェブ標準XHTML+CSSレイアウトの無料デザインテンプレートです。

テンプレート一覧

ダウンロードしてすぐにご利用いただける、ウェブ標準XHTML+CSSレイアウトの無料デザインテンプレートです。

テンプレート一覧

ダウンロードしてすぐにご利用いただける、ウェブ標準XHTML+CSSレイアウトの無料デザインテンプレートです。

テンプレート一覧

ダウンロードしてすぐにご利用いただける、ウェブ標準XHTML+CSSレイアウトの無料デザインテンプレートです。

テンプレート一覧

ダウンロードサイト：David Coppit’s Code Page

最下部 Category Order 2.0.1 をダウンロード[2008/10/30現在]

ダウンロードしたファイル（Zip）を解凍後、/wp-content/plugins/へアップロード。使い方はいたってシンプル。

• [Insert spacer before this item] カテゴリー行間が開く(上)。
• [Insert spacer after this item] カテゴリー行間が開く(下)。
• [Put the Post Count Inside the Category Link] 投稿数までリンクに含まれる(リンク領域が広がる)。選択後は[Put the Post Count Outside the Category Link]と表示される(解除)。
• [Reset the Order to Single Level , Alphavetical] デフォルトの状態へ。

参考：Category Order：カテゴリーの順序を並び替え

ファイル名を指定

<?php get_header(); ?>
<?php get_footer(); ?>
<?php get_sidebar(); ?>
<?php comments_template(); ?>

TEMPLATEPATH/sidebar-2.phpを作製したとき

<?php get_sidebar('2'); ?>
sidebar-***.php の ***部分 2.5以上

特定のテンプレートの読み込み。

TEMPLATEPATH/header-singleを作製したとき

<?php include (TEMPLATEPATH . '/header-single.php'); ?>

デザイン的に変更箇所が多い場合はこちらが便利。

• index.phpにだけ特定内容を表示
• page.phpにだけ特定内容を表示
• single.phpにだけ特定内容を表示など

<?php if(タグ): ?> ～ <?php endif; ?>

指定サンプル:1

<?php if(is_home()): ?>
<h1>AAAAAAAAAA</h1>
<?php endif; ?>
<?php if(is_archive()): ?>
<h1>BBBBBBBBBB</h1>
<?php endif; ?>

指定サンプル:2

<?php if(is_home()): ?>
<h1>AAAAAAAAAA</h1>
<?php else: ?>
<h1>BBBBBBBBBB</h1>
<?php endif; ?>

メインページ

<?php if(is_home()): ?> ～ <?php endif; ?>

フロントページ

サイトのフロントページが表示されている場合。投稿の場合とページの場合あり。管理画面の「設定>表示設定>トップページの表示」で、「最新の投稿」が選択されているか、「固定ページ (以下を選択)」で現在のページが表示されている場合。 注: この条件タグは バージョン 2.5 で追加。

<?php if(is_front_page()): ?> ～ <?php endif; ?>

シングルページ

<?php if(is_single()): ?> ～ <?php endif; ?>

記事を含むページ

<?php if(comments_open()): ?> ～ <?php endif; ?>
WordPress ループ内で処理中の記事がコメント受信を受け付けている場合

<?php if(pings_open()): ?> ～ <?php endif; ?>
WordPress ループ内で処理中の記事がピン(ピンバックおよびトラックバック)を受け付けている場合

ページ

<?php if(is_page()): ?> ～ <?php endif; ?>

ページテンプレート（バージョン 2.5以降）

<?php if(is_page_template()): ?> ～ <?php endif; ?>

カテゴリーページ

<?php if(is_category()): ?> ～ <?php endif; ?>

アーカイブページ

<?php if(is_archive()): ?> ～ <?php endif; ?>

タグページ

<?php if(is_tag()): ?> ～ <?php endif; ?>

日付別ページ

<?php if(is_date()): ?> ～ <?php endif; ?>
<?php if(is_year()): ?> ～ <?php endif; ?>
<?php if(is_month()): ?> ～ <?php endif; ?>
<?php if(is_day()): ?> ～ <?php endif; ?>
<?php if(is_time()): ?> ～ <?php endif; ?>

検索結果ページ

<?php if(is_search()): ?> ～ <?php endif; ?>

404 Not Found ページ

<?php if(is_404()): ?> ～ <?php endif; ?>

詳細条件分岐指定

シングルページ

<?php if(is_single('17')): ?> ～ <?php endif; ?>
ID 17の記事が表示されている場合

<?php if(is_single('Irish Stew')): ?> ～ <?php endif; ?>
"Irish Stew"(ビーフシチュー)というタイトルの記事が表示されている場合

<?php if(is_single('beef-stew')): ?> ～ <?php endif; ?>
"beef-stew"(ビーフシチュー)という投稿スラッグの記事が表示されている場合

<?php if(is_single(array(17,'beef-stew','Irish Stew'))): ?> ～ <?php endif; ?>
ID が 17、投稿スラッグが "beef-stew"、またはタイトルが "Irish Stew" のいずれかにあてはまる記事が表示されている場合。注: 配列を引数に使えるのは バージョン 2.5 以降

ページ

<?php if(is_page('42')): ?> ～ <?php endif; ?>
ID 42のページが表示されている場合

<?php if(is_page('About Me And Joe')): ?> ～ <?php endif; ?>
"About Me And Joe"というタイトルのページが表示されている場合

<?php if(is_page('about-me')): ?> ～ <?php endif; ?>
"about-me"という投稿スラッグのページが表示されている場合

<?php if(is_page(array(42,'about-me','About Me And Joe'))): ?> ～ <?php endif; ?>
ID が 42、投稿スラッグが"about-me"またはタイトルが"About Me And Joe"のいずれかにあてはまるページが表示されている場合
注: 配列を引数に使えるのは バージョン 2.5 以降

ページテンプレート（バージョン 2.5以降）

<?php if(is_page_template('about')): ?> ～ <?php endif; ?>
"about"というページテンプレートが使われている場合

カテゴリーページ

<?php if(is_category('9')): ?> ～ <?php endif; ?>
カテゴリーID 9のアーカイブページが表示されている場合

<?php if(is_category('Stinky Cheeses')): ?> ～ <?php endif; ?>
"Stinky Cheeses"というカテゴリーのアーカイブページが表示されている場合

<?php if(is_category('blue-cheese')): ?> ～ <?php endif; ?>
"blue-cheese"というカテゴリースラッグのアーカイブページが表示されている場合

<?php if(in_category(’5′)): ?> ～ <?php endif; ?>
現在の記事がカテゴリーID 5に属する場合にtrueを返す

タグページ

<?php if(is_tag('mild')): ?> ～ <?php endif; ?>
"mild"というスラッグのついたタグのアーカイブページが表示されている場合

<?php if(is_tag(array('sharp','mild','extreme'))): ?> ～ <?php endif; ?>
"sharp"または"mild"または"extreme"というスラッグのついたタグのアーカイブページが表示されている場合
注: 配列を引数に使えるのは バージョン 2.5 以降

参考：Conditional Tags

プロパティ

min-width

値

em | px | %

対象

すべての要素(tableは除く)

継承の有無

なし

通常は最小幅[max-width]と同時指定します。

<div id="box">
<div id="***"></div>
<div id="***"></div>
<div id="***"></div>
</div>
---- CSS ----
#box {
  min-width: 700px;
  max-width: 900px;
}

IE6以前のブラウザ用にCSSファイルを作成するなどの対処が必要。

IE独自拡張スクリプトを記述

#box {
  min-width: 700px;
  max-width: 900px;
  width: expression(document.body.clientWidth < 701? "700px":document.body.clientWidth > 901? "900px" : "100%");
  position: relative;
}

IE用CSSファイルを読み込む

<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<!–[if gte IE 6]>
<link rel="stylesheet" href="IE用.css" type="text/css" media="screen" />
<![endif]–>
</head>

max-widthプロパティ

min-widthプロパティは要素の最大の横幅を設定。

プロパティ

max-width

値

em | px | %

対象

すべての要素(tableは除く)

継承の有無

なし

プロパティ

max-width

値

em | px | %

対象

すべての要素(tableは除く)

継承の有無

なし

通常は最小幅[min-width]と同時指定します。

<div id="box">
<div id="***"></div>
<div id="***"></div>
<div id="***"></div>
</div>
---- CSS ----
#box {
  min-width: 700px;
  max-width: 900px;
}

IE6以前のブラウザ用にCSSファイルを作成するなどの対処が必要。

IE独自拡張スクリプトを記述

#box {
  min-width: 700px;
  max-width: 900px;
  width: expression(document.body.clientWidth < 701? "700px":document.body.clientWidth > 901? "900px" : "100%");
  position: relative;
}

IE用CSSファイルを読み込む

<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<!–[if gte IE 6]>
<link rel="stylesheet" href="IE用.css" type="text/css" media="screen" />
<![endif]–>
</head>

min-widthプロパティ

min-widthプロパティは要素の最小の横幅を設定。

プロパティ

min-width

値

em | px | %

対象

すべての要素(tableは除く)

継承の有無

なし

親ボックス内でfloatを解除しなかった場合、背景画像が表示されない、或いは親ボックスの下まで表示されない場合などに有効だが、基本的には親ボックス内でfloatを解除した方がbetter。

<div id="box">
<div id="box-a"></div>
<div id="box-b"></div>
</div>
---- CSS ----
#box { width: 700px; margin: 0 auto; background: #******; }
#box-a { width: 500px; float: left; }
#box-b { width: 200px; float: right; }

<div id="box" class="clearfix">
<div id="box-a"></div>
<div id="box-b"></div>
</div>
---- CSS ----
#box { width: 700px; margin: 0 auto; background: #******; }

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

 .clearfix { display: inline-block; } /* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
 .clearfix { display: block; } /* End hide from IE-mac */

#box-a { width: 500px; float: left; }
#box-b { width: 200px; float: right; }

参考：Clearing a float container without source markup

和訳：構造のマークアップなしでフロートをクリアする方法

とても参考になる記事：clearfixの決定版を作る －モダンブラウザ編－

ダウンロードサイト

ダウンロードしたファイル（Zip）を解凍後、/wp-content/plugins/へアップロード。

設置したい箇所に下記ソースを挿入。

<?php related_posts(); ?>

プラグイン：Related Entriesの設定

Related Entriesを有効化するとプラグイン管理ページに[Related Posts Options]が表示されるので選択。

How many related posts would you like to show?:

関連記事の表示数指定。

Before / After (Post Title) : / For example: <li></li>or<dl></dl>

関連記事タイトルの表示設定。

Show excerpt?

抜粋表示指定。

Excerpt length (No. of words):

抜粋の文字数指定。

Before / After (Excerpt): / For example: <li></li>or<dl></dl>

抜粋部分の表示設定

Show password protected posts?

パスワードで保護された記事の表示指定。

SQL Index Table Setup

SQL Index Table Setupが反映されない（上手くいかない）とき。

[phpMyadmin] [データベース] [データベース名] [SQL]から

ALTER TABLE `wp_posts` ADD FULLTEXT `post_related` (
  `post_name` ,
  `post_content`
  )

ALTER TABLE `データベースのテーブル接頭後_posts` ADD FULLTEXT `post_related` (,,,,,?

各課単位で更新

商店街の各店単位、共同組合の各組合員単位で共同運営

Wordpressについて

以下はWordPress 日本語ローカルサイトからの引用文です。

ブログの運用と管理

柔軟なファイル配置

Wordpressの関連ファイルの配置を自由に配置することが出来ます。これらのファイルは公開されているブログの重要な構成ファイルで、ブログと同じディレクトリに配置することも、違うディレクトリに配置することも出来ます。例えば、http：//example.com（サーバー上のディレクトリ：public_html）というブログの関連ファイルをhttp：//example.com/wordpress（サーバー上のディレクトリ：public_html/wordpress）に配置することが可能です。

ユーザー管理

Wordpressでは、各機能に対するユーザーアクセス権を管理する為に、ユーザーレベルを使用しています。ユーザーレベルを変更することによって、ブログ内のコンテンツの編集や作成等といった、各ユーザーの権限を制限することが出来ます。

簡易なインストール、アップデート

「たった５分！」Wordpressは、インストールがシンプルで、操作性に富んでいます。また、最新バージョンへのアップデート作業は簡単で、インストールよりも時間が掛かりません。

動的なページ生成

ブログを更新する度にウェブページを再構築するといったような事は必要ありません。全てのウェブページは、ブログ読者の要求に応じて、データベースやテンプレートを使用して生成されます。これは、ブログの更新やデザインを、可能な限り早くすることが出来ることを意味し、そしてなによりもサーバー容量を最小限に抑えています。

国際化と現地語化

選択により現地語に対応したブログを作成する事や、また選択した言語で配信する事ができます。gettextを使用する事により、翻訳や現地語化を最大限に行う事が出来ます。

ブログの配信

フィード

Wordpressは、RSS 1.0 (aka RDF), RSS 2.0、 そしてATOM等の規格に完璧に対応しています。さらに、作成した全てのページに対して、読者が購読出来るように関連したフィードを生成します。例えば、最新の記事に対してやカテゴリー等、つまり必要とする全てに対してのフィードが用意されています。より多くの読者が個々の項目を把握し続けたいと思えば、筆者はより簡単に伝えたい内容を広く配信することが出来ます。

乱雑さのなくなったパーマリンク

ブログ内の個々のページへのURLは、標準的で乱雑さのない方法に従っています。また、それらURLは構造的で、実用的で、そして人やコンピュータ（検索エンジン含む）が理解しやすいリンクになっています。簡潔なURLは、検索エンジンの最適化や向上したユーザーエクスペリエンスに不可欠です。

ブログ間の伝達

増加し続けるインターネットの中で、Wordpresは、PingBack（ピンバック）とTrackBack（トラックバック）機能を備えるようになりました。他のブログとの伝達手段としては最も有用で、他のブログからもPingbackやTrackbackを受けることが出来ます。

デザインのカスタマイズ

テンプレートベースのデザイン

Wordpressでは各ページを動的に生成するためにテンプレートを使用しています。テンプレートエディターとテンプレートタグでテンプレートを編集することにより各コンテンツの表示を管理できます。

テンプレートとファイルエディタ

Wordpressには、テンプレートや関連ファイルを編集するための、ファイルエディタが備わっています。編集するために該当ファイルをダウンロードしたり、アップロードをしたりといった必要はなく、その場でブラウザ上から編集出来ます。

テンプレートタグ

テンプレートタグ により、ブログに表示される情報や内容を、より簡単にデザイン出来ます。ブログをデザインするためにPHPの達人にある必要はありません。

テーマ

手軽に利用可能なテーマやスタイルを使用して、ブログの外観を変更できます。また、自作のテーマやスタイルを作成したり、共有することが出来ます。

プラグイン

プラグインによりブログの機能を拡張することが出来ます。ユーザーによって開発された多くのプラグインは、既に入手可能で、ブログに必要と思われる全てのことに対して使用可能です。

コンテンツの作成

パスワードによる保護

ある複数人でブログの内容を共有し、全ての人には公開したくない場合、その記事にパスワード保護を掛けることにより簡単に出来ます。

投稿スラグ

もし簡潔なパーマリンクを使用しているのであれば、各記事に対して投稿スラグを使用することによりリンクを定義することが出来ます。

事前投稿

今日書いた記事を、自動的に将来のある時点でブログに表示させることが出来ます。

複数ページ投稿

もし長い記事になってしまった時、読者が最後までずっとスクロールする必要がない様に、記事をいくつかのページに分けることが出来ます。

ファイル・画像のアップロード

画像やファイルをアップロードして、記事に表示したりリンクを付けることが出来ます。それらをアップロードする際にはサムネイルを作成するオプションもあります。

カテゴリー

カテゴリーやサブカテゴリーとドンドン細分化して記事を体系化することが出来ます。

感情表現

WordPressは、":)"の様なスマイリーを的確に認識し、これに対応する画像イメージに変換します。

草稿の保存

未完成の記事を保存し、後で編集し、終わった時に投稿することが出来ます。

記事のプレビュー

【投稿】ボタンを押す前に、思った通りになっているか確認するために、記事のプレビューを見ることが出来ます。実際、プレビューは即座に行われるためいつでも確認できます。

アーカイブと検索

アーカイブ化

長期間ブログを続けた後問題になってくるのは、どの様に上手く記事を構成するかです。そのためにWordpressは、全ての過去記事を含んだアーカイブを表示するために、既存のオプションをいくつか備えています、例えば、年間、月間、日別、週間、著者別(author-wise)から選択することが出来ます。そして、テンプレートタグを使用して、これらのアーカイブページへのリンクを生成することで、簡単にメインページ（もしくはそれ以外のページ）からアーカイブページへリンクすることが出来きます。Wordpressは動的に各ページを生成するので、サーバー容量を別途消費することはありません。

検索

Wordpressは、最初から検索機能ツールが備わっていて、ブログ訪問者が単語単位で検索できます。また、search-hilite pluginを使用したWordpressであれば、検索した単語を強調表示します。これにより、さらに、より簡単に訪問者が、検索したものを見つけることが出来ます。これに付け加えて、このプラグインは、googleの様な検索エンジンの検索結果をクリックして訪問した読者に対しても同じように動作します。全てを含めて、Wordpressでの検索は快適です。

コメント及びディスカッション

HTMLタグの使用

全ての人が悪い人だというわけではないが、ご自身のブログで使用可能なHTMLタグを決める事によって、悪い人たちを抑制します。Wordpressで許可されているデフォルトで利用可能なHTMLは、サーバーやデータの危険性を落とすことない妥当な選択で、読者にコメント時にHTMLを使用出来るようにしています。

適正化

管理を徹底したい人のために、Wordpressは、いくつかの適正化オプションを提供しています。例えば、

• ブログに表示されている全てのコメント
• 特定の言葉を含むコメント
• 特定のIPアドレスから投稿されたコメント
• 許可している数以上のリンクを含むコメント

これら全てスパムやサイトの破壊行為を抑制します。

通知

Wordpressは、新しいコメント、承認待ちのコメント等の、最新情報をお知らせするためにメールを送信することが出来ます。

ダウンロードサイト

制作者ページ

解説ページ：Google Mapsの新仕様に対応したWordPressのプラグイン -Google Maps Quicktag

ダウンロードページ：Lightview for WordPress

ダウンロードページ：Lightview 2.3.2

ダウンロードしたファイル（Zip）を解凍後、Lightview 2.3.2の中身 [CSSフォルダ] [imagesフォルダ] [lightview.js]をLightview for WordPressフォルダへ入れ、/wp-content/plugins/へアップロード。

class="lightview"をリンク部分へ入力。

<a href="画像.jpg" title="タイトル" class="lightview">****</a>

デモ表示

以下カスタマイズ参考：coliss

backgroundColor ----- 背景色
border ----- ボーダーのサイズ
buttons.opacity ----- ボタン不透明度
effects ----- Scriptaculousの効果
images ----- lightview.jsからみたディレクトリ
imgNumberTemplete ----- 画像のナンバリング
overlay ----- オーバーレイ
radus ----- 角丸の半径
sideshow.delay ----- スライドの表示タイミング
titleCaptionSplit ----- タイトルとキャプションの区切り
transition ----- リサイズのエフェクト
viewport ----- 画像の表示領域
zindex ----- zindexの値

ダウンロードページ

制作者ページ

Sitemap.xmlの生成。

ダウンロードしたファイル（Zip）を解凍後、/wp-content/plugins/へアップロード。空ファイル[sitemap.xml]・[sitemap.xml.gz]を作成して、トップディレクトリにアップロード。パーミッション[606/666]

ダウンロードページ

作者ページ

番号表示のページリンク[ページング]

ダウンロードしたファイル（Zip）を解凍後、/wp-content/plugins/へアップロード。

ページナビを設置したい箇所に下記ソースを挿入。

<?php wp_pagenavi(); ?>

ページナビゲーション：pagebar

ダウンロードページ

作者ページ

番号表示のページリンク[ページング]

ダウンロードしたファイル（Zip）を解凍後、/wp-content/plugins/へアップロード。

ページナビを設置したい箇所に下記ソースを挿入。

<?php wp_pagebar(array(’before’=>’Pages: ‘))?>

ダウンロード

日本語版 All in One SEO Pack 1.4.6.14

作者ページ

各ページのTitleタグ、Meta Keywords、Meta Descriptionの個別指定。

ダウンロードページ

作者ページ

<?php if ( class_exists('breadcrumb_navigation_xt') ) { ?>
    <div class="breadcrumb">
    <?php
    // Display a prefix
    echo 'Navigation: ';
    // new breadcrumb object
    $mybreadcrumb = new breadcrumb_navigation_xt;

// Apply options: オプション設定
//    設定したい項目の行頭のスラッシュ2つを外すと有効になる。UTF-8で保存。
//    以下にセットしてある値は、true/false の項目は初期値の逆、その他は初期値。

// $mybreadcrumb-&gt;opt['static_frontpage'] = true;    // 「ページ」を使ってブログ以外のホームページを設けている（ブログがホームの下位レベルにある）場合。初期値は false（ホーム＝ブログ）
    // その場合のオプション
    // $mybreadcrumb-&gt;opt['url_blog'] = ”;  // ブロクのURL。http://www.site.com/myweblog/にブログがあるなら ‘/myweblog/’
    // $mybreadcrumb-&gt;opt['home_display'] = false;   // 「Home」を表示しない場合。初期値は true（表示）
    // $mybreadcrumb-&gt;opt['url_home'] = get_settings(’home’);    // ホームへのリンクURI
    // $mybreadcrumb-&gt;opt['home_link'] = false;  // ホームにリンクを付けずテキストのみ表示。初期値は true（リンク付き）
    // $mybreadcrumb-&gt;opt['title_home'] = ‘Home’;    // ホームを表すテキスト

// その他のオプション
// $mybreadcrumb-&gt;opt['title_blog'] = ‘Weblog’;  // ブログのトップを表すテキスト
// $mybreadcrumb-&gt;opt['separator'] = ‘ / ‘;  /* 階層間の区切り文字 */
// $mybreadcrumb-&gt;opt['title_search'] = ‘Search’;    /* 検索結果ページを表すテキスト */
// $mybreadcrumb-&gt;opt['singleblogpost_prefix'] = ‘Blog article: ‘;   /* 記事名の接頭辞 */
// $mybreadcrumb-&gt;opt['singleblogpost_suffix'] = ”;     /* 同 接尾辞 */
// $mybreadcrumb-&gt;opt['page_prefix'] = ”;   /* ページ名の接頭辞 */
// $mybreadcrumb-&gt;opt['page_suffix'] = ”;   /* ページ名の接尾辞 */
// $mybreadcrumb-&gt;opt['urltitle_prefix'] = ‘Browse to: ‘;    /* 上位ページのリンクにポインタを当てたときのツールチップの接頭辞 */
// $mybreadcrumb-&gt;opt['urltitle_suffix'] = ”;   /* 同ツールチップの接尾辞 */
// $mybreadcrumb-&gt;opt['archive_category_prefix'] = ‘Archive by category &amp;#39;’;  /* カテゴリアーカイブの接頭辞 */
// $mybreadcrumb-&gt;opt['archive_category_suffix'] = ‘&amp;#39;’;  /* カテゴリアーカイブの接尾辞 初期値はシングルクオート */
// $mybreadcrumb-&gt;opt['archive_date_prefix'] = ‘Archive: ‘;  /* 年月日アーカイブの接頭辞 */
// $mybreadcrumb-&gt;opt['archive_date_suffix'] = ”;           /* 年月日アーカイブの接尾辞  */
// $mybreadcrumb-&gt;opt['use404'] = false; /* 404エラーのときに次項の専用タイトルを表示しない場合。初期値は true（表示） */
// $mybreadcrumb-&gt;opt['title_404'] = ‘404′;  /* 404エラー時の表示タイトル */
// $mybreadcrumb-&gt;opt['link_current_item'] = true;   /* 現在のページ名にリンクを付ける場合。初期値は false（テキストのみ） */
// $mybreadcrumb-&gt;opt['current_item_urltitle'] = ‘Link of current page (click to refresh)’;  /* 前項でtrueにしたときのツールチップ表示 */
// $mybreadcrumb-&gt;opt['current_item_style_prefix'] = ”; /* 現在のページ名の接頭辞（タグでもOK。&lt;span class=&quot;bc_current&quot;&gt;等） */
// $mybreadcrumb-&gt;opt['current_item_style_suffix'] = ”; /* 現在のページ名の接尾辞 */
// $mybreadcrumb-&gt;opt['posttitle_maxlen'] = 0;   /* 記事タイトルの表示文字数。0は無制限 */
// $mybreadcrumb-&gt;opt['singleblogpost_category_display'] = true; /* 単体記事表示時にカテゴリを表示。初期値は false（非表示） */
// $mybreadcrumb-&gt;opt['singleblogpost_category_prefix'] = ”;    /* 前項でtrueにしたときのカテゴリ名の接頭辞 */
// $mybreadcrumb-&gt;opt['singleblogpost_category_suffix'] = ”;    /* 同 接尾辞 */

// Display the breadcrumb
$mybreadcrumb-&gt;display();
?&gt;
&lt;/div&gt;&lt;!– [breadcrumb] –&gt;

<?php } ?>

参考：power source

• さくらインターネット
• xrea.com
• ステップサーバー
• ロリポップ
• CPI
• OCN
• ぷらら
• Yahoo Geocities
• DION
• So-net

(x)HTML

<div id="wrapper">
<div id="header">***データ***</div>
<div id="content">***データ***</div>
<div id="sidebar">***データ***</div>
<div id="footer">***データ***</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#footer{ clear: both; }

Page Top

padding指定の注意事項

標準準拠モードでは width 及び height に padding を含みません。

後方互換モードは width 及び height に padding を含みます。

詳細：CSSレイアウト崩れの原因について

#wrapper内に余白を設ける

全体の幅は800pxで固定する事として解説します。

#wrapper内の左右に10pxの余白とる場合

#wrapper{
  width: 780px;
  padding: 0 10px;
}

#content{
    width: 580px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
あるいは

#wrapper{
  width: 780px;
  padding: 0 10px;
}

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 180px;
    float: left;
}

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
あるいは

#wrapper{
  width: 780px;
  padding: 0 10px;
}

#content{
    width: 590px;
    float: right;
}

#sidebar{
    width: 190px;
    float: left;
}

今回は、全体の幅は800pxで固定する事としました。よって、左右にpaddingを10pxとるので#wrapperの幅は左右のpadding分を差し引いて780pxとしなければいけません。（標準準拠モードでは width 及び height に padding を含みません。）

後は、#wrapper内の#contentと#sidebarの幅を780pxに合うように変更すれば上手く段組み出来ます。

Page Top

#header内に余白を設ける

#header内の上下に20px、左右に10pxの余白とる場合

#wrapper{ width: 800px; }

#header{
  height: 80px;
  padding: 20px 10px;
}

#headerの幅は#wrapperのwidthが基準となるので特に指定は要りませんが、高さは上下に設けた余白分差し引かなければいけません。（標準準拠モードでは width 及び height に padding を含みません。）

#headerに背景画像を指定する際など重要です。

もうひとつの方法として、#header内に#header-innerを設ける方法があります。MTやWPなどのブログソフトウェアでよくある構造です。

(x)HTML

<div id="wrapper">
<div id="header">
<div id="header-inner">***データ***</div>
</div>
<div id="content">***データ***</div>
<div id="sidebar">***データ***</div>
<div id="footer">***データ***</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

#header{ height: 120px; }

#header-inner{ margin: 20px 10px; }

Page Top

#contentと#sidebar内に余白を設ける

全体の幅は800pxで固定する事として解説します。

#contentと#sidebar共に、左右20pxのpaddingを設ける場合。

#wrapper{ width: 800px; }

#content{
    width: 560px;
    float: right;
    padding: 0 20px;
}

#sidebar{
    width: 160px;
    float: left;
    padding: 0 20px;
}

#contentと#sidebar共に、左右に20pxのpaddingを設けたので、それぞれのwidthから40px分差し引かなければいけません。（標準準拠モードでは width 及び height に padding を含みません。）

参考までに、もしwidth指定を変更しなかったら、標準準拠モードでは#contentの幅は640px、#sidebarの幅は240px、合わせて880pxと計算されます。

(x)HTML

<div id="wrapper">
<div id="header">***データ***</div>
<div id="content">***データ***</div>
<div id="sidebar">***データ***</div>
<div id="footer">***データ***</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#footer{ clear: both; }

Page Top

#wrapper内に余白を設ける

全体の幅は800pxで固定する事として解説します。

#wrapperと#content及び#sidebarとの間に余白を設けたい時など、基本的にmarginで余白を設定するのは難しいと考えて下さい。IE6の場合、floatプロパティで指定した方向と同方向にmarginをとると、marginで指定した長さの2倍余白をとるバグを抱えています。よって、簡単に余白を設ける場合は次頁の余白指定：paddingを参照して下さい。

参考までにmargin指定で余白をとる場合

1：#wrapperの中にもうひとつボックス（#wrapper-inner）を設ける

(x)HTML

<div id="wrapper">
<div id="wrapper-inner">
<div id="header">***データ***</div>
<div id="content">***データ***</div>
<div id="sidebar">***データ***</div>
<div id="footer">***データ***</div>
</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

/* 左右に10pxとったので、実際の入力可能範囲は 780pxである事に注意  */
#wrapper-inner{ margin: 0 10px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

/* 780pxに納まるように指定  */
#sidebar{
    width: 180px;
    float: left;
}

#footer{ clear: both; }

2：#contentと#sidebarの中にもうひとつボックス（#content-innerと#sidebar-inner）を設ける

(x)HTML

<div id="wrapper">
<div id="header">***データ***</div>
<div id="content">
<div id="content-inner">***データ***</div>
</div>
<div id="sidebar">
<div id="sidebar-inner">***データ***</div>
</div>
<div id="footer">***データ***</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

/* 右に10pxとったので、実際の入力可能範囲は 590pxである事に注意  */
#content-inner{ margin-right: 10px; }

#sidebar{
    width: 200px;
    float: left;
}

/* 左に10pxとったので、実際の入力可能範囲は 190pxである事に注意  */
#sidebar-inner{ margin-left: 10px; }

#footer{ clear: both; }

Page Top

#header下に余白を設ける

#header{
  height: 120px;
  margin-bottom: 50px;
}

Page Top

#contentと#sidebarの間に余白を設ける

全体の幅は800pxで固定する事として解説します。

最も簡単な方法

#contentと#sidebarのwidth指定で800px以下になるように指定します。#contentはfloat:right;で右側に、#sidebarはfloat:left;で左側にいっぱい寄るので設けたい余白分、どちらかのwidthを小さくするか、あるいは両方小さくするかで自然な余白を設ける事ができます。

#contentと#sidebarの間に40px余白を設ける場合

#contentを小さくする

#wrapper{ width: 800px; }

#content{
    width: 560px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#sidebarを小さくする

#wrapper{ width: 800px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 160px;
    float: left;
}

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
両方小さくする

#wrapper{ width: 800px; }

#content{
    width: 580px;
    float: right;
}

#sidebar{
    width: 180px;
    float: left;
}

Page Top

#footer上に余白を設ける

clearプロパティが指定してある要素に、上方向のmarginを指定しても指定は反映されません。

#footer上に余白を設ける時は、#contentと#sidebarの方に下方向のmargin指定をします。

#footer上に50pxの余白を設ける場合

#wrapper{ width: 800px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
    margin-bottom: 50px;
}

#sidebar{
    width: 200px;
    float: left;
    margin-bottom: 50px;
}

#footer{ clear: both; }

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
あるいは

#wrapper{ width: 800px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#content,
#sidebar{ margin-bottom: 50px; }

#footer{ clear: both; }

(x)HTML

<div id="wrapper">
<div id="header">***データ***</div>
<div id="content">***データ***</div>
<div id="sidebar">***データ***</div>
<div id="footer">***データ***</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#footer{ clear: both; }

ヘッダー部分（#header）、コンテンツ部分（#content）、サイドバー部分（#sidebar）、フッター部分（#footer）はすべて親ボックスの#wrapperの中に包括されています。よって、ホームページ全体の横幅を変更するにはcssの#wrapper部分のwidthを変更してやります。

この時、ヘッダー部分（#header）とフッター部分（#footer）は幅指定をしていないので、今回のようにホームページ全体の横幅を変更しても、レイアウトに及ぼす影響はありません。（今回は、最も簡単でシンプルな段組を採用しています。）#wrapperのwidthに合わせて伸縮します。

コンテンツ部分（#content）とサイドバー部分（#sidebar）はwidth指定と、float指定でそれぞれ左右に配置しているので、#wrapperのwidthに合わせて変更してやらなければなりません。

Page Top

横幅計算の基本

横幅を変更する際の簡単な四則計算について説明しておきます。

仮にサンプルの横幅を760pxとした場合サンプルホームページはどうなるでしょう。この場合は#sidebarが#contentの下へ落ちてしまいレイアウトが著しく崩れてしまいます。cssソースを見ても一目瞭然で、#contentのwidthが600px、#sidebarのwidthが200px、合計で800pxなので760px内に納まるわけがありません。

横幅変更の際だけでなく、ホームページを作成する際の横幅は、基準となる要素（今回は#wrapper）の中にそれぞれの内包要素が納まるように指定しなければなりません。

今回は、各要素の余白（ margin padding ）やborder指定をしていませんが、これらの指定を加えていくと、初心者の場合、必ずと言っていいほどレイアウト崩れを起こします。その場合でも、基準となる要素内にそれぞれの要素が上手く納まるように計算するのが基本です。つまり、簡単な足算と引算が最も重要という事です。

関連：CSSレイアウト崩れの原因について

Page Top

横幅を小さくするには

横幅を小さくする（狭くする）指定について説明します。今回は#wrapperを760pxとして解説します。

基準要素の幅が760pxとなるので、#content、#sidebarのwidthを760px、もしくは760px以下に指定しなければなりません。考えるのは、#contentのwidthを小さくする、あるいは#sidebarのwidthを小さくして、#contentと#sidebarのwidthの合計が#wrapperのwidth:760px;と同等か、あるいは760px以下になるように計算する事です。以下は、横幅を小さくする（狭くする）際のcssサンプルの一例です。

#contentの幅を変更のパターン

#wrapper{ width: 760px; }

#header{ height: 120px; }

#content{
    width: 560px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#footer{ clear: both; }

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#sidebarの幅を変更のパターン

#wrapper{ width: 760px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 160px;
    float: left;
}

#footer{ clear: both; }

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#content #sidebarの幅を変更のパターン

#wrapper{ width: 760px; }

#header{ height: 120px; }

#content{
    width: 580px;
    float: right;
}

#sidebar{
    width: 180px;
    float: left;
}

#footer{ clear: both; }

Page Top

横幅を大きくするには

横幅を大きくする（広くする）指定について説明します。今回は#wrapperを860pxとして解説します。

基準要素の幅が860pxとなるので、サンプルの指定のままでは#contentと#sidebarの間に60pxの空白が生じてしまいます。（これは実際には、レイアウトを崩さない為の指定テクニックです。）よって#content、#sidebarのwidthを860px、もしくは860px以下になるように指定します。考えるのは、#contentのwidthを大きくする、あるいは#sidebarのwidthを大きくして、#contentと#sidebarのwidthの合計が#wrapperのwidth:860px;と同等か、あるいは860px以下になるように計算する事です。以下は、横幅を大きくする（広くする）際のcssサンプルの一例です。

#contentの幅を変更のパターン

#wrapper{ width: 860px; }

#header{ height: 120px; }

#content{
    width: 660px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#footer{ clear: both; }

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#sidebarの幅を変更のパターン

#wrapper{ width: 860px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 260px;
    float: left;
}

#footer{ clear: both; }

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#content #sidebarの幅を変更のパターン

#wrapper{ width: 860px; }

#header{ height: 120px; }

#content{
    width: 640px;
    float: right;
}

#sidebar{
    width: 220px;
    float: left;
}

#footer{ clear: both; }

floatレイアウトの基本は、上記のように親ボックスの中で左右に配置させたい子ボックスをfloat指定により回り込ませ、最後に回り込みを解除するのが最も簡単な段組です。では、親ボックスと子ボックスを実際の作成例に沿って置き換えてみます。

まずそれぞれの要素（div要素）を用意します。

(x)HTML

<div></div> <!– 親ボックス — >
<div></div> <!– 子ボックス — >
<div></div> <!– 子ボックス — >
<div></div> <!– 子ボックス — >
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
親ボックス内に子ボックスを配置するので
<div> <!– 親ボックス — >
<div></div> <!– 子ボックス — >
<div></div> <!– 子ボックス — >
<div></div> <!– 子ボックス — >
</div> <!– 親ボックスの終わり — >

Page Top

idセレクタ名をつける

上記サンプル図のボックスに、それぞれ任意のセレクタ"名をつけます。セレクタ名は一目でわかる言葉（単語など）を指定します。ここでは下記のように指定します。

• 親ボックス(div)を wrapperとする。
• ひとつ目の子ボックス(div)を contentとする。
• ふたつ目の子ボックス(div)を sidebarとする。
• 最後の子ボックス(div)を footerとする。

上記の条件で、サンプル図の解説分を読み替えてみます。

wrapper内でcontentとsidebarを左右に配置。
wrapper内で回り込みを解除（footer）。という事になります。

(x)HTML

<!– wrapper内に各要素（ボックス）を配置 –>
<div id="wrapper">
<div id="content">***データ***</div>
<div id="sidebar">***データ***</div>
<div id="footer">***データ***</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css
#wrapper{ 各種指定 }
#content{ 各種指定 }
#sidebar{ 各種指定 }
#footer{ 各種指定 }

Page Top

CSS指定/レイアウトを考える

実際に各要素のCSS指定をしていきます。

まず最初に考える事は、全体の幅（width）をどうするかです。固定幅にするのか、可変幅（リキッドレイアウト）にするのか、コンテンツ部分の幅（width）、サイドバーの幅（width）、右サイドバータイプ、左サイドバータイプなどを考えます。ここでは以下の条件で指定していきます。

• 全体の幅（#wrapper）を800pxの固定幅とする。
• 左サイドバータイプとする。
• コンテンツ部分の幅（#content）を600pxとする。
• サイドバー部分の幅（#sidebar）を200pxとする。

css

#wrapper{ width: 800px; }

#content{
    width: 600px;
    float: right;  /* 右に配置 */
}

#sidebar{
    width: 200px;
    float: left;  /* 左に配置 */
}

#footer{ clear: both; }  /* float解除 */

ワンポイント

右サイドバータイプにする場合、上記の#contentと#sidebarのfloat指定を逆にします。CSS指定で左右の変更が簡単に出来るのがCSSレイアウトのメリットです。

右サイドバータイプにする場合の別の方法として、単に#sidebarのfloat指定をleftにしても良いのですが、#contentと#sidebarのfloat指定は左右別々にした方が、レイアウト上でかなり融通がききます。

右サイドバーにする時のCSSソースサンプル

css

#content{
    width: 600px;
    float: left;  /* 左に配置 */
}

#sidebar{
    width: 200px;
    float: right;  /* 右に配置 */
}

Page Top

ヘッダーを追加する

ホームページらしく、ヘッダー部分を追加します。今回ヘッダー部分は#headerとします。指定は簡単で#wrapper内に#headerを挿入するだけです。

(x)HTML

<div id="wrapper">
<div id="header">***データ***</div>
<div id="content">***データ***</div>
<div id="sidebar">***データ***</div>
<div id="footer">***データ***</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

/*
高さだけ指定しています。
#headerの幅は指定しなくても#wrapperのwidth分広がります
*/
#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#footer{ clear: both; }

floatに関する指定について

以下はfloat指定の際の注意項目です。確認してみて下さい。

width指定をしていない。

すべてのブラウザで起こるわけではありませんが、Mac IE5ではfloat指定の際widthも指定しなければ回り込みが上手く反映されません。

widthを指定する事は、余白を設定する場合やリンク領域を要素全体に広げたい際にも重要になります。普段から記述する事をお勧めします

floatを指定した同方向にmarginを指定している。

サンプル

#sample{
float: left;
width: 180px;
margin-left: 20px;
}

IEではfloatと同方向にmarginを取ると、幅が2倍で表示されます。

widthの計算。

• 全体の幅を超えていないか
• 余白分差し引いているか
• border分差し引いているか

以下のCSS指定サンプルではレイアウトは崩れます

#wrapper{ width: 700px; }

#content{
    width: 500px; /* この場合なら 489px */
    float: left;
    margin: 0 10px 0 0;
    border-right: 1px solid #000;
}

#sidebar{
    width: 200px;
    float: right;
}

#footer{ clear: both; }

標準準拠モードと後方互換モードに関する部分です。詳細はCSSレイアウト崩れの原因についてで確認して下さい。

どの文書型定義（DTD）に従って記述しているかを明確にします。以下はDTDとレタリングモードの一覧です。

XML宣言について

上記レタリングモード一覧にもあるように、IE6ではXMLを宣言すると強制的に互換モード表示になります。CSS側での対応も可能ですが、現状ではXMLを宣言しない方が（記述しない）望ましいです。