THE THORのブログカード・サイトカードの見た目を変更する方法

THORでブログカード/サイトカードのデザインを変更する方法です。「THE THOR（ザ・トール）」は手間をかけずに見栄えのするサイトが作れるWordPress有料テーマです。

THORのブログカード/サイトカードデザイン

THE THORのデフォルトブログカードは、下記のようなデザイン。

グレイの罫線で囲い、画像は右に。そしてサブタイトルも枠線と同じように薄めのグレイです。

薄いグレイは目に留まりづらく、スクロールして飛ばされがち。そのため少し変更したのが下記画像です。サブタイトルのカラーを変えるだけでも結構目立つようになります▼

変更方法

THE THORのブログカード・サイトカード（のサブタイトル）は、このクラスでCSSが指定されています。

• ブログカード　→　.content .blogcard__subtitle
• サイトカード　→　.content .sitecard__subtitle

カスタマイザー＞追加CSSに下記の通り入れるだけです。これはサブタイトルを黒ベースにして文字が白にする、という意味。

変更後の画像をもう一度。サブタイトルがフックになってブログカード自体が目立つようになりました。ここではサブタイトルだけ調整したが、罫線や背景も変更するとなお目立つようにもできます。

THE THORはデフォルトでわりと綺麗なデザインになっているので、いきなりガラッと変えずに値を微調整するのが無難かと思います。次のCSSが適用されているので、一部を変えながら調整しましょう。

CSSを入力するときは、親/子テーマに直書きせずカスタマイザーを使うと変更即プレビューなので効率的。

ブログカードのCSSはこちら▼

サイトカードのCSS▼

まとめ

THE THORは「デフォルトでもそれなりに美麗なデザイン」にできる反面、細かな変更はあえてできないように制限されています。そんなときはCSSで微調整してしまえます。

なお、この記事のクラス(.content .sitecard・・・)でCSSを調整すると、ウィジェット内に「[THE]スタイルテキスト」を配置して記入したブログカードのデザインも一緒に変わるのでご注意ください。