【Diver】ショートコードの使い方、入力補助との違い

Diverでは、入力補助が実装される前にショートコードでデザイン機能を使えるようにしていました。

そのため、入力補助が実装された現在でも、ショートコードでデザインを作成できるパーツもあります。

デザインや機能は入力補助より劣る場合がありますが、ショートコードをエディタのボタンにしておけば1クリックでデザインを作れて便利です。

このページでは、ショートコードで作ることのできるデザインやデザインの設定方法をご紹介します。

このページで分かること
  • ショートコードで作れるデザインパーツの種類
  • ショートコードでデザインを編集する方法
  • ショートコードで作れるデザインパーツのプレビュー画像

ショートコードで作れるデザインパーツ一覧

入力補助で作れるデザインパーツは13種類あります。

まい
各アイコンをクリックすると、デザインプレビュー紹介に移動します!
入力補助機能で作れるデザインパーツ一覧
ボタンバッジ区切り線グリッドレイアウト
入力補助:ボタン機能のアイコン入力補助:バッジ機能のアイコン入力補助:区切り線機能のアイコン入力補助:グリッドレイアウト機能のアイコン
引用横棒グラフ吹き出し会話
入力補助:引用機能のアイコン入力補助:グラフ機能のアイコン入力補助:吹き出し機能のアイコン入力補助:会話機能のアイコン
レビュートグル記事一覧文字装飾
入力補助:レビュー機能のアイコン入力補助:トグル機能のアイコン入力補助:記事一覧機能のアイコン
その他

各デザインパーツのショートコードとプレビュー

各ショートコードのコードや、デザインパーツのプレビューを紹介していきます。

ショートコードで設定変更できる部分(カラー設定など)も紹介していきます。

ボタン

ショートコードで作れるボタンは、シンプルな角丸四角形のボタンです。

ボタンのショートコードで設定できる項目とコード詳細

ボタンのショートコードで設定できる項目は、以下の3項目です。

  • ボタンカラー
  • ボタンサイズ
  • リンク先URL

ショートコードは、以下の通りです。

[btn url="https://diver-reviewnote.com/" color="#F44336" type="big"]TOPへ戻る[/btn]

url=""にリンク先URLを、color=""にボタンカラーを、type=""にボタンサイズを設定します。

ボタンサイズは、big、smallの2通りです。

ショートコードで作るボタンのデザインプレビュー

まい
ボタンサイズのデフォルト(未入力)は、小サイズ(small)と同じです!

 

ボタンカラーのデフォルト(未入力)は、水色です!

入力補助で作るボタンデザインとの違い

ショートコードで作るボタンデザインと、入力補助で作るボタンデザインは、以下のような違いがあります。

ショートコード入力補助
デザイン1種類のみ
(入力補助の「スタイル1」)
13種類
サイズ2種類
(入力補助のフルサイズと大サイズ)
4種類
(大中小フルサイズ)
改ページ設定無し設定可
カラー設定コード入力プリセット+カスタムカラー
(カラーパレットから設定可)
ボタン配置設定ブロックのみ(中央配置)2種類
(インライン/ブロック)
アイコン挿入任意の場所に可設定項目内でも可能
(任意に挿入も可能)

バッジ

ショートコードで作れるバッジは、シンプルな角丸四角形のバッジです。

バッジのショートコードで設定できる項目とコード詳細

バッジのショートコードで設定できる項目は、以下の2項目です。

  • バッジ内テキスト
  • バッジカラー

ショートコードは、以下の通りです。

[badge name="セール中!" color="#f55"]

name=""にバッジ内テキストを、color=""にバッジカラーを入力します。

ショートコードで作るバッジのデザインプレビュー

セール中! 参照

まい
バッジカラーのデフォルト(未入力)は、黒色です!

入力補助で作るバッジデザインとの違い

ショートコードで作るバッジデザインと、入力補助で作るバッジデザインは、以下のような違いがあります。

ショートコード入力補助
デザイン1種類のみ
(入力補助の「スタイル1」)
7種類
カラー設定コード入力プリセット+カスタムカラー
(カラーパレットから設定可)
アイコン挿入不可設定項目内でも可能
(任意に挿入も可能)

区切り線

ショートコードで作成できる区切り線は、一本線デザインの区切り線です。

区切り線のショートコードで設定できる項目とコード詳細

区切り線のショートコードで設定できる項目は、以下の2項目です。

  • 線色
  • 線の太さ(高さ)

ショートコードは、以下の通りです。

[border color="#ff951c" height="5"]

color=""に線色を、height=""に線の太さ(高さ)を入力します。

ショートコードで作る区切り線のデザインプレビュー

色:#33f 太さ:5

色:#ff951c 太さ:15

色:デフォルト 太さ:デフォルト

まい
線色と高さのデフォルトは、線色がグレー、高さは2になります!

 

デザインの関係か、線色や太さを設定してもデフォルトの区切り線が表示されてしまいます。

入力補助で作る区切り線との違い

ショートコードで作る区切り線と入力補助で作る区切り線は、以下のような違いがあります。

ショートコード入力補助
デザイン1種類のみ
(入力補助の「一本線」)
3種類
カラー設定コード入力カスタムカラー
(カラーパレットから設定可)
デザインデフォルトのラインが表示されてしまう設定した通りに素直に表示される

グリッドレイアウト

ショートコードで作るグリッドレイアウトは、入力補助で作るものとほとんど変わりがありません。

入力補助で設定できる項目を利用しない場合は、ショートコードの方が手早く作れると思います。

グリッドレイアウトのショートコードで設定できる項目とコード詳細

ショートコードで作るグリッドレイアウトは、以下の項目を設定できます。

  • カラム数
  • spモードでもグリッドレイアウト設定にするかどうか(2カラム時のみ)

ショートコードは、カラムやspモードの有無によって異なります。

2カラム、spモード

[colwrap][col2_sp] [/col2_sp][col2_sp] [/col2_sp][/colwrap]

2カラム、通常モード

[colwrap][col2] [/col2][col2] [/col2][/colwrap]

3カラム、通常モード

[colwrap][col3] [/col3][col3] [/col3][col3] [/col3][/colwrap]

2/3カラム、通常モード(1/3カラム、2/3カラムの順)

[colwrap][col3] [/col3][col3_2] [/col3_2][/colwrap]

4カラム、通常モード

[colwrap][col4] [/col4][col4] [/col4][col4] [/col4][col4] [/col4][/colwrap]

3/4カラム、通常モード(1/4カラム、3/4カラムの順)

[colwrap][col4] [/col4][col4_3] [/col4_3][/colwrap]

ショートコードで作るグリッドレイアウトのデザインプレビュー

2カラム、spモード

収益に特化
収益に特化

3カラム、通常モード

収益に特化
収益に特化
収益に特化

3/4カラム、通常モード(1/4カラム、3/4カラムの順)

収益に特化
ぼくはぶーちゃん。グリッドレイアウトがどのような感じになるのかを見てもらうために駆け付けたよ。

みんなにとって有益な情報になっているといいな。

入力補助で作るグリッドレイアウトとの違い

ショートコードで作るグリッドレイアウトと入力補助で作るグリッドレイアウトには、以下のような違いがあります。

ショートコード入力補助
spモード2カラムでのみ可全カラムで可
余白0設定不可
カラムの応用1/4を2つと2/4を1つはできない1/4を2つと2/4を1つもできる

引用

ショートコードで作る引用デザインは、入力補助で作るものとほぼ同じデザインです。

引用のショートコードで設定できる項目とコード詳細

引用のショートコードで設定できる項目は、以下の3項目です。

  • 引用元URL
  • 引用元タイトル
  • 引用文

ショートコードは、以下の通りです。

[bq url="https://diver-reviewnote.com/" title="Diverレビューノート"]ここに引用文を書きます。[/bq]

url=""に引用元URLを、title=""に引用元タイトルを、[bq][/bq]の間に引用文を入力します。

ショートコードで作る引用のデザインプレビュー

引用文入力エリア
引用元URL未入力
引用元URLと引用元タイトルが未入力

入力補助で作る引用機能との違い

ショートコードで作る引用デザインと入力補助で作る引用デザインの違いは、以下の通りです。

ショートコード入力補助
引用元URL未入力自動的に引用を挿入したページのリンクが貼られるリンクは貼られない
引用元関連未入力引用元デザインが一部残る引用元デザインは表示されない
リンクの動作改ページ改ページ(target="_blank"コードを消去することで改ページでなくすることも可能)

横棒グラフ

ショートコードで作る横棒グラフは、入力補助で作るものと同じデザインです。

横棒グラフのショートコードで設定できる項目とコード詳細

ショートコードで作る横棒グラフは、以下の3項目を設定できます。

  • グラフの長さ(%形式)
  • グラフのカラー
  • グラフ内テキスト

ショートコードは以下の通りです。

[barchart width="98%" color="#dd3333"]4,000[/barchart]

width=""に%形式でグラフの長さを、color=""にグラフカラーを、[barchart][/barchart]の間にグラフ内テキストを入力します。

ショートコードで作る横棒グラフのデザインプレビュー

4,000

1位 猫派

4,000

1位 犬派

1,000

3位 ハムスター派

800

4位 カワウソ派

5位 オコジョ派

入力補助で作る横棒グラフとの違い

ショートコードで作る横棒グラフと入力補助で作る横棒グラフの違いは、特にありません。

どちらで作る場合でも、グラフ内テキストがグラフの長さよりも多い場合はグラフ外に溢れてしまい、デザインが崩れるので注意が必要です。

吹き出し

ショートコードで作る吹き出しデザインは、入力補助で作るものとほぼ同じデザインです。

吹き出しのショートコードで設定できる項目とコード詳細

ショートコードで吹き出しを作る際に設定できる項目は、以下の2項目です。

  • 吹き出しの向き
  • 吹き出し内テキスト

吹き出しを作成するショートコードは以下の通りです。

[balloon type="left"]吹き出し内テキスト[/balloon]

type=""に吹き出しの向きを(left、right、top、bottom)[balloon][/balloon]の間に吹き出し内テキストを入力します。

ショートコードで作る吹き出しのデザインプレビュー

吹き出し方向:左
吹き出し方向:右
吹き出し方向:上

文章が短いとそれに合わせて吹き出しサイズも変わります。

吹き出し方向:下

文章が長いと吹き出しサイズは大きくなります。また、アイコンやリストのようなタグはもちろん、ショートコードも併せて使うことができます。

引用のショートコード

入力補助で作る吹き出し機能との違い

ショートコードで作る吹き出しと入力補助で作る吹き出しには、以下のような違いがあります。

ショートコード入力補助
角丸調整不可

会話

ショートコードで作る会話デザインは、セリフタイプの会話デザインです。

会話のショートコードで設定できる項目とコード詳細

会話デザインをショートコードで作る場合、以下の5項目を設定できます。

  • 発言者の名前
  • 発言者のアイコン
  • 吹き出しのカラー
  • 吹き出しの向き
  • 吹き出し内テキスト

ショートコードは以下の通りです。

[voice icon="https://diver-reviewnote.com/wp-content/uploads/2018/12/shuueki-300x300.png" name="ぶーちゃん" type="right" color="red"]ぼくぶーちゃん。[/voice]

icon=""に発言者の画像URLを、name=""に発言者の名前を、type=""に吹き出しの方向(left、right、top、bottom)を、color=""に吹き出しのカラーを、[voice][/voice]の間に吹き出し内テキストを入力します。

吹き出しカラーはgreen、blue、red、orange、gray、black、yellow、whiteから選択できます。

ショートコードで作る会話のデザインプレビュー

ぶーちゃん
ぼくぶーちゃん。
ぶーちゃん
ぼくもぶーちゃん。
ぶーちゃん
ぼくもぶーちゃん。
ぶーちゃん
ぼくもぶーちゃん。
ぶーちゃん
ぼくもぶーちゃん。
ぶーちゃん
ぼくもぶーちゃん。
ぶーちゃん
ぼくもぶーちゃん。
ぶーちゃん
ぼくもぶーちゃん
ぶーちゃん?
カラーを未入力にしたよ。typeは正しく入力していないと、レイアウト崩れが起こってしまうよ。
名前と画像URLが未入力。ぼくは誰だ。画像はちゃんと設定した方がいいね。

入力補助で作る会話との違い

会話デザインは、ショートコードで作る場合と入力補助で作る場合とで、以下のような違いがあります。

ショートコード入力補助
吹き出しデザイン1種類(セリフタイプ)2種類(セリフタイプ/心の声タイプ)
名前表示位置1種類(セリフの上)2種類(アイコンの下/セリフの上)
吹き出しカラープリセットカラーのみプリセットカラー+カスタムカラー

レビュー

ショートコードで作るレビューは、入力補助で作るレビューと同じデザインです。

レビューのショートコードで設定できる項目とコード詳細

レビューをショートコードで作る場合、以下の2項目を設定できます。

  • 星のサイズ
  • 評価(小数点設定可)

ショートコードは以下の通りです。

[star score="2.5" size=""]

ショートコードで作るレビューのデザインプレビュー

評価:2.5 大きさ:デフォルト(未入力)

評価:4.8 大きさ:中

評価:3.33 大きさ:小

評価:0 大きさ:大

入力補助で作るレビューとの違い

レビューは、入力補助で作る場合とショートコードで作る場合において違いは特にありません。

トグル

ショートコードで作るトグルは、入力補助で作るものと同じデザインを作ることができます。

トグルのショートコードで設定できる項目とコード詳細

トグルをショートコードで作る場合、以下の2項目を設定できます。

  • トグルの見出しテキスト
  • トグル内テキスト

ショートコードは以下の通りです。

[toggle title="トグルの見出し"]トグル内テキスト[/toggle]

title=""の部分にトグルの見出しテキストを入力します。[toggle][/toggle]の間にトグル内テキスト(隠したいテキスト)を入力します。

トグルを繋げて入力すると、連結させることもできます。

ショートコードで作るトグルのデザインプレビュー

トグル1
トグル内テキストです。

トグルを連結させた場合は、このようになります。

トグル1
トグル内テキスト
トグル2
トグル内テキスト
トグル3
トグル内テキスト

入力補助で作るトグルとの違い

ショートコードで作るトグルは、入力補助で作るものと違いは特にありません。

記事一覧

記事一覧は、入力補助で作るとショートコードが出力される仕組みになっています。

ショートコードを直接入力するか、入力補助で直感的に操作するかの違いになっています。

記事一覧のショートコードで設定できる項目とコード詳細

記事一覧のショートコードで設定できる項目は、以下の8項目です。

  • 取得する最大記事数
  • 記事を取得するカテゴリー(未入力で全記事設定)※
  • ランキングの集計期間※
  • 表示レイアウト
  • 表示順(並び順)
  • 並び替え条件
  • 日付の表示/非表示
  • カテゴリーの表示/非表示

まい
※の付いているカテゴリー設定とランキング設定は、どちらかを選択する形になります!

記事一覧のショートコードは以下の通りです。

ランダム記事一覧のショートコード

[article num="6" layout="grid" order="DESC" orderby="rand" date="1" cat_name="1"]

最大記事数が6、グリッドタイプ、並び順は降順(ランダム表示なので無効)、並び替え条件はランダム、日付・カテゴリーは表示となっています。

ランキング記事一覧のショートコード

[article num="5" layout="list" rank="all" date="1" cat_name="1"]

最大記事数が5、リストタイプ、ランキング集計期間は全期間、日付・カテゴリーは表示となっています。

カテゴリー記事一覧のショートコード

[article num="5" layout="simple" order="DESC" orderby="post_date" category="41" date="1" cat_name="1"]

最大記事数が5、シンプルタイプ、並び順は降順、並び替え条件は投稿日順、特定のカテゴリーからのみ抽出、日付・カテゴリーは表示となっています。

まい
カテゴリーの番号は、カテゴリー設定ページで確認できます!
各設定項目の選択肢及びそのコード

num(取得する最大記事数)
任意の数字を入力

category(記事を取得するカテゴリー設定)
カテゴリー設定ページで確認したカテゴリーNoを入力

rank(ランキングを集計する期間)
ランキング表示(Analitics API設定が必要です。)

  • all:全期間
  • month:1ヶ月(先月)
  • week:1週間(先週)
  • day:1日(先日)

layout(表示レイアウト)

  • grid:グリッドタイプ
  • list:リストタイプ
  • simple:シンプルタイプ

order(記事の並び順)

  • ASC:昇順(古い記事から)
  • DESC:降順(新しい記事から)

orderby(記事の並び変え条件)

  • ID:投稿ID
  • author:著者
  • title:タイトル
  • name:スラッグ
  • post_date:投稿日
  • modified:更新日
  • rand:ランダム

date(日付の表示/非表示)

  • 0:非表示
  • 1:表示

cat_name(カテゴリーの表示/非表示)

  • 0:非表示
  • 1:表示

ショートコードで作る記事一覧のデザインプレビュー

カテゴリー記事(Diverの機能)/グリッドタイプ/降順/更新日順

カテゴリー記事(全てのカテゴリー)/リストタイプ/昇順/投稿日順

カテゴリー記事(全てのカテゴリー)/シンプルタイプ/降順/投稿ID順

カテゴリー記事(全てのカテゴリー)/グリッドタイプ/降順/著者順

カテゴリー記事(全てのカテゴリー)/グリッドタイプ/降順/タイトル順

カテゴリー記事(全てのカテゴリー)/グリッドタイプ/昇順/スラッグ順

ランダム記事(Diverの機能)/グリッドタイプ/降順

ランダム記事(全てのカテゴリー)/リストタイプ/昇順

ランダム記事(全てのカテゴリー)/シンプルタイプ/降順

ランキング記事/グリッドタイプ/全期間

ランキング記事/リストタイプ/先月

ランキング記事/シンプルタイプ/先週

入力補助で作る記事一覧との違い

入力補助で作る記事一覧とショートコードで作る記事一覧のデザインは全く変わりません。

ただし、ショートコードで作る場合は「記事の並べ替え条件」が入力補助で作る場合より選択肢が豊富です。

文字装飾

Diverでは、文字装飾もショートコードが実装されています。

エディタのボタンに実装されているので、実際に入力して利用する機会は少ないかもしれません。

Diverで利用できる文字装飾のショートコードは以下の通りです。

  • マーカー
  • 文字サイズ
  • 文字色
  • 文字背景色

マーカー

マーカーのコードは以下の通りです。

[marker][/marker]
マーカーのデザインプレビュー

ショートコードでは、マーカー色を変更することはできません。

エディタのボタンで実装されているマーカーコードはカラー変更が可能です。

文字サイズ

文字サイズ調整のコードは以下の通りです。

[fontsize size="1"][/fontsize]

サイズは1~9まで設定できます。

サイズを未入力([fontsize][/fontsize])にすると、通常のフォントサイズから一回り大きいサイズ設定(フォントサイズ4と同サイズ)になります。

また、サイズ1と2は通常のフォントサイズより小さくなります。フォントサイズ3は通常のフォントサイズから少し大きいイメージです。

フォントサイズ1 フォントサイズ2 フォントサイズ3 フォントサイズ4 フォントサイズ5 フォントサイズ6 フォントサイズ7 フォントサイズ8 フォントサイズ9 フォントサイズ(サイズ未入力)

まい
フォントサイズのショートコードは、ページで設定している「通常のフォント」を基準にしてフォントサイズを変更できるので、とても便利です!

文字色

文字カラー調整のショートコードは以下の通りです。

[color color="red"][/color]

カラーコードも入力可能です。

[color][/color]と入力すると、文字色は赤色になります。

red blue yellow gray #33ff55

文字背景色

文字背景色調整のショートコードは以下の通りです。

[bgcolor color="red"][/bgcolor]

[bgcolor][/bgcolor]と入力すると、背景色は薄いグレーになります。

red blue yellow gray #33ff55

その他

その他のショートコードで紹介するのは、以下の6つのコードです。

  • お知らせ文
  • 警告文
  • Facebookボタン
  • Twitterボタン
  • Instagramボタン
  • Google+ボタン

お知らせ文

お知らせ文もエディタのボタンに登録されているショートコードです。

コードは以下の通りです。

[aside type="normal"]お知らせ文を入力するエリア[/aside]
 お知らせ文を入力するエリア

警告文

警告文もエディタのボタンに登録されているショートコードです。

コードは以下の通りです。

[aside type="warning"]警告文を入力するエリア[/aside]
 警告文を入力するエリア

各SNSボタン

各SNSボタンもエディタのボタンに登録されているショートコードです。

各SNSショートコードを利用するには、カスタマイザーにてアカウント・urlを入力している必要があります。

コードは以下の通りです。

[facebook]
[twitter]
[instagram]
[googleplus]

まい
まいはSNSの登録をしていないので、リンクは設定されていません!

ショートコードを使用するときのデザイン編集方法

ショートコードを利用する際は、各ショートコードで紹介した「編集項目」を設定/編集する形式になります。

ショートコードに設定されていない編集方法は利用することができません。

ただし、ショートコードや入力補助を組み合わせてデザインを構成することは可能です。

例えば、グリッドレイアウトとSNSボタンを組み合わせると、

というように一列にSNSボタンを並べることができます。

フォントサイズとマーカーを組み合わせると、目立たせたい部分をより目立たせることも可能です。

入力補助で組み合わせるとコードがややこしくなる場合は、ショートコードで作れる部分はショートコードで作ってしまうのも手です。

編集ページがスッキリするので、コードの編集間違いや文章の挿入ミスを防ぐことができます。

まい
ショートコードと入力補助をうまく使い分けることができるのも、Diverの魅力です!
あらゆるデザインがDiverで叶う。それも難しい操作無しで。
Diverロゴ
イメージ画像

「企業に納品してきたノウハウと技術をすべての人に利用可能なWordpressテーマ」がモットーの有料WordPressテーマ「Diver」。 “ユーザーの質問や意見に真摯に応える” 開発陣の想いは無制限のメールサポートに留まらず、アップデートにも反映されています。もはやそれは、初心者でもあらゆるデザインが作れてしまう程の性能。Diverの能力を知ってしまったら、もう他のテーマには心移りできなくなってしまうでしょう。

販売価格 : 17,980円 (税込)/当サイト限定購入特典あり
無期限・無制限メールサポート付き/無料バージョンアップ有り
おすすめの記事