[Cocoon] コンビ設定 ~ ホームイメージ&ノーイメージ

[Cocoon] コンビ設定 ~ ホームイメージ&ノーイメージ
アイキャッチ画像は
Gosia K.によるPixabayからの画像

ホームイメージとは

ホームイメージは、ツイッターやFacebookで「ブログのトップページ」がシェアされたときに表示される画像です。

自分でホームイメージを設定していない場合、初期設定では、Cocoonの画像が使用されています。

おススメコンビ設定とは!

ホームイメージを作成したら、

→ その画像を[ホームイメージ]に設定

→ 同じ画像を[NO IMAGE]にも設定です!

NO IMAGEとは

NO IMAGEとは、アイキャッチ画像が設定されていないときに、画像スペースに表示されるラベルです。

Cocoon NO IMAGE例
いくみ
いくみ

・・・チョット薄いですが、赤線のところが「NO IMAGE」というラベルになっています。

アイキャッチ画像が、

記事に無いとき、
固定ページに無いとき、
カテゴリーページに無いとき、

URLがコピーされると、上の画像のようになります。

記事には常にアイキャッチ画像を設定していても、「カテゴリーページ」や「固定ページ」メニューには設定していない場合も多いと思います。

そのURLがコピーされたときに、NO IMAGEと出るより、以下のようにホームイメージが出るほうがいいですよね。

そこで、ホームイメージをNO IMAGE画像にも設定することにしました。

「記事」にはアイキャッチを必ず入れる、という方におススメの「コンビ設定」です。

「記事」にアイキャッチを入れたり入れなかったりする、という場合は、

ホームイメージをNO IMAGEに設定するより、他の記事のアイキャッチと雰囲気が合う画像を設定する方が良いかと思います。

ホームイメージの設定手順

1.[Cocoon設定]をクリック。

2.[OGP]タブを選択。

Cocoonホームイメージ設定手順 - OGPタブ

3.最後までスクロールすると[ホームイメージ]セクションがあります。[選択]をクリックして画像を指定。

Cocoonホームイメージ設定手順 - 画像の選択

4.下にある[変更をまとめて保存]ボタンをクリック。

いくみ
いくみ

完成です!トップページのURLを投稿ページにコピーして、プレビューで確認してみてくださいね。

ノーイメージの設定手順

画像を省略しますね。画像付き設定手順は、下のわいひらさんのページにあります。

1.[Cocoon設定]をクリック。

2.[画像]タブを選び、最後までスクロール。

3.[NO IMAGE設定]セクションで[選択]ボタンをクリック。画像を指定します。

4.[変更をまとめて保存]をクリックです。

ホームイメージを作る

ホームイメージは、「ブログの名刺」みたいな存在だと思います。

ブログタイトル・プロフィールアイコン・一言、くらいがあるとそれっぽくなりますよね。

以下のような選択肢がありますね。

  1. 効率重視!大好きな画像を1枚、文字無し。顔出しをしている場合は自分の写真でもいいですね。
  2. 簡単!大好きな画像に文字を入れる。
  3. 名刺風に自分で作成。

ステキな写真を探すのに便利なのが、以下のサイト。

名刺風に作成するとき便利なのが、以下のサイト。

私のホームイメージ

1年目の私のホームイメージはこちら。

以下の「フレームポケット」のサイトで枠をダウンロードしました。イロイロあって、おススメです!登録もいらず、無料です。記事のアイキャッチ画像にも有効利用できます。

中身の文字は、以下のサイトで作りました。

このサイトの使い方は、ロゴ画像作成フリーソフトの使い方とフォントパワー!にまとめています。

枠・文字画像をパワーポイントに全部貼り付けて、位置を整えます。

パワーポイントのスライドを.png保存して、ちょっとトリミングして完成です!

2年目になって、以下のように作り変えました。これはPixabayからダウンロードして、パワポで文字を入れました。

Image by Dung Tran from Pixabay
いくみ
いくみ

2年目になったので、初心者感をとってみました。サイズは1280x720にしています。

ホームイメージのサイズ

私はツイッターもFBもやっていないため、自分が作成したホームイメージのサイズが適切かどうか、テストできていません・・・

・・・でしたが!(追記)

サルワカさんのサイトにこんな素敵なページがありました!

自分で用意した画像がツイッターやFBではどう表示されるかをデモで見せてくれるページです!その結果画像は以下に載せました。

以下は、1枚目のホームイメージの結果で、サイズは、950x719 pixcelでした。(2枚目は、1280×720 pixcelにしています。)

緑の外枠のまわりに、白の余白を入れています。左右それぞれ40幅、上下それぞれ30幅の「余白スペース」です。

このサイズで、サルワカさんのサイトで確認しますと、以下のようになりました。

ホームイメージ画像のサイズ確認、TwitterのOGP表示
ホームイメージ画像のサイズ確認、FacebookのOGP表示
ホームイメージ画像のサイズ確認、はてなブックマークの表示
ホームイメージ画像のサイズ確認、はてな・ライブドアブログの表示
いくみ
いくみ

「ホームイメージとノーイメージのコンビ設定」おススメです!

コメント

タイトルとURLをコピーしました