ブログ

アイキャッチをCanvaで作る!ブログのトップ画像が見切れる問題も解消

アイキャッチ画像とは 、読者やユーザーの目(アイ)を引きつける(キャッチ)ための看板です。アイキャッチ画像に惹かれて、記事を読むことも多いですよね。

Canvaというアプリでアイキャッチ画像を作る具体的な方法と、ブログのトップ画面に出てくるアイキャッチ画像が見切れる問題に悩まされていたのですが、こちらも解消したのでそれについても書きたいと思います。

Canvaでアイキャッチ画像を作る

スマホアプリ出なくてもパソコンでももちろん使用できます。

Facebook、Google、メルアドのどれかで登録します。

今回、作成にほんの少し時間のかかったこの記事のアイキャッチ画像を見本に説明していきます。

ホーム画面の右下にあるプラスマークをクリック。
f:id:tayorako:20190706221805j:image

サイズを選択、Blogバナーを選んでいます。

f:id:tayorako:20190706221810j:image

また右下のプラスマークをクリックします。
f:id:tayorako:20190706221818j:image

画像をクリック。
f:id:tayorako:20190706221825j:image

自分が撮った写真を使用したいならギャラリーを、Canvaの中の物を使用したいのなら画像をクリック。
f:id:tayorako:20190706221831j:image

自分のイメージするアイキャッチ画像を検索します。
f:id:tayorako:20190706221838j:image

ブログ運営記事だったので、まずは「ブログ」で検索。
f:id:tayorako:20190706221847j:image

ふむふむ…

今度は「ブログ運営」で検索。
f:id:tayorako:20190706221855j:image

画像が変わりましたね。

ピンとくるものがないので「収益」と入れて検索。
f:id:tayorako:20190706221905j:image

なんかかけ離れちゃった💦

アクセスや収益が伸びる…グラフか💡

「折れ線グラフ」で検索してみよう!
f:id:tayorako:20190706221912j:image

そのまんまだ(笑)

「比較」ならどうだ!
f:id:tayorako:20190706221919j:image

面白い。でも有料の物が多いなぁ。

※冠マークは有料登録のみです。

基本に戻って「アドセンス」はどう?
f:id:tayorako:20190706221926j:image

全然使えない💦

アクセスはどうかな?
f:id:tayorako:20190706221933j:image

うーーーむ。

登っていくイメージ…

あ、階段なんてどうかしら。
f:id:tayorako:20190706221944j:image

わ、このエスカレーターいいな。でも画像が縦だ。

ということは、「エスカレーター」で検索したら、もしかすると…
f:id:tayorako:20190706223202j:image

ありました。

これに決定。
f:id:tayorako:20190706223208j:image

選んで貼り付けて、角を伸ばして大きさを合わせます。

ちょっと余る白い部分は最後に切り取っています。

もっと目一杯伸ばしちゃってもOKです。
f:id:tayorako:20190706223213j:image

図形をクリックして

f:id:tayorako:20190706223223j:image

好きなものを選択

f:id:tayorako:20190706223232j:image

大きさや透明度を調節します。
f:id:tayorako:20190706223239j:image

テキストをクリックして
f:id:tayorako:20190706223249j:image

追加を押します。
f:id:tayorako:20190706223257j:image

タイトルを入力します。
f:id:tayorako:20190706223309j:image

水色の丸で囲った部分で書体。

緑の丸は文字の大きさ。

黄色は文字の色です。
好きなように調整したら出来上がりです。
f:id:tayorako:20190706223423j:image
ね、連想ゲームみたいでしょ?

これをパパっと出来た時、やったーと思っています(自己満足!笑)。

Canva有料と無料の差

無料素材が約8.000点なのに対して、有料会員の無料素材は30万点だそうです。

月額1.200~1.500円。

その他色々差別化されているようですが、無料でも十分に使えます。

まだまだ出来ること山盛りのCanva。これからどんどん開拓していきたいです。

アイキャッチ画像の選択と指定

記事を書く画面の右側に編集オプションという歯車のマークがあります。

その中にアイキャッチ画像という欄があるので、指定したい写真を選んで選択すればOKです。

f:id:tayorako:20190707210100j:image

知ってしまえば簡単ですね。

一覧形式にした時にアイキャッチ画像が見切れる問題

ブログのトップ画面に出てくるアイキャッチ画像が見切れる問題に、最近まで悩んでいました。

f:id:tayorako:20190707193914j:plain

検索して見つけた魔法のHTML✨

これをカスタマイズ→フッタに入れるだけ。

<script>
(function(){
    if(document.body.classList.contains('page-index')){
        var elements = document.getElementsByClassName('entry-thumb');
        var re = /https%3A%2F%2F.+.(jpg|jpeg|gif|png|bmp)/i;
        Array.prototype.forEach.call(elements, function(element) {
            var imageUri = re.exec(element.getAttribute('style'));
            if(imageUri !== null) element.style.backgroundImage = 'url(' + decodeURIComponent(imageUri[0]) + ')';
        });
    }
}());
</script>

はてなブログ「一覧形式」の画像をオリジナルのものに変える - IMUZA.comより 

before

f:id:tayorako:20190707193914j:plain

after

f:id:tayorako:20190707193920j:plain

文字が切れて見えなくなることがなくなりました!万歳!

今回のアイキャッチ画像

アイキャッチ画像

考える

電球

の三段階で完成しました。
f:id:tayorako:20190706224525j:image

プレミアム写真を無料で獲得!

こちらの招待リンクを踏んで→Canva招待リンクデザインを作成すると、お互いにCanvaクレジットをもらえて、プレミアム素材を手に入れることができます。

Canvaを友達に紹介し、彼らが最初のデザインを作成すると、両方にCanvaクレジットが報酬として与えられます。この方法で最大20のCanvaクレジットを獲得できます。

Canvaクレジットは、ライブラリのプレミアム画像(Canvaが提供している最高の写真、アイコン、イラスト)と交換できます。デザインをダウンロードまたは共有するときに、クレジットを引き換えることができます。

Canvaクレジットを請求するには

  1. リンクを共有します。
  2. 友達がCanvaで最初のデザインを作成します。
  3. クレジットがもらえます!
  4. プレミアム要素を含むデザインを次回作成するとき、支払いの代わりにCanvaクレジットを使用できます。
よかったら使ってください
にほんブログ村 住まいブログ 一戸建 ミサワホームへ にほんブログ村 住まいブログ 一戸建 平屋住宅へ にほんブログ村 ライフスタイルブログ 自分らしい暮らしへ

関連記事・広告



tayorako blog

TAYORAKO KITCHEN:脂質を抑えたヘルシーな料理、パン作りについて

寄り添う子育て:幼児教育20年以上、発達障害自閉症児の加配や子育てから学んだこと

ほどほど庭のtayora koffie:書きたいことを書きたいままに綴るブログ

-ブログ

© 2020 白い平屋の家を建てました Powered by AFFINGER5