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

この記事では、ブログカード/サイトカードのデザインを変更する方法を紹介します。使っているのは「THE THOR(ザ・トール)」。有料ですが高機能で、時間をかけずに見栄えのするサイトが作れるWordPressテーマです。

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

THE THORのデフォルトでは下記のようなデザインです。

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

薄いグレイは目に留まりづらく、スクロールして飛ばされがちです。外部リンクはクリック=サイトからの離脱なわけで、飛ばされるならそれでもかまわないケースが大半だと思います。しかしながら自己所有の別サイトにリンクを貼ったり、デザインのアクセントとして目立たせたい場合も少なからずあるはず。

 

少し変更したのが下記画像。サブタイトルのカラーを変えるだけでも結構目立つようになります▼

変更方法

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

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

 

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

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

サブタイトルのカラーと文字色のみ変更

 

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

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

ブログカードのCSSはこちら▼ 各CSSの意味については解説しているサイトが多々あるので割愛します。

サイトカードのCSS▼

まとめ

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

 

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

最新情報をチェックしよう!