こんにちは！ハンズで美白お風呂グッズを買い込んできたデザイナーのゆぅです！

今回のテーマは「twitpicをスライドショーに。」!
「WordPress オリジナルテーマを作ってみる。その3」の下のほうに書いてあった、My Twitpicsを表示する＋スライドショーにする方法を掘り下げてご紹介いたします。

My Twitpicsを表示する

1. 1.My Twitpicsをダウンロードし、解凍する。
2. 2.プラグインをアップロードし、有効化する。
3. 3.出したい場所にコードを埋め込む。

1.My Twitpicsをダウンロードし、解凍する。

Twitpicの画像を表示してくれる「My Twitpics」
これをまずダウンロード。そして解凍してください。

2.プラグインをアップロードし、有効化する。

解凍したフォルダ「wp-content＞plugins」にアップロードし、WP管理画面のプラグインからMy Twitpicsを有効化してください。

3.出したい場所にコードを埋め込む。

通常はサイドバーに出すみたいですが、ここではコードで出す方法を。
出したい場所に、

<?php MyPictures($username = 'user-name', $num = number, $linked = true, $size =100, $margin = 5, $border = 0, $bordercolor = '#FFFFFF', $service = 'Twitpic') ?>

を書き込んでください。

• $username = ‘twitpicのユーザーの名前’
• $num = 何枚出したいか
• $linked = リンクするかしないか(true,false) trueにするとtwitpicのページに飛びます。
• $size =幅(正方形で出してくれます)
• $margin = 外側の余白
• $border = 枠線の幅（線なしは0）
• $bordercolor = ‘背景色’
• $service = ‘Twitpic’ TwitpicのほかにMobypictureというのが選べるらしいです。

このまま出すとイッキに表示されますね。これをスライドショーにします。

Simplest Slideshow

jsはコリスさんにのっていた画像をクロスフェードで変更するスライドショーの超軽量スクリプト -Simplest Slideshowを使用させてもらってます。ありがたや、ありがたや。

javascript

//slide show
$(function(){
	$('.fadein img:gt(0)').hide();
	setInterval(function(){
		$('.fadein :first-child').fadeOut()
		.next('img').fadeIn()
	    .end().appendTo('.fadein');},
	3000);
});

php

<div class="fadein">
    <?php MyPictures($username = 'user-name', $num = number, $linked = true, $size =100, $margin = 5, $border = 0, $bordercolor = '#FFFFFF', $service = 'Twitpic') ?>
</div>

元サイト：Simplest jQuery Slideshow
クラス「fadein」で囲むだけでなかの画像がスライドショーしてくれるという軽量素敵jsです。ついでにうちで使っているcssも。

CSS(CodeR仕様)

.fadein {
    position:relative;
	width:100px;
	height:100px;
	margin:0 auto;
	background:#FFFFFF;
	padding:2px;
	border-top:solid 1px #cccccc;
	border-left:solid 1px #cccccc;
	border-right:solid 1px #aaaaaa;
	border-bottom:solid 1px #aaaaaa;
}
.fadein img {
    position:absolute;
	left:2px;
	top:2px;
	width:100px;
	height:100px;
}

できあがりです！