LION MEDIA ヘッダー画像やタイトル部の個別記事カスタマイズ

LION MEDIA ヘッダー画像やタイトル部の個別記事カスタマイズ

LION MEDIAを少しオシャレにしたいと思っている方へ、個別記事のヘッダー画像の大きさやタイトル下の情報部を不透明にしたり、アイキャッチの画像の透明度調整などのカスタマイズ方法を解説します。

ここで紹介する方法をアレンジすることで、更に自分好みにカスタマイズできるように解説していきますので、勉強も兼ねてご覧ください。

 


 今回カスタマイズする部分

LION MEDIA ヘッダー画像やタイトル部の個別記事カスタマイズ

 

ヘッダー背景画像サイズを変更

LION MEDIAの特徴の一つである横いっぱいに広がったアイキャッチ画像ですが、この背景画像のサイズを変更できます。俗にいう「バイラルメディア風」にできるのです。

 

 変更前後の比較

LION MEDIA ヘッダー画像やタイトル部の個別記事カスタマイズ

 

CSSの記述

以下のCSSをコピペすることで実装できます。

パソコンとスマホに対応します。(レスポンシブ対応です)

 

 サイズを変更するには

padding: 300px 0!important;

300の値をお好きな数字に変更することで調整できます。

もちろん、数値を大きくすることで大きな画像になります。

 

 iPhoneやスマホの調整は

iPhoneやスマホの画像サイズを変更したくない場合は、上記の部分を削除してください。

スマホで見た場合の画像サイズの調整もパソコンと同じように

padding: 100px 0!important;

100の値を変更します。

 

 CSSを記述するファイルは、子テーマをおすすめします。

 

ヘッダー背景画像の透過度を調整する

ヘッダー背景画像の透過度(透明度)を調整する方法です。

不透明度を変えた3種類のサンプルをご覧ください。

LION MEDIA ヘッダー画像やタイトル部の個別記事カスタマイズ

 

CSSの記述

以下のCSSをコピペすることで実装できます。

 

 不透明度を調整する

不透明度を調整するには以下の部分を変更してください。

background-color: rgba(0,0,0,0.7)!important;

0.7の値を変更します。

 

不透明度の変更は「rgba」で指定します。
R(赤)、G(緑)、B(青)、A(アルファ)で指定します。
メインの色を黒にして、不透明度を70%で調整する場合は、rgba(0,0,0,0.7)
メインの色を白にして、不透明度を30%で調整する場合は、rgba(255,255,255,0.3)
メインの色を赤にして、不透明度を50%で調整する場合は、rgba(255,0,0,0.5)

不透明度(A)は「0〜1」の値を入力します。不透明度30%にしたい時は「0.3」で、不透明度40%の時は「0.4」と入力します。

 

 好きな色のRGBを調べる方法

色見本

 

ヘッダー背景画像グラデーション透過

次は、背景画像をグラデーション透過させる方法です。

背景画像をグラデーション透過させることで、ブログの雰囲気を決まった色合いで統一感を持たせることができます。

LION MEDIAでは、アイキャッチ画像がヘッダーの背景画像に使用されますので、アイキャッチ画像には色々な色を使われるでしょう。

赤色系のアイキャッチであったり、青色系のアイキャッチであったりと様々だと思います。

ブログのイメージカラーが青系だった場合、ヘッダーの背景画像も青系で統一したいと思います。

その場合にカラフルはグラデーションで装飾してみませんか?

 

サンプルをご覧ください。

LION MEDIA ヘッダー画像やタイトル部の個別記事カスタマイズ

 

CSSの記述

色を2種類選び、rgbaで指定します。

 

 色やグラデーション角度の指定の方法

LION MEDIA ヘッダー画像やタイトル部の個別記事カスタマイズ

  • グラデーション角度
  • 1種類目の色
  • 2種類目の色

それぞれ指定します。

 

ヘッダー背景画像を固定する

LION MEDIAでは、アイキャッチ画像がヘッダー背景画像に使われますが、ヘッダーの背景画像を全て統一した画像にしたい場合の方法を説明します。

サンプルをご覧ください。

LION MEDIA ヘッダー画像やタイトル部の個別記事カスタマイズ

アイキャッチとは別の画像を固定で背景画像に指定しました。

 

CSSの記述

今回、グラデーションは黒にしていますが、上のグラデーションのようにrgbaで指定することも可能です。

ヘッダーの背景画像を固定したい場合は、このようにCSSをカスタマイズします。

 

ヘッダータイトル下のブログ情報部分の背景色を変更する

タイトル下のブログ情報を表示する枠の色が真っ白で目立ってしまいます。

タイトル以上に目立ってしまうので、あまり目立たないように背景色を変更する方法です。

変更前後のサンプルをご覧ください。

LION MEDIA ヘッダー画像やタイトル部の個別記事カスタマイズ

サンプルのように白色の背景を黒っぽい背景に変更して、あまり目立たないようにしました。

また、四隅の角が丸くなっている部分も若干角ばったように変更しています。

 

CSSの記述

以下のCSSをコピペすることで実装できます。

上の不透明度で書いているように「rgba」で指定します。

今回の例では、黒の背景で不透明度を55%(0.55)にしています。

また、四隅の角部の丸みですが「border-radius: 10px;」で指定しています。数値を大きくすると丸みが大きくなります。逆に小さい数値にすると角ばった枠になります。

お好きな色で不透明度を調整できますので、お試しください。

 

まとめ

今回は、LION MEDIAのヘッダー部分に関するCSSのカスタマイズ方法をご紹介しました。

他にもカスタマイズできる方法があれば、随時更新していきます。

 

 ブログの更新日を表示する方法

 

この記事が気に入ったら
いいね ! しよう

LION MEDIAカテゴリの最新記事