アイキャッチの作り方と「WordPressストーク」に表示させる方法(画像20枚で図解)

初心者ブロガーの一歩先を行く、なかのっちです@fumikondatackle

ブログ初心者のあなたにもできる!かんたんに綺麗なアイキャッチを作る方法をシェアしますね。このページを読めば、こんなアイキャッチが数分で作れるようになります。本当です。

 ↓

洒落乙なアイキャッチ画像

ボクはずっと地味なアイキャッチを使っていて。他のブロガーさんの「オシャレなアイキャッチ画像」を見ては、ただ指を加えているだけでした(涙目)。「それではいかん!」と奮起し、今回がんばってアイキャッチを作ってみました。

ビフォー(BEFORE)

ブログはあなたの立体名刺

  ↓

アフター(AFTER)

ブログはあなたの立体名刺

 

ビフォー(BEFORE)

メッセンジャーアプリのアイコン画像

  ↓

アフター(AFTER)

Messengerグループ

ずいぶん、スタイリッシュになったと思います(笑)

では、アイキャッチの作り方を解説していきますね。

オサレなアイキャッチの作り方

アイキャッチの作り方は、超かんたんです。

  1. フリー素材サイトで画像を選ぶ
  2. Canvaで画像に文字をのせる

この2つをやるだけでOKです!

 

1.画像を選ぶ

インターネット上では、無料で利用可能な「写真素材サイト」がいくつもあります。今回は、イントラサロンメンバーのさぁやさんのブログで紹介されていた、Unsplashを利用しました。

まず始めに、unsplashのサイトへ行き。「Explore」をクリックします。

Unsplashのホームページ

 

「ビジネス」「自然」「コンピュータ」など、ジャンルごとに分けられています。今回は、facebookに関連した記事のアイキャッチを作成するので「ソーシャルメディア」というジャンルを選択しました。

ジャンルごとに分けられています。

 

自分が作成したいアイキャッチのイメージに近い画像を探します。画像をクリックすれば、ダウンロードすることができます。

スマホの画面にfacebookのアイコンがある画像

画像をダウンロードしたら、パソコンに保存しておきましょう。

 

ボクは、あとから探しやすいように、ジャンルごとにフォルダ分けして保存しています。

写真はジャンルごとにフォルダ分けして保存しておくと便利です

これで写真の準備はOKです!

つぎは、写真に文字をのっける方法を解説します。

 

2.Canvaで画像に文字をのせる

ブログ初心者のボクでも簡単に画像編集ができるサイトを紹介します。Canvaです。

Canvaのホームページ

利用するためにはユーザー登録が必要です。facebookやググタスを利用すれば、クリック1つで登録できるので便利です。

 

登録が完了したら「デザインを作成」をクリックします。次にデザインのサイズを選択します。今回は「ブログタイトル」を使いました。

Canvaのホームページ

 

「画像をアップロード」を選択。先ほどUnsplashでダウンロードした画像を利用します。

画像をアップロード

 

アップロードされた画像をクリックすると、画面の右側に大きく表示されます。こちらの画面で「文字をのせる」などの編集作業ができます。

アップロードされた画像を選択します

 

「テキスト」を選択し、「文字のデザイン」を選択すると文字が挿入されます。黒文字なので見えづらいですが、文字が挿入されました。

※文字のフォントはあとからでも変更が可能です。フォント選びで迷った場合はイメージに近いものをとりあえず選択しておけばOKです。

 

文字の色が変更できます。

文字の色を変更します

文字の上でマウスをクリックすると、「文字」を変更できます。今回は「Messengerグループ」と入力しました。

 

ここでフォントが変更できます。

文字を入力します

 

こちらで「文字の間隔」「行の高さ」など、詳細を調整することができます。

フォントを変更できます

 

完成です。

アイキャッチの完成です

 

WordPressテーマ『STORK(ストーク)』で、アイキャッチ画像を表示させる方法

作成したアイキャッチ画像を、実際にあなたのブログに表示させてみましょう。ぼくはWordPress有料テーマSTORK(ストーク)を利用しているので、ストークでのやり方を説明しますね。

手順は2つです。

  1. アイキャッチ画像に設定をクリック
  2. アイキャッチ画像を選び→「アイキャッチ画像に設定」をクリック

 

1.

アイキャッチを掲載したい記事の編集画面を開きます。一番下までスクロールして「アイキャッチ画像に設定」をクリックします。

アイキャッチ画像に設定

 

赤枠の「ファイルをアップロード」を選択します。

ファイルをアップロードを選択

 

アイキャッチに設定したい画像を、こちらの画面にドラッグ&ドロップします。

こんな感じで、ドラッグ&ドロップします。

 

画像がアップロードされました。

 

2.

次に「アイキャッチ画像を設定」を選択します。

アイキャッチに設定したい画像を選び、「アイキャッチ画像を設定」をクリック。

 

「公開」ボタンをクリックして、ブログに表示されているか確認してみましょう!

アイキャッチが挿入されたトップページの画像です

これでOKです。おつかれさまでした(^^

 

ブログ運営に関するおすすめコンテンツ

ボクがブログ運営で利用しているサービスの一覧をシェアしますネ。

 

おすすめのサービス一覧

  • PC環境:Windows7と10※本当はカフェでMacBookを開きノマドワーカーを気取ってドヤりたい(笑)
  • レンタルサーバーエックスサーバーのX10プラン(初心者から中級者まで大満足の安心のプラン)
  • ドメインお名前.comとバリュードメイン
  • ネット環境:NTTの光からauひかりへ乗り換えました。auユーザーはスマートバリューが適用されるから超お得(笑)オペレーターも親切。N◯T系列はクソ
  • Google:Gメール、Analytics、SearchConsole、AdWords(キーワードプランナー)、フォト、youtube。Googleは既に社会のインフラ。どんだけひいき目に見ても、Googleは日本国政府よりも優秀(笑)
  • WordPressテーマSTORK(ストーク) 「ワードプレスって何??」っていうブログ初心者のボクでも、超かんたんにカスタムすることができました。ざっくり言うと、ストークは「超使いやすいホームページビルダー。しかもスマホ対応(笑)」みたいなものです。
  • サロン:八木仁平さんのイントラサロン
  • 画像加工系:WinShot、PhotoScape、Unsplash、Canva、集中線追加ツール、等など
  • SNS:LINE@、twitter、facebook、Messenger
  • amazon:amazonプライム、Kindle。amazonとGoogleはインフラですので利用するしかないですよね(笑)。
  • その他:note、FeBe、Podcast、voicy

 

何か質問があれば、ツイッターでボクをフォローしてDMを飛ばしてください。もしくはfacebook MessengerでもOK!

なかのえいじ
ググってもわからないときは知ってる人に聞くのがベスト!

 

参考にしたサイトのご紹介

この記事を作成する際に参考にさせていただいたページの紹介です。

1.イントラサロンの部活動でご一緒した@さぁやさんの記事はこちら

Canvaで簡単にアイキャッチ画像を作る方法

 

2.さぁやさんの記事の中で紹介されていた記事がこちら

おしゃれなアイキャッチ画像の作り方&デザインのコツ8つ