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

jamesmarkosborne / Pixabay

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]スタイルテキスト」を配置して記入したブログカードのデザインも一緒に変わるのでご注意ください。

0 Shares:
2 comments
  1. 初めまして
    たまに見させたいただいてます
    質問なのですが追加CSSでコメントアウトを使用すると
    ”うまくいかなかったようです”
    と出てしまうのですが何かご存知でしょうか?

    1. 試しにこのサイトで追加CSSにコメントアウトをしてみましたが、問題ないようです。

      そのエラーはレンタルサーバとの絡みで起こることがあるようなので、
      「WAFの設定をオフに」変更してみるとどうでしょう?

      「レンタルサーバ名 + WAF + 解除」で検索すると情報がありそうです。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください


このサイトをご覧の方へ、限定の紹介プログラム

You May Also Like