「回転テキスト」ブロックを追加

はじめに

本スキンでは、Gutenbergエディターに以下のような「回転テキスト」ブロックを追加しています（図1参照）。
その使い方について説明します。

円形に沿ったテキストアニメーションの作成方法

「テキストを円に沿ってアニメーション表示する方法」を解説。SVGとCSSで円形に配置したテキストを回転させる方法や、画像を組み合わせたロゴの作成、WordPress 7.0の機能を使ってPHPだけでブロック化する方法を分かりやすく紹介します。

chuya.s239.xrea.com

手順

ブロックから「回転テキスト」ブロックを選択します。

• 画像URL
  ロゴの中心に表示する画像のURLを入力します。
• テキスト
  ロゴの周囲に表示するテキストを入力します。
• テキストカラー
  テキストの色を16進数で入力します。
• 太字
  テキストを太字にする場合はチェックを入れます。

活用例

本サイトのフロントページのように、メインビジュアル上に作成した「回転テキスト」ブロックを重ねて表示することができます。

管理メニュー→パターン一覧からパターンを作成し、その中に本ブロックを配置します。

WordPress「パターン」機能の活用法

「WordPressのパターン機能の使い方」を解説。パターンの作成・登録方法やGutenbergエディターでの再利用、Cocoon独自のpatternショートコードで複雑なレイアウトを呼び出す方法、同期パターンの解除について分かりやすく紹介します。

chuya.s239.xrea.com

作成したパターンのショートコードを、メイド・イン・ヘブン設定→メインビジュアル→メインビジュアル「タイトルテキスト」に入力します。

フロントページとヘッダーで異なるロゴ画像を設定する方法

本スキンでは、メインビジュアルとヘッダーでそれぞれ異なるロゴ画像を設定可能にし、サイト全体のデザインに統一感とバリエーションを持たせたブランド魅力の強調を実現します。

chuya.s239.xrea.com

さいごに

本スキンのカスタマイズにより、Gutenbergエディターで「回転テキスト」ブロックを簡単に作成でき、フロントページの演出を効果的に行えます。