Cocoonのブログカード!表示されない場合

記事内にブログカードを表示させたいと考えているかと思います。

私はサイト運営で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のサムネイルのサイズを統一させる方法は下記を参考にしてください。

この記事の執筆者:ユウ

IT企業に20年以上勤務。行ってきた仕事で奨励賞やGrand Awardを受賞。博士号取得。現在、マネージャーとして勤務し、外国企業とのやり取りを英語で行いながら開発を進めている。個人のサイト運営も20年ほど行っており、年に約100万円程度の収益のあるサイトに育てる。現在、クラウドシステムはアマゾンAWSを使用しており、AWSや役に立つサイト運営情報も発信中。AWSに関する情報発信ではグーグルトップページで表示。

副業
ユウカレッジ
タイトルとURLをコピーしました