今回は、Cocoon でよく使われる「ブログカード」をカスタマイズをしてみたいと思います。
まず、何もカスタマイズしていないブログカードがコレになります。
次に、今回カスタマイズした結果のブログカードがこちらになります。
主な違いは、以下のようになります。
では、実際にカスタマイズしたいと思います。
目次
テーマファイルエディターを開く
まず、管理画面の外観にある「テーマファイルエディター」から記述します。
記述先は、Cocoon Child: スタイルシート (style.css)になります。
コードを記述する
それでは、以下が記述コードになります。
.internal-blogcard-footer{
display: none/* ブログカード内のアイコンとURLを表示しない */
}
.blogcard-snippet{
display: none;/*投稿冒頭にある説明文を非表示*/
}
/* 続きを読む 追加と体裁を整える */
.internal-blogcard::after{
content: '続きを読む \00bb';
position: absolute;
bottom: .5rem;
right: 1rem;
font-size: 70%;
background-color: #3E9CF1; /* 続きを読む の背景色 */
padding: .4em 3em;
font-weight: bold;
color: #fff; /* 続きを読む の文字色 */
border-radius: 2px;
}以上となっています。これをもとある記述の下にコピー＆ペーストします。
これで、ブログカードがカスタマイズされたと思います。
コードの説明
次に、各コードの説明を簡単にしたいと思います。
Cocoon ブログカードのフッター
このコードは、ブログカードの「フッター」に対してのコードになります。
.internal-blogcard-footer{
display: none/* ブログカード内のアイコンとURLを表示しない */
}そして「フッター」に記載のある、アイコンとURLを丸ごとなくなるような扱いとなります。
Cocoon ブログカードの冒頭の説明文
このコードは、ブログカードに説明文を表示するかのコードになります。
ここの説明文は、投稿した冒頭にある説明文になります。
.blogcard-snippet{
display: none;/*投稿冒頭にある説明文を非表示*/
}そして、この説明文を丸ごとなくなるような指定をしています。
Cocoon 【続きを読む】の表示
このコードは、ブログカードの最後に「続きを読む>>」を作成しています。
/* 続きを読む 追加 */
.internal-blogcard::after{
content: '続きを読む \00bb';
}ここで、「続きを読む」を変えたい場合は、2行目のコードを変更することで可能です。
例えば、英語表記にする場合は
content: 'Read more \00bb';とするだけです。
そして、以下は作成した内容に対して、色々と体裁を整えるようなコードとなっています。
この”position:absolute;”という内容で、「続きを読む」の配置をどうようにするかを指定しています。そして、以下は配置された「続きを読む」を体裁する内容になります。
/* 体裁を整える */
position: absolute;
bottom: .5rem;
right: 1rem;
font-size: 70%;
background-color: #3E9CF1; /* 続きを読む の背景色 */
padding: .4em 3em;
font-weight: bold;
color: #fff; /* 続きを読む の文字色 */
border-radius: 2px;
}上記の値は、このような意味を持っています。
例えば、「続きを読む」の背景の色をピンク色っぽくして、もう少し丸くした内容にしたい場合
background-color: #FE9CF1;
border-radius: 10px;とするとこのようになります。
自身で色々とカスタマイズする時に参考にしてください。
まとめ
いかがだったでしょうか。
今回は、ブログカードをカスタマイズする方法を紹介しました。
また、コピペですぐに使えるコードもあるため簡単にカスタマイズできます。
ここまでお読みいただき、ありがとうございました。
コメント