ニートを目指して三千里 ひねくれ女子の小言日記

ニートを目指すひねくれ者が日々のうっぷんを書いたり書かなかったりするやつ

アイキャッチ画像の作成と設定

Designed by Freepik

 「ブログをいい感じにするぞ!」強化月間、8日目です。

後回しにしていた、アイキャッチ画像に挑戦します。

開設からの歩みはこちらにまとめているので、よかったら!

 

はじめに

8日目は、

・共通アイキャッチの設定(デフォルト設定)

アイキャッチ画像の準備

・記事ごとの設定

を行います!

 

アイキャッチ画像は設定しておいた方がいいよ!

アクセスも違ってくるよ!!

 

と先人方はおっしゃる。

確かに、私も

画像がある方がクリックしやすいし、

目を惹く気がする。

 

だけど、はじめはなんでもハードルが高い!!!!

 

・そもそもどこで画像を準備すればいいの?

著作権とかわかんないし・・

アイキャッチってなんとなく気恥ずかしい・・

・文字とか入れたほうがいいの?

・デザインとかよくわかんない・・

 

私は2ヶ月ブログをやっていてなお、

手が出せずにいました。

 

今日の記事では、

はてなブログのデフォルトアイキャッチ画像の設定

アイキャッチ画像の準備

・記事にアイキャッチ画像を設定

まで行います!

 

ただ、デザイン面はカパーしていません・・

目標はアイキャッチ画像の設定

 

前置きが長くなりましたが、

いざ、アイキャッチ画像設定の旅へ。

 

アイキャッチ画像って何?

私が説明を試みるよりも、プロに聞いてみましょう!

liginc.co.jp

 

アイキャッチとは、ターゲットユーザーの注意を引いて記事へと誘導させ、クリック意欲を刺激することなどを目的とした画像イメージとなります。

わかりやすい!!!

デザインについても詳しく書いてあるので、参考になります。

ただし、デザインをこだわる余裕はn。

 

はてなブログヘルプも載せておきます(笑)

help.hatenablog.com

 

はてなブログのデフォルトアイキャッチ画像の設定

記事毎にアイキャッチ画像を設定するのが望ましい。

 

ですが、

記事によっては、画像を設定しない場合、

あるいは、画像を読み取ってもらえない場合

もあるかもしれません。

そのときに画像が無いのは寂しい!

 

ということではてなブログでは、

デフォルトのアイキャッチ画像を設定することができます。

 

設定方法

ダッシュボード -> 設定 -> 詳細設定 -> アイキャッチ画像

- デフォルトアイキャッチ画像の設定 -

私はとりあえず、正方形のブログアイコンを設定しました。

 

アイキャッチ画像の大きさは、560×315(横×縦)pixelがいいかもしれません。

(1200×630pxが推奨されているかも)

 

また、アイキャッチ画像は、

真中部分のみが表示されることもあります。

余裕があれば、真ん中が切り取られて表示されても、

おかしくないような画像が望ましいです。

 

アイキャッチ画像のデフォルト設定については、

こちらの記事が分かりやすかったです。 

happylife-tsubuyaki.hatenablog.com

 

画像を用意

この記事にもアイキャッチ画像を設定しました!パチパチパチパチ

この画像の作成について書きます!

 

まずは画像を用意。

自分でかいたり、写真を撮ったりして、

自分で用意してもいいですが、

ありがたいことにたくさんのフリー画像があります。

www.mutant-tetsu.com

 

この中から私は、こちらで画像を準備することにしました!

個人的に、写真とかより、フラットデザインがいいなーと思ったからです。

画像は自由にお好みで、記事に合うかなってものを独断と偏見で選んでいいかと!

www.freepik.com

日本語サイトはここ

 

こちらのサイトでは、どうやら、

無料で使う場合は、

・Selectionの画像のみ使用可能

・使った画像のURLを記載すればOK(記載URLはダウンロード時に提示される)

私もとりあえず画像下にリンク貼りました。

リンクの張り場所とか貼り方も考えたいなー。

 

 なお有料会員(?)になれば、

・Premiumの画像も使用できる

・(画像によっては?)出処を記載する必要がなく使用できるっぽい。

(違う場合は指摘いただけますと幸いですmmm)

 

ダウンロードすると、

jpeg形式とeps形式のファイルがあるので、

自分ができるやり方で加工します。

 

加工については次の章でやってみます。

ちなみに、jpeg形式はよく見るので割愛しますが、

eps形式は印刷向けにAdobeが開発した画像形式で、

フォトショやフリーソフトで開くことができるみたいですね。

 

画像を加工する

画像を用意したので、アイキャッチ画像にすべく、

加工をします!

参考にしたのは、以下の記事です。

www.nichijo-sanaka.com

 

www.sakagami3.com

 

 私はcanvaで作成しました!

canvaで画像の大きさも変えられるので、

画像さえ用意すれば、後はcanvaでどうとでもなります!多分!

 

私は上記を参考にしながら、以下の流れで作成しました!

Canvaのアカウントを作成したら、

1:Canvaに画像をアップロードする

ブログタイトル(560×315)を選択するとキャンパスが表示されるので、

左メニューで「アップロード」を選択して、

キャンパスに画像を乗っけます。

真ん中に置くと中央線ができるので、必要があれば利用します。

 

- 画像をアップロードする -

 

2:背景色を設定する

私は画像の大きさが足りない場合は、背景色を設定します。

画像の背景色である同じオレンジ色で設定しても良かったのですが、

せっかくならテーマカラーで!

と思って、ブログのテーマカラーの色で背景色を設定しました。

あまり色が多くなりすぎると良くない気もしますが、大丈夫かな!

- アイキャッチの大きさに画像を合わせる -

 

アイキャッチ画像の大きさの画像が用意できたら、

この時点でアイキャッチ画像として使用してもいいと思います!

 

 余力があるので、文字を入れてみます!

 

3:文字を入れる

記事に従って文字を入れる範囲を作ります。

- 文字を入れる範囲を作る -

 

色やフォント、大きさを選んで文字を入れます。

- 文字を入れる -

 

4:調節する

文字を入れるために用意した、黒い四角の透明度を調整したり、

文字の色を変えたり、バランスをみます。

こんなもんかなというところで、

黒四角を全体に広げて完成です!

 

- 調節する -

 

5:完成!

完成したら、ダウンロードから画像を保存できます!

左上が保存済みでなければ、

上のメニューのファイルから保存しておくといいと思います

 

- 完成と保存 -

  

アイキャッチを記事に設定 

これは簡単で、

編集画面 -> サイドバー -> 編集オプション -> アイキャッチ画像

で好きな画像を設定できます。

 

私的アイキャッチ画像論

気をつけたこと

今回アイキャッチ画像を作成した上で、個人的に気をつけた点を書いておきます。

といっても、よく言われていることなので今更かもしれませんが(笑)

・色は増やしすぎない

・文字は読みやすく

・背景は暗くしすぎない(3回くらい修正した)

・テーマカラー決めると今後楽そう

・透明度を決めておくと今後楽そう

・文字色を決めておくと今後楽そう

・フォントも決めておくと今後楽そう

・場合によっては、画像を黒等で囲うと引き締まる

 

テーマカーラ、文字色、フォントに統一性をもたせると、

オリジナリティがでるかなと思うので、

今後も、そこら辺意識してアイキャッチを作れたらなと思います。

 

いろんなアイキャッチ画像

私はアイキャッチ画像ってきちんとしないと!!!

と思って中々設定が出来なかったのですが、

アイキャッチが画像を設定しようと思うにあたり、

いろんなブログを覗いたところ、

・画像だけ

・文字だけ

・イラスト

・キャラクター

・画像+タイトル

・画像+セリフ

・大きさもバラバラ

・すごくこってておしゃれ

いろいろ自由でした!!

 

ということで、

私はどうせなら、とそれっぽいアイキャッチ作成に取り組みましたが、

まずは画像を用意するだけでもだいぶ違うと思うので、

あまり深いことを考えず、

合うと思う画像を、記事の一番上にペタしちゃっていいかと。

 

感想

アイキャッチ画像作ってみましたが、

背景暗めにしすぎたかなとか、

バランスいまいちわかりませんが、

なんとかそれっぽいものができたかなーなんて。どうでしょう(笑)

 

はじめてなので結構時間がかかりましたが、

次からはもっと短時間でできそうです!

 

アイキャッチ画像も徐々に上達(?)するといいのですが、

まずは、「無いよりは合ったほう」がいいという精神で、

時間をかけずに設定できるようになりたいです!