記事内にブログカードを表示させたいと考えているかと思います。
私はサイト運営でCocooonを使用しており、年に100万円以上の収入を上げられるようになりました。
今回、Cocoonのブログカードを簡単に表示させる方法をご紹介します。
Cocoonのブログカード！表示されない場合
十字 ”＋” をクリックし、下記を表示させます。そしてCocoonブロックを選択します。
次に、左上のブログカードを選択します。
下記のようにグレーの枠が現れます。このグレーの中にリンクさせるページを次に設定します。
下記のリンクのマークをクリックします。
下記のように、リンクさせたいページを選択して完了です。
Cocoon ブログカードのラベル
ブログカードにはカード内や、カードの左上に”関連記事”や”人気記事”といったラベルを付けることができます。このラベルの付け方について説明します。
ブログカード内にラベルを付ける方法
下記のコードを外観、カスタマイズにある追加CCSにコピーペーストします。
この場合は、関連記事だけになります。
背景色や文字色はBackground-colorや、colorの設定で変えることができます。
.blogcard-title::before{
content: ‘関連記事’;
display: inline-block;
font-size: .9em;
background-color: #FF6928;
padding: .3em .5em;
font-weight: bold;
color: #fff;
border-radius: 2px;
vertical-align: middle;
margin-right: .5rem;
}
ブログカード左上にラベルを付ける方法
グレーの部分をクリックすると、右にスタイル設定が表示されます。
ここでも設定可能です。
この設定では関連記事だけでなく、人気記事、あわせて読みたいなどの多くのラベルを付けることができます。
まとめ
Cocooonでブログカードを表示させる方法をご紹介しました。
Cocoonで見栄えをよくするカスタマイズの方法は下記を参考にしてください。
Cocoonの見出しボックスの詳細は下記を参考にしてください。
Cocooonのサムネイルのサイズを統一させる方法は下記を参考にしてください。