Cocoon カスタマイズ リンク用ブログカード簡単作成！
記事内の下記のようなリンクを簡単に作成したいと考えていますか？
無料テーマの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;
}ブログカード左上にラベルを付ける。
グレーの部分をクリックすると、右にスタイル設定が表示されます。
ここでも設定可能です。
この設定では関連記事だけでなく、人気記事、あわせて読みたいなどの多くのラベルを付けることができます。
