アイキャッチ画像（記事の最初にある画像）にタイトル文字を入れているブログってありますよね？
わたしもやってみたいと思ったのですが、画像を加工するのって割と手間がかかって......
すぐに投げ出しました。
ブログの更新作業はスマートフォンからすることが多く、スマートフォンで画像加工するのって面倒くさいんですもの......
しかし、この記事のアイキャッチ画像をみてください。
文字が入っている風ではないですか？
というわけでこの記事では、スマートフォンで画像加工をしたくないという気持ちから編み出した「アイキャッチ画像に文字が入っている風にする方法」を説明します。
このブログの環境はWordPressのテーマSimplicity2を使用しているので、他の環境では設定が異なる可能性がありますのでご了承のほどよろしくお願い致します。
アイキャッチ画像を使う理由
そもそもアイキャッチ画像は何のために設置するのか？
読者にブログ記事のイメージを伝えて関心を持ってもらい、読み進めてもらうための工夫ですね。
またSNSでシェアされた際もサムネイル画像として表示されるので、目を引きやすく拡散・流入の手助けにもなります。
文字が入っている風
今回の方法ですが、あくまで「文字が入っている風」です。
実際には画像に文字は入っていません。
この記事のアイキャッチ画像にある文字列を選択するとわかりますが、画像の上に文字列を重ねて表示しているんですね。
画像の加工が面倒くさいから、そのまま文字列を重ねてしまいました。
画像に文字列を重ねる方法
実際の方法ですが「style.css」の編集をします。
WordPress管理画面の「外観」から「テーマの編集」を選択して「style.css」の編集画面に移動します。
そして以下の内容を追記して保存
.text-container {
position: relative;
width: auto;
word-wrap: break-word:
}
.image-text{
position: absolute;
margin: 0;
padding: 0;
padding: 0.3em;
font-size: 1.3em;
font-weight: bold;
bottom: 3.0em;
left: 5%;
right: 5%;
background: rgba(200,128,0,0.8);
color: #ffffff;
}あとは記事を書く際に本文の最初に、以下のように重ねたい文字列をタグで囲って入力すれば完成です。
<div class="text-container"> <div class="image-text">アイキャッチ画像に重ねたい文字列</div> </div>
簡単ですね。
問題点
この方法は簡単なのですが、問題点もあります。
端末によって表示が異なる
まずアイキャッチ画像のサイズを取得していません。
そのため文字列の表示領域が画像の横幅とあっておらず、環境によっては画像からはみ出すこともありますし、ディスプレイの解像度の違いやスマートフォンを横にしただけでも表示が変わります。
なるべく大きな変更をせず実現するためにこうなりました。
...
......
.........ウソです。取得の仕方がわかりませんでした。
「wp_get_attachment_image_src」関数を使えばいいのかな？とは思ったのですが、そもそも関数の使い方がわからなかったんですよ。
......勉強します。
また「em単位」で表示位置の指定をしているのでフォントサイズが変わると表示位置も変わってしまいます。
サムネイルに文字が入らない
アイキャッチ画像を設置する理由でも書きましたが、SNSでのサムネイル画像としてもアイキャッチ画像は使われます。
しかし今回の方法はアイキャッチ画像には手を加えていないので、当然サムネイル画像には文字が入っていません。
クラス名がダサい
関数名とかクラス名とかつけるの苦手なんですよ......
「試しにやってみようかな？」と思った際には、ダサくないクラス名に変更してください。
おわりに
いかがだったでしょうか？
今回は「手軽にそれっぽくしたい」と思って実験的にやってみました。
この内容が何かのひらめきにつながれば幸いです。
色々検討するのって楽しいですよね。
正直にいうと、こんな回りくどい方法とらずに自分にあった画像加工アプリを探した方がいいんですけどね。
大丈夫、気付いてますよ。