ショートコード一覧

画像・ボタンなどの中央寄せ

[center]中央寄せしたいコンテンツ[/center]

ボタン

[btn1 href="リンクのURL"]ボタンの中に表示するテキスト[/btn1]

ボタンのデザインは「外観」⇒「カスタマイズ」⇒「ボタン」から設定できます。

デザインは最大で3パターン設定できるので、例えばボタン2を挿入したいときは[btn2][/btn2]というように、数字を変更してください。

中央寄せするには、[center][btn1]テキスト[/btn1][/center]などと、ボタン全体を[center][/center]で囲います。

2つ以上のボタンを横に並べる

横並びにしたいボタン全てに「class=”parallel”」を追加します。

[btn1 href="" class="parallel"]テキスト[/btn1][btn1 href="" class="parallel"]テキスト[/btn1]

リンクを新しいタブで開く

「target=”_blank”」を追加します。

[btn1 href="" target="_blank"]テキスト[/btn1]

ボックス

[box2]ボックスの中に入れるコンテンツ[/box2]

ボックスのデザインは「外観」⇒「カスタマイズ」⇒「ボックス」から設定できます。

デザインは最大で5パターン設定できるので、ボックスの番号に合わせて数字を変更してください。

ボックスにタイトルを付ける

ボックスにタイトルを付けるには「title=””」を追加します。

タイトル付きボックス
[box2 title="タイトル付きボックス"]ボックスの中に入れるコンテンツ[/box2]

リスト

オリジナルのリストの作り方

オリジナルのリストを挿入するには、ビジュアルエディタなら「番号なしリスト」や「番号付きリスト」から、テキストエディタなら「ul」「ol」「li」タグで通常のリストを作り、全体をショートコード([list1][/list1]など)で囲むだけです。

箇条書きリスト

以下のリスト1~5はリストの前のアイコンにFont Awesomeを使用しており、「外観」⇒「カスタマイズ」⇒「リスト」から自由に色を設定できます。

リスト1

[list1]コンテンツ[/list1]

  • リスト
  • リスト
  • リスト

リスト2

[list2]コンテンツ[/list2]

  • リスト
  • リスト
  • リスト

リスト3

[list3]コンテンツ[/list3]

  • リスト
  • リスト
  • リスト

リスト4・リスト5

リスト4([list4][/list4])・リスト5([list5][/list5])では、アイコンの色だけでなく種類も自由に設定できます。

設定の仕方はこちらを参考にしてください。

数字リスト

数字リスト1・2についても、カスタマイザーから数字部分の背景色を設定できます。

数字リスト1

[olist1]コンテンツ[/olist1]

  1. リスト
  2. リスト
  3. リスト

数字リスト2

[olist2]コンテンツ[/olist2]

  1. リスト
  2. リスト
  3. リスト

リストをボックスの中に入れる

リストをボックスの中に入れるには、リスト全体を[box1][/box1]などで囲めばOKです。

[box3][list1]コンテンツ[/list1][/box3]

  • リスト
  • リスト
  • リスト

リンク

他のページ(外部サイトを含む)へのリンクをリッチに表示したいときに便利です。

リンクの文字色はカスタマイザーから自由に選択できます。

リンク1

[link1 href="リンクのURL"]表示したいタイトル[/link1]

リンク2

[link2 href="リンクのURL"]表示したいタイトル[/link2]

リンクを新しいタブで開く

「target=”_blank”」を追加します。

[link1 href="" target="_blank"]タイトル[/link1]

表は、ショートコードで囲めば特殊な装飾を施すことができるようになっています。

表1

[table1]テーブル[/table1]

ああああああああああああああ ああああああああああああああ ああああああああああああああ
ああああああああああああああ ああああああああああああああ ああああああああああああああ
ああああああああああああああ ああああああああああああああ ああああああああああああああ
ああああああああああああああ ああああああああああああああ ああああああああああああああ

表2

[table2]テーブル[/table2]

ああああああああああああああ ああああああああああああああ ああああああああああああああ
ああああああああああああああ ああああああああああああああ ああああああああああああああ
ああああああああああああああ ああああああああああああああ ああああああああああああああ
ああああああああああああああ ああああああああああああああ ああああああああああああああ

最上段の背景色は、「外観」⇒「カスタマイズ」⇒「表」から設定できます。

表3

[table3]テーブル[/table3]

ああああああああああああああ ああああああああああああああ ああああああああああああああ
ああああああああああああああ ああああああああああああああ ああああああああああああああ
ああああああああああああああ ああああああああああああああ ああああああああああああああ
ああああああああああああああ ああああああああああああああ ああああああああああああああ

左端の段の背景色は、「外観」⇒「カスタマイズ」⇒「表」から設定できます。

HTMLなどのコード

プログラミングのコードを表示したいときは以下のショートコードを使ってください。

[code]表示したいコード[/code]

YouTube埋め込みのレスポンシブ対応

ページにYouTubeの動画を埋め込むには動画のURLを貼り付けるだけでいいですが、そのままだと幅の狭い端末で見たときに表示が崩れるので、[youtube][/youtube]で囲うようにしてください。

[youtube]動画URL[/youtube]

ショートコードを使うときに便利なプラグイン「AddQuicktag」

ショートコードを使うときにいちいちコピー・ペーストするのは面倒だと思うので、これを解決してくれるプラグイン「AddQuicktag」をご紹介します。

これは、よく使うショートコードを前もって登録しておけば、簡単にショートコードを呼び出せる便利なプラグインで、ショートコードをコピペする必要も覚えておく必要もありません。

「AddQuicktag」については、以下の記事が分かりやすくまとまっていて参考になるでしょう。

Author

Nauts

WordPressテーマを作ったり、YouTubeでピアノを弾いたりしています。

Related

ここでは、デフォルトのエディタにはないChem独自の機能を紹介していきます。 ビジュアルエディタ マーカー 文字にマーカーを引くには、マーカ […]

マーカーを引く・画像にエフェクトをかける

カスタマイザーでは、サイトのタイトルやヘッダーロゴの設定などの基本的な部分から、見出しやボタンの装飾といった細かなデザインに関する部分まで、 […]

カスタマイザーの設定

CSSを追加したい CSSを追加したいときは、以下の3つの方法があります。どの方法でもいいですが、ファイルのアップデートがあったときの手間が […]

CSSやPHPファイルを独自にカスタマイズする方法【子テーマの導入方法】

インストール方法 「外観」⇒「テーマ」へと進みます。 「新規追加」をクリック。 「テーマのアップロード」をクリック。 ZIPファイルを選択し […]

テーマのインストール方法・アップデート方法

Chemで使えるウィジェットエリア・メニューエリア Chemで使えるウィジェットエリア・メニューエリアは以下のようになっています。 ウィジェ […]

ウィジェット・メニューの設定

プログラミングの知識がなくても手軽にお問い合わせフォームを設置できるプラグイン「Contact Form 7」をご紹介します。 インストール […]

お問い合わせフォームを手軽に設置できるプラグイン「Contact Form 7」