自分の覚書も兼ねて、WordPressテーマ JINの装飾機能をまとめてみました。一覧にしてみると、どんなデザインがあるのか分かりやすいです。
目次
見出し
見出しデザインの変更は、WordPressのダッシュボード→「外観」→「カスタマイズ」 でJINのカスタマイズ画面を出し、「見出しデザイン設定」で可能です。
大見出し(H2)は10種類、小見出し(H3)は7種類、小見出し(H4)は4種類のデザインが用意されています。
本ブログでは、見出し2はスタイル5を、その他はスタイル1を選択しています。
見出し2
太点線ボックス内に上から順に、大見出し(H2)のスタイル1~10を並べました。スタイル4、スタイル5が特徴的です。スタイル3は、縦ラインが他のスタイルと比較して左寄りに表示されます。

見出し3
上から順に、大見出し(H3)のスタイル1~7です。

見出し4
上から順に、大見出し(H4)のスタイル1~4です。

マーカー、取り消し線、文字色
色・文字の変更は、WordPressのダッシュボード→「外観」→「カスタマイズ」 でJINのカスタマイズ画面を出し、「記事のデザイン設定」で可能です。
マーカー1、マーカー2、取り消し線、文字色をそれぞれ設定すると以下の様な感じ。
マーカー1、マーカー2、取り消し線、文字色(赤色に変更)
ボックス
色・文字の変更は、WordPressのダッシュボード→「外観」→「カスタマイズ」 でJINのカスタマイズ画面を出し、「ボックスデザイン設定」で可能です。
シンプルボックス
太枠ボックス
太点線ボックス
二重線ボックス
細枠背景色ボックス
細点線背景色ボックス
背景色ボックス
太枠背景色ボックス
左線ボックス
端折れボックス
タイトルを「メモ」→「まとめ」に変更するとこんな感じ。
見出し付きボックス
背景色付きボックス本文
背景色付きボックス2本文
細線ボックス1本文
細線ボックス2本文
細線背景色付きボックス本文
黒板ボックス本文
アイコンボックス
ボタン
色の変更は、WordPressのダッシュボード→「外観」→「カスタマイズ」 でJINのカスタマイズ画面を出し、「ボタンデザイン設定」で可能です。
シンプルボタン
リッチボタン
リッチボタンは、ボタンの色も変更可能です。
横並びボタン
シンプルボタン、リッチボタンが選択可能です。「詳細ページ」「公式ページ」のテキストは任意に変更可能です。
リッチボタンを選択すると、ボタンの色が変更出来、「フラットボタン」「光るボタン」「ふわふわボタン」「バウンドボタン」の変更も可能です
シンプルボタン
リッチボタン
ブログカード
クラシックエディタの場合は、URLを貼りつけるだけでブログカードが生成されます。
Gutenbergの場合は、「JINブロック」→「ブログカード」の後、URLを貼り付けます。

吹き出し
アイコンの枠:丸
アイコンの枠:丸
吹き出し:右配置
アイコンの枠:なし
区切り線
区切り線の太さは1~20の範囲で変更可能。デフォルトの太さは3。
区切り線のスタイル 実線
区切り線のスタイル 破線
区切り線のスタイル 2重線
JINのオリジナルアイコン
以下に列挙してみました。
2020年5月に下記が追加されました。
サイズ=18px, 色=明るい灰色
サイズ=36px, 色=黒色
オフィシャルページはここから。
ランキング
商品説明の下にある横並びボタンは、シンプルボタンまたはリッチボタンが選択可能です。下記はシンプルボタンを選択しています。
また、スマホで横並び表示のオン・オフを設定可能です。オフにするとボタンが縦に並びます。

写真(広告タグ)を表示できます。

写真(広告タグ)を表示できます。

写真(広告タグ)を表示できます。

写真(広告タグ)を表示できます。
4位以下の王冠の色はすべて同じになります。
ランキング表 (クラシックエディタのみ対応)
ブロックの選択画面から、「フォーマット」→「クラシック」 と進み、ブロック内にクラシックエディタを表示させて、「ランキング表」のアイコンを選択します。
WordPress Ver.5から採用されたGutenbergには、現時点で対応していないようです。

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

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

項目名 | |
---|---|
項目名 | ここに説明文を入力してください。 |
項目名 | ここに説明文を入力してください。 |
項目名 | ここに説明文を入力してください。 |
シンプルな表 (クラシックエディタのみ対応)
ブロックの選択画面から、「フォーマット」→「クラシック」 と進み、ブロック内にクラシックエディタを表示させて、「シンプルな表」のアイコンを選択します。
WordPress Ver.5から採用されたGutenbergには、現時点で対応していないようです。
項目名 | ここに説明文を入力してください。 |
---|---|
項目名 | ここに説明文を入力してください。 |
項目名 | ここに説明文を入力してください。 |
項目名 | ここに説明文を入力してください。 |
項目名 | ここに説明文を入力してください。 |
Q and Aボックス (クラシックエディタのみ対応)
ブロックの選択画面から、「フォーマット」→「クラシック」 と進み、ブロック内にクラシックエディタを表示させて、「ショートコード」→「ボックス」→「Q&Aボックス」と選択します。
ここに回答を入力
アコーディオンボックス (クラシックエディタのみ対応)
ブロックの選択画面から、「フォーマット」→「クラシック」 と進み、ブロック内にクラシックエディタを表示させて、「ショートコード」→「ボックス」→「アコーディオンボックス」と選択します。
ここに本文を入力
最後まで見ていただき、ありがとうございました。
吹き出し