いろんな方のおしゃれなアイキャッチ画像を見ていたら、私のブログもおしゃれにしたい気持ちがムクムクとわいてきたのでチャレンジしてみました!
初心者でもできるのか?と不安でしたけど、意外とあっさりできちゃいました♪
今回は、初心者でも簡単にできるアイキャッチ画像の作り方と、ワードプレスの設置方法まで備忘録を兼ねてご紹介します。
初心者にわかりやすいように、ほぼ画像で説明していきますので一緒に作業していきましょう!
アイキャッチ画像の作成ツールはたくさんありますが、初心者にもやさしい「Canva」を使って作成していきます。
wordpressのテーマはcocoonです♪
アイキャッチ画像をCanvaで作る手順
画像作成ツールはたくさんありますが、初心者でも無料で簡単に作成できるのがCanvaです。
もしわからないことがあっても「Canva」と検索すればたくさんの情報が出てくるので、初心者でも悩まず使えるのは助かります。
初めて使う方は、まず無料登録をしてくださいね。
登録はこちらから(無料)⇒ Canva公式サイト
では使い方を順に説明していきます。
アイキャッチ画像のサイズを決める
まず初めに、右上にある「デザインを作成」を選択 ⇒ 次に「カスタムサイズ」をクリックします。
サイズを入力する画面が出てきます。
このブログのアイキャッチ画像は、横(幅)1,200px・縦(高さ)630pxで作成しているのでその数字を入力します。
好きなテンプレートを選ぶ
サイズを入力すると、次はこんな画面(編集画面)になります。
ここで、自分のイメージに合うテンプレートを選んでいきます。
テンプレートの選び方は、左にある「テンプレート」「写真」「背景」の中から好きなデザインを選んでクリックします。
※デザインにカーソルを合わせたとき、右下に👑(王冠)マークが出てくるのは有料なのでご注意!!
選んだデザインをクリックすると、右側の白い画面に表示されます。
表示された画像がサイズよりも小さい場合は、白い画面に合わせて拡大します。
※サイズを合わせるには・・・画像の四つ角に「〇」、左右・上下に楕円のマークが出てきます。そのマークにカーソルを合わせると「↔」が出てくるので、クリックしたまま上下・左右に動かしてサイズを合わせます。
このまま使ってもいいのですが柔らかい感じにしたいので、画像の透明度を変えてみます。
右上のブロックがいっぱい並んでいるところ(透明度)をクリックすると、透明度を調節するスライダーが出てくるので好きな透過率にします。(今回は60%にしました)
画像がベールで覆われたようになったのがわかりますか?
このままでは殺風景なので、次は文字を入れていきましょう!
文字を入れる
当ブログのアイキャッチ画像を、出来上がりの例として説明しますね。
まず、画面上の「アイキャッチ画像」の文字を作ります!
そのまま文字を入れてもいいのですが、読みやすいように文字の下に背景も入れてみます。
左側の「素材」を選択し「線と図形」から「□」をクリックします。
右の画面上に表示されるので好きな大きさに整え、カラーの変更をしていきます。
左上にある色のついた(画像と同じ色)部分をクリックして、好きなカラーを選択します。
今回は黄色を選択してみました!
文字背景も、先ほどと同じように透過率を下げて文字が見やすいようにしておきます。
次は文字を入れていきましょう!
左側の「テキスト」を選択し、「見出しを追加」をクリックします。
画像上に表示されたら、「見出しを追加」の文字を削除してお好きな文字を入力します。(今回は「アイキャッチ画像作成」)
フォントは左上で変更できます!(今回は「はなぞめ」を選択)
文字を入力したら、背景の上に文字を移動させます。
※「↑・↓・←・→」の白いマークにカーソルを合わせ、右クリックしたまま画像を上に移動させます。(下図参照)
文字色を変えたいときは、Aの部分をクリックするとカラーが選べます。(今回はピンクを選択)
これで文字入れが完成しました!(「Canvaで作ろう」の文字も、同じ手順で作成していきます。)
画像が完成したら、次はダウンロードしていきましょう。
完成した画像をダウンロードして保存する
wordpressで使用するために、完成した画像を保存します。
右上の「共有」を選択し、「ダウンロード」をクリックします。
ファイルの種類は「PNG」または「JPG」を選択し(どちらでもOK!)、「ダウンロード」をクリックします。
これでアイキャッチ画像の作成は終了です!
次はブログの表示速度に影響がないように、画像を圧縮をしていきます。
あともうひと踏ん張りです!
画像を圧縮する
画像圧縮ツールもいろいろありますが、初心者でも使いやすい「I LOVE IMG」を使用しています。
※無料で使える画像編集ツール ⇒ I LOVE IMG
まず、「画像の圧縮」を選択します。
「画像を選択」をクリックすると、PC内の画像ファイルが表示されるので、圧縮したい画像を選択します。
↓
画像を選択したら「開く」をクリックしてください。
選択した画像が表示されたら、「画像の圧縮」をクリックすれば圧縮処理が始まります。
これで画像の圧縮が完了しました!
次はいよいよ、wordpressにアイキャッチ画像を設定していきます。
wordpressにアイキャッチ画像を設定する
ようやくここまで来ましたね!この作業が終われば、あなたのブログに素敵なアイキャッチ画像が表示されますので頑張りましょう。
記事の作成画面右側の「アイキャッチ画像を設定」をクリックします。
「ファイルをアップロード」で「ファイルを選択」をクリックすると、PC内の画像が表示されるのでアイキャッチ画像を選択してください。
アップロードされると「メディアライブラリー」に保存されるのでアイキャッチ画像を選択し、右下にある「アイキャッチ画像を設定」をクリックすれば完了です。
「アイキャッチ画像」に表示されていればOKです。
これであなたのブログにアイキャッチ画像が設定されました!
お疲れさまでした♪
まとめ
ブログにアイキャッチ画像があると上級者になれたみたいで、なんだかうれしくなりますよね♪
Canvaを使い慣れてくると、アイコンやサムネなどいろいろと自分で作れるようになるので楽しくなりますよ。
初めは手順がわからないので時間がかかるかもしれませんが、初心者の私でも10分で画像作成が完了するようになりました。ただ、あまりセンスのあるデザインではないですが(笑)
アイキャッチがあるとブログを読まれやすくなると言われていますので、自分のブログのイメージにあったアイキャッチ画像を作ってくださいね。