9月26日まで、エックスサーバーで「独自ドメインプレゼントキャンペーン」!更新料金も無料!サーバー新規開設が条件です。

[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画像に設定することにしました。

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

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

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

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

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

2.[OGP]タブを選択。

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

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

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

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

いくみ
いくみ

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

ノーイメージ(NO IMAGE)の設定手順

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

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

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

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

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

ホームイメージを作るときにおススメのサイト

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

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

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

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

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

100万点以上の高品質なフリー画像素材 - Pixabay
ダウンロードして様々な用途に使える、フリーで高品質な画像・動画素材。商用利用でき、クレジット表記も不要です。

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

Amazingly Simple Graphic Design Software – Canva
Create beautiful designs with your team. Use Canva's drag-and-drop feature and layouts to design, share and print business cards, logos, presentations and more.

私のホームイメージ作成方法

できあがりがこちら。

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

無料イラスト かわいいフリー素材集 フレームぽけっと
無料で使えるイラストやフレーム・枠素材がたくさん!イラストは会員登録不要で無料ダウンロードできます。透過PNGなのでお便りやポスター、WEB等に便利に使えるイラスト専門サイト

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

フリーフォント で簡単ロゴ作成 | キーボード画像作成 | アイコン・はんこ画像作成
フリーフォントを使ったロゴ作成やいろいろな素材の作成が可能なツール。フリーフォントを使ったキーボード画像の作成。フリーフォントを使ったアイコン画像の作成。フリーフォントを使ったはんこ画像の作成。ほとんどのフォントで書いた文章をPDFとしても出力できるWEBサービス。

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

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

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

ホームイメージのサイズについて

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

Cocoonのブログカード形式ではいいバランスにできた、と思っていますが。

ラインでは、正方形っぽく切り取られるので、左右の「枠」は切れてました。
(でもアイコンは切れていなかったので安心しました。)

・・・という状況ですが、ご参考までにサイズを記録しておきます。

私のホームイメージのサイズは、950x719 pixelです。緑の外枠のまわりに、白の余白を入れています。左右それぞれ40幅、上下それぞれ30幅の「余白スペース」です。

いくみ
いくみ

固定ページやカテゴリーページにアイキャッチを設定されていない方は、「ホームイメージとノーイメージのコンビ設定」おススメです!

コメント

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