画像編集せずアイキャッチ画像に文字を入れる方法｜文字を入力するだけでOK

画像編集をする事なく、アイキャッチ画像に文字を入れる方法はないのかな。

毎回、編集するのは面倒だから、文字を入力するだけで完成するようにはできないのかな。

そんな疑問に答えていきます。

今回は、photoshopなどの画像編集ソフトを使う事なく、文字を入力するだけでアイキャッチ画像に文字列を表示させる方法を実践していきます。

ちなみに、このブログはアイキャッチに文字を入れていませんが、面白そうなのでやってみます。

完成品は以下の通りです。

完成品は至って普通のアイキャッチ画像ですが、手軽さが違います。

WordPressの記事投稿画面で、以下のように文字を入力するだけで、上の画像のように表示されます。

WordPressを対象としています

※この記事は3分程度で読めます。

画像編集ソフト不要！アイキャッチ画像に文字を入れる方法

アイキャッチ画像に文字を入れる方法を解説していきます。

大きく分けて、6つのSTEPがあるので、ざっくりと確認しておいてください。

STEP1.カスタムフィールドの準備

カスタムフィールドとは投稿や固定ページに任意の情報を保存できる機能のことですが、イメージが湧かないと思うので分からなくてもOKです。

とりあえず、読み進めてください。「いやいや、ちゃんと理解したい」って方はこちらが参考になります。

STEP2.プラグイン「Custom Field Template」をインストール

カスタムフィールドをテンプレート化するために、プラグイン「Custom Field Template」をインストールしていきます。

「カスタムフィールドはプラグインを使うことで便利になる」くらいの認識でOK

「Custom Field Template」と入力して、インストール＆有効化します。

STEP3.カスタムフィールドテンプレートを用意

プラグインのインストールが終わると、画面左のメニュー「設定」に「カスタムフィールドテンプレート」という項目が追加されるので、クリックして設定を開きます。

テンプレートタイトルとテンプレートコンテンツを画像の通りに編集します。

編集できたら「オプションを更新する」をクリックします。(TEMPLATE#1は空欄でOK)

STEP4.テスト記事を作成

「投稿」→「新規追加」に移動して、いつも通り記事を作成しますが、全ての設定が終わっているわけではないので、テスト記事を一つ作ります。

タイトル、本文、アイキャッチ画像を設定して、公開状態を「非公開」にして、更新してください。

上の画像のように、タイトル横に「非公開」と表示され、ログインしている自分にだけテスト記事が表示されます。

テスト記事の編集画面に戻ります。画面右上の「表示オプション」をクリックして、「カスタムフィールドテンプレート」にチェックを入れます。既に入っている場合は何もしなくてOKです。

投稿画面の下部に「カスタムフィールドテンプレート」という項目が追加されているので、任意の文字列を入力して、保存してください。

これで記事の作成ができました。

STEP5.カスタムフィールドのデータを表示する

いよいよ、カスタムフィールドテンプレートに保存したデータを表示させますが、テーマを編集していくので、必ずバックアップしてから作業してください。

アイキャッチ画像の下にカスタムフィールドの値を出力します。

<span class="eyecatch-txt-main"><?php echo get_post_meta($post->ID , 'アイキャッチ文字(メイン)' , true); ?></span>
<span class="eyecatch-txt-sub"><?php echo get_post_meta($post->ID , 'アイキャッチ文字(サブ)' , true); ?></span>

上記コードをコピーして、任意の箇所に貼り付けます。

<figure class="eyecatch">
	<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a>
	<!--ここから-->
	<span class="eyecatch-txt-main"><?php echo get_post_meta($post->ID , 'アイキャッチ文字(メイン)' , true); ?></span>
	<span class="eyecatch-txt-sub"><?php echo get_post_meta($post->ID , 'アイキャッチ文字(サブ)' , true); ?></span>
	<!--ここまで-->
</figure>

僕はWordPressテーマ「STORK」を使っているので、別のテーマをご利用の方は、テーマに応じて配置箇所を変えてください。

アイキャッチ画像の下に、カスタムフィールドの値が出力されました。

STEP6.デザインや配置を整える

いくつか参考になるものを検索して見たんですが、その中でも、キックさんのブログが「見やすくていいな」と思ったので、参考にさせてもらいます。以下のような感じですね。

これをCSSで再現するとなると、問題になるのが縁取りです。

ここまで綺麗に縁取りはできませんが、これに近いものに仕上げる事は可能です。

.eyecatch-txt-main,.eyecatch-txt-sub {
	font-weight:800;
	color:blue;
	text-shadow: 2px 2px 0px #fff,
             -2px 2px 1px #fff,
             2px -2px 1px #fff,
             -2px -2px 1px #fff;
}

.eyecatch-txt-main {
	position:absolute;
	left:10px;
	bottom:10px;
	font-size: 64px;
}

.eyecatch-txt-sub {
	position:absolute;
	left:10px;
	top:10px;
	font-size:52px;
	transform: rotate( -10deg );
	transform-origin: right top;
}

text-shadowを使って縁取りしてみました。細めの縁取りですが、これ以上太くすると汚くなってしまうので、これが限界です。

何かいい方法があったら教えてください。

完成品はこんな感じになりました。毎回、同じパターンではつまらないので、数パターン用意しておくといいかもしれませんね。

WordPressで作られたブログ内の画像であれば、どこでも(最新記事、関連記事など)に表示可能ですが、SNSにシェアされた画像には表示されないので注意が必要です。

というわけで、今回は以上となりますが、カスタムフィールドを使えばWordPressの可能性がかなり広がります。

その例として、アイキャッチ画像に文字を表示させてみました。

もし分からないところがあったら、Twitter(@takuhx)で相談してもらえれば、相談に乗りますよ。

「WordPressをもっと勉強したい」という方は以下の記事を参考にしてみてください。

【体験レポ】TechAcademy(テックアカデミー)のWordPressコースは4週間で受講可能です

2019年7月15日