【2019】JINショートコードまとめ初心者向け

JINはブログ初心者にとって、とても使いやすいテーマです。

まだまだ慣れない私でも、JINのテーマのおかげで少しずつスピードが上がってきました♪

ただ、ショートコードを使う時に、どういうのだったか忘れてしまうことが多いわたし。

何回も確認してるのがめんどくさくてまとめました。

シワユリ

これからJINを使っていく方にも参考になれば嬉しいです。

ショートコード「ボックス」

ボックス　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-iconbox01]ここに本文を入力[/jin-iconbox01]

よくない

[jin-iconbox09]ここに本文を入力[/jin-iconbox09]

ハート

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

ショートコード「余白」

※見やすくするために、背景色入れてます。

[jin-yohaku10]

[jin-yohaku15]

[jin-yohaku20]

[jin-yohaku25]

[jin-yohaku30]

[jin-yohaku35]

[jin-yohaku40]

[jin-yohaku45]

[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サイトよりーー

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

最後に

いかがでしたか？

ぜひ時間短縮のために使ってみてください。

【2019】WordPressは難しいけど知識ゼロでもできた初心者の話 ブログを始めたいたけど、初心者だからと悩んでる方いませんか？ 初心者でも大丈夫ですよ。 なぜならわたしが超初...

シワユリ

ツイッターでも発信してるので、よかったらシワユリ（＠shiwa_yuri)をフォローしてね♪

ABOUT ME

shiwayuri

男の子2人のママです。仕事のストレスで育児も家事もうまくいかず、怒ってばっかりが嫌になり、育児、家事に専念できる「自宅で仕事」を目標に初めての事に挑戦し始めた女です。 チビちゃん達が大好きです( •ॢ◡-ॢ)-♡

BLOG LINK：https://shiwayurinikolog.com/