ブログの勉強

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

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

まだまだ慣れない私でも、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-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]

ショートコード「余白」

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

余白10pxはこれくらいだよ余白10pxはこれくらいだよ

余白10pxはこれくらいだよ余白10pxはこれくらいだよ

[jin-yohaku10]
余白15pxはこれくらいだよ余白15pxはこれくらいだよ

余白15pxはこれくらいだよ余白15pxはこれくらいだよ

[jin-yohaku15]
余白20pxはこれくらいだよ余白20pxはこれくらいだよ

余白20pxはこれくらいだよ余白20pxはこれくらいだよ

[jin-yohaku20]
余白25pxはこれくらいだよ余白25pxはこれくらいだよ

余白25pxはこれくらいだよ余白25pxはこれくらいだよ

[jin-yohaku25]
余白30pxはこれくらいだよ余白30pxはこれくらいだよ

余白30pxはこれくらいだよ余白30pxはこれくらいだよ

[jin-yohaku30]
余白35pxはこれくらいだよ余白35pxはこれくらいだよ

余白35pxはこれくらいだよ余白35pxはこれくらいだよ

[jin-yohaku35]
余白40pxはこれくらいだよ余白40pxはこれくらいだよ

余白40pxはこれくらいだよ余白40pxはこれくらいだよ

[jin-yohaku40]
余白45pxはこれくらいだよ余白45pxはこれくらいだよ

余白45pxはこれくらいだよ余白45pxはこれくらいだよ

[jin-yohaku45]
余白50pxはこれくらいだよ余白50pxはこれくらいだよ

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

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