こんにちは、かーこ(@kaaaa_co)です!
「固定ページ」や「投稿」にはアイキャッチ画像というものを設定できます。
前回は「固定ページ」で自己紹介ページを作成してみたので、そこにオリジナルのアイキャッチ画像を作って設定する方法をまとめました。
「アイキャッチ画像」とは、記事の内容を表す画像のこと
INDEX
Canvaでオリジナルのアイキャッチ画像を作る
![](https://31012.jp/wp-content/uploads/2019/11/eyecatch.png)
↑こういったアイキャッチ画像をつくりたいと思います。
無料のこちらをインストールしておいてください。
使用ソフト:Canva(PC ○・モバイル ○)
![](https://31012.jp/wp-content/uploads/2019/11/91380723db177b8d0a308df7c0a0ac30-1024x221.png)
①画像を用意する
写真の場合
※今回は写真使用の場合で解説
オリジナル…といっても写真から用意できたらベストですがなかなかそうはいかないもの。
フリー素材にもいい画像がたくさんありますので、そちらから準備するのもいいと思います。ただ、できれば自分で用意した写真が一番ベストです。
Googleはオリジナルコンテンツを好みます。
②イラスト素材の場合
パターンや、イラストでもいいですね。その場合は、フリーのもので全然いいです。
使用許諾条件に注意しながら、上手に活用しましょう。
③なにもなし
画像やイラストがなくても、背景に色だけとか無地の場合もありますね。その場合、文字が引き立つ効果がありますね。
②Canvaをひらく
アカウント登録をまずおこなってください。
終了したらホーム画面の左上にある、「デザインを作成」ボタンをクリック。
![](https://31012.jp/wp-content/uploads/2019/11/e1fdc6c7c5588e93a30ca74a402e31fb-1024x397.png)
サイズは12:9がおすすめです!テーマやブログサイトに合わせて適宜調整してください
12:9の場合
※今回は12:9の場合で解説
スクロールすると下の方に「Blogバナー」があるのでクリック。12:9で表示されます。
![](https://31012.jp/wp-content/uploads/2019/11/f1a69a3793dfe70d5a9e0d6e65d110ff.png)
その他の任意のサイズ
上の「カスタムサイズ」から入力して下さい。
![](https://31012.jp/wp-content/uploads/2019/11/32ad1e459413b1558936bcb2adf7bd24.png)
③アイキャッチ画像を作る
![](https://31012.jp/wp-content/uploads/2019/11/a6be2043a18de5c8e3a11ceb75b4c77d-1024x717.png)
「Blogバナー」からデザイン作成ボタンを押すとこのような状態になります。
ここで、背景画像をおいていきます。今回は写真を使用します。
PCだとドラッグ&ドロップでいけます。
画面内に持ってくると、勝手に追加されます。
![](https://31012.jp/wp-content/uploads/2019/11/ad1835b214fe8a135cab5ab027ef90f7-1024x522.png)
画像をおいて白のキャンバスに合わせておきます。
![](https://31012.jp/wp-content/uploads/2019/11/1ccea74aa426c6553323449410100636-1024x720.png)
左のバーの「素材」から選んでおいていきます。
![](https://31012.jp/wp-content/uploads/2019/11/c73a74a2b839de3b662af58f0d0b75d3-1024x573.png)
色など変更は、上部のバーから。
左
- 色変更
右側(左から順に)
- コピー
- 配置
- 透明度
- リンク
- ロック
- 削除
オレンジの半透明にしてみます。
![](https://31012.jp/wp-content/uploads/2019/11/8dfbce4acf7d3cb7fe8c41b832b0d709-1024x755.png)
文字をのせていきます。
![](https://31012.jp/wp-content/uploads/2019/11/f03667195c64427d47b19d424dc5f674-1024x529.png)
自分でフォントを選ぶこともできますし、テンプレートもたくさんあります。
テンプレートから今回選んでクリックでのせてみました。
上のバーから文字を選択して、フォントや大きさ、色等変更できます。
![](https://31012.jp/wp-content/uploads/2019/11/ea5ca81e3807be8c9700b7989c674bf6-1024x833.png)
体裁を整えたら右上のボタンからダウンロードします。
![](https://31012.jp/wp-content/uploads/2019/11/1f7bfd3adc2e73c26379f934b2ad8af9.png)
推奨(PNG)になっています。JPEGなど複数選択できます。
![](https://31012.jp/wp-content/uploads/2019/11/29081e728a20c6501f224df0ef9482ee-1024x570.png)
ちゃんと画像ができていました!
![](https://31012.jp/wp-content/uploads/2019/11/740f559997c4e6a3061d0a04c748de54.png)
「固定ページ」等記事にアイキャッチを設定する
固定ページや投稿にアイキャッチを設定します。今回は「投稿」ページをひらいてみます。
WordPress管理画面から「投稿」をひらく
WordPressの管理画面にログインします。
「投稿」から「新規追加」もしくは、「投稿一覧」から任意の記事を選んで下さい。
![](https://31012.jp/wp-content/uploads/2019/11/dbfc91b2972e044204b8475cc642a5c6.png)
すると記事入力画面の右側のサイドバー下に「アイキャッチ設定」があります。
![](https://31012.jp/wp-content/uploads/2019/11/07cb3990aad9f92ad076e93eb62a0c60.png)
「アイキャッチ画像を設定をクリック。
![](https://31012.jp/wp-content/uploads/2019/11/2b13771aeb465be26be048313ed93d59-1024x632.png)
ファイルをアップロードボタンから追加するか、ドラッグ&ドロップします。
![](https://31012.jp/wp-content/uploads/2019/11/ce2ae19cb181d5b434bc9753d935b977.png)
入りました。この画面の右側で、画像に対する詳細設定をします。
(SEOにもかかわるのできちんとやりましょう←)
![](https://31012.jp/wp-content/uploads/2019/11/3cd0194998ceeb92a0ab0a6ae16f56d4-530x1024.png)
代替テキスト | 簡潔に設定する!画像が表示できない場合のテキスト。目が不自由な方のための読み上げにもつかう。alt属性 |
---|---|
タイトル | Googleで画像検索表示させるなら、わかりやすい画像の名前をつける。(日本語×→英数字に変換される)タグとしては出力されない。title属性 |
キャプション | 画像の説明文。画像に説明が表示される場合、親切。 |
説明 | ソースには表示されない。自分の画像管理しやすさのため文言を入れたりしておくと便利。 |
「アイキャッチ画像を設定」をクリック。
![](https://31012.jp/wp-content/uploads/2019/11/10429a5790c99dc371bf10363bc0900a.png)
画像が入りました。
記事の「公開」をクリックし、画像を確認してみましょう。
(記事がまだできてない場合は、公開しないでね!)
記事一覧の表示のとき
![](https://31012.jp/wp-content/uploads/2019/11/815c37ce3070af08e9e1273951a15460-1024x348.png)
記事の表示のとき
![](https://31012.jp/wp-content/uploads/2019/11/abd2719777dd8eb05b9ff54b098e90ae-1024x662.png)
Canvaでアイキャッチをつくろうまとめ
フリー画像でアイキャッチに設定…もいいですが、ちょっと一手間で、オリジナルのアイキャッチを作ってみてはいかがでしょうか?
- 素材準備
- Canvaで簡単作成
- WordPress記事に設定