Cocoonの使い方やカスタマイズとオリジナルスキン

Cocoon・おすすめ記事やカテゴリー画像などをカードで表示(おすすめカード)

スポンサーリンク
設定

Cocoonには、色々な便利な機能やエリアが用意されています。今回は、おすすめしたい記事やカテゴリーの画像リンクをヘッダー下の目立つ部分に表示できる「おすすめカード」の使い方についてです。

 

以下、サンプルです。画像はそれぞれのアイキャッチから自動的にセットされます。

おすすめカードサンプル

 

スポンサーリンク

前提

おすすめカードは、「メニュー」を選択する事で、その内容を画像付きで表示する為、表示したい内容をメニューに作成しておきます。

もちろん既に作成済みの、どこかに使っているメニューでもOKです。

メニュー作成

おすすめカード用に投稿記事を選択して「おすすめ記事」を表示するには、「おすすめカード用」などとした名前で、新しくメニューを作成すると、簡単に可能です。

 

メニュー作成

 

注意点

メニューの設定で「新しいタブで開く」設定をしていても、この「おすすめカード」では新しいタブでは開けないようです。

メニューのリンクを新しいタブで開く

 

おすすめカードを設定する

Cocoon設定」を開きます。

Cocoon設定

おすすめカード」タブを選択します。

Cocoon設定・おすすめカード

設定項目
  • おすすめカードの表示ページ
  • メニュー選択
  • 表示スタイル(画像・タイトル・画像位置など)
  • カード余白
  • カードエリア左右余白

 

表示設定

おすすめカードを表示したいページを選択します。

  • 表示しない
  • 全ページ
  • フロントページのみ
  • 投稿・固定ページ以外
  • 投稿・固定ページのみ
  • 投稿ページのみ
  • 固定ページのみ

おすすめカードの表示ページ設定

 

作成済みメニューから選択

おすすめカードのメニュー選択

 

表示スタイル設定

おすすめカードの表示スタイル

画像のみ

おすすめカード:画像のみ

画像中央に白文字タイトル

おすすめカード:画像中央に白文字タイトル

画像中央にラベルでタイトル

おすすめカード:画像中央にラベルでタイトル

画像下段を黒背景にしタイトルを重ねる

おすすめカード:画像花壇を黒背景にしタイトルを重ねる

 

カードの余白

おすすめカードの余白

カード余白

おすすめカード:カード余白

カードエリア左右余白

おすすめカード:カードエリア左右余白

 

表示画像について

表示される画像は「アイキャッチ画像」になります。

固定ページなどを表示したい場合には、固定ページにもアイキャッチを設定しましょう。

アイキャッチ画像がない場合は、以下からセットされます。

Cocoon設定→画像→NO IMAGE設定

NoImage設定

 

表示優先順位

  • アイキャッチ画像
  • Cocoon設定→画像→NO IMAGE設定
  • 用意されているNO IMAGE画像

用意されているNO IMAGE画像

用意されているNO IMAGE画像

 

コメント

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