これからのホームページはCMSサイト。簡単更新なのに高いレスポンスでアクセスアップ。ロゴマークデザインやWEBサイト製作はＤ-31Ｎデザインスタジオへ。

/* キャプション */

div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

div.alignright {
	padding: 5px;
	margin: 0 0 2px 7px;
	display: inline;
	}

div.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.wp-caption {
	border: 1px solid #666666;
	text-align: center;
	background-color: #F8F8F8;
	padding-top: 4px;
	margin: 10px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}

/* キャプションEND */

ｗｐで画像を貼る時、右寄せや左寄せにしても　大抵の無料のテーマ等では画像の回り込みをさせてくれません。

そこでCSSに回り込みの記述を入れると自由に設定できます。

この画像は左配置にしています。

wordpressでは画像の回り込みを設定すると<img class=alignrightなどとクラス付けされます。なのでCSSには

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left
	}

と入れましょう。
marginとは画像とテキストの余白を指定するものです。
例えば　margin: 0 0 2px 7px　とありますが
これは時計回りに上右下左の余白を指定しているのですが、この書き方の場合は
左側が７ｐｘ空く設定なのです。なので右寄せの場合　左をもっと空けたければ
この７の数字を変えれば良い訳です。
ちなみに　wordpressで画像投稿する際　キャプチャーを使用してしまうと
<img class~というタグは書き出されず <div要素で書き出されます。
これについては　また次回。

さて、以前に更新情報を載せるタグを紹介しましたが、

同じような手法で　サイドナビに特定カテゴリーの更新情報を入れたりって事もあるでしょう。

そんな時、文字数が多くて改行されてしまうと　デザインが崩れたりすれば泣くに泣けずに頭を抱えますよね？？

そんな時に　ドラえもんが用意してくれたのがmbってタグ。

これは文字列に色々と命令を出すタグなのですが、これを使った文字数制限のタグをご紹介します。

まずは文字数制限をしていない更新情報のタグ

<?php $posts = get_posts('numberposts=5&offset=0&category=0'); foreach ($posts as $post): ?>
<li><?php the_time('Y年m月d日') ?>　[ <?php the_category(', ') ?> ]　
     <a href="<?php the_permalink() ?>"><?php the_title(); ?></a><li>
<?php endforeach; ?>

タイトルの文字数を制限したいので下記の部分を変更します

<?php the_title(); ?>

この部分をこう書き換えます

<?php echo mb_substr($post->post_title, 0, 15).'...'; ?>

この中の１５という数字が文字数制限です。そのあとの…は、途切れた文章の後に来る場所なので、>>詳細　とかに変えてもOKです。

上のタグを組み込んだ更新情報タグ

<?php $posts = get_posts('numberposts=5&offset=0&category=1,136'); foreach ($posts as $post): ?>
<li><?php the_time('Y年m月d日') ?>　[ <?php the_category(', ') ?> ]　
     <a href="<?php the_permalink() ?>">
<?php echo mb_substr($post->post_title, 0, 15).'...'; ?>
</a><li>
<hr noshade size="0" color="#C0C0C0">
<?php endforeach; ?>

これを使うことで更新情報以外にも色々と便利になるのです。
may the force be with yo…

ＣＭＳでサイトを製作する場合、サイドナビはウィジェットは使わず、直接打ち込む事が多いです。

ですがクライアントのサイト内容によっては自動的に書き出される方が良い場合もあります。

例えばカテゴリーを自動的にサイドナビに表示させたい時は

<h3>Category</h3><ul>
　<?php wp_list_categories(); ?>
</ul>

ページ全般ならば

<h3>Contents</h3><ul>
　<?php wp_list_pages(); ?>
</ul>

となります。（）の中にパラメーターを入れる事で色々と命令を出すことが出来ます。

例えば　カテゴリー３の下層のみを表示したい場合は

<h3>Category</h3><ul>
　<?php wp_list_categories(child_of=3); ?>
</ul>

Styeleで指定するばあいはtitle_li=と入れるのだけど、パラメーターを複数入れたい場合は&で繋ぐだけです。＜h3>

wordpressをCMSで使う場合、トップページに更新情報やお知らせをつけるのは必須。

私は下記のソースで書き出しています。

<?php $posts = get_posts('numberposts=5&offset=0&category=0'); foreach ($posts as $post): ?>
<li><?php the_time('Y年m月d日') ?>　[ <?php the_category(', ') ?> ]　
     <a href="<?php the_permalink() ?>"><?php the_title(); ?></a><li>
<?php endforeach; ?>

numberposts=数字　は表示させたい件数
category=数字　は表示させたいカテゴリーIDです。
カンマで区切ると複数選択できます。０だと全て表示。

逆にカテゴリー指定を&exclude=カテゴリーナンバー　と変える事によって、
指定のカテゴリーのみ除くという命令も出せます。

更新情報はサイドナビなどに配置する場合は、幅が足りないので、日付やカテゴリー名を削除するなどして調整しましょう。　それでも件名が長いとデザインが崩れたりしますので、
その場合は、文字数制限を入れて調整です。

文字数制限に関してはこちら
あとはCSSでテンプレートに合わせて括ってあげましょう。

このサイトのCSSはちなみに・・
(続きを読む…)