Cocoon【スキン:Silk】ブログカードのデザイン見本

無料テーマCocoonには、多くのスキンが用意されています。

その中の1つ『Silk』には、Cocoonオリジナルのデザインとは異なるデザインのブロックがあります。

こちらの記事には、Silkのブログカードブロックのデザイン見本を載せています。

Cocoon標準

スキン:Silk

Cocoonにスキン『Silk』を適用している場合、ブログカードに独自のスタイルを設定できます。

Silk ブログカードスタイル

スタイルの種類
  • デフォルト
  • 横長
  • カラム…「段組み」形式で横並びに表示できます。
  • テキスト

Silk デフォルト

Silk 横長

実は、Silkの解説サイトには、この横長スタイルのサムネイル表示を左側・右側が選べると書かれています。ところが、その左右を選択するオプションが見つけられずにいます。

そのうちゆっくり探したいと思います…トホホ

Silk カラム

ブログカード内に複数のアドレスを入力したものを横並びにできます。

スタイル適用前

同様に入力しても、スタイル[カラム]を適用しない場合は、縦に並びます。

Silk テキスト

ラベル無し

ラベル付き

複数指定

デザインカスタマイズ

ラベルの位置、ラベルのフォントサイズを調整しました。

silkの初期デザインでは左側に表示されるラベルを、右側に移動しました。

また、ラベルの文字が小さいのも気になったので、大きくしてみました。

追加したCSSは、次の通りです。

ダッシュボード外観カスタマイズ追加CSS

.is-style-normal-card .blogcard-label{
	top: -12px; /*ラベル位置トップ*/
	left: auto; /*ラベル左位置のリセット*/
	right: 8px; /*ラベル位置右側*/
	font-size: 0.75em; /*フォントサイズ*/
}
タイトルとURLをコピーしました