【Wordpressテーマ】SWELLのメインビジュアルを画像にした時に上部に影を入れる【CSSカスタマイズ】

前提条件

使用テーマ
・SWELL

設定
・管理画面から「外観」→「カスタマイズ」の項目でトップページのメインビジュアルで白っぽい画像もしくは動画を挿入している
・「外観」→「カスタマイズ」の項目でヘッダー設定において「ヘッダーの背景を透明にするかどうか」にチェックを入れている

・上記設定で「見えにくい」という指摘を受ける

そらそうだわなｗｗ
で、ＴＯＰページを固定ページで作成している場合は「カスタムCSS」に以下のＣＳＳを追加
※固定ページではない方は「外観」→「カスタマイズ」→「追加CSS」に追加

.p-mainVisual::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(0deg, transparent 0% 0%, #242424 250%);
    z-index: 1;
}

色や濃さは「linear-gradient」の項目をいじってください。

デメリット

テーマをアップデートしたり、ブロックをカスタマイズするプラグインを入れていると正しく表示されなくなる可能性がある。

ほなまた。