ブログ運営

【JIN装飾機能一覧】WordPressテーマJINの装飾機能をまとめてみた

WordPressテーマ JIN、装飾機能一覧

自分の覚書も兼ねて、WordPressテーマ JINの装飾機能をまとめてみました。一覧にしてみると、どんなデザインがあるのか分かりやすいです。

見出し

見出しデザインの変更は、WordPressのダッシュボード→「外観」→「カスタマイズ」 でJINのカスタマイズ画面を出し、「見出しデザイン設定」で可能です。

大見出し(H2)は10種類、小見出し(H3)は7種類、小見出し(H4)は4種類のデザインが用意されています。

本ブログでは、見出し2はスタイル5を、その他はスタイル1を選択しています。

見出し2

太点線ボックス内に上から順に、大見出し(H2)のスタイル1~10を並べました。スタイル4、スタイル5が特徴的です。スタイル3は、縦ラインが他のスタイルと比較して左寄りに表示されます。

WordPressテーマ JIN、見出し2

見出し3

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

WordPressテーマ JIN、見出し3

見出し4

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

WordPressテーマ JIN、見出し4

マーカー、取り消し線、文字色

色・文字の変更は、WordPressのダッシュボード→「外観」→「カスタマイズ」 でJINのカスタマイズ画面を出し、「記事のデザイン設定」で可能です。

マーカー1、マーカー2、取り消し線、文字色をそれぞれ設定すると以下の様な感じ。

マーカー1マーカー2取り消し線文字色(赤色に変更)

ボックス

色・文字の変更は、WordPressのダッシュボード→「外観」→「カスタマイズ」 でJINのカスタマイズ画面を出し、「ボックスデザイン設定」で可能です。

シンプルボックス

太枠ボックス

太点線ボックス

二重線ボックス

細枠背景色ボックス

細点線背景色ボックス

背景色ボックス

太枠背景色ボックス

左線ボックス

端折れボックス

タイトルを「メモ」→「まとめ」に変更するとこんな感じ。

見出し付きボックス

背景色付きボックス

背景色付きボックス本文

背景色付きボックス2

背景色付きボックス2本文

細線ボックス1

細線ボックス1本文

細線ボックス2

細線ボックス2本文

黒板ボックス


黒板ボックス本文

アイコンボックス

注意

電球

カート

お知らせ

吹き出し

チェック

鉛筆

情報

歯車

クリップボード

いいね!

よくない

ハート

はてなマーク

ボタン

色の変更は、WordPressのダッシュボード→「外観」→「カスタマイズ」 でJINのカスタマイズ画面を出し、「ボタンデザイン設定」で可能です。

シンプルボタン

シンプルボタン

シンプルボタン

シンプルボタン

シンプルボタン

リッチボタン

リッチボタンは、ボタンの色も変更可能です。

横並びボタン

シンプルボタン、リッチボタンが選択可能です。「詳細ページ」「公式ページ」のテキストは任意に変更可能です。

リッチボタンを選択すると、ボタンの色が変更出来、「フラットボタン」「光るボタン」「ふわふわボタン」「バウンドボタン」の変更も可能です

シンプルボタン

リッチボタン

ブログカード

クラシックエディタの場合は、URLを貼りつけるだけでブログカードが生成されます。

Gutenbergの場合は、「JINブロック」→「ブログカード」の後、URLを貼り付けます。

とうとう公開 "Blog Better" ようやくWordPressでブログの公開にたどり着けました。 ブログ名を考え、レンタルサーバーを契約、ドメイン取得、Wordpre...

吹き出し

アイコン名

アイコンの枠:丸         

アイコン名

アイコンの枠:丸
吹き出し:右配置      

アイコン名

アイコンの枠:なし       

区切り線

区切り線の太さは1~20の範囲で変更可能。デフォルトの太さは3。

区切り線のスタイル 実線

区切り線のスタイル 破線

区切り線のスタイル 2重線

JINのオリジナルアイコン

以下に列挙してみました。

2020年5月に下記が追加されました。

デフォルトサイズ&カラー
サイズ=18px, 色=明るい灰色
サイズ=36px, 色=黒色

オフィシャルページはここから

ランキング

商品説明の下にある横並びボタンは、シンプルボタンまたはリッチボタンが選択可能です。下記はシンプルボタンを選択しています。

また、スマホで横並び表示のオン・オフを設定可能です。オフにするとボタンが縦に並びます。

ここに1位の商品名を表示(王冠は金色)
ここに商品の説明。

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

ここに2位の商品名を表示(王冠は銀色)
ここに商品の説明。

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

ここに3位の商品名を表示(王冠は銅色)
ここに商品の説明。

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

4位以下の王冠は水色
ここに商品の説明。

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

4位以下の王冠の色はすべて同じになります。

ランキング表 (クラシックエディタのみ対応)

ブロックの選択画面から、「フォーマット」→「クラシック」 と進み、ブロック内にクラシックエディタを表示させて、「ランキング表」のアイコンを選択します。

WordPress Ver.5から採用されたGutenbergには、現時点で対応していないようです。

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

詳細ページ公式ページ

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

詳細ページ公式ページ

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

詳細ページ公式ページ

シンプルな表 (クラシックエディタのみ対応)

ブロックの選択画面から、「フォーマット」→「クラシック」 と進み、ブロック内にクラシックエディタを表示させて、「シンプルな表」のアイコンを選択します。

WordPress Ver.5から採用されたGutenbergには、現時点で対応していないようです。

 

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

Q and Aボックス (クラシックエディタのみ対応)

ブロックの選択画面から、「フォーマット」→「クラシック」 と進み、ブロック内にクラシックエディタを表示させて、「ショートコード」→「ボックス」→「Q&Aボックス」と選択します。

ここに質問を入力

ここに回答を入力

アコーディオンボックス (クラシックエディタのみ対応)

ブロックの選択画面から、「フォーマット」→「クラシック」 と進み、ブロック内にクラシックエディタを表示させて、「ショートコード」→「ボックス」→「アコーディオンボックス」と選択します。

ここにタイトルを入力

ここに本文を入力

最後まで見ていただき、ありがとうございました。