Cocoonではヘッダー下におすすめカードを簡単に表示することができます。
しかし、おすすめカードをPC画面では表示せず、モバイル画面のみ表示したい！という場合もないでしょうか？
この記事ではモバイル画面のみおすすめカードを表示する方法をご紹介します！
| PCでは表示しない | モバイルのみ表示する |
 |
 |
カテゴリー別おすすめカードの表示方法
すでにカテゴリー別のおすすめカードを表示できている方は次に進んでください！
おすすめカードのメニューを作成
「外観」→「メニュー」→「新しいメニューを作成しましょう。」をクリックしてメニュー作成画面を開きます。
メニュー名に「おすすめカード」を入力して「メニューを作成」を押します。
次は、おすすめカードに追加したいメニューにを選択します。
今回はカテゴリーを2つ追加しました。
カテゴリーにアイキャッチを設定
カテゴリーにアイキャッチを設定します。
※ こちらは設定しなくても表示はできますが、設定しない場合「NO IMAGE」という画像が表示されます。
「投稿」→「カテゴリー」からおすすめカードに追加したカテゴリーを選択します。
少し下のほうにスクロールするとアイキャッチを設定する箇所があるので、選択を押してアイキャッチを選択します。
Cocoon設定でおすすめカードを表示
おすすめカードの準備はできたので、あとは表示設定です。
「Cocoon設定」→「おすすめカード」をクリックします。
下記の2つを設定するとおすすめカードが表示されるようになります！
- おすすめカードの表示: 「表示しない」以外を選択
- メニュー選択: 作成した「おすすめカード」を選択
このようにがカテゴリー2つがおすすめカードとして表示されています。
モバイル画面のみおすすめカードを表示する方法
モバイル画面でのみおすすめカードを表示する設定をご紹介します。
結論からいうと、「PC画面のおすすめカードを消す」ことでモバイル画面のみ表示することができます。
「外観」→「カスタマイズ」→「追加CSS」に下記を追加しましょう。
/* おすすめカード(モバイルのみ表示) */
#recommended {
display: none;
}
@media screen and (max-width:480px){
#recommended {
display: block;
}
}
おすすめカード自体を消して、モバイル画面(480px以下)でおすすめカードを表示するという設定をしております！
するとモバイル画面のみおすすめカードを表示することができます。
コメント