コードを書かずにWordPressの背景画像を暗くすることができます。数分で完了し、ほとんどの人が予想するよりもはるかに簡単です。
WordPressには、背景画像に透明なカラーオーバーレイを追加できるシンプルな設定が含まれています。これにより、デザインを見せながらもテキストの可読性を保つことができます。
このガイドでは、オプションを見つける場所と調整方法を正確に説明します。これは、他の何も変更せずにサイトのデザインを改善するための最も簡単な方法の1つです。
WordPressの背景画像を暗くするための簡単な手順：
WordPressの背景画像とは？
WordPressの背景画像とは、ウェブサイトのメインコンテンツの後ろに表示される画像のことです。たとえば、すべて behind に背景画像を表示できます。このようになります：
または、サイドバー、フッター、ヘッダーなどの特定のコンテンツ要素の後ろに画像を表示することもできます。
これらの画像はウェブサイトに興味を持たせ、訪問者をコンテンツに引き付け続けるのに役立ちます。また、ビジネスブランディングにも不可欠であり、ユーザーが競合他社とサイトを差別化するのに役立ちます。
WordPressで背景画像を暗くする必要があるのはなぜですか？
場合によっては、背景画像が原因で訪問者がコンテンツを読みにくくなることがあります。この例を見てみましょう：
背景画像が非常に鮮やかなため、テキストが何であるかを見るのはかなり困難です。
しかし、背景画像を暗くすると、コンテンツがより際立ち、訪問者が読みやすくなり、製品やサービスについてさらに学び、潜在的な顧客になることができます。
WordPressの背景画像を暗くする最も簡単な方法？
WordPressの背景画像を暗くするには、透明なカラーオーバーレイを追加するのが最も簡単なオプションです。これにより、画像とコンテンツの間にコントラストが生まれ、すべてが読みやすくなります。
もしSeedProdを使用しているなら、いくつかの簡単な手順でこれができます：
- 背景画像のあるセクションをクリックする
- 設定パネルを開く
- 背景を暗くするスライダーを使用して明るさを調整する
- （オプション）ブランドに合わせてカラーオーバーレイを追加する
CSSやHTMLは必要ありません。リアルタイムで結果をプレビューし、コンテンツをすぐに際立たせることができます。
SeedProdがWordPressの背景画像を暗くする最良の方法である理由
SeedProdは、コーディングを必要としないため、WordPressの背景画像を暗くする最良の方法です。ドラッグアンドドロップのページビルダーが付属しており、ポイントアンドクリックでサイトをカスタマイズできます。
簡単なオーバーレイ機能を使用すると、シンプルなスライダーをドラッグして背景画像を暗くできます。また、カラーオーバーレイを作成し、便利なドロップダウンメニューからオプションを選択して背景画像の配置を変更することもできます。
SeedProdは、WordPressサイトの画像をカスタマイズするのに役立つだけでなく、次のようなこともできます：
- WordPressテーマをゼロから作成する
- あらゆるWooCommerceストアを構築
- コンバージョンするランディングページを作成
- 購読者を管理し、メールリストを成長させる
- 近日公開ページでサイトをプレローンチ
- ウェブサイトをメンテナンスモードにする
- その他多数
結論： SeedProdを使えば、コードなしでWordPressサイトのあらゆる部分を簡単にカスタマイズできます。
コードなしでWordPressの背景画像を暗くする方法
SeedProdを使用して、CSSコードやHTMLなしでWordPressの背景画像を暗くする簡単な手順に従ってください。コードを学ぶよりもはるかに簡単で、素晴らしい結果が得られることをお約束します。
ビデオチュートリアル
ステップ1：SeedProdプラグインをインストールして有効化する
まず、SeedProdのウェブサイトにアクセスし、サブスクリプションレベルを選択する必要があります。高度なテーマ構築機能が含まれているため、 SeedProd Pro をお勧めします。
プランを選択してアカウントを開いたら、ユーザーダッシュボードの ダウンロード セクションに移動し、プラグインをコンピューターにダウンロードします。その際に、後で使用するためにプラグインライセンスキーをコピーしておいてください。
次に、WordPressウェブサイトに移動し、SeedProdプラグインをインストールしてアクティブ化します。これを行ったことがない場合は、 WordPressプラグインのインストール方法 に関するこのガイドに従ってください。
SeedProdをアクティブ化した後、 SeedProd » 設定 ページに移動し、ライセンスキーを関連フィールドに貼り付けます。
「 キーを確認 」ボタンをクリックすると、SeedProdのすべてのPro機能にアクセスできるようになります。
ステップ2：ウェブサイトキットまたはランディングページテンプレートを選択する
WordPressウェブサイトでSeedProdを使用するには、2つの方法があります。次のいずれかを選択できます。
- カスタムWordPressテーマをゼロから作成し、現在のテーマを置き換える
- スタンドアロンのランディングページを作成し、既存のWordPressテーマを維持する
このガイドではカスタムテーマを作成しますが、代わりにランディングページを作成したい場合は、ステップバイステップガイド「 WordPressでランディングページを作成する方法 」に従ってください。
ページの設定が完了したら、このチュートリアルに戻って背景画像を暗くする方法を学習できます。
このチュートリアルではWordPressテーマを作成するため、WordPress管理エリアから SeedProd » テーマビルダー に移動し、「 テーマ 」ボタンをクリックする必要があります。
次の画面には、インスタントWordPressテーマを作成するために使用できる ウェブサイトキット のギャラリーが表示されます。
各キットには、ウェブサイトに必要なすべてのページとテーマテンプレートが含まれています。その後、SeedProdのドラッグアンドドロップページビルダーを使用して各ページをカスタマイズできます。
キットをスクロールして、ビジネスに適したものを見つけ、キットのサムネイルにマウスを重ねてチェックマークアイコンをクリックします。
ウェブサイトキットをインポートすると、新しい WordPressテーマ を構成するパーツのリストが表示されます。いずれかのパーツをカスタマイズするには、「 デザインを編集 」リンクをクリックすると、ビジュアルページビルダーで開き、カスタム背景画像を追加できます。
まず ホームページ のデザインを編集することから始めましょう。
ステップ3：WordPressに背景画像を追加する
SeedProdのページビルダーでテンプレートを開くと、以下のようなレイアウトが表示されます。
左側にはコンテンツを追加するためのブロックとセクションがあり、右側にはウェブサイトキットで使用されている要素のライブプレビューが表示されます。
プレビュー内の任意の要素をクリックすることで、テンプレートを簡単にカスタマイズできます。これにより、その要素の設定とカスタマイズオプションが表示されるパネルが開きます。
また、左側からブロックをページにドラッグして、オプトインフォーム、ソーシャルメディアアイコン、動画、画像、ボタンなどのコンテンツを追加することもできます。
セクションに背景画像を追加するのも簡単です。編集したい領域をクリックし、デフォルトの背景画像を削除します。
その後、コンピューターまたはWordPressメディアライブラリから新しい画像をアップロードできます。
ステップ4：背景画像を暗くするための透明なオーバーレイを追加する
前の例で見たように、使用している背景画像は見出しとのコントラストが十分でなく、読み取りにくくなっています。
これを修正するのは非常に簡単で、数回のクリックで完了します。セクション設定で「背景を暗くする」という見出しを見つけ、見出しが際立つまでスライダーを右にドラッグします。
同じパネルを使用して、背景画像にカラーオーバーレイを追加することもできます。これは、ブランドカラーをウェブデザインにリンクさせ、サイトをより認識しやすくするための優れた方法です。
これを行うには、「オーバーレイカラー」という見出しを見つけ、カラーピッカーをクリックしてカスタムカラーを選択します。色の選択は非常に簡単です。ポイントしてクリックして最適な色を見つけるか、矢印を使用して次の値を入力できます。
- 16進値
- RGBA値
- HSLA値
これは、使用したい色がすでにわかっている場合に最適なソリューションです。
また、次のこともできます。
- 背景画像の配置を調整する
- セクションの背景色を変更する
- 画像ではなくグラデーションを使用する
たとえば、ドロップダウン矢印をクリックすると、背景を次のように配置できます。
- フルスクリーンカバー
- フルスクリーンカバー – 固定
- フルスクリーンコンテナー
- フルスクリーンコンテナー – 固定
- 幅100% 上部
- 幅100% 下部
- 背景繰り返し
- 水平繰り返し 上部
- 水平繰り返し 下部
- 垂直繰り返し 中央
- カスタム位置
カスタム位置オプションを選択すると、より詳細なカスタマイズオプションが開きます。
たとえば、XまたはY位置を変更して画像の特定の部分を表示できます。アタッチメントタイプを固定またはスクロールに変更したり、画像の繰り返し方法を設定したり、背景サイズを変更したりすることもできます。
その結果、背景画像の各領域を調整して、完璧なルックアンドフィールを実現できます。
WordPressの他の部分で背景画像を暗くすることはできますか？
SeedProdで背景画像を暗くする方法がわかったので、この知識をウェブデザインの他の部分に活用できます。
たとえば、行や列に背景画像を追加し、フィルタープロパティを追加して暗くすることで、コンテンツを際立たせることができます。
ブログのサイドバーを背景画像でカスタマイズすることさえできます。これにより、ブログ投稿と比較して見やすくなります。画像をアップロードし、設定をすばやく調整すれば、公開する準備が整います。
ステップ5：変更を公開する
ウェブサイト訪問者に新しい背景画像を表示するには、カスタムSeedProdテーマを有効にする必要があります。これを行うには、SeedProd » Theme Builder に移動し、Enable SeedProd Themeオプションを「Yes」の位置に切り替えます。
これで完了です！テーマをプレビューして、背景オーバーレイが機能していることを確認できます。
新しいホームページの背景画像の例を次に示します。
「会社概要」セクションとサイドバーの背景画像も以下で確認できます。
WordPressの背景画像を暗くすることに関するFAQ
背景画像は素晴らしく見えるが、テキストが読みにくい場合は、それを暗くすることが、ページを変える簡単な修正方法です。
SeedProdで、背景を暗くするスライダーとオプションのオーバーレイカラーを使用して、その方法を示しました。これは、フル幅のヒーロー画像、セクションの背景、またはサイドバーなど、デザインを失うことなくコントラストを高めたい場所に使用できます。
一番良いところは？ CSSやテーマファイルをいじる必要はありません。ドラッグして調整して公開するだけです。
コードに触れることなくサイトをカスタマイズする他の方法をもっと知りたいですか？次にこれらのチュートリアルを確認してください。
- ランディングページのナビゲーションは終わった：その理由は次のとおりです
- WordPressでテキストアニメーションを作成する方法（簡単な手順）
- WordPressウェブサイト向けのカスタムセクション区切りを作成する方法
コードなしでWordPressサイトをカスタマイズするために飛び込みたいですか？
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
