他の人のブログって、アイキャッチ画像がきれいだなあ…
タイトル入り画像って難しそうだけど、どうやって作るんだろう？
このブログのアイキャッチ画像は、開設時からずっとChatGPTに作ってもらった共通画像でした。
いつかタイトル入りのアイキャッチ画像を作ってみたかったのですが、やり方が分からず後回しにしていたのです。
今回、ついにタイトル入り画像を作ることに成功したので、その体験と手順を多数の画像とともにご紹介します！
タイトル入りアイキャッチ画像を作ることにしたきっかけ
このブログのアイキャッチ画像は、スタイルシートやCSSをいじって汎用画像に記事タイトルが重なるように配置して、なんちゃってアイキャッチ画像にしていました。
（今はそのCSSを解除しています。）
なんでわざわざそんなことをしていたかと言うと、「記事ごとに画像を探す手間を省きたい」「タイトル入り画像の作り方が分からない」というのが理由です。
「ブログ初心者はデザインを気にせず記事に集中しよう！」と聞いていたので、アイキャッチ画像は後回しにしていたのですが、記事が増えてくるとだんだんチープさが気になってきたので、ちゃんとアイキャッチ画像を作ろうと思ったわけです。
Canvaでタイトル入りアイキャッチ画像を作る手順
タイトル入り画像は、無料で使えるデザインツール「Canva（キャンバ）」で作りました。
- Canvaにユーザー登録（匿名・無料でOK）
- アイキャッチ画像のサイズを決める
- テンプレートを検索する
- テンプレートのデザインを編集する（簡単！）
- 画像ファイルとしてダウンロードする
- WordPressにアイキャッチ画像を設定する
初心者でも簡単にできた手順を画像を使って説明していきます！
Canvaのユーザー登録｜メールかGoogleアカウントですぐ完了。無料プランでOK！
Canvaトップページの「登録」からユーザー登録をします。
個人情報は不要で、メールアドレスやGoogleアカウントで登録できます。
タイトル入りアイキャッチ画像を作るだけなら、無料プランでも大丈夫です！
デザインの作成｜まずはアイキャッチ画像のサイズを決める
まずはアイキャッチ画像のサイズを決めます。
ログインしたら、「+」ボタン（作成）を選択。
ここからテンプレートを選ぶこともできますが、ブログ向けじゃないものもたくさん出てきて、探すのが大変です。
空っぽのデザインを作ってから、ブログ向けのテンプレートを探すほうが簡単でした。
左下の「カスタムサイズ」を選択。
続いて、作りたいアイキャッチ画像のサイズを指定します。
ブログ向けには横:縦の比率が「16:9」または「1.91:1」の画像がよく使われます。
| 横:縦の比率 （アスペクト比） | 横x縦サイズ例 | 備考 |
|---|---|---|
| 16:9 | 1200×675 1280×720 1600×900 | 横長画像で幅広く使われる （地デジ、Youtubeなど） |
| 1.91:1 | 1080×566 1200×628 1280×670 | SNSへ投稿時にこの比率で表示される （X、Facebookなど） |
僕は、1280×720（16:9）にしました。
大きすぎてもサイトが重くなりますし、いざとなれば上下をカットすれば1.91:1のサイズに調整できますので。
テンプレートの選択｜「ブログ アイキャッチ」で検索がおすすめ
空っぽのデザインが作成されます。
左上の検索欄で「ブログ アイキャッチ」と検索してみます。
おお！どこかで見たようなタイトル入りアイキャッチ画像がたくさん出てきました。（感動！）
みんな、ここからアイキャッチ画像を作っていたのですね！
なお、王冠マークは有料プランのみ使えるテンプレートです。（無料テンプレートだけを検索はできません。）
ちょうど「アイキャッチ設定しよう」というテンプレートがあったので、今回はそれを使わせてもらいました。
テンプレートを選択すると、自動で右のページにコピーされました。
ここから自分のブログ記事に合わせて編集していきます。
デザインの編集｜テキストや色の変更も簡単。保存も自動！
テンプレートのテキストはダブルクリックで編集することができます。
文字サイズなども簡単に変更できます。
イラスト部分の色やサイズも変更できます。こんなに高機能で無料とはすごいですね。
なお、保存は編集するたびに自動で行われるので、保存忘れの心配はありません。
デザインを画像としてダウンロード
編集が終わったら、作成したデザインを画像としてダウンロードしましょう。
左上の「ファイル」→「ダウンロード」→「ファイルの種類」→「ダウンロード」を選択すると、画像ファイルのダウンロードが始まります。
なお、ファイルの種類はイラスト系はPNG（画質が劣化しにくい）、写真系はJPG（ファイルサイズが小さい）が適しています。
王冠がついている項目（サイズ、圧縮、背景透過など）は無料プランでは使えません。
あらかじめ画像サイズは大きめで作っておくと安心ですね。
WordPressでアイキャッチ画像を設定
ここからはWordPressでの操作です。
投稿の編集画面で「アイキャッチ画像を設定」を選択し、先ほどダウンロードしたアイキャッチ画像を設定します。
設定後にブログを確認してみると…きれいに表示されました！
右側の汎用画像とはクオリティの差が歴然ですね（笑）
まとめ
以上、ブログ初心者が初めてタイトル入りアイキャッチ画像を作った体験記でした！
- Canvaなら無料でアイキャッチ画像を作成可能
- ブログ向けのテンプレートが豊富
- 操作は簡単で初心者でも難しくない
やる前は難しそうに感じていましたが、テンプレートを選んで文字を書き換えるだけで形になるのは感動でした。
タイトル入りのアイキャッチ画像があると、記事を開く前から内容が伝わりやすくなりますし、見栄えもいいですね。
「タイトル入りの画像を作るのって難しそう」と思っていた方にこそ、まず1枚作ってみることをおすすめします！
