本サイトはアフィリエイト広告を利用しています

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

- PR -

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

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

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

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

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

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

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

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

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

Sample

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

SILK[横長]スタイル

追加予定(Cocoonタイプ)

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

新しいスタイルを追加

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

Cocoonデフォルト風

追加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クラス]を追加します。

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

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

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

「続きを読む」の追加

ブログカードに「続きを読む」のボタン風表示を追加する場合は、次の記事をご覧ください。

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