タイポグラフィショートコード

7つのタイポグラフィショートコードは、標準のWYSIWYGエディターで利用でき、WPBakery Page Builderの「テキストブロック」でも利用できます。

始める前に、WordPressのショートコードの概念に慣れていることを確認してください：http://en.support.wordpress.com/shortcodes/（英語）
上記のリンクは、ショートコードとは何かを簡単に説明するためのものです。ここで説明されているすべてのショートコードがテーマで機能するとは限りません。

本テーマのWPBakery Page Builderのビジュアル要素/ショートコードとは別に、WYSIWYGエディターまたはテキストブロックの「ショートコード」をクリックするとドロップダウンにリストされる従来のテキストベースのショートコードも利用します（図1）。

ギャップ（Gap）

ギャップショートコードは「空のスペース」要素と同じように機能します。段落と他の要素の間にギャップを追加します。オプションは、高さのみです。「10」は10pxを表します。

仕切り（Divider）

Divider shortcodeは、要素間に水平の分割線を挿入します。 「スタイル」オプションで指定した内容に応じて、細い線（thin）と太い線（thick）があります。

ツールチップ（Tooltip）

マウスオーバーでメッセージを表示するツールチップを実現するには（図3）、次のショートコード構文を使用してください。

ハイライト（Highlight）

このショートコードは、テキスト文字列の一部を強調表示します。次の構文を使用します。

ショートコードの属性は次のとおりです。

• color =””　属性を使用して、カラープリセットのいずれかを指定すると、背景色が変更されます：white, red, berry, orange, yellow, pink, green, dark_green, blue, dark_blue, violet, black, gray, grey
  また、テキストの色は自動的に白に変わります。
• または、text_color =”” bg_c​​olor =””　の組み合わせを使用して、テキストと背景色の両方を指定します。 「＃cc3366」のようなHEX値を使用します。
• または、アクセントカラーを背景に適用して（アクセントカラーがグラデーションの場合を含む）、テキストの色を白にするために、すべての属性を空のままにします。

ソースコード

このショートコードを使用すると、記号「、<、>などの正しい解釈でコード文字列を表示できます（これらの文字がWYSWYGエディターに直接挿入される場合とは異なります）。次の構文を使用します。

［dt_code]<div class =” my-element” style =””>ソースコードの表示</ div>[/dt_code］