ウォーターマークを利用してサムネイルに「ネタバレ注意」表記する（Yapb, WP2.3以降）

※「LC Memo – Yet Another Photoblogを使用してギャラリーページを作成する」をカスタマイズしています。元となるテンプレートファイルの作り方はこの記事をご覧下さい。

　ネタバレなど注意喚起が必要な画像のサムネイルにその旨を記載します。

←こんな感じです。

　phpthumbのウォーターマーク機能を使います。

1. ウォーターマーク画像を作成

　まずは注意喚起の画像を作ります。

　白の塗りつぶしレイヤーで全体を塗りつぶして、このレイヤーの不透明度を50%くらいにします。
　この上に文字を書きます。どんな色と合成しても読めるように縁取ります。こちらは不透明度100%です。
　これをアルファPNGで保存します。
　結果としてはこうなります↓

　ウォーターマークの画像を半透明にして合成することもできるのですが、個人的なこだわりでこのようにしています。
　私の使っている60px四方ので良かったらこちらを保存して使ってください。

2. 画像をアップロード

　1. で作った画像 netabare.png をWordPressトップディレクトリにアップロードします。

　別にどこでもいいんですが、Yapbのプラグインフォルダに入れていると自動アップデートの際に消されてしまうので…。余談ですがこれは日本語化ファイルにも言えることで、一々アップロードし直すのが面倒なので私は手動でアップデートにしています。手動でアップデートされている方はプラグインフォルダにまとめておいてもいいと思います。

　さて、下準備はこのへんで終了。

3. 「ネタバレ注意」タグを作成

　タグ名「ネタバレ」、タグスラッグ「caution」でタグを作成します。

4. ソースを貼り付け

　ギャラリーページのテンプレートの <ul> ～ </ul> を次のソースに張り替えます。

	  <ul>
<?php
	while (have_posts()) : the_post();
		if ($post->image):
			if (has_tag('caution')) {
				$thumbnailConfig = array('w=' . $thumb_w , 'h=' . $thumb_h , 'zc=1', 'fltr[]=wmi|../../../netabare.png|C|100|');
				$list_class = " caution";
			} else {
				$thumbnailConfig = array('w=' . $thumb_w , 'h=' . $thumb_h , 'zc=1');
				$list_class = "";
			}
?>
		<li class="thumb_list"  title="<?php the_title() ?>"><a href="<?php the_permalink(); ?>" class="illust_thumb"><img src="<?php echo $post->image->getThumbnailHref($thumbnailConfig) ?>" alt="<?php the_title() ?>" title="<?php the_title() ?>" width="<?php print $thumb_w; ?>" height="<?php print $thumb_w; ?>" /></a></li>
<?php
		endif;
	endwhile;
?>

　ネタバレ作品のサムネイルは <li> タグに「caution」クラスが付くので、専用のスタイルを適用することも出来ます。
　専用スタイルにする場合は下のような設定をCSSファイルに追加してください。

.caution a:link img {
	border-color : #d56a00 !important;
}

.caution a:hover img {
	border-color : #ff8000 !important;
}

.caution a:visited img {
	border-color : #8F9DA6 !important;
}

5. 該当記事に「ネタバレ」タグをつける

　これで準備完了です。
　あとはネタバレな絵の記事に「ネタバレ」タグをつければOKです。

「ネタバレ」カテゴリを作ったりしてもOKですが、タグを選ぶほうが汎用性があるかなーと思ってこのようにしてみました。

　同じ要領で、対象年齢に制限がある、特殊な趣向である、と言った場合にも使えると思います。