無料テーマCocoonのスキンの中で、SILKを気に入って使っています。というのも、SILK独自のブロックデザインが好きだからです。
ただ、ブログカードに関してはCocoon基本のデザインを使いたいと思い、カスタマイズすることにしました。SILKデフォルトのデザインはそのまま残し、使いたいときだけクラスを追加して使うことで、実質的にスタイルが4つから５つに増えることになりました。
スキン「SILK」のブログカードデザイン
SILKデフォルトのブログカードデザイン
SILKのブログカードは、次の4つのスタイルを設定できます。
Cocoon基本のブログカードは長方形ですが、SILKは四角形です。
上半分にリンク先のサムネイル、下半分に記事のタイトルと説明文が表示されます。
はじめは四角形のデザインを気に入っていましたが、サムネイルが無理やり拡大表示されることや、記事の途中に配置すると本文よりも目立つくらいの存在感が気になり始めしました。
SKILの横長スタイルはCocoonのデザインに似ていますが、サイズが小さく抑えられていて、記事のスニペット（説明文）は表示されません。
SILK［横長］スタイル
追加予定（Cocoonタイプ）
横長スタイルは使用頻度が高いので、そのまま使いたいと思っています。
新しいスタイルを追加
Cocoonの基本スタイルに近づけたスタイルを新たに追加し、使いたいときに［追加CSSクラス］を使って対応します。
追加CSS
新しいスタイルのクラス名を style-cocoon にしています。
まずは、下のコードを［追加CSS］にコピペします。
/* =================================
* SILKブログカード追加Style
* ============================== */
.style-cocoon .blogcard-wrap{
max-width: none;
}
.style-cocoon .blogcard{
padding: 1.6% 2.2% 2%;
border: 1px solid #ccc;
}
.style-cocoon .blogcard-thumbnail{
float: left;
width: 160px;
margin-top: 3px;
}
.style-cocoon .blogcard-content{
padding: 0;
margin-left: 170px;
max-height: 140px;
min-height: 100px;
}
.style-cocoon .blogcard-label{
top: -15px;
}
.style-cocoon .blogcard-title{
margin-bottom: 0.4em;
}
.style-cocoon .blogcard-footer{
padding: 0.6% 0 0;
}
@media screen and (max-width: 834px) {
.style-cocoon .blogcard-thumbnail {
width: 120px;
}
.style-cocoon .blogcard-title {
margin-bottom: 0;
}
.style-cocoon .blogcard-snippet {
font-size: 12px;
}
.style-cocoon .blogcard-content {
margin-left: 130px;
max-height: 120px;
min-height: 70px;
line-height: 1.2;
}
.style-cocoon .blogcard-footer {
font-size: 14px;
}
}次からは、記事を作成する際に任意のブロックに［追加CSSクラス］を追加します。
クラスを追加したブロックだけ、↓のスタイルで表示できます。
カードの横幅がカラム幅いっぱい（100%）に広がるようになっています。横幅を調整する場合は、セレクタ.style-cocoon .blogcard-wrapにwidthを追加します。
.style-cocoon .blogcard-wrap{
max-width: none;
width: 90%; /*ブログカードの横幅*/
}「続きを読む」の追加
ブログカードに「続きを読む」のボタン風表示を追加する場合は、次の記事をご覧ください。
