無料のWordPress神テーマ「Luxeritas」の背景をグラデーションにカスタマイズする

この記事は別ブログでの無料テーマ「Luxeritas」を用いたカスタマイズ記事です。当ブログは「Cocoon」を使用しており、記事内容は反映されておりません。

背景をグラデーションにしたい!

こんにちは(2018/10/6)

「Luxeritas」はカスタマイズ可能な項目が非常に多く、知識がないユーザーでも好みのデザインに変更しやすいです。本当に凄いテーマです
m(_ _)m 崇 拝

先日、秋が深まってきたので背景を秋らしいグラデーションにしてみようとすると…デフォルトのカスタマイズ項目では変更できないようでした(自分の調査不足かもしれませんが…)

そこで、子テーマにCSSを追加してグラデーションを設定してみました。

(グラデーションのみ再現)

以下のCSSを子テーマにコピペすればOK

[su_spoiler title=”CSSを表示” style=”fancy” icon=”chevron-circle” class=”std no-trn GMN”]

/*背景をグラデーション*/
body {
background: linear-gradient(90deg,#fbab73,#fdea8e);
}

[/su_spoiler]

最初の「90deg」というのはグラデーションの方向です。

上に向かうのを0degにして時計回りに指定します

本当は斜めにグラデーションをかけようと思ったのですが、縦方向の処理が面倒くさいので、単純にヨコ向きのグラデーションになっています。

(スクロールしてみるページの高さ全体にグラデーションがかかってしまう。それを外す指定をするとiphoneできちんと見えないらしい。)

が、後述するヘッダーグラデーションのおかげで目の錯覚で斜めっぽく見えなくもありません
よね?
( ・Θ・)

ヘッダーの背景もグラデーション

ついでなので、ヘッダーの背景もグラデーションにしてみました。

(グラデーションのみ再現)

以下のCSSを子テーマにコピペすればOK

[su_spoiler title=”CSSを表示” style=”fancy” icon=”chevron-circle” class=”std no-trn GMN”]

/*ヘッダーの背景をグラデーションに*/
#head-in {
background: linear-gradient(150deg,#ff5b5b,#f1a556 25%,#fff798);
}

[/su_spoiler]

これも方向を指定しています。こちらは斜め(右下)にグラデーションをかけています。

こちらの斜めグラデーションのおかげで背景も斜めっぽく見える
Σ(゚◇゚;)!!

ことに試行錯誤中に気づきました
(^_^;)

キャッチフレーズの色を変更

ヘッダー背景を変更したのに伴って、キャッチフレーズの色を変更しようとしたら

これもカスタマイズ項目に見当たらなかった(調査不足だったら、作者様ごめんなさい)ので、CSSで変更しました

以下のCSSを子テーマにコピペすればOK

[su_spoiler title=”CSSを表示” style=”fancy” icon=”chevron-circle” class=”std no-trn GMN”]

/*キャッチフレーズの色変更*/
.desc {color:#77522b;
}

[/su_spoiler]

メニューをグラデーションにしたい!

のですが、まだやり方がよく分かりません(汗)

管理人はhtmlとcssをきちんと勉強していないので(恥)

デベロッパーツールで数値を変えながらググったり小手先のコピペだけでカスタマイズしているだけで

目的の項目を特定したりが出来ないのですね…
(・ω・;)

まあ、そのうち偶然発見できるかwebに情報が出てくるのを待とうと思います
(+_+)

タイトルとURLをコピーしました