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

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

jamesmarkosborne / Pixabay

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

※現在はTHORから変更してDigiQoleに。

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

QG50112989

たまにアウトプット中。SNSはほぼ放置。誤字脱字・お問い合せがあればこちらからサイト説明

2 Comments

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

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

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

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

Leave a Reply

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

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

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