Shortcodes

ご注意

WordPress 5.0以降の投稿画面の新エディタ「Gutenberg」ではテーマ専用ショートコードをご利用頂くことができません。
WordPress公式プラグイン「Classic Editor」をインストールすることでテーマ専用ショートコードをご利用頂けます。

WordPress5.0以降でClassic Editor（旧エディタ）を使う方法

テーマ専用ショートコードの使い方

基本ショートコード

見出し【 h1 】～【 h6（装飾なし）】
フォントサイズ【 x-small 】～【 xxx-large 】
フォントカラー【 primary 】～【 muted 】
Webフォント【 Vollkorn 】～【 Source Code 】
リスト【リスト】～【リスト（番号付き）】
テーブル【テーブル】～【テーブル（マウスオーバー）】
引用文【引用文】
プログラムコード【プログラムコード（pre,code）】

拡張ショートコード

Webアイコン【 Webアイコン】
イメージ【画像：写真風エフェクト】～【画像：セピア】
ライトボックス【画像：Lightbox 】
QRコード【 QRコード】
レスポンシブ埋め込み動画【動画埋め込み】
テキストパネル【パネル】
フォトパネル【フォトパネル】
ボタン【ボタン：small 】～【ボタン：large 】
フラットボタン【フラットボタン：small 】～【フラットボタン：large 】
モーダルウィンドウ【モーダル】
アコーディオン【アコーディオン】
プログレスバー【プログレスバー】
タブ【タブ】
ドロップダウン【ドロップダウン】
ツールチップ【ツールチップ：テキスト】～【ツールチップ；フォト】
2カラムレイアウト【レイアウト：2カラム】
3カラムレイアウト【レイアウト：3カラム】
4カラムレイアウト【レイアウト：4カラム】

ショートコードを使ったコンテンツの表示が崩れる場合

見出し【 h1 】～【 h6（装飾なし）】

デフォルト

マテリアルデザイン WordPress【 h1 】

マテリアルデザイン WordPress【 h2 】

マテリアルデザイン WordPress【 h3 】

マテリアルデザイン WordPress【 h4 】

マテリアルデザイン WordPress【 h5 】

マテリアルデザイン WordPress【 h6 】

プレーン

マテリアルデザイン【 h1（装飾なし）】

マテリアルデザイン【 h2（装飾なし）】

マテリアルデザイン【 h3（装飾なし）】

マテリアルデザイン【 h4（装飾なし）】

マテリアルデザイン【 h5（装飾なし）】

マテリアルデザイン【 h6（装飾なし）】

このショートコードの使い方
ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。
```
[h1 text='テキスト'] 
```
```
[h6-plain text='テキスト']
```
以下のように、「テキスト」の部分を任意の文字に置き換えます。
```
[h1 text='おすすめ海外ドラマ'] 
```
```
[h6-plain text='ランキング']
```
公開ページでは以下のように表示されます。

おすすめ海外ドラマ

ランキング

フォントサイズ【 x-small 】～【 xxx-large 】

不思議の国のアリス Alice:x-small

不思議の国のアリス Alice:small

不思議の国のアリス Alice:medium

不思議の国のアリス Alice:large

不思議の国のアリス:x-large

不思議の国のアリス Alice:xx-large

不思議の国のアリス Alice:xxx-large

このショートコードの使い方
ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。
```
[fontsize class='xs'] テキスト [/fontsize]
```
```
[fontsize class='xxxl'] テキスト [/fontsize]
```
以下のように、ショートコードに挟まれている「テキスト」の部分を任意の文字に置き換えます。
また、リンクを設定する場合に以下のようにします。
```
[fontsize class='xs'] 小さい文字です。 [/fontsize]
```
```
[fontsize class='xxxl'] とても<a href="URL">大きい文字</a>です。 [/fontsize]
```
公開ページでは以下のように表示されます。

小さい文字です。　
とても大きい文字です。

フォントカラー【 primary 】～【 muted 】

「君を好きになってもいいかい」とツバメは言いました。『幸福な王子』オスカー・ワイルド:text-primary

「君を好きになってもいいかい」とツバメは言いました。『幸福な王子』オスカー・ワイルド:text-info

「君を好きになってもいいかい」とツバメは言いました。『幸福な王子』オスカー・ワイルド:text-success

「君を好きになってもいいかい」とツバメは言いました。『幸福な王子』オスカー・ワイルド:text-warning

「君を好きになってもいいかい」とツバメは言いました。『幸福な王子』オスカー・ワイルド:text-danger

「君を好きになってもいいかい」とツバメは言いました。『幸福な王子』オスカー・ワイルド:text-muted

このショートコードの使い方
ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。
```
[fontcolor class='danger'] テキスト [/fontcolor]
```
```
[fontcolor class='info'] テキスト [/fontcolor]
```
以下のように、ショートコードに挟まれている「テキスト」の部分を任意の文字に置き換えます。
また、リンクを設定する場合に以下のようにします。
```
[fontcolor class='danger'] 「君を好きになってもいいかい」 [/fontcolor] とツバメは言いました。
```
```
 [fontcolor class='info'] 参考文献はこちら [/fontcolor] 
```
公開ページでは以下のように表示されます。

「君を好きになってもいいかい」とツバメは言いました。
参考文献はこちら

Webフォント【 Vollkorn 】～【 Source Code 】 Fonts : [ Google Fonts ] License: CC BY 3.0

Varela

Everything's Gonna Be Alright.

WordPressテーマ【Esperanza】のデフォルトの欧文フォントにはWebフォントの【 Varela 】を採用しています。
その他、下記のWebフォントを採用しておりCSSやショートコードで簡単に利用することができます。

Vollkorn

Boy meets girl.

Tangerine

Make my day.

Damion

I love you.

Cinzel

Pianissimo

Source Code Pro

//ワードプレスコードなどを表示する際には等幅Webフォントが便利です。
sw = new System.IO.StreamWriter(fpath, false, enc);
for (int i = 0; i >= dt.Length - 1; i++)

このショートコードの使い方
ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。
```
[font-Tangerine size='36'] テキスト [/font-Tangerine]
```
```
[font-Source-Code-Pro] テキスト [/font-Source-Code-Pro]
```
以下のように、ショートコードに挟まれている「テキスト」の部分を任意の文字に置き換えます。
また、初期値に「size='36'」と入っているものは、文字サイズ指定ですので好みに応じて数字を変更しても構いません。
```
[font-Tangerine size='54'] everything's gonna be alright. [/font-Tangerine]
```
```
[font-Source-Code-Pro] for (int i = 0; i >= dt.Length - 1; i++)  [/font-Source-Code-Pro]
```
公開ページでは以下のように表示されます。

everything's gonna be alright.
for (int i = 0; i >= dt.Length - 1; i++)

リスト【リスト】～【リスト（番号付き）】

List（デフォルト）

リスト
リスト
リスト

Disc List（箇条書き）

リスト
リスト
リスト

Ordered List（番号付き）

リスト
リスト
リスト

このショートコードの使い方
ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。
```
[list]
[li] リスト１ [/li]
[li] リスト２ [/li]
[li] リスト３ [/li]
[/list]
```
以下のように、ショートコードに挟まれているテキストを任意の文字に置き換えます。
リスト項目は　[li] ～ [/li]　を追加することでいくつでも増やす事ができます。
また、リンクを設定する場合は以下のようにします。
```
[list]
[li] リンゴ [/li]
[li] イチゴ [/li]
[li] オレンジ [/li]
[li] バナナ [/li]
[li] メロン [/li]
[/list]
```
公開ページでは以下のように表示されます。
- リンゴ
- イチゴ
- オレンジ
- バナナ
- メロン

テーブル【テーブル】～【テーブル（マウスオーバー）】

Borderless Table　[ボーダーなし：デフォルト]

Album	Price	Release Date
Girls Voice Studio 11	3,146	2002.3.6
Roots	3,146	2000.6.21
Next Lounge	1,258	2000.5.17

Bordered Table [ボーダーあり]

Album	Price	Release Date
Girls Voice Studio 11	3,146	2002.3.6
Roots	3,146	2000.6.21
Next Lounge	1,258	2000.5.17

Striped Table [ストライプテーブル]

Album	Price	Release Date
Girls Voice Studio 11	3,146	2002.3.6
Roots	3,146	2000.6.21
Next Lounge	1,258	2000.5.17

Hoverable Table [マウスオーバーテーブル]

Album	Price	Release Date
Girls Voice Studio 11	3,146	2002.3.6
Roots	3,146	2000.6.21
Next Lounge	1,258	2000.5.17

このショートコードの使い方

ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。

[table class='striped']
[thead] [th text='見出し'] [th text='見出し'] [th text='見出し'] [/thead]
[tr] [td text='テキスト'] [td text='テキスト'] [td text='テキスト'] [/tr]
[tr] [td text='テキスト'] [td text='テキスト'] [td text='テキスト'] [/tr]
[tr] [td text='テキスト'] [td text='テキスト'] [td text='テキスト'] [/tr]
[/table]

以下のように、ショートコードに挟まれているテキストを任意の文字に置き換えます。
　[tr] ～ [/tr]　を追加することで行を増やす事ができます。各行に[td text='テキスト'] を追加することで列を増やす事ができます。
また、リンクを設定する場合には [td text='<a href="#">札幌</a>'] のようにします。

[table class='striped']
[thead] [th text='支店'] [th text='1月'] [th text='2月'][th text='3月'][th text='4月']  [/thead]
[tr] [td text='札幌'] [td text='1,000,000'] [td text='2,000,000'][td text='2,200,000'] [td text='1,000,000']  [/tr]
[tr] [td text='東京'] [td text='2,200,000'] [td text='1,900,000'][td text='5,000,000'] [td text='2,400,000']  [/tr]
[tr] [td text='大阪'] [td text='1,500,000'] [td text='1,200,000'][td text='1,600,000'] [td text='1,200,000']  [/tr]
[tr] [td text='沖縄'] [td text='1,400,000'] [td text='1,700,000'][td text='3,200,000'] [td text='1,500,000']  [/tr]
[/table]

公開ページでは以下のように表示されます。

支店	1月	2月	3月	4月
札幌	1,000,000	2,000,000	2,200,000	1,000,000
東京	2,200,000	1,900,000	5,000,000	2,400,000
大阪	1,500,000	1,200,000	1,600,000	1,200,000
沖縄	1,400,000	1,700,000	3,200,000	1,500,000

引用文【引用文】

「僕はピラミッドに出発するよ。じゃあね」

レスポンシブWebデザイン 【responsive web design】
Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。 (中略) 表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じように送信する。 (後略)
IT用語辞典 e-Words

このショートコードの使い方
ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。
```
[blockquote text='引用文']
```
以下のように、ショートコードに挟まれているテキストを任意の文字に置き換えます。
また、引用元を記載する場合は「　<cite><a href="URL">出典</a></cite>　」のようにします。
```
[blockquote text='「僕はピラミッドに出発するよ。じゃあね」']
```
```
[blockquote text='レスポンシブ～機器に同じように送信する。 IT用語辞典']
```
公開ページでは以下のように表示されます。

「僕はピラミッドに出発するよ。じゃあね」

レスポンシブWebデザイン 【responsive web design】
Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。 (中略) 表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じように送信する。 IT用語辞典

プログラムコード【プログラムコード（pre,code）】

$("#trigger").click(function(){

<ul class="collection with-header">
　　<li class="collection-header"><h4>First Names</h4></li>
　　<li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li><i class="mdi-content-send"></i></a></div></li>
　　<li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
　　<li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
　　<li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
</ul>

このショートコードの使い方
ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。
```
[code]プログラムコード[/code]
```
以下のように、ショートコードに挟まれているテキストを任意の文字に置き換えます。
```
[code]
function getQueryStringParameter(paramToRetrieve) {
	var params =
		document.URL.split("?")[1].split("&");
	var strParams = "";
}
[/code]
```
公開ページでは以下のように表示されます。
```
function getQueryStringParameter(paramToRetrieve) {
	var params =
		document.URL.split("?")[1].split("&");
	var strParams = "";
}
```
HTMLのソースのまま表示したい場合は、タグを特殊文字にエスケープ処理してから記述する必要があります。

Webアイコン【 Webアイコン】

WordPressテーマ【Esperanza】はアイコンWebフォントを採用しているので、ような楽しくて美しいアイコンを利用できます。
CSSで読み込んでいるためサイズや色も簡単に変更可能です。

アイコンリスト
このショートコードの使い方
ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。
<!–　～　–>の部分は説明コメントです。そのまま残しても投稿には表示されませんが、削除しても問題ありません。
```
[icon name='fa-heart']
```
【 Webアイコン一覧】から使いたいWebアイコンを探します。
例えば、

fa-arrow-circle-right

というアイコンを使いたい場合は　fa-arrow-circle-right　がアイコン名になります。
以下のようにデフォルトで入っている　fa-heart　というアイコン名を　fa-arrow-circle-right　に変更します。
また、アイコンの色やサイズを変更したい場合にはフォントカラーやフォントサイズのショートコードで囲みます。
```
[icon name='fa-arrow-circle-right']
```
```
[fontsize class='xxl'] [fontcolor class='danger'] [icon name='fa-asterisk'] [/fontcolor] [/fontsize]
```
公開ページでは以下のように表示されます。

イメージ【画像：写真風エフェクト】～【画像：セピア】

Photo-like effect [ 写真風エフェクト ]

リンクなし

画像リンク

Retouch [ 色調補正 ] 一部のブラウザは対応していません。ご利用の際にはご注意下さい。

グレースケール

セピア

このショートコードの使い方
ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。
```
[photo] ここに画像を配置 [/photo]

[grayscale] ここに画像を配置 [/grayscale]

[sepia] ここに画像を配置 [/sepia]
```
以下のように、画像を配置します。
また、リンクを設定する場合に以下のようにします。
```
[photo]  [/photo]

[grayscale]  [/grayscale]

[sepia]  [/sepia]

[photo] <a href="リンク先URL"><img src="画像URL"></a> [/photo] 
```
公開ページでは以下のように表示されます。

色調補正は一部のブラウザは対応していません。ご利用の際にはご注意下さい。

ライトボックス【画像：Lightbox 】 [ Boxer ] License: MIT Licence

画像をクリックすると拡大して表示されます。

このショートコードの使い方
ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。
```
[lightbox image='画像URL' thum='サムネイル画像URL' title='説明' width='サムネイル幅']
```
以下のように、画像URLやサムネイル幅等を設定します。
画像とサムネイル画像は同じ画像でも問題ありません。
```
[lightbox image='https://dolcevivace.com/xxx.jpg' thum='https://dolcevivace.com/yyy.jpg' title='LOVERS' width='300]
```
公開ページでは以下のように表示されます。

QRコード【 QRコード】

便利なQRコードもショートコードで簡単に設置することができます。

このショートコードの使い方
ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。
```
[qr-code url='リンク先URL' size='150']
```
以下のように、QRコードにしたいURLを記述します。
例：https://dolcevivace.com/というURLをQRコードにする場合
```
[qr-code url='https://dolcevivace.com/' size='150']
```
公開ページでは以下のように表示されます。

レスポンシブ埋め込み動画【動画埋め込み】

Youtubeの動画などを埋め込む際に画面サイズに応じてレスポンシブに表示されます。

Pizzicato Five – Catchy (Voltage Unlimited Catchy)

このショートコードの使い方
ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。
```
[responsive-video src='動画URL(埋め込みコード)']
```
以下のように、動画URL(埋め込みコード)を記述します。
動画URL(埋め込みコード)の取得方法は動画サイトによって異なります。埋め込みコードの取得方法等はサポート対象外となりますので予めご了承下さい。
```
[responsive-video src='https://www.youtube.com/embed/3s6X5ht5k_A']
```
公開ページでは以下のように表示されます。

テキストパネル【パネル】

【目次】

1.あらすじ
2.原典
3.作品解説
4.日本語訳

このショートコードの使い方
ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。
```
[panel] コンテンツ [/panel]
```
以下のように、ショートコードに挟まれているコンテンツを記述します。
```
[panel] 町の上に高く柱がそびえ、その上に幸福の王子の像が立っていました。王子の像は全体を薄い純金で覆われ、
目は二つの輝くサファイアで、王子の剣のつかには大きな赤いルビーが光っていました。 [/panel]
```
また、複合的にショートコードを設定する場合は以下のようにします
```
[panel] 
[h2 text='目次'] 
[list-ordered]
[li] あらすじ [/li]
[li] <a href="#">原典</a> [/li]
[li] <a href="#">作品解説</a> [/li]
[li] <a href="#">日本語訳</a> [/li]
[/list-ordered]
[/panel]
```
公開ページでは以下のように表示されます。
町の上に高く柱がそびえ、その上に幸福の王子の像が立っていました。王子の像は全体を薄い純金で覆われ、目は二つの輝くサファイアで、王子の剣のつかには大きな赤いルビーが光っていました。
目次

1. あらすじ

2. 原典

3. 作品解説

4. 日本語訳

フォトパネル【フォトパネル】

愛は目ではなく、心で見るもの。
だから翼の天使キューピッドは盲目に描かれる。

Shakespeare, A Midsummer Night's Dream: Act 1, Scene 1

このショートコードの使い方
ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。
<!–　～　–>の部分は説明コメントです。そのまま残しても投稿には表示されませんが、削除しても問題ありません。
```
[photo-panel image='画像URL' width='100%'] テキスト [/photo-panel]
```
以下のように、QRコードにしたいURLを記述します。
width='60%' の部分でパネル幅を　80% や 200px のような形式で設定できます。
```
[photo-panel image='https://dolcevivace.com/xxx.jpg' width='60%'] 愛は目ではなく、心で見るもの。<br>
だから翼の天使キューピッドは盲目に描かれる。 [/photo-panel]
```
公開ページでは以下のように表示されます。

愛は目ではなく、心で見るもの。
だから翼の天使キューピッドは盲目に描かれる。

ボタン【ボタン：small 】～【ボタン：large 】

マテリアルデザインの素敵なボタンを用途に応じて使い分けることが可能です。

ボタン(large)

Attention

ボタン

Contact

ボタン(small)

詳しくはこちら

このショートコードの使い方

ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。


[btn url='リンク先URL' text='ボタンテキスト' size='large']

[btn url='リンク先URL' text='ボタンテキスト']

[btn url='リンク先URL' text='ボタンテキスト' size='small']

以下のように、任意のURLとテキストに置き換えます。


[btn url='https://dolcevivace.com/aaa.html' text='Attention' size='large']

[btn url='https://dolcevivace.com/bbb.html' text='Contact']

[btn url='https://dolcevivace.com/ccc.html' text='詳しくはこちら' size='small']

公開ページでは以下のように表示されます。

ボタン(large)

Attention

ボタン

Contact

ボタン(small)

詳しくはこちら

フラットボタン【フラットボタン：small 】～【フラットボタン：large 】

マテリアルデザインの素敵なボタンを用途に応じて使い分けることが可能です。

フラットボタン(large)

Attention

フラットボタン

Contact

フラットボタン(small)

詳しくはこちら

このショートコードの使い方

ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。



[btn-flat url='リンク先URL' text='ボタンテキスト' size='large']

[btn-flat url='リンク先URL' text='ボタンテキスト']

[btn-flat url='リンク先URL' text='ボタンテキスト' size='small']

以下のように、任意のURLとテキストに置き換えます。


[btn-flat url='https://dolcevivace.com/aaa.html' text='Attention' size='large']

[btn-flat url='https://dolcevivace.com/bbb.html' text='Contact']

[btn-flat url='https://dolcevivace.com/ccc.html' text='詳しくはこちら' size='small']

公開ページでは以下のように表示されます。

フラットボタン(large)

Attention

フラットボタン

Contact

フラットボタン(small)

詳しくはこちら

モーダルウィンドウ【モーダル】

デザイン性のある子ウィンドウをモーダル表示できます。

このショートコードの使い方
ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。
```
[modal title='タイトル' close='確認' id='modal-ID']コンテンツ[/modal]
```
以下のように、ショートコードに挟まれているテキストを任意のコンテンツに置き換えます。
また、モーダルウィンドウを複数設置する場合には「 modal-ID 」が重複しないように設定します。
```
[modal title='重要なお知らせ' close='確認' id='mo3']
[h3 text='サービス停止のお知らせ'] 
2015/5/2はサーバメンテンナンスのためサービスが停止する時間帯があります。ご不便をお掛け致しますが、ご理解賜りますようお願い申し上げます。
[/modal]
```
公開ページでは以下のように表示されます。

重要なお知らせ

重要なお知らせ
サービス停止のお知らせ
2015/5/2はサーバメンテンナンスのためサービスが停止する時間帯があります。ご不便をお掛け致しますが、ご理解賜りますようお願い申し上げます。

確認

アコーディオン【アコーディオン】

開閉できるアコーディオンでコンテンツを見やすく表示できます。

フレデリック・ショパン　Fryderyk Franciszek Chopin

フレデリック・フランソワ・ショパンは、ポーランドの前期ロマン派音楽を代表する作曲家である。当時のヨーロッパにおいてもピアニストとして、また作曲家として有名であった。その作曲のほとんどをピアノ独奏曲が占め、ピアノの詩人とも呼ばれるように、様々な形式、美しい旋律、半音階的和声法などによってピアノの表現様式を拡大し、ピアノ音楽の新しい地平を切り開いた。ノクターンやワルツなど、今日でも彼の作曲したピアノ曲はクラシック音楽ファン以外にもよく知られており、ピアノの演奏会において取り上げられることが最も多い作曲家の一人でもある。また、強いポーランドへの愛国心からフランスの作曲家としての側面が強調されることは少ないが、父の出身地で主要な活躍地であった同国の音楽史に占める重要性も無視できない。（出典：ウィキペディア）
フランツ・リスト　Franz Liszt

フランツ・リストは、ハンガリーに生まれ、ドイツやオーストリアなどヨーロッパ各国で活躍したピアニスト・作曲家。両親の血統、母語、もっとも長い活躍地のいずれもドイツに属し、当時中東欧に多数存在したドイツ植民の一人だが、自身生地のハンガリー（当時はオーストリア支配下の形式的独立国としてのハンガリー王国の版図内、現在はオーストリアに帰属している）を祖国と呼び、死後もドイツ人（オーストリア人）よりはハンガリー人と記載されることが多い。ただし、こうした出自や、生涯ハンガリー語を習得することがなかったこともあり、非音楽大国系の民族運動としての国民楽派に含めることは殆どなく、多くはドイツロマン派の中に位置づけられる。（出典：ウィキペディア）
アルトゥール・ルービンシュタイン　Arthur Rubinstein

アルトゥール・ルービンシュタインは、ポーランド出身のピアニスト。様々な作曲家の作品の演奏で国際的な名声を博し、特にショパンの演奏では同時代の最も優れたピアニストであるとみなされている。また、20世紀の代表的なピアニストの1人である。ルービンシュタインの演奏家としてのキャリアは80年にも及んだ。前半生はヨーロッパで、後半生はアメリカ合衆国で活躍した。ショパン以外では、ブラームスやスペインのピアノ音楽も得意とした。（出典：ウィキペディア）

このショートコードの使い方

ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。


[accordion]
[accordion-item title='アコーディオン１タイトル']アコーディオン１コンテンツ[/accordion-item]
[accordion-item title='アコーディオン２タイトル']アコーディオン２コンテンツ[/accordion-item]
[/accordion]

以下のように、任意のタイトルやコンテンツに置き換えます。
[accordion-item title='タイトル'] ～ [/accordion-item]を増やすことでいくつでも項目を増やすことができます。


[accordion]
[accordion-item title='フレデリック・ショパン']　ポーランドの前期ロマン……　[/accordion-item]
[accordion-item title='フランツ・リスト']　ハンガリーに生まれ、ドイツや……　[/accordion-item]
[accordion-item title='アルトゥール・ルービンシュタイン']　ポーランド出身のピアニスト……　[/accordion-item]
[/accordion]

公開ページでは上記サンプルのように表示されます。

プログレスバー【プログレスバー】

進捗状態などを表すプログレスバーを表示できます。

60% 　

このショートコードの使い方
ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。
```
[progress-bar progress='50%' desc='テキスト']
```
以下のように、「 progress='90%' 」の部分に「0%」から「100%」の間の数字をいれてバーの幅を設定します。
「 desc='テキスト' 」のテキストがバーに表示されます。テキストは数字である必要はなく、空白でも構いません。
```
[progress-bar progress='90%' desc='あと少し！']
```
```
[progress-bar progress='20%' desc='']
```
公開ページでは以下のように表示されます。

あと少し！

タブ【タブ】

ページ遷移なく同一ページ内でコンテンツを切り替えることができます。

ハムレット
マクベス
オセロ
リア王

あらすじ

デンマーク王が急死する。王の弟クローディアスは王妃と結婚し、跡を継いでデンマーク王の座に就く。父王の死と母の早い再婚とで憂いに沈む王子ハムレットは、従臣から父の亡霊が夜な夜な城壁に現れるという話を聞き、自らも確かめる。亡霊に会ったハムレットは、実は父の死はクローディアスによる毒殺だったと告げられる。

復讐を誓ったハムレットは狂気を装う。王と王妃はその変貌ぶりに憂慮するが、宰相ポローニアスは、その原因を娘オフィーリアへの実らぬ恋ゆえだと察する。父の命令で探りを入れるオフィーリアを、ハムレットは無下に扱う。やがて、王が父を暗殺したという確かな証拠を掴んだハムレットだが、母である王妃と会話しているところを隠れて盗み聞きしていたポローニアスを、王と誤って刺殺してしまう。オフィーリアは度重なる悲しみのあまり狂い、やがて溺死する。ポローニアスの息子レアティーズは、父と妹の仇をとろうと怒りを燃やす。

ハムレットの存在に危険を感じた王はレアティーズと結託し、毒剣と毒入りの酒を用意して、ハムレットを剣術試合に招き、秘かに殺そうとする。しかし試合のさなか、王妃が毒入りとは知らずに酒を飲んで死に、ハムレットとレアティーズ両者とも試合中に毒剣で傷を負う。死にゆくレアティーズから真相を聞かされたハムレットは、王を殺して復讐を果たした後、事の顛末を語り伝えてくれるよう親友ホレイショーに言い残し、死んでいく。

第1幕

3人の魔女の乱舞から始まる。「きれいは汚い、汚いはきれい」などという不可思議なせりふが劇の展開を暗示する。次いでスコットランド軍対反乱軍とノルウェー軍の戦場にて、スコットランド大勝利の報告を受ける国王ダンカン。戦果をあげたスコットランドの将軍にしてグラミスの領主マクベスは、バンクォーと陣営に戻る途中、荒野で3人の魔女に出会う。魔女達はマクベスに対し「万歳、コーダーの領主」「万歳、いずれ王になるお方」と呼びかけ、バンクォーには「王にはなれないが、子孫が王になる」と予言し消える。そこへダンカン王の使者が現われ、マクベスが武勲により新しくコーダーの領主に任ぜられたと伝える。魔女の言葉通りとなったことに2人は驚き、マクベスは王になるという予言にも秘かに希望を膨らませる。

フォレスの城に帰還したマクベス達をダンカン王が迎える。ダンカン王は両将の功績を讃えつつ、息子のマルカム王子を王位継承者に定める。予言の実現を危ぶんだマクベスはある決心をする。

マクベスから事の顛末を記した手紙を受け取り、マクベス夫人は興奮する。夫を国王の座につけるべく、王の一行より一足先に城に戻ったマクベスと共にダンカン王暗殺の計画を企てる。一度は決意したものの、内心では罪悪感を覚えて及び腰になるマクベスを叱咤し奮い立たせるマクベス夫人。やがてダンカン王の一行が城に到着し、宴会が始まる。

あらすじ

ヴェニスの軍人でムーア人であるオセロは、デズデモーナと愛し合い、デズデモーナの父ブラバンショーの反対を押し切って駆け落ちする。オセロを嫌っている旗手イアーゴーは、自分をさしおいて昇進した同輩キャシオーがデズデモーナと密通していると、オセロに讒言する。嘘の真実味を増すために、イアーゴーは、オセロがデズデモーナに送ったハンカチを盗み、キャシオーの部屋に置く。

イアーゴーの作り事を信じてしまったオセロは嫉妬に苦しみ怒り、イアーゴーにキャシオーを殺すように命じ、自らはデズデモーナを殺してしまう。だが、イアーゴーの妻のエミリアは、ハンカチを盗んだのは夫であることを告白し、イアーゴーはエミリアを刺し殺して逃げる。イアーゴーは捕らえられるが、オセロはデズデモーナに口づけをしながら自殺をする。

あらすじ

ブリテンの王であるリアは、高齢のため退位するにあたり、国を3人の娘に分割し与えることにした。長女ゴネリルと次女リーガンは言葉巧みに父王を喜ばせるが、末娘コーディリアの率直な物言いに、立腹したリアはコーディリアを勘当し、コーディリアをかばったケント伯も追放される。コーディリアは勘当された身でフランス王妃となり、ケントは風貌を変えてリアに再び仕える。

リアは先の約束通り、2人の娘ゴネリルとリーガンを頼るが、裏切られて荒野をさまようことになり、次第に狂気にとりつかれていく。リアを助けるため、コーディリアはフランス軍とともにドーバーに上陸、父との再会を果たす。だがフランス軍は敗れ、リアとコーディリアは捕虜となる。ケントらの尽力でリアは助け出されるが、コーディリアは獄中で殺されており、娘の遺体を抱いて現れたリアは悲しみに絶叫し世を去る。

このショートコードの使い方

ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。


[tabs]
[tab-title id='tab-name1' class='active' title='タブ1-タイトル']
[tab-title id='tab-name2' title='タブ2-タイトル']
[tab-title id='tab-name3' title='タブ3-タイトル']
[/tabs]

[tab-contents id='tab-name1']
タブ1-内容  
[/tab-contents]

[tab-contents id='tab-name2']
タブ2-内容  
[/tab-contents]

[tab-contents id='tab-name3']
タブ3-内容  
[/tab-contents]

以下のように、ショートコードに挟まれているテキストを任意のコンテンツに置き換えます。
タイトル部分に「 class='active' 」がついているタブがデフォルトで表示されます。
また、下記の例のように、タブを増やす事もできます。
その際には、追加したタブのタイトル部分とコンテンツ部分の「 id='tab-name4' 」の箇所を一致させる必要があります。


[tabs]
[tab-title id='tab-name1' class='active' title='ハムレット']
[tab-title id='tab-name2' title='マクベス']
[tab-title id='tab-name3' title='オセロ']
[tab-title id='tab-name4' title='リア王']
[/tabs]

[tab-contents id='tab-name1']
デンマーク王が急死する。王の弟クローディアスは～ 
[/tab-contents]

[tab-contents id='tab-name2']
3人の魔女の乱舞から始まる。「きれいは汚い、～
[/tab-contents]

[tab-contents id='tab-name3']
ヴェニスの軍人でムーア人であるオセロは、～
[/tab-contents]

[tab-contents id='tab-name4']
ブリテンの王であるリアは、高齢のため退位～ 
[/tab-contents]

公開ページでは以下のように表示されます。

ハムレット
マクベス
オセロ
リア王

デンマーク王が急死する。王の弟クローディアスは～

3人の魔女の乱舞から始まる。「きれいは汚い、～

ヴェニスの軍人でムーア人であるオセロは、～

ブリテンの王であるリアは、高齢のため退位～

ドロップダウン【ドロップダウン】

動きのあるマテリアルデザインのドロップダウンメニューです。

このショートコードの使い方
ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。
```
[dropdown id='ID-1' title='ドロップダウン']
[dropdown-item url='リンク先URL' text='テキスト']
[dropdown-item url='リンク先URL' text='テキスト']
[/dropdown]
```
以下のように、ショートコードに挟まれているテキストを任意のコンテンツに置き換えます。
[dropdown-item url='リンク先URL' text='テキスト']を増やす事でドロップダウンのリストをいくつでも追加することができます。
また、ドロップダウンを複数設置する場合には「 ID-1 」が重複しないように変更します。
```
[dropdown id='ID-2' title='メニュー']
[dropdown-item url='https://dolcevivace.com/aaa.html' text='ドリンク']
[dropdown-item url='https://dolcevivace.com/bbb.html' text='アラカルト']
[dropdown-item url='https://dolcevivace.com/ccc.html' text='コース']
[/dropdown]
```
公開ページでは以下のように表示されます。
メニュー

ツールチップ【ツールチップ：テキスト】～【ツールチップ；フォト】

注釈やヒント、コメントなどを表示するのに便利なツールチップです。

テキスト（リンクなし）

ウィリアム・シェイクスピアは四大悲劇で人間の実存的な葛藤を力強く描き出した。

ボタン（ボタンリンク）

レシピ

画像（リンクなし）

フォト（イメージリンク）

このショートコードの使い方

ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。
<!–　～　–>の部分は説明コメントです。そのまま残しても投稿には表示されませんが、削除しても問題ありません。


[tooptip-text text='テキスト' desc='ツールチップ内容' position='right']


[tooptip-btn url='リンク先URL' text='テキスト' desc='ツールチップ内容' position='right']


[tooptip-image image='画像URL' desc='ツールチップ内容' position='right']


[tooptip-photo url='リンク先URL' image='画像URL' desc='ツールチップ内容' position='right']

以下の例のように、任意のテキストやツールチップ内容、画像URLに置き換えます。
ツールチップの出る方向は「 position='left' 」のように top , left , right , bottom に変更することで設定できます。

ツールチップ：テキスト（リンクなし）


[tooptip-text text='四大悲劇' desc='『ハムレット』、『マクベス』、『オセロ』、『リア王』' position='top']

四大悲劇

ツールチップ：ボタン（ボタンリンク）


[tooptip-btn url='https://dolcevivace.com/aaa.html' text='レシピ' desc='創作イタリアンレシピ' position='right']

レシピ

ツールチップ：画像（リンクなし）


[tooptip-image image='https://dolcevivace.com/images/zzz.jpg' desc='2015.12.2' position='bottom ']

ツールチップ：フォト（イメージリンク）


[tooptip-photo url='https://dolcevivace.com/' image='https://dolcevivace.com/z.jpg' desc='Photo by YUKI' position='left']

2カラム【レイアウト：2カラム】

部分的な2カラムレイアウトのボックスを設置することができます。（レスポンシブデザインに対応しており、PCでは2カラム、スマホ/タブレットでは1カラムになります。）

左カラム

右カラム

このショートコードの使い方
ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。
```
[column2]

[column2-left]
左カラムの内容 
[/column2-left]

[column2-right]
右カラムの内容
[/column2-right]

[/column2]
```
以下のように、ショートコードに挟まれているテキストを任意のコンテンツに置き換えます。
```
[column2]

[column2-left]
犬
イヌ（犬、狗、学名～
[/column2-left]

[column2-right]
猫
ネコ（猫）は、狭義には～
[/column2-right]

[/column2]
```
公開ページでは以下のように表示されます。
レスポンシブデザインに対応しているため、PCでは横に2カラムが並び、スマホ/タブレットでは1カラムで縦に並びます。

犬
イヌ（犬、狗、学名～

猫
ネコ（猫）は、狭義～

3カラム【レイアウト：3カラム】

部分的な3カラムレイアウトのボックスを設置することができます。（レスポンシブデザインに対応しており、PCでは3カラム、スマホ/タブレットでは1カラムになります。）

左カラム
中央カラム
右カラム

このショートコードの使い方
ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。
```
[column3]

[column3-left]
左カラムの内容 
[/column3-left]

[column3-center]
中央カラムの内容 
[/column3-center]

[column3-right]
右カラムの内容
[/column3-right]

[/column3]
```
以下のように、ショートコードに挟まれているテキストを任意のコンテンツに置き換えます。
```
[column3]

[column3-left]

[/column3-left]

[column3-center]
 
[/column3-center]

[column3-right]

[/column3-right]

[/column3]
```
公開ページでは以下のように表示されます。
レスポンシブデザインに対応しているため、PCでは横に3カラムが並び、スマホ/タブレットでは1カラムで縦に並びます。

4カラム【レイアウト：4カラム】

部分的な4カラムレイアウトのボックスを設置することができます。（レスポンシブデザインに対応しており、PCでは4カラム、スマホ/タブレットでは2カラムになります。）

最左カラム
中央カラム
中央カラム
最右カラム

このショートコードの使い方
ドロップダウンから選ぶとショートコードが投稿テキストエリアに出力されます。
```
[column4]

[column4-1]
最左カラムの内容 
[/column4-1]

[column4-2]
中央左カラムの内容
[/column4-2]

[column4-3]
中央右カラムの内容
[/column4-3]

[column4-4]
最右カラムの内容
[/column4-4]

[/column4]
```
以下のように、ショートコードに挟まれているテキストを任意のコンテンツに置き換えます。
```
[column4]

[column4-1]
春
春はあけぼの。
[/column4-1]

[column4-2]
夏
夏は夜。
[/column4-2]

[column4-3]
秋
秋は夕暮れ。
[/column4-3]

[column4-4]
冬
冬はつとめて。
[/column4-4]

[/column4]
```
公開ページでは以下のように表示されます。
レスポンシブデザインに対応しているため、PCでは4カラム、スマホ/タブレットでは2カラムになります。

春
春はあけぼの。

夏
夏は夜。

秋
秋は夕暮れ。

冬
冬はつとめて。

ショートコードを使ったコンテンツの表示が崩れる場合

WordPressでは初期状態で自動整形機能(auto paragraph) が有効になっており、<br>や<p>などの改行タグが自動的に挿入されます。
自動整形機能によってショートコード内のコンテンツに意図しない改行が入ることで、部分的に表示されない場合やデザインが崩れる場合があります。

このような場合には、投稿時にショートコードの改行を改行を削除して1行にするか、管理画面のテーマオプションでWordPressの自動整形機能を無効にすることで解決します。自動整形機能を無効にする場合の詳しい設定方法は下記のページを参考にして下さい。
自動整形機能はWordPress本体の機能/設定であり、サポートの対象外となりますのでお問い合わせやご質問に対応致しかねますので予めご了承下さい。

テーマオプション – WordPress上級者向け設定

基本ショートコード

拡張ショートコード

見出し【 h1 】～【 h6（装飾なし） 】

マテリアルデザイン WordPress【 h1 】

マテリアルデザイン WordPress【 h2 】

マテリアルデザイン WordPress【 h3 】

マテリアルデザイン WordPress【 h4 】

マテリアルデザイン WordPress【 h5 】

マテリアルデザイン WordPress【 h6 】

マテリアルデザイン【 h1（装飾なし） 】

マテリアルデザイン【 h2（装飾なし） 】

マテリアルデザイン【 h3（装飾なし） 】

マテリアルデザイン【 h4（装飾なし） 】

マテリアルデザイン【 h5（装飾なし） 】

マテリアルデザイン【 h6（装飾なし） 】

おすすめ海外ドラマ

ランキング

フォントサイズ【 x-small 】～【 xxx-large 】

フォントカラー【 primary 】～【 muted 】

Webフォント【 Vollkorn 】～【 Source Code 】 Fonts : [ Google Fonts ] License: CC BY 3.0

Varela

Vollkorn

Tangerine

Damion

Cinzel

Source Code Pro

リスト【 リスト 】～【 リスト（番号付き） 】

テーブル【 テーブル 】～【 テーブル（マウスオーバー） 】

引用文【 引用文 】

プログラムコード【 プログラムコード（pre,code） 】

Webアイコン【 Webアイコン 】

イメージ【 画像：写真風エフェクト 】～【 画像：セピア 】

Photo-like effect [ 写真風エフェクト ]

Retouch [ 色調補正 ] 一部のブラウザは対応していません。ご利用の際にはご注意下さい。

ライトボックス【 画像：Lightbox 】 [ Boxer ] License: MIT Licence

QRコード【 QRコード 】

レスポンシブ埋め込み動画【 動画埋め込み 】

テキストパネル【 パネル 】

【目次】

目次

フォトパネル【 フォトパネル 】

ボタン【 ボタン：small 】～【 ボタン：large 】

フラットボタン【 フラットボタン：small 】～【 フラットボタン：large 】

モーダルウィンドウ 【 モーダル 】

重要なお知らせ

サービス停止のお知らせ

アコーディオン【 アコーディオン 】

プログレスバー【 プログレスバー 】

タブ【 タブ 】

ドロップダウン【 ドロップダウン 】

ツールチップ【 ツールチップ：テキスト 】～【 ツールチップ；フォト 】

2カラム【 レイアウト：2カラム 】

犬

猫

犬

猫

3カラム【 レイアウト：3カラム 】

4カラム【 レイアウト：4カラム 】

春

夏

秋

冬

春

夏

秋

冬

見出し【 h1 】～【 h6（装飾なし）】

マテリアルデザイン【 h1（装飾なし）】

マテリアルデザイン【 h2（装飾なし）】

マテリアルデザイン【 h3（装飾なし）】

マテリアルデザイン【 h4（装飾なし）】

マテリアルデザイン【 h5（装飾なし）】

マテリアルデザイン【 h6（装飾なし）】

リスト【リスト】～【リスト（番号付き）】

テーブル【テーブル】～【テーブル（マウスオーバー）】

引用文【引用文】

プログラムコード【プログラムコード（pre,code）】

Webアイコン【 Webアイコン】

イメージ【画像：写真風エフェクト】～【画像：セピア】

ライトボックス【画像：Lightbox 】 [ Boxer ] License: MIT Licence

QRコード【 QRコード】

レスポンシブ埋め込み動画【動画埋め込み】

テキストパネル【パネル】

フォトパネル【フォトパネル】

ボタン【ボタン：small 】～【ボタン：large 】

フラットボタン【フラットボタン：small 】～【フラットボタン：large 】

モーダルウィンドウ【モーダル】

アコーディオン【アコーディオン】

プログレスバー【プログレスバー】

タブ【タブ】

ドロップダウン【ドロップダウン】

ツールチップ【ツールチップ：テキスト】～【ツールチップ；フォト】

2カラム【レイアウト：2カラム】

3カラム【レイアウト：3カラム】

4カラム【レイアウト：4カラム】