目次
目次

ブログカードにスタイルを追加

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

はじめに

Gutenbergエディター

本スキンでは、Gutenbergエディターの「ブログカード」ブロックに、Cocoon標準にはないスタイルを追加します（図1参照）。
これにより、カード形式ではなく、投稿タイトルのみのシンプルなスタイルに変更できるようになります。

表示例

  • デフォルト
  • テキスト
Arkhe風の神フックが新登場！機能追加でサイトを強化する方法
「Cocoonのテンプレート読み込みフックを使う方法」を解説。Cocoon 2.6.8で追加されたテンプレート読み込み機能を活用し、パラメータやテンプレートの書き換え、読み込み前後に処理を追加する方法や、独自のテンプレート読み込み関数を作る仕組みを分かりやすく紹介します。
chuya.s239.xrea.com
【Cocoon】サイト型トップページの作り方｜ブロックだけで簡単作成（初心者OK・CSSほぼ不要）
Cocoonでブログを始めたものの、「トップページがなんだか普通…」「おしゃれなサイトみたいにしたい」「でもHTMLやCSSは難しそう」そんなふうに感じたことがあると思います。そこで作ったのが、できるだけコードを使わず、ブロック操作中心で作...
turicco.com

内部ブログカード、外部ブログカードで、表示されるアイコンが異なります。

Arkhe風の神フックが新登場！機能追加でサイトを強化する方法
「Cocoonのテンプレート読み込みフックを使う方法」を解説。Cocoon 2.6.8で追加されたテンプレート読み込み機能を活用し、パラメータやテンプレートの書き換え、読み込み前後に処理を追加する方法や、独自のテンプレート読み込み関数を作る仕組みを分かりやすく紹介します。
chuya.s239.xrea.com
【Cocoon】サイト型トップページの作り方｜ブロックだけで簡単作成（初心者OK・CSSほぼ不要）
Cocoonでブログを始めたものの、「トップページがなんだか普通…」「おしゃれなサイトみたいにしたい」「でもHTMLやCSSは難しそう」そんなふうに感じたことがあると思います。そこで作ったのが、できるだけコードを使わず、ブロック操作中心で作...
turicco.com

手順

以下の手順で指定します。
「デフォルト」を選択すると、標準のデザインに戻ります。

  1. 「ブログカード」ブロックを配置します。
  2. スタイルを選択します。

表示がおかしい場合は、高度な設定→追加CSSクラスを削除してください。

応用

ブログカードのスタイル「テキスト」を設定することで、多様なデザインを実現する方法を説明します。
例えば、「アイコンボックス」ブロックや「付箋風ボックス」ブロックの中に入れることも可能です。

完成イメージ

Arkhe風の神フックが新登場！機能追加でサイトを強化する方法
「Cocoonのテンプレート読み込みフックを使う方法」を解説。Cocoon 2.6.8で追加されたテンプレート読み込み機能を活用し、パラメータやテンプレートの書き換え、読み込み前後に処理を追加する方法や、独自のテンプレート読み込み関数を作る仕組みを分かりやすく紹介します。
chuya.s239.xrea.com
Arkhe風の神フックが新登場！機能追加でサイトを強化する方法
「Cocoonのテンプレート読み込みフックを使う方法」を解説。Cocoon 2.6.8で追加されたテンプレート読み込み機能を活用し、パラメータやテンプレートの書き換え、読み込み前後に処理を追加する方法や、独自のテンプレート読み込み関数を作る仕組みを分かりやすく紹介します。
chuya.s239.xrea.com

手順

Gutenbergエディター

以下の手順で作成します。

  1. 例えば「アイコンボックス」ブロックを選択し、その中に「ブロクカード」ブロックを配置します。
  2. スタイル「テキスト」を選択します。

注意事項

Gutenbergエディター上での表示は変わりません。

さいごに

本スキンのカスタマイズにより、「ブログカード」ブロックに新たなスタイルが追加され、よりシンプルなデザインが実現します。
これにより、CSSの追加なしで、初心者でもシンプルなデザインを簡単に実現できます。

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