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

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

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

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

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

タク
何かいい方法があったら教えてください。
画像を編集する事なく、アイキャッチ画像に文字を入れる方法

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

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

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

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

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

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

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

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

2019年7月15日



ブログ運営ノウハウを紹介
アフィリエイトの始め方・やり方|初心者がブログで月10万円を稼ぐための手順

初心者にとって必要なアフィリエイトのテクニックを包み隠さず紹介しており、アフィリエイトの教科書代わりになるよう、できるだけ分かりやすくまとめています。