【Cocoon】SILKブログカードにシンプル横スタイルを追加

2023.03.05

無料テーマCocoonのスキンの中で、SILKを気に入って使っています。というのも、SILK独自のブロックデザインが好きだからです。

ただ、ブログカードに関してはCocoon基本のデザインを使いたいと思い、カスタマイズすることにしました。SILKデフォルトのデザインはそのまま残し、使いたいときだけクラスを追加して使うことで、実質的にスタイルが4つから５つに増えることになりました。

Cocoon:スキン『SILK』ボックスデザインの見本
Cocoonのスキンの中からSILK（シルク）を選んでみました。他のスキンよりもボックスデザインに変更箇所が多いので、デフォルトのデザインと比較できる見本を作ってみました。
pasoviva.com

スキン「SILK」のブログカードデザイン

SILKデフォルトのブログカードデザイン

SILKのブログカードは、次の4つのスタイルを設定できます。

  • デフォルト
  • 横長
  • テキスト
  • カラム

Cocoon基本のブログカードは長方形ですが、SILKは四角形です。

上半分にリンク先のサムネイル、下半分に記事のタイトルと説明文が表示されます。

はじめは四角形のデザインを気に入っていましたが、サムネイルが無理やり拡大表示されることや、記事の途中に配置すると本文よりも目立つくらいの存在感が気になり始めしました。

Sample

SKILの横長スタイルはCocoonのデザインに似ていますが、サイズが小さく抑えられていて、記事のスニペット（説明文）は表示されません。

SILK［横長］スタイル

追加予定（Cocoonタイプ）

横長スタイルは使用頻度が高いので、そのまま使いたいと思っています。

Cocoon【スキン：Silk】ブログカードのデザイン見本
テーマCocoonのスキンの中でも、『Silk』は独自にデザインされたブロックが多くなっています。こちらの記事はブログカードのデザイン見本です。
pasoviva.com

新しいスタイルを追加

Cocoonの基本スタイルに近づけたスタイルを新たに追加し、使いたいときに［追加CSSクラス］を使って対応します。

追加CSS

新しいスタイルのクラス名を style-cocoon にしています。

まずは、下のコードを［追加CSS］にコピペします。

管理メニュー→ カスタマイズ → 追加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クラス］を追加します。

クラスを追加したブロックだけ、↓のスタイルで表示できます。

ボックスデザインでCSSをお勉強【CSSプロパティ】
CSSを理解する入門編として、ボックスデザインの基礎を勉強してみましょう。
pasoviva.com

カードの横幅がカラム幅いっぱい（100%）に広がるようになっています。横幅を調整する場合は、セレクタ.style-cocoon .blogcard-wrapにwidthを追加します。

.style-cocoon .blogcard-wrap{
  max-width: none;
  width: 90%; /*ブログカードの横幅*/
}

タイトルとURLをコピーしました