THE THORのプリセットパーツをカスタマイズする方法！

ここあです。

私が使っているWordPressテーマ「THE THOR（ザ・トール）」には

レビュー記事や比較記事がまとめやすくなる

「プリセットパーツ」という非常に便利なショートコードがあります。

具体的には…

◎スコアボックス

◎口コミボックス

◎レビューボックス

このような表示がショートコード一発で表示できます。

しかし、これらプリセットパーツはデザイナー目線で見ると

少し野暮ったく、特に、タグ管理機能と組み合わせた際に

タグ全体が間延びして見えずらくなってしまう印象があります。

また、レビューボックスに関しては背景色ありのパーツは

上記のごとく色がグレーで少し地味です。※背景色が白のパターンはありますが…。

なので、私はこれらの「プリセットパーツ」を

もう少しだけスマートにできないかとカスタマイズしてみました。

ということで、今回はTHE THORに実装されている

「プリセットパーツ」をカスタマイズする方法について

解説させていただきますので

もしも「プリセットパーツ」のデザインに不満があるあなたは

ぜひ参考にしてみてください。

THE THORのプリセットパーツをCSSでカスタマイズ

今回、あなたにご紹介するカスタマイズは

CSSコードを使って、オリジナルでカスタマイズする方法です。

なので、カスタマイズするにはCSSを記述する必要があります。

ということで、CSSコードの記述先はダッシュボードメニューから

外観 → カスタマイズをクリックし、さらに「追加CSS」をクリック。

以下、追加CSSのスペースにCSSコードを記述してくださいね。

WordPressテーマには、このようにどのテーマでも

CSSでカスタマイズするための記述先があります。

なので、CSSコードさえ分かれば、

どのテーマも簡単にカスタマイズすることができますし

CSSコードを消去するだけで

いつでも元の状態に戻せるので便利です。

THE THORのスコアボックスをカスタマイズする方法

それでは順番にTHE THORのプリセットパーツを

カスタマイズしていきましょう。

まずは「スコアボックス」。

THE THORのスコアボックスは非常にシンプルで良いのですが

私は以下の2箇所だけカスタマイズしました。

• 天地の高さ調整
• 星（スコア）の色

上記2点をカスタマイズした理由は

天地が間延びしていて、格好悪い。

タグ管理と組み合わせた時、コンパクトにならず、

星の色がうるさい。こんな理由があります。

↓デフォルトのスコアボックスと組み合わせたタグ

こう書いてしまうと「ただのわがままな奴」と

あなたは思うでしょう（笑）

ですが、デザイナーの観点から言わせていただくと

上記のようにタグとスコアボックスを組み合わせた場合

あくまでネットユーザーに見て欲しい総合評価は

THE THOR（ザ・トール）のすぐ下にある

★★★★★［4.5］だけでいいんです。

つまり、その下にあるスコアボックスの数値というのは

あくまでも補足情報。

わざわざスコアの星を目立たせる必要はありません。

だから、私はスコアボックスの星の色を変更しました。

そもそもデザインというのは

見る人のことを考えて行うべきものですし

★＝黄色という発想自体が、そもそも幼稚。

また、スコアも上下に間延びしていて、

タグ全体が非常に見にくい印象となっています。

デザインというのは、あればいいというものではありません。

データを見ていただく方にいかに分かりやすく見やすいか

そこをしっかりと考えなければなりません。

ということで、

私がカスタマイズしたスコアボックスと組み合わせると

このように見え方が変わります。

微妙な差ではありますが、デザインというのは

この「微妙の差」というのが実はものすごく重要です。

ある意味、それがプロと素人との大きな違いになります。

なので、この違いを大事にしたいあなた

もしくは、その微妙な気持ち悪さに気付いているあなたは

ぜひカスタマイズしてみてください。

スコアボックスの天地を調整する方法

スコアボックスの天地をカスタマイズする場合は

以下のCSSコードを追加CSSにコピペしてください。

このCSSコードはスコアボックス1行ごとのスペースを

調整しているコードになります。

padding: 3px 0px 3px 15px;というのは

スペースを「上 右 下 左」の順に4点書きで指定するCSSコード。

なので、上記CSSコードをコピペして

もう少し天地の幅を広げたい場合は

上と下のスペースに該当する数値を調整してみてください。

例えば、padding: 5px 0px 5px 15px;

このようにするとスコアボックスの天地が広がります。

スコアボックスの星の色を変える方法

私はタグを組み合わせた場合を考え、

スコアボックスの星の色を変更していますが

スコアボックス単体で使う場合

星の色がグレーだと地味になってしまいます。

なので、星の色を変える場合は

あなたがスコアボックスを単体で使う方が多いか

タグと組み合わせて使う方が多いかで検討してみてください。

CSSコードは以下の通り

星の色を変える場合は、上記CSSのカラーコード

color: #aaa;の「#aaa」をあなたの好きな

カラーコードに変えることで調整が可能です。

スコアボックスの文字の太さを変える方法

変えるべきかどうかは微妙ですが

スコアボックスの各項目が太字になっていますので

「通常の太さ」にしたいという場合は

以下のCSSコードをコピペしてください。

フォントの太さに関してはもう少し微調整が可能なのですが

少しややこしいので、ここではあえて説明しません。

以上が、スコアボックスをカスタマイズするための

CSSコードになりますので、ネットユーザーのことを考えつつ

あなたのお好みで上手く調整してみてくださいね。

THE THORの口コミボックスをカスタマイズする方法

THE THORの口コミボックスは非常にたくさんの

カラーバリエーションが用意されておりますので

使い勝手を考慮し、大幅なカスタマイズは行わず

天地の調整だけにとどめています。

デフォルトの口コミボックスはこんな感じですが…

天地の高さを微調整すると、こんな感じになります。

私が気になったのは、そもそも「口コミ」の見出しを

そこまで大きくする必要があるのか？ということ。

なぜなら、大事なのはタイトルではなく、その中身だからです。

なので「口コミ」の見出しは最低限の大きさに微調整しています。

また、デフォルトのレイアウトだと口コミの数を増やしてまとめた場合、

このようにコンパクトにならず、かなり野暮ったくなってしまします。

つまり、口コミのレイアウトが野暮ったくなるということは

それだけ「素人感」が満載で、どれだけ頑張って口コミをまとめても

信ぴょう性が低くなってしまうということ。

それでは口コミをまとめる意味がありません。

だからこそ、読者の信ぴょう性が上がる

スマートなデザインというのが重要になります。

口コミボックスをスマートにする方法

ということで、口コミボックスをもう少し

「スマート化」したい場合は、以下のCSSコードをコピペしてください。

追加CSSにコピペ

.content .ep-inbox {
padding-left: 50px;
padding-top:0px;
padding-bottom:3px;
}.content .es-Bicon::before {
top: 15px;
left: 20px;
font-size: 1.8rem;
line-height: 0.8rem;
}.content .es-FbigL {
font-size: 2rem;
}.icon-bubbles2::before {
content: “\e978”;
}.content .ep-label {
border-radius:8px;
}.content .es-BmarginSS {
margin-bottom: 0.3rem;
}.content .es-BpaddingSS {
padding-bottom: 0.3rem;
}.content .es-TpaddingSS {
padding-top: 0.3rem;
}

上記のCSSコードをコピペすると

口コミボックスの見出しや、口コミ者を入力する部分の枠が

少し小さくコンパクトになります。

口コミボックスのラベルの色を変える方法

口コミボックスは「口コミ者」である

名前を記述する枠の色がグレーで地味です。

なので、口コミ者の背景色を変更したいという場合は

以下のCSSコードを追記してください。

追加CSSにコピペ

.content .brc-Lmagenta .ep-label, .brc-Lsky .ep-label, .brc-Lyellow .ep-label, .brc-Lpink .ep-label, .brc-Llime .ep-label, .brc-Lgray .ep-label{
background-color: #fbf7e2;
color:#555;
font-size:85%;
}

なお、上記CSSコードは「口コミボックス（ボーダー）」全カラーの

口コミ者「背景色」を変えるコードとなっておりますので

あらかじめご了承ください。

CSSコードが分かる方は不要な指定コードは

削除していただいても大丈夫です。

ややこしいので、ここではあえて説明はしません＾＾；

ちなみに、背景色を変更する場合は以下のコード

このカラーコード「#fbf7e2」を

あなたの好きなカラーコードに変更してください。

また、背景色に合わせて文字の色を変えたい

という場合が出てくると思いますので

文字の色を同時に変えたいという場合は

以下、CSSコードでご調整ください。

上記、コードが文字の色を変えるコードになります。

さらに、私が紹介しているCSSコードには

口コミ者のフォントサイズをデフォルトよりも小さくするコードを

記述しておりますので

口コミ者名のフォントサイズを元に戻す場合は

と書かれたフォントサイズの比率を100%にするか

「font-size:85%;」の記述を丸々削除してください。

なお、私の口コミボックスでは

口コミ者名の前にアイコンを追加しておりますが

設定が少々ややこしいこともあり、

ここではあえて説明を省かせていただきます。

あらかじめご了承ください。

THE THORのレビューボックスをカスタマイズする方法

最後に、THE THORのレビューボックスをカスタマイズする方法です。

THE THORのレビューボックスは文量をどれぐらい入れるかで

変わりますので、ボックスの天地幅は調整しません。

今回あなたにお伝えするカスタマイズの方法は以下の2つ。

• 背景色ありの場合の、背景色を変える方法
• レビューボックスの人物アイコンを変える方法

THE THORのレビューボックスは

アイコンがシンプルすぎて愛想がないので、

私はアイコンを変更しました。

ということで、カスタマイズするとこんな感じになります。

ただし、人物アイコンに関しては1パターンしか

登録することができませんので

複数のレビューボックスを並べても

違和感のないアイコンを選ぶ必要がありますので

その点だけご了承ください。

レビューボックスの背景色をカスタマイズする方法

レビューボックスの背景色を変更したい場合は

以下のCSSをコピペしてください。

追加CSSにコピペ

.content .reviewBox {
background:#fefbef;
padding: 20px;
border-radius: 5px;
}.content .reviewBox-border {
background: #fff;
border: 1px solid rgba(0,0,0,.1);
}

なお、上記CSSは

「背景スタイル」のレビューボックスの背景色を変えた場合、

「ボーダースタイル」の背景も変わってしまいましたので

「ボーダースタイル」の背景色を白で維持できるコードも

同時に書いておりますので、ご了承ください。

背景色を変更したい場合は、以下のCSSコード

上記CSSにある「background:#fefbef;」のカラーコード

#fefbefを変更して、変えてください。

レビューボックスのアイコンをカスタマイズする方法

レビューボックスのアイコンは

新たに画像を登録することで変更できます。

なので、あらかじめアイコン用の画像を準備する必要がありますので

著作権フリーのアイコンサイトや、イラストサイトから

あなたのお好みの画像を選んで準備するようにしてください。

なお、アイコンサイズは「100px × 100px」だと

レビュー用アイコンとして綺麗に収まりますので

画像を選んだ際には、以下の画像リサイズサイトで

「100px × 100px」に調整して保存してください。

画像リサイズツール：https://www.webtoolss.com/resize.html

↓画像リサイズツールの使い方

1. 画像をアップロード
2. 画像サイズを入力
3. JPGかPNGを選択し「画像化」をクリック
4. 保存ボタンが出てくるので、保存して完成！

「100px × 100px」のアイコン画像が準備できたら

ブログのメディアライブラリに一旦アップし、

画像のURLをコピペします。

URLは以下の場所からコピペできます。

そして、レビューボックスのアイコンを変更するCSS

以下のコードを追加CSSにコピペしてください。

追加CSSにコピペ

.content .reviewBox__img {
background: url(あなたの画像URLをここにコピペ);
}

上記、CSSにある「あなたの画像URLをここにコピペ」と

書かれた部分に先ほどあなたがコピペした

httpsから始まる画像のURLを丸々コピーして入力します。

そうすると、あなたが登録したアイコン画像が

レビューボックスのアイコンとして表示されるようになります。

本来、レビューボックスというのは

いろんな人のレビューが見られる方が好ましいので

できればアイコンそれぞれを変更できる機能があると嬉しいのですが

残念ながら、THE THORには

アイコンを変更する機能がありませんので

その辺の融通が効かないのは少し残念です。

とは言え、レビューボックスの画像も

アイコンを変えるだけで若干印象は変わりますので

ぜひお気に入りのアイコン画像を探し

あなたのサイトに合う画像をぜひ登録して

変更してみてくださいね。

プリセットパーツをカスタマイズする方法まとめ

今回はTHE THORに実装されている「プリセットパーツ」を

CSSでカスタマイズする方法について解説致しました。

THE THORは2018年10月にリリースされたテーマなので

リリースから1年が過ぎ、だいぶ利用者も増えてきました。

ですが、今回解説させていただいた

「プリセットパーツ」を活かせている方は

あまり多くない印象を受けます。

だからこそ、私はより多くのTHORユーザーに

この便利なプリセットパーツやタグ機能を

活かして欲しいと思っています。

とは言え、正直、私はデザインが今一つということもあり

使いにくい印象がありましたので

少しでも見た目が整い、ネットユーザーに好印象を与えられる

プリセットパーツにできないかとカスタマイズを試みました。

そういう意味では、私と同じように

「確かに機能は良いんだけど、見た目が…」と

不安を持っているあなたに私の記事が役立ってくれると嬉しいです。

THE THORに関しては、最近、過剰評価されすぎだと

批判をしている記事も出てきましたが

それでも私がTHORユーザーとして言えることは、

使い方や使う人次第でどんなテーマでも

良くも悪くもなるということ。

私は正直、どのテーマを使っても

デザインにこだわりがある分、デフォルトだけのデザインでは

満足できない性分なので（笑）

例え、他の人が気にしない部分であっても

やはりデザインというのはカスタマイズしたくなります。

なので、こうして様々なカスタマイズ記事を書いているわけですが

1人でも多くの人がデザインにこだわりを持ち

より多くのネットユーザーの心に響く

サイト運営をしていただければと思いますので

私がまとめたカスタマイズ記事を

あなたなりに上手くアレンジしていただけると嬉しいです＾＾

最後までお読みいただきありがとうございました！