自分の覚書も兼ねて、WordPressテーマ JINの装飾機能をまとめてみました。一覧にしてみると、どんなデザインがあるのか分かりやすいです。
目次
見出し
見出しデザインの変更は、WordPressのダッシュボード→「外観」→「カスタマイズ」 でJINのカスタマイズ画面を出し、「見出しデザイン設定」で可能です。
大見出し（H2）は10種類、小見出し（H3）は7種類、小見出し（H4）は4種類のデザインが用意されています。
本ブログでは、見出し2はスタイル5を、その他はスタイル1を選択しています。
見出し2
太点線ボックス内に上から順に、大見出し（H2）のスタイル1～10を並べました。スタイル４、スタイル５が特徴的です。スタイル３は、縦ラインが他のスタイルと比較して左寄りに表示されます。
見出し3
上から順に、大見出し（H3）のスタイル1～7です。
見出し4
上から順に、大見出し（H4）のスタイル1～4です。
マーカー、取り消し線、文字色
色・文字の変更は、WordPressのダッシュボード→「外観」→「カスタマイズ」 でJINのカスタマイズ画面を出し、「記事のデザイン設定」で可能です。
マーカー１、マーカー２、取り消し線、文字色をそれぞれ設定すると以下の様な感じ。
マーカー１、マーカー２、取り消し線、文字色(赤色に変更)
ボックス
色・文字の変更は、WordPressのダッシュボード→「外観」→「カスタマイズ」 でJINのカスタマイズ画面を出し、「ボックスデザイン設定」で可能です。
シンプルボックス
太枠ボックス
太点線ボックス
二重線ボックス
細枠背景色ボックス
細点線背景色ボックス
背景色ボックス
太枠背景色ボックス
左線ボックス
端折れボックス
タイトルを「メモ」→「まとめ」に変更するとこんな感じ。
見出し付きボックス
背景色付きボックス本文
背景色付きボックス2本文
細線ボックス1本文
細線ボックス2本文
細線背景色付きボックス本文
黒板ボックス本文
アイコンボックス
ボタン
色の変更は、WordPressのダッシュボード→「外観」→「カスタマイズ」 でJINのカスタマイズ画面を出し、「ボタンデザイン設定」で可能です。
シンプルボタン
リッチボタン
リッチボタンは、ボタンの色も変更可能です。
横並びボタン
シンプルボタン、リッチボタンが選択可能です。「詳細ページ」「公式ページ」のテキストは任意に変更可能です。
リッチボタンを選択すると、ボタンの色が変更出来、「フラットボタン」「光るボタン」「ふわふわボタン」「バウンドボタン」の変更も可能です
シンプルボタン
リッチボタン
ブログカード
クラシックエディタの場合は、URLを貼りつけるだけでブログカードが生成されます。
Gutenbergの場合は、「JINブロック」→「ブログカード」の後、URLを貼り付けます。
吹き出し
アイコンの枠：丸
アイコンの枠：丸
吹き出し：右配置
アイコンの枠：なし
区切り線
区切り線の太さは1～20の範囲で変更可能。デフォルトの太さは3。
区切り線のスタイル 実線
区切り線のスタイル 破線
区切り線のスタイル 2重線
JINのオリジナルアイコン
以下に列挙してみました。
2020年5月に下記が追加されました。
デフォルトサイズ＆カラー
サイズ＝18px, 色＝明るい灰色
サイズ＝36px, 色＝黒色
オフィシャルページはここから。
ランキング
商品説明の下にある横並びボタンは、シンプルボタンまたはリッチボタンが選択可能です。下記はシンプルボタンを選択しています。
また、スマホで横並び表示のオン・オフを設定可能です。オフにするとボタンが縦に並びます。
ランキング表 (クラシックエディタのみ対応)
ブロックの選択画面から、「フォーマット」→「クラシック」 と進み、ブロック内にクラシックエディタを表示させて、「ランキング表」のアイコンを選択します。
WordPress Ver.5から採用されたGutenbergには、現時点で対応していないようです。
ランキング１位| 項目名 | |
|---|---|
| 項目名 | ここに説明文を入力してください。 |
| 項目名 | ここに説明文を入力してください。 |
| 項目名 | ここに説明文を入力してください。 |
ランキング２位| 項目名 | |
|---|---|
| 項目名 | ここに説明文を入力してください。 |
| 項目名 | ここに説明文を入力してください。 |
| 項目名 | ここに説明文を入力してください。 |
ランキング３位| 項目名 | |
|---|---|
| 項目名 | ここに説明文を入力してください。 |
| 項目名 | ここに説明文を入力してください。 |
| 項目名 | ここに説明文を入力してください。 |
シンプルな表 (クラシックエディタのみ対応)
ブロックの選択画面から、「フォーマット」→「クラシック」 と進み、ブロック内にクラシックエディタを表示させて、「シンプルな表」のアイコンを選択します。
WordPress Ver.5から採用されたGutenbergには、現時点で対応していないようです。
| 項目名 | ここに説明文を入力してください。 |
|---|---|
| 項目名 | ここに説明文を入力してください。 |
| 項目名 | ここに説明文を入力してください。 |
| 項目名 | ここに説明文を入力してください。 |
| 項目名 | ここに説明文を入力してください。 |
Q and Aボックス (クラシックエディタのみ対応)
ブロックの選択画面から、「フォーマット」→「クラシック」 と進み、ブロック内にクラシックエディタを表示させて、「ショートコード」→「ボックス」→「Q&Aボックス」と選択します。
ここに回答を入力
アコーディオンボックス (クラシックエディタのみ対応)
ブロックの選択画面から、「フォーマット」→「クラシック」 と進み、ブロック内にクラシックエディタを表示させて、「ショートコード」→「ボックス」→「アコーディオンボックス」と選択します。
ここに本文を入力
最後まで見ていただき、ありがとうございました。
吹き出し