『LION MEDIA』投稿ページの記事タイトルバックを明るく調整する方法

久しぶりの「LIONテーマ」に関する更新です!

今回、ご紹介するのは「投稿ページの記事タイトルバックを明るく調整する方法」です。

 

ライオンメディアの投稿ページ 記事タイルイメージ

記事タイトルバックとは、上の画像の薄暗い部分のことを指します。

当サイトが今使っているテーマは、『THE・THOR(ザ・トール)』で、LIONテーマの制作会社FITから出ている有料テーマになります。

ちなみに、ザ・トールの場合、タイトル背景画像にかかっているマスクの調整が可能です。(当サイトはブラックメッシュを使用。下の画像参照)

 

ザ・トールの投稿ページ イメージ

 

『LION MEDIA』と比べると、『THE THOR』の方が明るいですよね。

そこで、『LION MEDIA』でも『THE THOR』のように明るく表示できるように、カスタマイズの方法をお伝えします。

『LION MEDIA』投稿ページ・タイトルバックのカスタマイズ方法

まず、記事タイトルの背景が暗いのは以下のようなCSSが設定されているからです。

background-color: rgba(0,0,0,0.75)
background-colorは、背景の色を指定するときに使います。
rgba()は、表示する色を指定するために使います。

RGBAカラーモデルは、RGBカラーモデルのred・green・blueに、alphaが加わったものです。 alphaは色の透明度を表します。

RGBAカラーモデルで色を指定する際には、カンマ( , )区切りにした3つの数値でRGBの色を指定した後に、数値で透明度を指定します。 RGBの色は0-255、または、0%-100%で指定します。透明度は、0(完全に透明)~1(完全に不透明)の数値で指定します。

(引用: RGBAカラーモデルで色を指定する・HTMLクイックリファレンス

 

『LION MEDIA』のrgbaは(0,0,0,0.75)指定されています。1が完全に不透明なので、0.75では透明度は低めですよね。そこで、「0.75」という値を変更すると、透明度が上がるので明るく表示することができるのです。

例えば、「0.75」を「0.10」に変更したい場合、下記のようなコードをカスタマイズ > 追加CSS に記述します。

 

「0.75」と「0.10」を比べてみると一目瞭然! 全然違いますよね!

数値を変更した場合の比較

 

あとは、自分の好みの数値に変更して、明るさを調整してみてくださいね。

 

WordPress無料テーマ『LION MEDIA』『LION BLOG』のFITから、有料テーマがリリース!
公式サイトはこちら

「THE THOR(ザ・トール)」

プラグインなしでSEOにも対応したWordPressのテーマです。初めての方でもサポート付きなので安心です。
デザイン着せ替え機能」を使えば、気に入ったデモサイトのスタイルを、あなたのサイトにワンクリックでコピーできますよ。

お気に入りのスタイルをダウンロードして、「THE THOR ザ・トール」を始めてみませんか?

広告