世界一やさしいWebの教科書
WEBサイト制作

【JIN】絶対に使いこなしたい!スタイルとショートコード一覧と使い方

誰でも使いやすく、見栄えがいいサイトを作ることができる「JIN」というWordPressのテーマ。

私もつい先日購入し、さっそく使用しているのですが、簡単におしゃれなサイトがつくれてしまうことに衝撃を覚えています。正直、無料テーマをカスタマイズしている時間があるなら、さっさと有料テーマに切り替えてしまった方が楽ですね。

しかし、まだこのテーマに慣れておらず、せっかく用意されているスタイルやショートコード、ランキングなどを使いこなせていません。

この記事では、スタイルやショートコードなどを自分が理解するために、一覧にしてまとめていきたいと思います。使い方も簡単に記載していきます。

わからんゾウ
わからんゾウ
使いこなすのむつかしいんだゾウ…
はかせ
はかせ
練習あるのみやな。
わからんゾウ
わからんゾウ
冷たいんだゾウ…

スタイル

マーカー

マーカー1

マーカー2

(マーカーの色はカスタマイズで変更可)

ボタン

ボタン①

ボタン②

(リンクをつけてからボタンのスタイルを適用する必要があります)

カスタムボタン

カスタムボタン①

カスタムボタン②

(カスタマイズのボタンデザインの調節ができます)

ボックス

1.太枠ボックス

2.太点線ボックス

3.二重線ボックス

4.細枠背景色ボックス

5.細点線背景色ボックス

6.背景色ボックス

7.太枠背景色ボックス

8.左線ボックス

9.端切れボックス

10.注意点ボックス

11.良い例ボックス

12.悪い例ボックス

13.参考ボックス

14.メモボックス

15.ポイントボックス

 

ショートコード

ボックス

ボックス16

ボックス16

ボックス17

ボックス17

ボックス18

ボックス18

ボックス19

ボックス19

ボックス20

ボックス20

アイコンボックス

注意
電球
カート
お知らせ
吹き出し
チェック
鉛筆
情報
歯車
クリップボード
いいね!
よくない
ハート
はてなマーク

ボタン

余白

10px~50pxまで5pxごとに指定できます。(↓10px)

10px~50pxまで5pxごとに指定できます。(↓50px)

10px~50pxまで5pxごとに指定できます。

付箋

シンプルな付箋

右肩下がり
平行
右肩上がり

吹き出し付箋

吹き出し付箋

吹き出し付箋(角丸)

吹き出し付箋(角丸)

画像加工

元画像

陰だけをつける

角丸デザインにする

枠ありデザインにする

丸枠デザインにする

区切り線

ノーマル

点線

2重線

2カラム

2カラム

2カラム

2カラム【背景色あり】

2カラム【背景色あり】

ここにタイトルを入力

2カラム【タイトルあり】

ここにタイトルを入力

2カラム【タイトルあり】

ここにタイトルを入力

2カラム【タイトル&背景色あり】

ここにタイトルを入力

2カラム【タイトル&背景色あり】

3カラム

3カラム

3カラム

3カラム

3カラム【背景色あり】

3カラム【背景色あり】

3カラム【背景色あり】

ここにタイトルを入力

3カラム【タイトルあり】

ここにタイトルを入力

3カラム【タイトルあり】

ここにタイトルを入力

3カラム【タイトルあり】

ここにタイトルを入力

3カラム【タイトル&背景色あり】

ここにタイトルを入力

3カラム【タイトル&背景色あり】

ここにタイトルを入力

3カラム【タイトル&背景色あり】

見出し(LP用)

見出し(LP用)

星(レビュー用)

星1.0
星1.5
星2.0
星2.5
星3.0
星3.5
星4.0
星4.5
星5.0

アイコン

丸矢印(右)
矢印(右)
矢印(下)
矢印(左)
矢印(上)
二重矢印(右)
ホーム
ペン
チェック
チェック丸
メール
電球
注意
インフォメーション
フォルダ
コメント
クエスチョン


ユーザー
時計

星(ハーフ)
星(塗りなし)
ギア
コピー
カート
マル
バツ
プラス
ハート
いいね
良くないね
スピーカー
クリップボード
タグ
王冠
ドロップピン
スマホ
パソコン
検索
記事
クローバー
ブックマーク
イナズマ
シェア
工具

ランキング

ランキング1位
ここに広告タグ(300 x 250)をコピペ
ここに説明文を入力してください。ここに説明文を入力してください。
項目名
項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。

詳細ページ公式ページ

ランキング2位
ここに広告タグ(300 x 250)をコピペ
ここに説明文を入力してください。ここに説明文を入力してください。
項目名
項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。

詳細ページ公式ページ

ランキング3位
ここに広告タグ(300 x 250)をコピペ
ここに説明文を入力してください。ここに説明文を入力してください。
項目名
項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。

詳細ページ公式ページ

シンプルな表

項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。