LINE2018.02.03こんにちは「おれんじ」です。アイキャッチの加工が面倒なのでそれっぽくする方法を考えたアイキャッチ画像(記事の最初にある画像)にタイトル文字を入れているブログってありますよね?わたしもやってみたいと思ったのですが、画像を加工するのって割と手間がかかって......すぐに投げ出しました。ブログの更新作業はスマートフォンからすることが多く、スマートフォンで画像加工するのって面倒くさいんですもの......しかし、この記事のアイキャッチ画像をみてください。文字が入っている風ではないですか?というわけでこの記事では、スマートフォンで画像加工をしたくないという気持ちから編み出した「アイキャッチ画像に文字が入っている風にする方法」を説明します。このブログの環境はWordPressのテーマSimplicity2を使用しているので、他の環境では設定が異なる可能性がありますのでご了承のほどよろしくお願い致します。端末によって表示が異なるサムネイルに文字が入らないクラス名がダサいおわりにアイキャッチ画像を使う理由そもそもアイキャッチ画像は何のために設置するのか?読者にブログ記事のイメージを伝えて関心を持ってもらい、読み進めてもらうための工夫ですね。SNSでシェアされた際もサムネイル画像として表示されるので、目を引きやすく拡散・流入の手助けにもなります。今回の方法ですが、あくまで「文字が入っている風」です。実際には画像に文字は入っていません。この記事のアイキャッチ画像にある文字列を選択するとわかりますが、画像の上に文字列を重ねて表示しているんですね。画像の加工が面倒くさいから、そのまま文字列を重ねてしまいました。実際の方法ですが「style.css」の編集をします。WordPress管理画面の「外観」から「テーマの編集」を選択して「style.css」の編集画面に移動します。#ffffff;}あとは記事を書く際に本文の最初に、以下のように重ねたい文字列をタグで囲って入力すれば完成です。class="image-text">アイキャッチ画像に重ねたい文字列</div></div>簡単ですね。問題点この方法は簡単なのですが、問題点もあります。端末によって表示が異なるまずアイキャッチ画像のサイズを取得していません。そのため文字列の表示領域が画像の横幅とあっておらず、環境によっては画像からはみ出すこともありますし、ディスプレイの解像度の違いやスマートフォンを横にしただけでも表示が変わります。大きな変更をせず実現するためにこうなりました。..................ウソです。取得の仕方がわかりませんでした。「wp_get_attachment_image_src」関数を使えばいいのかな?とは思ったのですが、そもそも関数の使い方がわからなかったんですよ。......勉強します。「em単位」で表示位置の指定をしているのでフォントサイズが変わると表示位置も変わってしまいます。サムネイルに文字が入らないアイキャッチ画像を設置する理由でも書きましたが、SNSでのサムネイル画像としてもアイキャッチ画像は使われます。今回の方法はアイキャッチ画像には手を加えていないので、当然サムネイル画像には文字が入っていません。クラス名がダサい関数名とかクラス名とかつけるの苦手なんですよ......「試しにやってみようかな?」と思った際には、ダサくないクラス名に変更してください。おわりにいかがだったでしょうか?今回は「手軽にそれっぽくしたい」と思って実験的にやってみました。この内容が何かのひらめきにつながれば幸いです。検討するのって楽しいですよね。正直にいうと、こんな回りくどい方法とらずに自分にあった画像加工アプリを探した方がいいんですけどね。大丈夫、気付いてますよ。※お知らせ楽天ポイント計算済みの価格で商品検索できるページを作成しました。LINEスポンサーリンク楽天ポイントの計算って分かりづらいですよね?「楽天市場」のポイントって実際にどれだけお得なのかわかりづらいですよね?本ブログでは、検索結果の商品一覧に「購入時に付与されるポイントを差し引いた金額」を表示することで、実質価格がひと目でわかる楽天検索ページを公開しています。検索結果からは、そのまま楽天の商品ページに移動できるようになっていて、Amazon検索も可能なので、ぜひ利用してください。Stick」の使用感2017.05.09友達・同僚へのプレゼントにトロフィーをおすすめする3つの理由と選び方2018.05.16敬老の日や長寿祝いに子供の絵を使ってプレゼントを作ろう2018.05.20。