>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→
PR

Cocoon・おすすめカードのプチカスタマイズ

Cocoon・カスタマイズ
この記事は約4分で読めます。

Cocoonには、色々な便利な機能やエリアが用意されています。今回は、おすすめしたい記事やカテゴリーの画像リンクをヘッダー下の目立つ部分に表示できる「おすすめカード」を少しだけカスタマイズしてみます。

 

おすすめカードの設定方法は以下をご覧ください。

 

表示スタイルサンプル

以下の4タイプから選択できます。

画像のみ

おすすめカード:画像のみ

画像中央に白文字タイトル

おすすめカード:画像中央に白文字タイトル

画像中央にラベルでタイトル

おすすめカード:画像中央にラベルでタイトル

画像下段を黒背景にしタイトルを重ねる

おすすめカード:画像花壇を黒背景にしタイトルを重ねる

 

今回の例では、一番下のデザインで行っています。

 

カスタマイズ方法

簡単なCSS追記のみです。

CSS追記は以下のいずれかから行って下さい。

外観→カスタマイズ追加CSS

外観→テーマエディターstyle.css

 

CSSデザイン変更は、Cocoonオリジナルウィジェット「(C)おすすめカード」にも反映されます。

 

カスタマイズ

記事タイトル文字の装飾

Before

おすすめカード

 

After

フォント変更と文字装飾。

おすすめカードカスタマイズ

ウィジェット

おすすめカードウィジェット

 

 

CSS

サイト全体のフォント設定で指定しているフォントになる為、おすすめカードタイトルと、サイト全体のフォントを変えたい場合は、フォント指定をする事で可能です。

カスタマイズサンプルでのフォントは「小杉丸ゴシック」を利用しています。

@import url('https://fonts.googleapis.com/css?family=Kosugi+Maru|Lobster&display=swap&subset=japanese');
フォントを変更しない場合は、上記の1行と、以下のCSS2行目は不要です。
.recommended .navi-entry-card-title {
font-family:'Lobster', 'Kosugi Maru', sans-serif; /*フォント指定*/
color: #fff; /*文字色*/
font-size: 18px; /*文字サイズ*/
font-weight:bold; /*太字*/
letter-spacing:0.5px; /*余白*/
text-decoration: none;
line-height: 1.4;
text-shadow: 0 0 7px rgba(0,0,0.3); /*文字の影*/
}

 

ちなみにサイト全体のフォント設定は、

Cocoon設定 → 全体タブ で行えます。

Cocoonフォント設定

フォントのサンプルは以下にまとめていますので参考にして下さい。

Cocoonのフォント設定方法と字体サンプル一覧
Cocoonは、サイト全体のフォントを字体、サイズ、太さや、行間、行の高さなど細かく設定する事が出来ます。 Webフォントもいくつか用意されていて、選択するだけで利用可能です。 Cocoonの設定画面には「プレビュー」があり、設定した内容が...

 

アイキャッチ角丸め・ホバーアクション

  • カードの外枠の角を丸め、
  • オンマウス時の動きを少し変えます。

Before

おすすめカードサンプル

 

オンマウス時

おすすめカードサンプル:オンマウス時

 

After

アイキャッチ画像の角を丸め、タイトルの背景と文字色を変えます。

おすすめカードカスタマイズ

 

オンマウス時

画像をちょっと傾けます。

おすすめカードカスタマイズ:オンマウス時

 

CSS

以下のCSSを追記します。

/************************/
/*お勧めカード*/
/************************/
.recommended .navi-entry-card-thumb img{
border-radius:10px; /*角丸め*/
}
.recommended .card-content {
color: #fff; /*タイトル文字色*/
background-color: #000; /*タイトル背景色*/
}
/*オンマウスで傾ける*/
.recommended .navi-entry-card-thumb {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.recommended .navi-entry-card-thumb:hover {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}

 

アイキャッチのサイズを変える

Before

おすすめカードカスタマイズ

 

After

おすすめカードカスタマイズ

 

CSS

以下のCSSを追記します。

.recommended .navi-entry-card-thumb img{
width:170px;
height:120px;
}

 

カラーの変更

お好きなカラー設定には以下もご利用下さい。

マカロンビビッドパステル伝統色和色セーフ色名

 

 

コメント

  1. たろう より:

    おすすめカードのCSS使用させてもらいました!
    少しはわくわくできるブログになった気がします。
    ありがとうございます。

  2. chikako より:

    はじめてコメントさせていただきます。
    とても可愛いおすすめカードのカスタマイズでしたので早速、人気記事、新着記事も同様に真似させて頂きました!
    とても可愛いページになりつつあり気に入っています。
    ありがとうございます。

    こうなるとカルーセルも同様の角丸、ホバーで傾くようにしたいなと思うのですが、指定するカルーセルの書き方が分かりません。

    分かりましたら教えて頂きたいです。
    宜しくお願い致します。

    • 綾糸 より:

      chikakoさん はじめまして。

      カルーセルは以下のコードでどうでしょうか。

      #carousel .carousel-entry-card-thumb img{
      border-radius:10px; /*角丸め*/
      }
      /*オンマウスで傾ける*/
      #carousel .carousel-entry-card-thumb {
      -webkit-transition: all 0.5s ease;
      transition: all 0.5s ease;
      }
      #carousel .carousel-entry-card-thumb:hover {
      -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
      }

      • chikako より:

        おおお!!!
        こんなに早いお返事頂けると思いませんでした。
        ありがとうございます!

        思い通りの可愛いカルーセルになりました!
        感謝です☆彡

        ありがとうございます。
        まだまだカスタマイズあるようなので
        他の記事も含めブックマークして寄らせて頂きます。

        本当にありがとうございます。

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