注目キーワード

LION MEDIA ヘッダー画像を大きくしてグラデーションで透過する方法

LION MEDIA ヘッダー画像を大きくしてグラデーションで透過する方法
  1. HOME
  2. WordPress
  3. WordPressテーマ
  4. LION MEDIA ヘッダー画像を大きくしてグラデーションで透過する方法

LIONMEDIAのテーマでヘッダー画像を大きくしてみたので、実装した時の方法です。

ヘッダー画像を大きくしただけでは物足りなかったので、いろいろと試してみた結果ヘッダー画像にグラデーションを使った透過画像？も表現できました。

LIONMEDIAのヘッダー画像を大きくするためにしたことは、LIONMEDIAの追加CSSにCSSコードを追加して少し遊びながらいじってみたくらいです(ホントは何時間も)

 

 

目次

ヘッダー画像大きくするCSSを追加する

 

.singleTitle {
    padding: 300px 0!important;
}
@media only screen and (max-width: 767px) {
    .singleTitle {
        padding: 100px 0!important;
    }
}

.dateList.dateList-singleTitle {
    background-color: inherit;
}
.singleTitle::before {
    background-color: rgba(0, 0, 0, 0.5)!important;
}

 

 

上記をLIONMEDIAの追加CSSに追加します。子テーマのstyle.cssに追加しても大丈夫です。

あっ、ちなみにヘッダー画像が変更されて大きくなるのはトップページは変更になりません。もう少しCSSをいじればできそうな気もしますが、そこまでの知識が私にはないので少し修行しておきます。

まぁ、これだけでヘッダー画像のサイズは大きくできるんですけど、ヘッダー画像が大きくなっただけでは私の好奇心が満たされないので、なんとなく思い浮かんだのが大きなヘッダー画像ならば

更に目立つように仕上げてみたい！

ということで好奇心を満たしていくことにします。

 

LIONMEDIAヘッダー画像の明るさを変更してみる

 

先ずは、目立ち度アップにはならないかもしれないけどヘッダー画像を明るくすると、どうなるのかを試してみます。

 

 

ヘッダー画像のサイズを変更した状態の明るさはこのくらいなので、これをもっと明るく変更。

 

 

明るくしましたが、アイキャッチ画像の目立ちがなくなった気がする…(・д・)ﾁｯ

でも、明るさを調整すればベストヘッダー画像賞10000位くらいには入れそう。

もし、ヘッダー画像の明るさを強くしたい場合は、LIONMEDIAの追加CSSに追加した先ほどの記述の中にある

/*記事TOPアイキャッチの濃さ*/ のbackground-color部分の　rgba⇐(ここの数値)！　カッコ内をいじると変更できます。

やっぱりヘッダー画像の明るさを調整しただけでは、私の好奇心は満たされませんでした…

 

 

Advertisement

 

 

LIONMEDIAヘッダー画像をグラデーションで透過させる

 

 

 

少しここでGoogle師匠で検索して、どんな感じのヘッダー画像だと目立つのかをお伺いしてみると、グラデーションが目立ちそうだな？と思って、とりあえずLIONMEDIAのヘッダー画像をグラデーションにするべく奮闘します。

LIONMEDIAのヘッダー画像は画像を透過させて右にアイキャッチを表示しているのだと思うので、ただグラデーションさせただけだと透過させてる画像が見えなくなってしまう。

どうやって画像を透過させるかに奮闘したのですが、全く知らないCSS知識を駆使して遊んでみましたがLIONMEDIAヘッダー透過画像グラデーション仕様が完成しました。

 

 

 

 

いかがでしょうか？LIONMEDIAのヘッダー画像だけを見る限りでは、目立ち度がアップしたように思います。

私のサイトはブルーを基調としているので⇐(知らないうちに)ここから更にブルーを基調にしてヘッダー画像に透過させてみることに。

 

 

更に、いかがでしょうか？透過性が濃くなってしまった感じです(笑)

LIONMEDIAでヘッダー画像にグラデーションを透過させると、こんな感じになりアイキャッチ画像も見づらくはなっていませんが、なんか微妙な気がする…

 

グラデーション画像に透過性を持たせるCSSを追加する

 

.singleTitle::before {
    background: linear-gradient(-45deg, rgba(246, 255, 0, .8), rgba(255, 0, 161, .8)) fixed, url() fixed;
    background-size: cover;
}

 

ヘッダー画像にグラデーションで画像を透過させたい場合は、追加CSSに追加した中の部分

/*記事TOPアイキャッチの濃さ*/ 　を上記に書き換えました。

 

 

Advertisement

 

 

グラデーション画像にURL画像を使って変更可能

 

 

ヘッダー画像も画像のURLを変更した部分にある url(この中に)カッコの中にいれれば変更できることを発見(何故かウィンナー画像)

グラデーションが透過されて微妙なウィンナーになってくれましたね。

しかし、この場合URL画像を使うとサイトの全記事ヘッダーがウィンナーヘッダー画像になってしまうと思うのでCSS画像URLを入れなければ記事ごとの画像にできるかと思います。

 

まとめ

 

LIONMEDIAのヘッダー画像を大きくして目立たせてから、グラデーションを画像に透過させることで確かに目立つようにはなりましたが、LIONMEDIAにあるベースデザイン設定でメニューバーをブラックにしているためベースデザインをLIGHTに変更すると、ヘッダーのグラデーションもブラックよりは馴染むような気がします。

フッターとヘッダーも同じグラデーションにすれば、いいかんじになってくれるのかなぁ？とは思っていますが、茂そう土のコースターを買いに行きたいので後程、記事にしてみようと思います。

 

LIONMEDIAのヘッダー画像を大きくするときのCSSを参考にさせていただいたリンカイ-デザインさんの記事がとても参考になります。

参考記事　LION MEDIAで記事ページをバイラルメディア風にカスタマイズする方法

 

LIONMEDIAヘッダー・フッターをグラデーションにしてみました

関連記事　LIONMEDIAヘッダーとフッターにグラデーションを施すカスタマイズ

 

皆さんのWordPressライフが楽しくなりますように。

 

WordPressテーマカテゴリの最新記事