アイキャッチの「型」を作って、Canva→Cocoonに表示させるまで

アイキャッチ ブログ運営

ブログ記事を書くたびに、アイキャッチ画像をゼロから考えるのって地味に大変ですよね。

私は作業を簡略化したくて、Canvaでカテゴリーごとの「型(テンプレート)」を作ることにしました。

でも、型ができてからも「これをどうやってWordPressに保存して、投稿画面にのせればいいの?」というところで、いくつかつまずきました。

同じところでつまずいている初心者さんの参考になればと思い、実際の手順とつまずきポイントをまとめます。

ももも
ももも

地味だけど時間を取られるポイントが多かったよ

Canvaでアイキャッチの型を作る

まずはCanvaで、カテゴリーごとのテンプレートを作成しました。

サイズは 1920px × 1080px(16:9) に設定。

「テーマ」機能を使って、白い角丸の枠と外側のカラー背景を作りました。

カテゴリーごとに枠の色を分けています。

  • 栄養コラム&サプリ紹介用 → 緑
  • 栄養レシピ用 → オレンジ
  • 栄養ブログ用 → 青
  • 趣味・体験談用 → ピンク

こうしておくと、記事を見た瞬間にどのカテゴリーの記事かパッとわかるようになります。

イラストを配置するときは、枠ギリギリまで詰め込まず、余白を持たせるのがおすすめです。

サムネイルサイズに縮小されたときも、崩れにくくなります。

ダウンロードした画像の「保存場所」が迷子になる問題

型ができたら、画像をダウンロードします。

ここで最初につまずいたのが、ダウンロードした画像がどこに保存されたかわからなくなるという問題でした。

パソコン操作に慣れていないと、「ダウンロードフォルダのどこか」に行ってしまって見失いがちです。

私はこの対策として、ダウンロードした画像を一度デスクトップに貼り付けて場所を固定することにしました。

こうすれば、次にWordPressにアップロードするときも迷わず選べます。

WordPressのメディアライブラリにアップロードする

保存場所が確定したら、WordPressの管理画面から画像をアップロードします。

  1. 管理画面の「メディア」→「新規追加」を開く
  2. 「ファイルを選択」をクリック
  3. デスクトップを開いて、保存しておいた画像を選択

これでメディアライブラリに画像が追加されます。

投稿にアイキャッチ画像を設定する

次に、実際の投稿にアイキャッチを設定していきます。

投稿編集画面の右側サイドバーにある「アイキャッチ画像を設定」をクリック。

メディアライブラリから、先ほどアップロードした画像を選択します。

すると、サイドバーに選んだ画像のサムネイルが表示されます。

編集画面に表示されないから、反映されるか不安になった

ここで一つ知らなかったことがありました。

アイキャッチ画像を設定したのに、作業中の編集画面本体には画像が表示されませんでした。

このとき、「保存して投稿画面を確認すれば、ちゃんと表示される」ということを知らなかったので、「これ本当に反映されるの?」と焦ってしまいました。

ももも
ももも

保存して確認するまでは、ちょっとドキドキするよね

サイドバーにはアイキャッチが表示されているが、編集画面本体には表示されていない状態

「投稿を表示」を押して、実際の記事ページを確認してみると、タイトルの下にちゃんとアイキャッチが表示されていました。

編集画面に表示されていなくても、保存して確認すればきちんと反映されているので、心配いりませんでした。

公開後の記事ページではタイトル下にアイキャッチが正しく表示されている

つまずきポイント早見表

今回のつまずきと解決策を、表にまとめておきます。

症状原因解決策
画像の保存場所がわからないダウンロードフォルダに埋もれる一度デスクトップに貼り付けて場所を固定する
編集画面本体にアイキャッチが表示されず、反映されるか不安になる保存して投稿画面を見れば表示されることを知らなかった「投稿を表示」で確認すれば、実際はちゃんと反映されている

まとめ

今回つまずいたポイントを整理すると、こんな流れでした。

  1. Canvaでカテゴリー別のアイキャッチテンプレートを作成(サイズ1920×1080px、カテゴリーごとに枠の色分け、イラストは余白を持たせて配置)
  2. ダウンロードした画像の保存場所が迷子になる → デスクトップに貼って場所を固定して解決
  3. WordPressのメディアライブラリからアップロード
  4. 投稿編集画面で「アイキャッチ画像を設定」→画像を選択
  5. 編集画面本体にアイキャッチが表示されず不安になる → 保存して「投稿を表示」で確認すれば、実際はちゃんと反映されている

どれも小さなつまずきですが、知らないと地味に時間を取られるポイントばかりでした。

ももも
ももも

一つずつ確認していけば大丈夫だよ

同じようにブログを始めたばかりの方の参考になればうれしいです。

【この記事を書いた人】栄養士 ももも/アラフォー・ブログ初心者。野菜・食品の栄養やレシピを中心に、日々試行錯誤しながら発信しています。

タイトルとURLをコピーしました