ブログ

【AFFINGER5】ヘッダーカードを暗くする方法(エラーなし)

2021年1月18日

悩んでいる人
AFFINGERでヘッダーカードを暗くするために、管理画面で設定しましたが、なぜかクリックしてもリンク先に飛べなくなってしまいます。

 

このようなお悩みに回答します。

 

本記事の内容

・リンク先に飛べない方向け
・追加CSSで暗くする方法
・CSSコードはコピペでOK

 

本記事の信頼性
ヒロキタナカ

ヒロキタナカ(@hiroky_info

 

今回は、AFFINGER5のヘッダーカードを、追加CSSで暗くする方法について解説します。

 

【AFFINGER5】ヘッダーカードを暗くする方法

 

ヘッダーカードとは、以下のような部分です。

 

トップページの上部に出ます。

 

当ブログでもヘッダーカードを使用しており、デフォルトだと明るい状態。

 

 

これを暗くすると、以下のようになります。

 

 

これは「AFFINGER5 管理」から設定できますが、なぜかリンク先へ飛ばないという事象が発生。

 

対処法がわからなかったので追加CSSによって同じように暗くした結果、リンク先へ飛べるようになりました。

 

AFFINGER5 管理」を押して「おすすめ記事一覧」へ移動し、「おすすめヘッダーカード」を設定します。

 

 

デザイン欄の「テキストのある背景画像を暗くする」を選択すると、ヘッダーカードは暗くなりますがクリックしてもリンク先へ飛ばないというエラーが発生しました(何度も押すと飛ぶこともあります)。

 

 

原因がわからなかったので、追加CSSで装飾して暗くしたらクリックできるように

 

手順1. デフォルトを選択

 

ヘッダーカードのデザインはデフォルトのままにしておきます。

 

 

手順2. 追加CSSにコードを追記

 

外観」の「カスタマイズ」から「追加CSS」に移動し、下記のコードを追記。

 

.st-cardlink-card-link{ background-color: rgba(0,0,0,.5) }

 

すると、ヘッダーカードの部分が暗くなります。

 

クリックしてリンク先へも飛べるはずです。

 

まとめ

 

今回は、AFFINGER5のヘッダーカードを暗くする方法について解説しました。

 

同じような事象が発生している方の参考になれば幸いです。

 

今回は以上です。

- PR -
ドメインなら:お名前.com
サーバーなら:エックスサーバー
※ Amazonのアソシエイトとして、当メディアは適格販売により収入を得ています。
※ 記事で紹介した商品を購入すると、売上の一部が株式会社アマノートに還元されることがあります。
※ 掲載されている情報は、株式会社アマノートが独自にリサーチした時点のものです。掲載価格に変動がある場合や、記入ミス等の理由により情報が異なる場合がありますので、最新の価格や商品の詳細等については、公式サイト・各ECサイト・販売店・メーカーよりご確認ください。
  • この記事を書いた人
  • 最新記事

-ブログ