
JINはブログ初心者にとって、とても使いやすいテーマです。
まだまだ慣れない私でも、JINのテーマのおかげで少しずつスピードが上がってきました♪
ただ、ショートコードを使う時に、どういうのだったか忘れてしまうことが多いわたし。
何回も確認してるのがめんどくさくてまとめました。
Contents
ショートコード「ボックス」

ボックス 16
ここに本文を入力
[box01 title="ここにタイトルを入力"]ここに本文を入力[/box01]
ボックス 17
ここに本文を入力
[box02 title="ここにタイトルを入力"]ここに本文を入力[/box02]
ボックス 18
ここに本文を入力
[box03 title="ここにタイトルを入力"]ここに本文を入力[/box03]
ボックス 19
ここに本文を入力
[box04 title="ここにタイトルを入力"]ここに本文を入力[/box04]
ボックス 20
ここに本文を入力
[box05 title="ここにタイトルを入力"]ここに本文を入力[/box05]
ボックス 21
ここに本文を入力
[box06 title="ここにタイトルを入力"]ここに本文を入力[/box06]
ショートコード「アイコンボックス」

注意
[jin-iconbox01]ここに本文を入力[/jin-iconbox01]
星
[jin-iconbox02]ここに本文を入力[/jin-iconbox02]
電球
[jin-iconbox03]ここに本文を入力[/jin-iconbox03]
カート
[jin-iconbox04]ここに本文を入力[/jin-iconbox04]
お知らせ
[jin-iconbox05]ここに本文を入力[/jin-iconbox05]
吹き出し
[jin-iconbox06]ここに本文を入力[/jin-iconbox06]
チェック
[jin-iconbox07]ここに本文を入力[/jin-iconbox07]
鉛筆
[jin-iconbox08]ここに本文を入力[/jin-iconbox08]
情報
[jin-iconbox10]ここに本文を入力[/jin-iconbox10]
歯車
[jin-iconbox11]ここに本文を入力[/jin-iconbox11]
クリップボード
[jin-iconbox12]ここに本文を入力[/jin-iconbox12]
いいね!
[jin-iconbox09]ここに本文を入力[/jin-iconbox09]
よくない
[jin-iconbox14]ここに本文を入力[/jin-iconbox14]
ハート
[jin-iconbox13]ここに本文を入力[/jin-iconbox13]
はてなマーク
[jin-iconbox15]ここに本文を入力[/jin-iconbox15]
旗
[jin-iconbox16]ここに本文を入力[/jin-iconbox16]
ショートコード「ボタン」
[jin-iconbox01]ここに本文を入力[/jin-iconbox01]

フラットボタン
[jin-button-flat visual="" hover="down" radius="50px" color="#54dcef" url="" target="_self"]ボタン[/jin-button-flat]
グラデーションボタン
[jin-button-gradation visual="" hover="down" radius="50px" color1="#54dcef" color2="#0794E8" url="" target="_self"]ボタン[/jin-button-gradation]
光るボタン
[jin-button-shiny visual="shiny" hover="down" radius="50px" color1="#54dcef" color2="#0794E8" url="" target="_self"]ボタン[/jin-button-shiny]
ふわふわボタン
[jin-button-float visual="float" hover="" radius="50px" color1="#54dcef" color2="#0794E8" url="" target="_self"]ボタン[/jin-button-float]
バウンドボタン
[jin-button-bound visual="bound" hover="down" radius="50px" color1="#54dcef" color2="#0794E8" url="" target="_self"]ボタン[/jin-button-bound]
横並びボタン(フラット)
[jin-flexbox sp_2col="off"][jin-button-flat visual="" hover="down" radius="50px" color="#54dcef" url="" target="_self"]左ボタン[/jin-button-flat][jin-button-flat visual="" hover="down" radius="50px" color="#f6ad49" url="" target="_self"]右ボタン[/jin-button-flat][/jin-flexbox]
横並びボタン(光るフラット)
[jin-flexbox sp_2col="off"][jin-button-flat visual="shiny" hover="down" radius="50px" color="#54dcef" url="" target="_self"]左ボタン[/jin-button-flat][jin-button-flat visual="shiny" hover="down" radius="50px" color="#f6ad49" url="" target="_self"]右ボタン[/jin-button-flat][/jin-flexbox]
横並びボタン(グラデーション)
[jin-flexbox sp_2col="off"][jin-button-gradation visual="" hover="down" radius="50px" color1="#54dcef" color2="#0794E8" url="" target="_self"]ボタン[/jin-button-gradation][jin-button-gradation visual="" hover="down" radius="50px" color1="#f6ad49" color2="#f08300" url="" target="_self"]ボタン[/jin-button-gradation][/jin-flexbox]
横並びボタン(光るグラデーション)
[jin-flexbox sp_2col="off"][jin-button-gradation visual="shiny" hover="down" radius="50px" color1="#54dcef" color2="#0794E8" url="" target="_self"]ボタン[/jin-button-gradation][jin-button-gradation visual="shiny" hover="down" radius="50px" color1="#f6ad49" color2="#f08300" url="" target="_self"]ボタン[/jin-button-gradation][/jin-flexbox]
ショートコード「余白」

※見やすくするために、背景色入れてます。
余白10pxはこれくらいだよ余白10pxはこれくらいだよ
[jin-yohaku10]
余白15pxはこれくらいだよ余白15pxはこれくらいだよ
[jin-yohaku15]
余白20pxはこれくらいだよ余白20pxはこれくらいだよ
[jin-yohaku20]
余白25pxはこれくらいだよ余白25pxはこれくらいだよ
[jin-yohaku25]
余白30pxはこれくらいだよ余白30pxはこれくらいだよ
[jin-yohaku30]
余白35pxはこれくらいだよ余白35pxはこれくらいだよ
[jin-yohaku35]
余白40pxはこれくらいだよ余白40pxはこれくらいだよ
[jin-yohaku40]
余白45pxはこれくらいだよ余白45pxはこれくらいだよ
[jin-yohaku45]
余白50pxはこれくらいだよ余白50pxはこれくらいだよ
[jin-yohaku50]
ショートコード「付箋」

※見やすくするために、背景色入れてます。
シンプルな付箋→右肩下がり
[jin-fusen1-down text="ここに文字を入力してください"]
シンプルな付箋→平行
[jin-fusen1-even text="ここに文字を入力してください"]
シンプルな付箋→右肩上がり
[jin-fusen1-up text="ここに文字を入力してください"]
吹き出し付箋
[jin-fusen2 text="ここに文字を入力してください"]
吹き出し付箋(角丸)
[jin-fusen3 text="ここに文字を入力してください"]
ショートコード「画像加工」

影だけをつける

[jin-img-shadow]
ここに画像を貼り付けてください
[/jin-img-shadow]
角丸デザインにする

[jin-img-kadomaru]
ここに画像を貼り付けてください
[/jin-img-kadomaru]
枠ありデザインにする

[jin-img-waku]
ここに画像を貼り付けてください
[/jin-img-waku]
丸枠デザインにする

[jin-img-maruwaku]
ここに画像を貼り付けてください
[/jin-img-maruwaku]
ショートコード「区切り線」

ノーマル
※標準のカラーだとちょいと見づらいので変更(#808080)してます。
標準カラーは#f7f7f7です。
[jin-sen color="#f7f7f7" size="3px"]
点線
※標準のカラーだとちょいと見づらいので変更(#808080)してます。
標準カラーは#f7f7f7です。
[jin-tensen color="#f7f7f7" size="3px"]
2重線
※標準のカラーだとちょいと見づらいので変更(#808080)してます。
標準カラーは#eeeeeeです。
[jin-w-sen color="#eeeeee" size="10px"]
ショートコード「カラム」

※「カラム」の使い方がよくわからなくて、JINのサイトをチェックしました。
LP・ポートフォリオ・比較で使える「2カラムボックス」「3カラムボックス」を用意しました。
念のため別記事にて使いかたの解説記事を用意しています(※ 準備中)ので、こちらも参照の上、ご利用ください。ーーJINサイトよりーー
まだ解説記事は準備中のようですが、LP・ポートフォリオ・比較で使用できるようです。
ここはわたしも勉強中です(^-^;
下記のものは、ショートコードをクリックした時に表示されたものを、そのまま載せてます
2カラム
左のコンテンツはここに入力
右のコンテンツはここに入力
[2col-box]
[2-left]
左のコンテンツはここに入力
[/2-left]
[2-right]
右のコンテンツはここに入力
[/2-right]
[/2col-box]
2カラム【背景色あり】
左のコンテンツはここに入力
右のコンテンツはここに入力
[2col-box]
[2-left bg_color="#f7f7f7"]
左のコンテンツはここに入力
[/2-left]
[2-right bg_color="#f7f7f7"]
右のコンテンツはここに入力
[/2-right]
[/2col-box]
2カラム【タイトルあり】
左のコンテンツはここに入力
右のコンテンツはここに入力
[2col-box]
[2-left title="ここにタイトルを入力" style="1"]
左のコンテンツはここに入力
[/2-left]
[2-right title="ここにタイトルを入力" style="1"]
右のコンテンツはここに入力
[/2-right]
[/2col-box]
2カラム【タイトルあり&背景色あり】
左のコンテンツはここに入力
右のコンテンツはここに入力
[2col-box]
[2-left bg_color="#f7f7f7" title="ここにタイトルを入力" style="1"]
左のコンテンツはここに入力
[/2-left]
[2-right bg_color="#f7f7f7" title="ここにタイトルを入力" style="1"]
右のコンテンツはここに入力
[/2-right]
[/2col-box]
ショートコード「3カラム」

3カラム
左のコンテンツはここに入力
中央のコンテンツはここに入力
右のコンテンツはここに入力
[3col-box]
[3-left]
左のコンテンツはここに入力
[/3-left]
[3-center]
中央のコンテンツはここに入力
[/3-center]
[3-right]
右のコンテンツはここに入力
[/3-right]
[/3col-box]
3カラム【背景色あり】
左のコンテンツはここに入力
中央のコンテンツはここに入力
右のコンテンツはここに入力
[3col-box]
[3-left bg_color="#f7f7f7"]
左のコンテンツはここに入力
[/3-left]
[3-center bg_color="#f7f7f7"]
中央のコンテンツはここに入力
[/3-center]
[3-right bg_color="#f7f7f7"]
右のコンテンツはここに入力
[/3-right]
[/3col-box]
3カラム【タイトルあり】
左のコンテンツはここに入力
中央のコンテンツはここに入力
右のコンテンツはここに入力
[3col-box]
[3-left title="ここにタイトルを入力" style="1"]
左のコンテンツはここに入力
[/3-left]
[3-center title="ここにタイトルを入力" style="1"]
中央のコンテンツはここに入力
[/3-center]
[3-right title="ここにタイトルを入力" style="1"]
右のコンテンツはここに入力
[/3-right]
[/3col-box]
3カラム【タイトル&背景色あり】
左のコンテンツはここに入力
中央のコンテンツはここに入力
右のコンテンツはここに入力
[3col-box]
[3-left bg_color="#f7f7f7" title="ここにタイトルを入力" style="1"]
左のコンテンツはここに入力
[/3-left]
[3-center bg_color="#f7f7f7" title="ここにタイトルを入力" style="1"]
中央のコンテンツはここに入力
[/3-center]
[3-right bg_color="#f7f7f7" title="ここにタイトルを入力" style="1"]
右のコンテンツはここに入力
[/3-right]
[/3col-box]
ショートコード見出し(LP用)

※見やすくするために、背景色入れてます。
見出し2(H2)
ここにテキストを入力
[lp-h2 style="1"]ここにテキストを入力[/lp-h2]
ショートコード「星」(レビュー用)

星1
[jinstar1.0 color="#ffc32c" size="16px"]
星1.5
[jinstar1.5 color="#ffc32c" size="16px"]
星2
[jinstar2.0 color="#ffc32c" size="16px"]
星2.5
[jinstar2.5 color="#ffc32c" size="16px"]
星3
[jinstar3.0 color="#ffc32c" size="16px"]
星3.5
[jinstar3.5 color="#ffc32c" size="16px"]
星4
[jinstar4.5 color="#ffc32c" size="16px"]
星4.5
[jinstar4.5 color="#ffc32c" size="16px"]
星5
[jinstar5.0 color="#ffc32c" size="16px"]
ショートコード「アイコン」

丸矢印(右)
[jin_icon_arrowcircle color="#e9546b" size="18px"]
矢印(右)
[jin_icon_arrow color="#e9546b" size="16px"]
矢印(下)
[jin_icon_arrowbottom color="#e9546b" size="17px"]
矢印(左)
[jin_icon_arrowleft color="#e9546b" size="16px"]
矢印(上)
[jin_icon_arrowtop color="#e9546b" size="17px"]
二重矢印(右)
[jin_icon_arrowdouble color="#e9546b" size="18px"]
ホーム
[jin_icon_home color="#e9546b" size="18px"]
ペン
[jin_icon_pen color="#e9546b" size="18px"]
チェック
[jin_icon_check color="#e9546b" size="18px"]
チェック(丸)
[jin_icon_check_circle color="#e9546b" size="18px"]
メール
[jin_icon_mail color="#e9546b" size="18px"]
電球
[jin_icon_bulb color="#e9546b" size="21px"]
注意
[jin_icon_caution color="#e9546b" size="18px"]
インフォメーション
[jin_icon_info color="#e9546b" size="18px"]
フォルダ
[jin_icon_folder color="#e9546b" size="21px"]
コメント
[jin_icon_comment color="#e9546b" size="18px"]
最後に
いかがでしたか?
ぜひ時間短縮のために使ってみてください。
