【デザイン一覧表】THE THORプリセットパーツ編(吹き出し・スコア・口コミ・レビュー・アコーディオンボックス)

いっぬ
THE THORの「プリセットパーツ」ってどんな装飾ができるの?
よわこ
(マーケ・販促歴7年)
OK!デザインの一覧表つくってみるよ。

 

今日はTHE THORの記事内装飾「プリセットパーツ」のデザインを一覧表で紹介します。

 ● 区切り線
 ● 吹き出し
 ● スコアボックス
 ● 口コミボックス
 ● レビューボックス
 ● アコーディオンボックス

59_001_プリセットパーツとは

全項目の全パターンまとめているので記事作成の際にご活用ください!

THE THORプリセットパーツのデザイン一覧表

区切り線

区切り線は、記事中に挿入できる仕切りの線のことです。

ちょっと見づらいので色付けしてます。本当の色合いは薄いグレー(1px dotted rgba(0,0,0,.1))になります。

実線

破線

点線

 

吹き出し

吹き出しは「キャラクターがしゃべっている風」の文章が作れます。

左画像(背景スタイル) 右画像(背景スタイル)
いっぬ
こんにちは
よわこ
(マーケ・販促歴7年)
こんにちは
左画像(ボーダースタイル) 右画像(ボーダースタイル)
いっぬ
こんにちは
よわこ
(マーケ・販促歴7年)
こんにちは

 

デザインカスタマイズの方法
キャラクター画像・背景カラーなどはWordPress管理画面の「外観>カスタマイズ>パーツスタイル設定>吹き出し設定(個別ページ用)」から変更が可能です。

59_003_吹き出しカスタマイズ1
59_004_吹き出しカスタマイズ2
59_005_吹き出しカスタマイズ3

 

スコアボックス

スコアボックスは、例えば商品やサービスなどに対して「採点づけしている風」の文章が作れます。

最終行(レッド) 最終行(ブルー)
項目名 3.5
項目名 3.5
項目名 3.5
項目名 3.5
総合 3.5
項目名 3.5
項目名 3.5
項目名 3.5
項目名 3.5
総合 3.5
最終行(イエロー) 最終行(ピンク)
項目名 3.5
項目名 3.5
項目名 3.5
項目名 3.5
総合 3.5
項目名 3.5
項目名 3.5
項目名 3.5
項目名 3.5
総合 3.5
最終行(グリーン) 最終行(グレー)
項目名 3.5
項目名 3.5
項目名 3.5
項目名 3.5
総合 3.5
項目名 3.5
項目名 3.5
項目名 3.5
項目名 3.5
総合 3.5

口コミボックス

口コミボックスは、例えば商品やサービスなどに対して「誰かが口コミで話している風」の文章が作れます。

背景(レッド) 背景(ブルー)
口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

背景(イエロー) 背景(ピンク)
口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

背景(グリーン) 背景(グレー)
口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

ボーダー(レッド) ボーダー(ブルー)
口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

ボーダー(イエロー) ボーダー(ピンク)
口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

ボーダー(グリーン) ボーダー(グレー)
口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

レビューボックス

レビューボックスは、例えば商品やサービスなどに対して「誰かがレビューしている風」の文章を作れます。

背景スタイル
このエリアにレビュータイトルを記入します。
N.Sさん

評価: 3.5このエリアにレビュー本文を記入します。

ボーダースタイル
このエリアにレビュータイトルを記入します。
N.Sさん

評価: 3.5このエリアにレビュー本文を記入します。

 

アコーディオンボックス

アコーディオンボックスは「開け閉じ可能なボックス」を作ることができます。

Clickという表記は独自のカスタマイズによるものなのでデフォルトではついていません。

背景スタイル
タイトル
Hこのエリアにレビュー本文を記入します。
ボーダースタイル
タイトル
Hこのエリアにレビュー本文を記入します。

 

吹き出し以外のプリセットパーツに関しては

カスタマイズするには追加CSSで自分で編集するしかないのですが、

そのCSSカスタマイズについても次回で紹介していこうと思います

 

※追加CSSはWordPressから「外観>カスタマイズ」の中の項目から編集ができます

 

この記事を見ている人におすすめの本

Sponsored Link
59_アイキャッチ_【デザイン一覧表】THE THORプリセットパーツ編(吹き出しなど)_2
最新情報をチェックしよう!

最強のWordPressテーマ「THE THOR」

本当にブロガーさんやアフィリエイターさんのためになる日本一のテーマにしたいと思っていますので、些細なことでも気が付いたのであればご報告いただけると幸いです。ご要望も、バグ報告も喜んで承っております!

CTR IMG