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

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

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

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

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

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

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

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

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

WordPressを対象としています

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

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

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

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

STEP1.カスタムフィールドの準備
STEP2.プラグイン「Custom Field Template」をインストール
STEP3.カスタムフィールドテンプレートを用意
STEP4.テスト記事を作成
STEP5.カスタムフィールドのデータを表示する
STEP6.デザインや配置を整える

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

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

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

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

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

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

WordPressのカスタムフィールドプラグイン「Custom Field Template」検索

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

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

WordPressのカスタムフィールドプラグイン「Custom Field Template」のインストールが終わると設定に項目が追加される

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

WordPressプラグイン「Custom Field Template」の設定。

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

テンプレートタイトル：アイキャッチ文字
テンプレートコンテンツ：
[メイン] type = text
size = 35
[サブ] type = text
size = 35

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

STEP4.テスト記事を作成

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

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

非公開で更新すると、WordPressにログインしている自分だけに投稿が表示される

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

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

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

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

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

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

WordPressテーマ「stork」でアイキャッチ画像にカスタムフィールドの文字列を出力する

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

<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を使って縁取りしてみました。細めの縁取りですが、これ以上太くすると汚くなってしまうので、これが限界です。

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