WordPressテーマTwenty Fifteenのアイキャッチにキャプションを付ける方法

私が WordPress でブログを書くようになって変わったことの一つに次のものがあります。

それは記事の一つ一つに「アイキャッチ」と呼ばれる画像を付けるようになったということです。

アイキャッチというのは、記事タイトルの上や下に付いている、記事の内容を端的に表した画像のことです。
たぶん、いろいろなブログを見ている方はもう「アイキャッチ」が付いているのが当たり前だと思うことでしょう。

私も他の人のブログを見ていて「いいな」と思い付けるようにしたのですが、この画像、いったいどこから持ってくるのかということです。
自分が撮影した画像であれば殆どの場合使うのは自由だと思います。
しかし他の人が撮影した画像には著作権というものがあり、勝手に使うことはできません。

調べていくと画像の中には著作権による利益を放棄した CC0 というものがあり、それであれば自由に使うことができます。

しかし、毎回ブログで画像を使うようになると CC0 の画像の中には使いたい画像がない場合もあります。

一方、画像の中には CC BY といって、原作者の表示やリンクを貼ることによって利用することが可能なものもあります。

https://creativecommons.org/licenses/by/4.0/deed.ja

今回は WordPress のテーマ Twenty Fifteen のアイキャッチ画像にこの CC BY の表示をどうやって行うかがテーマです。

Twenty Twelve の場合

私が以前使用していたテーマ Twenty Twelve では下記記事の方法でアイキャッチ画像のキャプションにこの CC BY の表示をしていました。

https://yuzakasota.com/20161014-wordpress-eye-catch-caption-how-to/

実は私がこのアイキャッチ画像にキャプションを付ける方法を思い出したのは、自分のブログに自動で付いた広告の中に過去の記事が表示されたことでした。
その表示がなければ、自分でも以前どうやったのか思い出せずにいたかもしれません。

Twenty Fifteen の場合

今回、テーマを Twenty Fifteen に変更し、同じ方法が取れないかとやってみたのですが、どうも画像とキャプションのバランスがよくありません。

そこで検索した結果みつけたのが下記の記事です。

https://solamoyo.pinaboss.net/2018/03/19/%E5%81%B6%E7%84%B6%E7%99%BA%E8%A6%8B/

再度検索しようとしましたが、どういうキーワードで検索したのか思い出せません。
そこで忘れないうちにとこの記事を書いています。

変更するファイルは次の2つです。
子テーマ twentyfifteen のフォルダに親テーマから content.php をダウンロードしてから変更します。

content.php

Twenty Fifteen の元の content.php に以下のようになっている部分があります。

	<?php
		// Post thumbnail.
		twentyfifteen_post_thumbnail();
	?>

この4行を削除します。

そして次の2行を上記のあった場所に貼り付けます。

<?php the_post_thumbnail();
echo '<div class="post-thumbnail-caption">' . get_post( get_post_thumbnail_id() )->post_excerpt . '</div>'; ?>

style.css

こちらは子テーマを利用する為に既に以下の記載がなされています。

/*
Template:twentyfifteen
Theme Name:twentyfifteen-child
*/

 

そこに以下の属性を追加します。

/*20180410アイキャッチのキャプションの設定*/
.post-thumbnail-caption{
	margin-top:12px;
	margin-left:5px;
	margin-right:5px;
	padding-left:10px;
	padding-right:10px;
	font-size: 1.4rem;
	color: #6b6b6b;
	background-color: #f3f3f3;
}

変更後の style.css はこんな感じになります。

/*
Template:twentyfifteen
Theme Name:twentyfifteen-child
*/


/*20180410アイキャッチのキャプションの設定*/
.post-thumbnail-caption{
	margin-top:12px;
	margin-left:5px;
	margin-right:5px;
	padding-left:10px;
	padding-right:10px;
	font-size: 1.4rem;
	color: #6b6b6b;
	background-color: #f3f3f3;
}

はい、これ全て先程のブログからのコピペです。

Twenty Fifteen というテーマはあまり人気がないのか、ググってみてもコピペで使えそうな情報をみつけることができませんでした。
そのため先程のブログが記事を非公開にしてしまうと、私はキャプションの付け方を知ることができなくなると思い、私の記事に残させていただきました。

Special Thanks

ソラモヨウ
https://solamoyo.pinaboss.net/

管理者の maki さんには快くコピペを承諾していただきました。
本当にありがとうございます。

この記事のアイキャッチ画像には CC BY の画像を付けてみようと思います。
もし、同じテーマでアイキャッチ画像にどうやって著作権者の表示をしようかと悩んでいる方がいらっしゃいましたら、是非試してみてください。