目次
目次

ブログカードのラベルスタイルを変更

追加機能
この記事は約2分で読めます。
記事内に広告が含まれています。

はじめに

本スキンでは、ブログカードのデザインを「Cocoon汎用」ブロックを使用して、ラベルのアイコンやテキストを変更できるようにします。
また、「タイムライン」ブロックのタイムラインアイテムをブログカードとして表示できるようにします。

「Cocoon汎用」ブロックを使用した方法

以下のブロック内に「ブログカード」ブロックを配置し、そのデザインを変更します。

  • 見出しボックス
  • タブ見出しボックス
  • ラベルボックス

表示例

  • 見出しボックス
  • タブ見出しボックス
  • ラベルボックス
デフォルト
ART+BEAT MANIFESTO　-　最新Cocoonカスタマイズ
Cocoonスキン「メイド・イン・ヘブン」の機能や設定、カスタマイズ方法を紹介。自動設定やデザイン調整、追加機能に加え、Cocoonを中心とした豊富なカスタマイズや、設定方法まで分かりやすく紹介します。
chuya.s239.xrea.com
アコーディオン
ART+BEAT MANIFESTO　-　最新Cocoonカスタマイズ
Cocoonスキン「メイド・イン・ヘブン」の機能や設定、カスタマイズ方法を紹介。自動設定やデザイン調整、追加機能に加え、Cocoonを中心とした豊富なカスタマイズや、設定方法まで分かりやすく紹介します。
chuya.s239.xrea.com
タブ見出しボックス
ART+BEAT MANIFESTO　-　最新Cocoonカスタマイズ
Cocoonスキン「メイド・イン・ヘブン」の機能や設定、カスタマイズ方法を紹介。自動設定やデザイン調整、追加機能に加え、Cocoonを中心とした豊富なカスタマイズや、設定方法まで分かりやすく紹介します。
chuya.s239.xrea.com
ラベルボックス
ART+BEAT MANIFESTO　-　最新Cocoonカスタマイズ
Cocoonスキン「メイド・イン・ヘブン」の機能や設定、カスタマイズ方法を紹介。自動設定やデザイン調整、追加機能に加え、Cocoonを中心とした豊富なカスタマイズや、設定方法まで分かりやすく紹介します。
chuya.s239.xrea.com

手順

Gutenbergエディター

以下の手順で「ブログカード」ブロックのデザインを変更します。

  1. 「Cocoon汎用」ブロックを配置します。
  2. 高度な設定→追加CSSクラスにhvn-blogcardと入力します。
  3. 「Cocoon汎用」ブロック内に「ブログカード」ブロックを配置します。

「タイムライン」ブロックを使用した方法

「タイムライン」ブロック内に「ブログカード」ブロックを配置し、そのデザインを変更します。

表示例

  • ビッグ
  • ボックス

手順

  • ラベル
    タイムライン設定

    以下の手順で指定します。

    Gutenbergエディター
    1. 「タイムライン」ブロックを配置します。
    2. スタイル「ビッグ」または「ボックス」を選択します。
  • ラベル
    タイムラインアイテム設定
    Gutenbergエディター
    1. 「タイムラインアイテム」を選択します。
    2. 高度な設定→追加CSSクラスに、hvn-blogcardと入力します。
    3. 「タイムラインアイテム」内に「ブログカード」ブロックを配置します。

さいごに

本スキンのカスタマイズにより、「ブログカード」ブロックと「Cocoon汎用」ブロックや「タイムライン」ブロックを組み合わせて、デザインを簡単に作成できます。
これにより、視覚的に魅力的なサイトを効率よく構築できます。

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