Dolce & Vivace
Shortcodes
ご注意

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

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

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

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

見出し【 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] とツバメは言いました。
    

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

    「君を好きになってもいいかい」 とツバメは言いました。

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(番号付き)
  1. リスト
  2. リスト
  3. リスト

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

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

    [list]
    [li] リスト1 [/li]
    [li] リスト2 [/li]
    [li] リスト3 [/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,0002,200,000 1,000,000
    東京 2,200,000 1,900,0005,000,000 2,400,000
    大阪 1,500,000 1,200,0001,600,000 1,200,000
    沖縄 1,400,000 1,700,0003,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 [ 写真風エフェクト ]


リンクなし
image1
画像リンク
image1

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


グレースケール
image1
セピア
image1

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

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

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

    以下のように、画像を配置します。
    また、リンクを設定する場合に以下のようにします。

    [photo]  [/photo]
    
    [grayscale]  [/grayscale]
    
    [sepia]  [/sepia]
    
    [photo] <a href="リンク先URL"><img src="画像URL"></a> [/photo] 
    

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

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

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

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

Thumbnail

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

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

    [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]
    

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

    LOVERS

QRコード【 QRコード 】

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

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

    
    [qr-code url='リンク先URL' size='150']
    
    

    以下のように、QRコードにしたいURLを記述します。
    例:https://dolcevivace.com/というURLをQRコードにする場合

    
    [qr-code url='https://dolcevivace.com/' size='150']
    
    

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

    QR Code

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

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

Pizzicato Five – Catchy (Voltage Unlimited Catchy)
  • このショートコードの使い方

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

    
    [responsive-video src='動画URL(埋め込みコード)']
    
    

    以下のように、動画URL(埋め込みコード)を記述します。
    動画URL(埋め込みコード)の取得方法は動画サイトによって異なります。埋め込みコードの取得方法等はサポート対象外となりますので予めご了承下さい。

    
    [responsive-video src='https://www.youtube.com/embed/3s6X5ht5k_A']
    
    

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


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

【目次】

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

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

    
    [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. 1. あらすじ
    2. 2. 原典
    3. 3. 作品解説
    4. 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]
    
    
    

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

    重要なお知らせ

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

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

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

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

  • フランツ・リスト Franz Liszt

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

  • アルトゥール・ルービンシュタイン Arthur Rubinstein

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


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

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

    
    [accordion]
    [accordion-item title='アコーディオン1タイトル']アコーディオン1コンテンツ[/accordion-item]
    [accordion-item title='アコーディオン2タイトル']アコーディオン2コンテンツ[/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]
    
    

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


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

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


 
20%  
  
  
 
60%  
  

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

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

    
    [progress-bar progress='50%' desc='テキスト']
    
    

    以下のように、「 progress='90%' 」の部分に「0%」から「100%」の間の数字をいれてバーの幅を設定します。
    desc='テキスト' 」のテキストがバーに表示されます。テキストは数字である必要はなく、空白でも構いません。

    
    [progress-bar progress='90%' desc='あと少し!']
    
    

    
    [progress-bar progress='20%' desc='']
    
    

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

    あと少し!


タブ【 タブ 】

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

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

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

    
    [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]
    
    

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


ツールチップ【 ツールチップ:テキスト 】~【 ツールチップ;フォト 】

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

テキスト(リンクなし)

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

ボタン(ボタンリンク)
レシピ

画像(リンクなし)
image1
フォト(イメージリンク)
image1

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

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

    
    [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 ']
    
    
    
    image1

    ツールチップ:フォト(イメージリンク)
    
    [tooptip-photo url='https://dolcevivace.com/' image='https://dolcevivace.com/z.jpg' desc='Photo by YUKI' position='left']
    
    
    image1

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上級者向け設定