GenesisCustomBlocksを使って自作ブロックを作成＆登録する方法[WordPress]

自分でカスタマイズしたブロックデザインを、新しいブロックとして登録できるプラグインを探してみました。

PHPの知識もなく、HTMLとCSSを独学で使ってる程度のわたしでも、なんとか理想に近い形を実現できました。

使い方を忘れないうちに、しっかり記録しておきたいと思います。 (^^)/~~~~

記事の最終章では、実践編として「吹き出しブロック」を作っていますので、ぜひご覧ください。

独自ブロックの作成＆登録ができるプラグイン
Genesis Custom Blocks 使い方
実践編: 吹き出しブロックを作ってみよう
まとめ

独自ブロックの作成＆登録ができるプラグイン

カスタムブロックを作成し、自分のWordPressで使えるようにすることは、専門的な知識が必要なんだろうと思っていましたが、何か良いプラグインはないものか？と探してみると、いくつかの名前を見つけることが出来ました。

Custom Blocks Constructor – Lazy Blocks

Gutenberg カスタムブロックとカスタムメタフィールドをハードコーディングなしで簡単に作成します。

Genesis Custom Blocks

Custom blocks for WordPress made easy.

最初にLazy Blocks のほうをインストールしてみましたが、途中で挫折＆放置。

しばらくして、今度は Genesis Custom Blocks （以下、GCB）をインストールしてみました。気合いが入っていたせいか、なんとかブロック作成まで辿り着くことができました。

Lazy Blocks も似たような使い方ができそうなので、そのうち再チャレンジしてみようと思いますが、とりあえず、忘れないうちに GCB の使い方を記録しておこうと思います。

GCB は、WordPress ダッシュボードの［プラグイン］→［新規追加］から探せます。

「Genesis Custom Blocks」で検索してください。

見つかったら、［今すぐインストール］をクリックし、［有効化］します。

有効化できると、ダッシュボードに[Custom Blocks]が追加されます。

Genesis Custom Blocks 使い方

わたしはプログラミングの知識などなく、HTMLとCSSを独学でなんとか理解している程度です。

「その程度でブロックの登録とか、できるの？」

と心配でしたが、プラグインの力を借りて、なんとか最後まで辿り着けました。

GCBでブロックを登録する工程には、テンプレートの作成作業が含まれます。

テンプレートの作成には、次の2通りの方法が用意されています。

GCB の テンプレートエディターを使う方法。
phpファイルを作成し、テーマ内に新しいフォルダを作って保存する方法。

phpの知識がない私は、迷わず「1」の方法でテンプレートを作成しました。

そのため、こちらの記事ではテンプレートエディターを使う方法しかご紹介していませんので、あらかじめご了解ください。

新規カスタムブロックの作成＆登録の流れ

STEP1
新規ブロックの登録

新しいブロックの名前、スラッグ、投稿画面内でのアイコンやブロックカテゴリなどを設定します。
STEP2
フィールドの追加と設定をする

フィールド（入力欄）を作成します。
フィールドタイプは15種類あり、タイプに合わせて詳細設定します。
STEP3
テンプレートを作成する

テンプレートエディターを使って、ブロックを構成するHTMLとCSSを作成します。
STEP4
［公開］or［更新］する

準備ができたら［公開］をクリックして保存します。これでWordPressのブロックライブラリーに追加されます。

［公開］後に編集した場合は［更新］をします。

GCBでは、単にブロックをデザインして登録するだけでなく、ブロック内の入力項目を求めるフィールドを追加することができます。（STEP2）

そのフィールドはテキストだけでなく、カラーコードや数値など、様々なタイプの入力を求めることができるようになっています。

ブロックの作成に取り掛かる前に、ブロックの構成を一度HTML＆CSSで組み立ててみてください。そうすると、どんなフィールドが必要かが理解しやすいと思います。

この章では、GCBの基本的な使い方やフィールドの紹介をしています。

まずは「あぁ～、こうやって使うんだ～」とか、

「へぇ～、こんなフィールドがあるんだぁ～」と、

漠然でもいいので確認してください。

次の「３章」で、実践編をご用意しています。

Genesis Custom Blocks を始める

GCBを有効化すると、ダッシュボードに［Custom Blocks］メニューが追加されます。

［Costom Blocks］をクリックすると、下図のブロック登録リストが表示されます。

ここには、あらかじめサンプルブロックが１つ用意されています。

このサンプルを編集するか、削除すると「Ready to begin?」のメッセージが消えます。

STEP1: 新規ブロックの登録

新しいブロックを作成するには、［Add New]へ進みます。

ブロックリスト内の［Add New］、もしくは、メニュー［Custom Blocks］→［Add New］のどちらからも進むことができます。

ブロックのタイトルを入力する

ブロック作成用の画面では、最初に「Block title」をクリックし、ブロックの名前を入力します。

登録後は投稿画面でこの名前が表示されるので、内容がわかる名前にすると良いでしょう。

ブロックの設定をする

投稿画面でブロックを見つけやすくするための設定を行います。

Slug（必須）: スラッグは、ブロックに付けた名前に基づいて自動入力されます。
- 「Block title」部分は「漢字・ひらがな」でも設定できますが、その場合はスラッグが自動入力されません。スラッグは必ず半角英数字にします。
Icon: アイコンは、登録するブロックを表すアイコンを選択します。
- 「Choose」をクリックすると、アイコンリストが表示されます。
Category: カテゴリーは、投稿画面の「ブロック挿入ツール」（ブロックライブラリー）の中で、どの分類に属するかを選択できます。
- プルダウンリストからデフォルトのカテゴリーを選択するか、「Add New Category」をクリックして新しいカテゴリーを作成します。
Keywords: キーワードを登録すると、ブロックの検索や呼び出しの時に使えます。
- 最大３個まで登録できます。
「Open block fields in a modal instead of rendering in place」にチェックを入れると、モーダルでブロックフィールドを開きます。
- ブロックへの入力をダイアログで行うようにします。
- フィールドの多いブロックに適しています。
Post Types: ブロックを利用できる投稿タイプを選べます。チェックの入っている投稿タイプでブロックが表示されます。

STEP2: フィールドの追加と設定

フィールドは、投稿画面でユーザーに入力を促したり、補助したりする項目になります。

毎回異なるテキストを求めたり、スタイル設定用の数値やカラーコードを求めるフィールドを作成しておきます。

例えばボタンブロックを作る場合…

ボタンの中のテキストやリンク設定をするなら、

［テキスト］フィールド
［URL］フィールド

ボタンの横幅や色といったスタイル設定ができるようにしたいなら、

［Range（範囲）］フィールド
［Color（色）］フィールド

フィールドの追加

必要な分だけフィールドを追加し、それぞれのフィールドに合わせて詳細を設定していきます。

用意されているフィールドタイプは次の通りです。

Text
Textarea
URL
Email
File
Number
Color

Image
Inner Blocks
Select
Multi-Select
Toggle
Range
Checkbox
Radio

GCB の Free版では15個のフィールドが使えます。

Pro版では、次のフィールドが追加で使用できます。

Classic Text
Post
Repeater
Rich Text
Taxonomy
User

フィールドの設定

追加したフィールドの設定をしていきます。

設定項目はフィールドタイプによって異なりますが、下図の❶～❻までは全フィールド共通です。

❼のエリアは、各フィールドタイプによって内容が異なります。

共通の設定項目は次の通りです。

Field Label: フィールドの名前を入力します。
Field Namet (slug): スラッグを入力します。
Field Type: フィールドタイプを選択します。
Field Location: フィールドを表示する領域を選択します。
- Editor = 編集領域
- Inspector Fields = 右サイドバー
Field Width: フィールドを表示する幅を選択します。
Help Text: フィールドに何を入力するかを説明する指示を入力します。(オプション)。
- 「カタカナで入力してください。」など

各フィールドの詳細

各フィールドの特徴と、独自の設定項目です。

各フィールドタイプごとに記載している「HTML使用例」は、公式サイトのサンプルを引用しています。実際の設定例は、公式サイトの各フィールドタイプごとのページをご覧ください。

Fields - Genesis Custom Blocks

Choose from a variety of field types to add to your custom Gutenberg block using the Block Lab WordPress plugin.

❶ Text（テキスト）

[テキスト] フィールドは、1行程度の単純なテキスト入力に適しています。

Default Value（デフォルト値）: フィールドのデフォルト値を指定できます。
Placeholder Textプレースホルダーテキスト : フィールドが空の時に表示される説明文（灰色に表示されている文字）を指定できます。
Character Limit（文字数制限）: 入力できる最大文字数を指定できます。

HTML使用例

<div>
     <h3>Pet's Name:</h3>     
     <p>{{pets-name}}</p>
</div>

❷ Textarea （テキストエリア）

[Textarea] フィールドは、ひとかたまりの文章（段落）に適したブロックです。

Default Value（デフォルト値）: ブロックを追加するときのこのフィールドのデフォルト値。
Placeholder Text : 入力が空の場合に表示されるプレースホルダーテキストを指定できます。
Character Limit（文字制限）: 入力できる最大文字数を指定できます。
Number of Rows : エディターに表示されるときのテキストエリアの行数を指定できます。
New Lines（新しい行）: 段落または改行を自動的に追加するか指定できます。
- Automatically add paragraphs: 入力したテキストは、自動的にタグで囲まれます。また、フィールド内の改行には タグが挿入されます。
- Automatically add line breaks: フィールド内で改行すると、自動的に タグが挿入されます。
- No Formatting: タグも タグも追加されません。

HTML使用例

<div>
     <h2>Pet's Story</h2>     
     <p>{{pets-story}}</p>
</div>

❸ URL（アドレス）

[URL] フィールドは、有効な URL のみを受け付ける入力フィールドを作成します。

Placeholder Text : 入力が空の場合に表示されるプレースホルダーテキストを指定できます。

HTML使用例

<div>
     <p>Find more info about this pet on the <a href="{{owners-website}}" />current owner's website.</a></p>
</div>

「Find more info about this pet on the ●● current owner’s website.」
（訳：このペットに関する詳細情報は［URL］ウェブサイトをご覧ください）

❹ Email（電子メール）

[Email] フィールドでは、有効な電子メールアドレスのみを受け入れる単純なテキスト入力が作成されます。

Default Value（デフォルト値）: ブロックを追加するときのこのフィールドのデフォルト値。
Placeholder Text : 入力が空の場合に表示されるプレースホルダーテキストを指定できます。

HTML使用例

<div>
     <p>Interested in this pet? <a href="mailto:{{owners-email}}">Contact the owner for more information.</a></p>
</div>

❺ File（ファイル）

[File] フィールドは、ドキュメント (画像以外のファイル) をアップロードできるフィールドを作成します。

HTML使用例

<div>
     <ul>
         <li><a href="{{privacy-practices}}">Privacy Practices</a></li>
         <li><a href="{{medical-records-transfer-request}}">Medical Records Transfer Request</a></li>
     </ul>
</div>

サポートされているファイル形式

.pdf (PDF 形式、Adobe Acrobat)
.doc、.docx (Microsoft Word ドキュメント)
.ppt、.pptx、.pps、.ppsx (Microsoft PowerPoint プレゼンテーション)
.odt (OpenDocument テキストドキュメント)
.xls、.xlsx (Microsoft Excel ドキュメント)
.psd (Adobe Photoshop ドキュメント)

❻ Number（数値）

[Number] フィールドは、数値のみを受け入れる入力領域を作成します。

Default Value（デフォルト値）: ブロックを追加するときのこのフィールドのデフォルト値。
Placeholder Text : 入力が空の場合に表示されるプレースホルダーテキストを指定できます。

HTML使用例

<div>
     <p>Adoption Fee: {{adoption-fee}}</p>
</div>

「Adoption Fee =養子縁組料」

❼ Color（色）

[color] フィールドでは、ブロックテンプレートで使用できるカラーピッカーを作成します。

Default Value（デフォルト値）: ブロックを追加するときのこのフィールドのデフォルト値。
Placeholder Text : 入力が空の場合に表示されるプレースホルダーテキストを指定できます。

HTML使用例

<div style="background:{{block-background-color}}"></div>

❽ image（画像）

[image] フィールドでは、新しい画像をアップロードするか、メディアライブラリから既存の画像を選択できるフィールドが作成されます。

HTML使用例

<div>
     <p>How can you say no to a face like this?</p>
     <img src="{{pets-photo}}" />
</div>

❾ Inner Blocks（インナーブロック）

[Inner Blocks] フィールドを使用すると、他のフィールドやブロックをネスト（入れ子）にできるフィールドを作成できます。

注:1つのカスタムブロックに入れられるインナーフィールドは1つだけです。インナーブロックを1つ追加すると、フィールドタイプリストに表示されなくなります。

HTML使用例

<div>
   {{inner-block}}
</div>

❿ Select（選択）

[Select] フィールドは、ドロップダウンメニューを作成します。

Choices（選択肢）: ドロップダウンメニューで使用可能な項目を入力します。
- 改行で複数の選択肢を指定できます。
- 値とラベルを個別に指定する場合は、次のように指定します。
  - 「value : Your label」＝「値：ラベル」
- ブロックにはラベルが表示されます。
Default Value（デフォルト値）: このフィールドのデフォルト値を指定できます。
- 指定の際は、値だけを入力します。

選択肢を「値」と「ラベル」に分けて指定する際の注意点は次の通りです。

記述形式は「値 : ラベル」です。
「:」の前後には半角スペースが入ります。
ブロックの選択リストには「ラベル」が表示されます。
ラベルは日本語でも大丈夫です。
値はHTMLの引数になるので、半角英数字を使います。

HTML使用例

<div>
     <p>We expect this pet will be {{pets-size}} size when fully grown.</p>
</div>

⓫ Multi-Select（複数選択）

[Multi-Select] フィールドは、選択肢の中から複数を選択できるリスト入力オプションを作成します。

複数選択の場合、連続した範囲の選択はShiftキー、離れたファイルの場合はCtrlキーを使用します。このことを［Help Text］に記述しておくと良いと思います。

Choeces（選択肢）: ドロップダウンメニューに表示する項目を入力します。
- 各選択肢は改行で複数指定できます。
- 値とラベルを個別に指定するには、次のように入力します。
  - 「value : Your label」＝「値：ラベル」
Default Value（デフォルト値）: フィールドのデフォルト値を指定できます。
- 複数指定する場合、各デフォルト値を改行で区切ります。
- 指定する場合は、値だけを入力します。

「Rabies:狂犬病」「Distemper: ジステンパー」「Kennel Cough: ケンネルコフ」

HTML使用例

<div>
     <p>Which vaccinations are still needed?</p>
     <p>{{pets-vaccinations}}</p>
</div>

⓬ Toggle （トグル = ON/OFF切り替え）

[Toggle] フィールドは、ブロックのオン/オフトグルスイッチ入力オプションを作成します。

Default Value（初期値）: チェックでON/OFFを切り替えて初期値を指定できます。
- チェックあり＝ Yes/true/1
- チェックなし＝ no/false/0

HTML使用例

<div>
     <h3>Is this pet still available?</h3>     
     <p>{{pets-availability}}</p>
</div>

「Is this pet still available?」
（訳：このペットはまだ入手可能ですか?）

⓭ Range（範囲）

[Range] フィールドは、数値スライダー入力オプションを作成します。（整数対応）

Minimum Value（最小値）: 範囲内で選択できる最小値を指定できます。
Maximum Value（最大値）: 範囲内で選択できる最大値を指定できます。
Step Size : スライダーを動かすときの移動値。
- 「1」ずつ変化なら「1」
- 「10、50、100、…」なら「50」

HTML使用例

<div>
     <h3>How old is this pet?</h3>     
     <p>{{age}}</p>
</div>

⓮ Checkbox（チェックボックス）

[チェックボックス] フィールドは、チェックボックス入力オプションを作成します。

Default Value（デフォルト値）: チェックボックスのデフォルト値をON/OFF選べます。
- チェックあり＝ ON
- チェックなし＝ OFF

HTML使用例

<div>
   <p>Is the pet housebroken?</p>
   <p>{{スラッグに書き換え}}</p>
</div>

⓯ Radio（ラジオボタン）

[Radio] フィールドは、ラジオボタンを作成します。

ラジオボタンは、複数の選択肢の中から、1つだけを選択するときに使われます。

Choices（選択肢） : 選択項目を入力します。
- 改行で複数の項目を指定できます。
- 値とラベルを個別に指定するには、次の形式を使用します。
  - 「value : Label」＝「値 : ラベル」
Default Value（デフォルト値）: このフィールドのデフォルト値を指定できます。
- 指定する時は値だけを入力します。

HTML使用例

<div>
     <h3>What species is this pet?</h3>
     <p>Species: {{species}}</p>
</div>

「What species is this pet?」
（訳：このペットは何という種類ですか?）

Fields - Genesis Custom Blocks

Choose from a variety of field types to add to your custom Gutenberg block using the Block Lab WordPress plugin.

STEP3: テンプレートを作成する

最初にも書きましたが、テンプレートの作り方は2通り用意されています。

GCB のテンプレートエディターを使う方法。
別途PHPファイルを作成し、テーマの新しいフォルダーに保存する方法。

この記事ではテンプレートエディターを使った作成方法をご紹介します。

また、テンプレートを作成する前に［公開］をクリックすると、テンプレートを作成するように注意する表示が現れます。

「次のステップはテンプレートを作成することです。」

この表示が出ても、特に気にせずテンプレート作成に進んでください。

まず、画面を確認しましょう。

GCB の画面上部には、4つのタブが並んでいます。

これまでの作業（ブロックの設定＆フィールドの追加）は[Bulder]タブで行っていました。

テンプレートの作成には、下図の❶～❸のタブを切り替えながら作業をしていきます。

また、下図は❶の[Template Editor]タブを選択した状態で、その中は❹の[Markup]と、❺の[CSS]に切り替えることができます。

Template Editor: テンプレートエディター
Editor Preview: エディタープレビュー
Front-end Preview: フロントエンドプレビュー
Markup: HTML記述画面
CSS: CSS記述画面

MarkupでHTMLを入力する

作成作業は[Template Editor]タブの中で行います。

❶の[Markup]に、テンプレートで使用する HTML を入力します。
HTMLコード内にフィールドを記述するときは、フィールドのスラッグを 2つの括弧「{{」で囲みます。例: {{field-name}}
WordPressのサイドバーに組み込まれている［追加CSS］のクラスをサポートするwrapperをテンプレートに含めることが推奨されています。

HTML使用例

例えば…
［Image]フィールドを追加し、スラッグを「sampleimage」にしている場合、、、

<div class="sample-wrapper">
   <div>
      <img class="sample-img" src="{{sampleimage}}" alt="">
   </div>
</div>

というようなHTMLが考えられます。

Wrapper（ラッパー）の役割や使い方は、こちらのサイトがわかりやすいです。

CSS 最近のWebページやアプリのレイアウトに適した、ラッパーの実装テクニックを徹底解説

最近のWebページやアプリに適した、ラッパーの実装テクニックを紹介します。ラッパーとはコンテンツを読みやすい幅に包むもので、CSSでのラッパーの実装、マージンやパディングの追加、中央揃え、ラッパーの

CSSでCSSを入力する

❺の[CSS]をクリックして、ブロックのスタイルに使用する CSS を入力します。
ここに入力した CSS は、ブロックが表示されるページでのみレンダリングされるため、Web サイトの全体的なパフォーマンスには影響しません。

フィールドに入力された「値」は、残念ながらCSSには反映できませんでした。

その代わり、HTMLのインラインでstyle属性を使って対応できます。

<p style="color: {{samplebox-color}};">今日の天気は雨です。</p>

STEP4: ［公開］or［更新］する

準備ができたら、 [公開] をクリックします。

［公開］することで、初めてブロックがブロックライブラリで利用できるようになります。

また、❸のフロントエンドプレビューは、❷のエディタープレビューで編集していることと、［公開］していることが表示の条件になります。

2つの条件がクリアされていないと、次の表示が出てフロントエンドプレビューが出来ません。

作業の流れを確認すると、

ブロックの設定 ⇒ フィールドの追加＆設定 ⇒ テンプレートの作成 ⇒ 公開

となります。

そのうえで、

［エディタープレビュー］で編集 ⇒ ［フロントエンドプレビュー］

という流れになります。

もちろんプレビューの結果が想定外のものであれば、再びエディターに戻って再編集できます。

一度公開したブロックを再編集した場合は［更新］ボタンに変わります。

GCBでの作業が終わったら、投稿画面のブロックライブラリーに新しいブロックが追加されていることを確認しましょう。

実践編: 吹き出しブロックを作ってみよう

新しい吹き出しブロックを作ってみようと思います。

※ 吹き出し用アイコンはご自身でご用意ください。

基本の構成

吹き出しブロックは、次の2つの要素で構成されています。

段落要素（CSSで、吹き出し風のスタイルを設定）
画像要素（CSSで、吹き出しアイコンに適したサイズにスタイル設定）

この2つが、新しいブロックのフィールドになります。

この構成をHTML＆CSSで表現すると、次のような感じになります。

スタイルを追加しやすいように、divタグで囲ってブロック分けしています。

<div>
   <div class="fuki-text"><p>ここにテキスト</p></div>
   <div class="fuki-icon"><img src="#"></div>
<div>

※ 「#」には画像アドレスが入ります。

.fuki-text{
	position: relative;
	padding: 1em;
	color: #fff;
	background: #4a4a9e;
	border-radius: 2px; /* 角の丸み */
	display: inline-block;
	min-width: 120px;
	max-width: 80%;
}
.fuki-text p {
	margin: 0;
}
.fuki-text::before{
	position: absolute;
	content: "";
	border-top: 20px solid #4a4a9e;
        border-right: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 20px solid transparent;
        left: 30px;
        bottom: calc(-1em + -0.5em + -0.5em);
        z-index: 1;
}
.fuki-icon{
        margin: 1.5em 0;
        width: 100px;
        height: auto;
}

ここにテキスト

再利用ブロックに登録しておくこともできますが、テキストと吹き出しアイコンを毎回違うものにするなら、ブロックとしてフィールドを設けておいたほうが楽になるはずですよね。

カスタムブロックの作成と登録

それでは、上で確認した構成を元に GCB でブロックを作成＆登録してみましょう。

HTMLの「ここにテキスト」と、画像アドレスを入力する「#」の部分がField（フィールド）になります。

作成手順

［Custom Blocks］→［Add New］（新規追加）

新規ブロックを作成する ⇒ ブロック名「オリジナル吹き出し」

実際にブロックを使う時の表示関係を設定します。

「Block Title」に新しいブロックの名前を入力します。
- このタイトルは投稿画面で実際にブロック名として表示されます。
「Slug」に、このブロックのスラッグを半角英数字で入力します。
- Block Title に半角英数字を入力した場合は、連動して入力されます。
「Icon」の「Choose」をクリックし、ブロックの内容に合わせたアイコンを選択します。
「Category」で、投稿画面の「ブロック挿入ツール」内のカテゴリを選択します。
- 「Add New Category」をクリックすると、新しいカテゴリを作成できます。
「KEYWORDS」を登録すると、登録したキーワードを使ってブロックを呼び出せます。
- 最大３個まで登録できます。

今回の設定内容

Title: オリジナル吹き出し
Slug: my-fukidasi
Icon: 吹き出しアイコン
Category: 新規作成「My Block」
Keywords: balloon、fukidasi

「Field 1」を用意する ⇒ フィールド名「fuki-text」

ここからは、必要なフィールドを追加し、それぞれのフィールドに合った設定を行っていきます。

まずは最初の構成で確認した「Field 1」にあたる部分を作っていきます。

（New Field）をクリックすると、新しいフィールドが追加されます。

追加されたフィールドの詳細を設定していきます。設定項目❶～❻は共通ですが、❼の部分は、❸で選択した Field Type に合わせて変化します。

このフィールドは吹き出し内のテキストになるので、「Textarea」を選択します。

今回の設定内容

Field Label: fuki-text
Field Name (slug): fukitext
Field Type: Textarea
Number of Rows: 「1」（テキストエリアの高さ）
New Lines: Automatically add line breaks
その他: 変更せず

Field Type の Text は、１行程度のテキストに適してます。

ひとかたまりの文章なら Textarea が適しています。

New Lines で Automatically add paragraphs を選択すると

自動的にタグで囲まれるので、

テンプレート内のタグは不要になります。

「Field 2」を用意する ⇒ フィールド名「fuki-icon」

ふたつめのフィールドを追加します。

「Field 2」は、吹き出しアイコン用の画像を選択するフィールド（Image）にします。

（New Field）をクリックしてフィールドを追加したらラベル名を付け、Field Type を「Image」にします。

Field Type に「Image」を選択すると、設定項目❼の部分が変化します。必要があれば設定をしますが、Imageでは設定項目がないので、❶～❻で必要項目の設定をしたら先へ進みます。

今回の設定内容

Field Label: fuki-icon
Field Name (slug): fukiicon
Field Type: Image
その他: 変更せず

ここまでの作業で、画面には2つのフィールドが並んでいるはずです。

テンプレートエディターでブロックテンプレートを作成する

テンプレートを作る方法は２通り用意されていますが、今回はテンプレートエディターを使います。

❶の「Template Editor」に切り替え、「❹ Markup」には HTML、「❺ CSS」には CSSを入力していきます。

Markup

「Template Editor」の ❹「Markup」を選択し、ブロックを構成するHTMLコードを記述します。

吹き出しを表現するための通常のHTMLがこちらでした。

<div>
   <div class="fuki-text"><p>ここにテキスト</p></div>
   <div class="fuki-icon"><img src="#"></div>
</div>

フィールドとリンクする部分をフィールドスラッグに書き換えます。

スラッグを記述する時は「{{」で囲みます。（二重の「{」です。）

書き換えたコードがこちらです。そのままコピペで使えます。

<div>
   <div class="fuki-text"><p>{{fukitext}}</p></div>
   <div class="fuki-icon"><img src="{{fukiicon}}"></div>
<div>

CSS

CSSには、「基本の構成」でご紹介したCSSコードをそのまま使えます。

画面を❺の「CSS」に切り替え、下のコードをコピペしてください。

.fuki-text{
	position: relative;
	padding: 1em;
	color: #fff;
	background: #4a4a9e;
	border-radius: 2px; /* 角の丸み */
	display: inline-block;
	min-width: 120px;
	max-width: 80%;
}
.fuki-text p{
	margin: 0;
}
.fuki-text::before{
	position: absolute;
	content: "";
	border-top: 20px solid #4a4a9e;
        border-right: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 20px solid transparent;
        left: 30px;
        bottom: calc(-1em + -0.5em + -0.5em);
        z-index: 1;
}
.fuki-icon{
        margin: 1.5em 0;
        width: 100px;
        height: auto;
}