コクーンでヘッダーにおすすめ記事のカードを設置しよう。
２日ほど前に「ヒメとまいにち」サイトのヘッダーを少し変更しました。
気づいてくださった方、どうもありがとうございます。
Cocoonには、カルーセルと呼ばれる「おすすめ記事」などを
自動でスライド表示させてくれる機能(スライダー)が用意されています。
このような。自分の過去記事をアピールしてくれるんですね。
ずっとやりたいなーと思っていたんですが、そのまま放置。
なんだかとても難しそう…ではありますが、
意外や簡単な操作で設定することができます。
いわゆる画像が流れて表示されるだけのスライドショーとは異なり、
画像を表示するだけでなく、画像のリンクへ飛ぶこともできます。
CSS追加記述無しでおすすめ記事をアピールする
Cocoon設定から「カルーセル」タブを選択します。
カルーセル設定は、「表示しない」がデフォルトになっています。
これを表示する、に変更。
表示する記事の期間、カテゴリー、タブを選択します。
並ぶ替えはランダムでいいでしょう。
最大表示数は１２００記事ですが、ここまで設定してしまうのは…どうでしょう。
結局アピールにならない気がします。
表示する数を選び、必要であれば、その他も選択。
「変更をまとめて保存」を忘れずに。
たったのこれだけで、このように
おすすめ記事をカルーセル表示をさせる事が出来ます。
簡単ですね。ちょっと拍子抜けしました。
自動回転させることで「目を引く」という利点もありますが
「うるさく感じる」という難点もあります。
動かしたくない場合、これだと表示数はぐんと減ってしまいますが、
ウィジエットから表示させる方法もあります。
ウィジエットからおすすめカードを表示させる方法。
外観→メニューから、
編集するメニューを選択します。
メニュー名は何でもいいですが、解りやすいものがいいです。
カテゴリーから表示させたいカテゴリーを選択します。
メニュー設定は、「ヘッダーメニュー」を選択。
ここで選んだカテゴリーの数が
カードの表示される数になります。
スマホへ表示される数を考えて、４つが良いとされています。
外観→ウィジエットから「おすすめカード」を選択します。
表示させたいスタイルを選んで
コンテンツ上部を選択します。
これでカテゴリータイプのアピールカードが表示されます。
ただ、このままでは画像はnotfound用の画像になってしまうですね。
なので、カテゴリーに合わせた画像を用意して設定します。
cocoon設定から画像を選択し、
「Retinaディスプレイ」にチェックを入れます。
これでカテゴリごとに設定したサムネイルが表示されます。
どうしても読んでほしい記事がある！と言う場合。
上記のランダムにおすすめ記事が表示されるのではなく、
どうしてもこの記事を目立たせたい、アピールしたい、
読んでほしいんだ、という方は、
外観→メニューから、
メニューを選択し、
記事を指定して表示させることもできます。
記事を選択し終えたら、
コクーン→おすすめカードを選択。
表示させる場所を選んで、
表示スタイルを決める。これで、
もう、これは絶対おすすめ、読んでほしい！
と言う記事が表示されます。
いずれの場合も変更を保存することをお忘れなく。
このように変わったわたしのブログのヘッダー周りですが、
もともと「ヒメとまいにち」サイトのヘッダーは少し大きいんですね。
これを何とかしようと縮めたら、画像がぼやけてしまいました。
これは…作り直しかな。
今日のヒメちー
よいしょ、よいしょ。
ねぇやん、食べ物ばかりアピールしないで、
ヒメと、もーちゃんとちゃーこさんと
羊毛フェルトのヒメもちゃんとアピールしてくださいね。
絶対ですよ。
も、もちろんよー。
まだ試験段階だから、今後細かく調整していくわ。
コメント