AFFINGER BLOG

【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のヘッダーカードを暗くする方法について解説しました。

 

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

 

今回は以上です。

  • この記事を書いた人
  • 最新記事

ヒロキタナカ

(株)アマノート代表取締役。ライター(All About、bizSPA!、ビギナーズなど)。SEO・取材・リリース。雨音選書運営(角川『関西ウォーカー』掲載)。オンライン古書店経営。過去にグリーンバードチームリーダー(「渋谷のラジオ」出演など)。横浜市出身の20代後半。一橋大学大学院→IT業界→2年で退職→独立2年目。

-AFFINGER, BLOG

Copyright© ビズラテ , 2021 All Rights Reserved.