WPBeginnerを立ち上げたとき、サイドバーが訪問者とつながる上でどれほど価値があるかをすぐに実感しました。
サイドバーに画像を使用し始めたところ、より視覚的に魅力的になり、その結果は印象的でした。
画像は、無料コースの宣伝、クーポン取引の強調表示、人気記事の紹介、読者をさまざまな記事タイプやツールキットに誘導するのに役立ちました。
いくつかの視覚的な工夫だけで、サイドバーはエンゲージメントとクリックを促進するサイトの最も効果的な部分の1つになりました。
このガイドでは、使用しているテーマや技術的な経験に関係なく、WordPressサイトのサイドバーウィジェットに簡単に画像を追加する方法を説明します。
💡クイックアンサー：WordPressサイドバーに画像を追加する方法
ほとんどのユーザーにとって、サイドバーに画像を追加する最も速い方法は、WordPressのデフォルトブロックを使用することです。
- ダッシュボードで外観 » ウィジェットに移動します。
- サイドバーエリアを見つけて、プラス（+）追加ブロックボタンをクリックします。
- 画像ブロックを検索して選択します。
- 写真をアップロードし、更新をクリックして変更を保存します。
WordPressサイドバーに画像を追加する理由
画像を追加することは、WordPressのサイドバーに、ウェブサイトの視覚的な魅力と機能を大幅に向上させることができます。
画像はプレーンテキストよりも早く注意を引きます。これにより、重要なガイド、プロモーション、またはリソースを効果的に強調できます。
デザイン性の高いサイドバーは、ユーザーエクスペリエンスも向上させます。これにより、サイト滞在時間の延長や直帰率の低下につながる可能性があります。
とはいえ、WordPress のサイドバーに簡単に画像を追加する方法を見ていきましょう。
下のリンクをクリックするだけで、お好みのセクションにジャンプできます。
オプション1：WordPress画像ウィジェットブロックの使用
注意：このチュートリアルは、標準の外観 » ウィジェット画面を使用するクラシックテーマに適用されます。ブロックテーマ（Twenty Twenty-Fourなど）を使用している場合は、サイドバーを変更するために外観 » エディターに移動する必要があります。
デフォルトの画像ブロックを使用して、サイトのサイドバーに写真を追加できます。
ウィジェットエリアは現在、投稿やページで見られるのと同じブロックベースのエディターを使用しています。ブロックを使用して、フォーム、関連記事、画像、その他の要素を簡単に追加できます。
まず、WordPressダッシュボードから外観 » ウィジェットページにアクセスする必要があります。その後、単に「+」ボタンをクリックして画像ブロックを追加します。
次に、3つの方法でウィジェットブロックに画像を追加できます。
例えば、画像をアップロードしたり、WordPressのメディアライブラリから既存の画像を選択したり、URLから画像を挿入したりできます。
ブロック設定では、スタイルと画像サイズを変更するオプションが表示されます。
ここで代替テキスト（Alt Text）を追加することも重要です。これは、スクリーンリーダーが画像を理解するのに役立ち、SEOランキングを向上させます。
完了したら、「更新」ボタンをクリックすることを忘れないでください。
次に、あなたのウェブサイトにアクセスして、サイドバーに画像が表示されていることを確認できます。
🔎 画像をよりインタラクティブにしたいですか？ 画像にホットスポットを追加して、ビジュアルの特定の特徴を強調してみてください！
オプション2：画像ウィジェットプラグインを使用する
プラグインを使用して画像を挿入する別の方法もあります。
特定のレガシーインターフェイスが必要な場合や、デフォルトのブロックエディターに慣れていない場合は、この方法を好むかもしれません。
まず、Image Widget プラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化したら、外観 » ウィジェットページに移動して、「画像ウィジェット」ブロックを追加するだけです。
次に、「画像を選択」ボタンをクリックして、画像をアップロードするか、メディアライブラリから選択します。
その後、「ウィジェットに挿入」ボタンをクリックすると、ウィジェット設定の下に画像のプレビューが表示されます。
タイトルや代替テキスト、リンク、そして画像のキャプションを追加できます。
利用可能なオプションのリストから画像サイズを選択したり、配置を編集したりすることもできます。
満足したら、更新ボタンをクリックして画像ウィジェットを保存するだけです。これで完了です。ウェブサイトにアクセスすると、サイドバーに画像が表示されているのが確認できます。
オプション3：画像ギャラリーウィジェットを使用する
複数の画像を表示したい場合は、画像ウィジェットの代わりにギャラリーウィジェットを使用できます。
再度、外観 » ウィジェットページに移動し、「ギャラリー」オプションをクリックしてください。
ここからギャラリー内の画像をカスタマイズできます。例えば、画像の角を丸くすることができます。
ギャラリーの外観に満足したら、「更新」をクリックするだけです。
より多くのカスタマイズオプションが必要な場合は、Envira Gallery のような画像ギャラリープラグインの使用をお勧めします。
デフォルトのウィジェットにはない、モバイルレスポンシブ機能、ライトボックス機能、最適化された速度を提供します。画像をウォーターマークで保護することもできます。
詳細については、WordPressでレスポンシブな画像ギャラリーを作成する方法に関するガイドをご覧ください。
プラグインをインストールしてギャラリーをいくつか設定すると、「Envira Gallery」ウィジェットがブロックベースのウィジェットエディタに表示されます。
次にすることは、表示したいギャラリーを選択するだけです。
ドロップダウンメニューをクリックして実行してください。
完了したら、ギャラリーをさらにカスタマイズできます。たとえば、列レイアウトを変更したり、画像をクリックしたときにライトボックスモードを有効にしたりできます。
満足したら、「更新」をクリックするだけです。
オプション4：クラシックウィジェットエリアに画像を追加する
WordPressの古いバージョンを使用している場合や、ウィジェットブロックを無効にした場合でも、サイドバーに簡単に画像を追加できます。
WordPress管理画面から外観 » ウィジェットページに移動し、「画像」ウィジェットをサイドバーに追加するだけです。以前にウィジェットを使用したことがない場合は、WordPressでウィジェットを追加して使用する方法のガイドをご覧ください。
ウィジェットが展開され、その設定が表示されるようになります。
最初のアクションは、画像ウィジェットにタイトルを追加することです。その後、「画像を追加」ボタンをクリックして続行します。
これによりWordPressのメディアアップローダーが表示され、アップロードボタンをクリックして画像をアップロードするか、以前にアップロードした画像を選択できます。
画像をアップロードした後、右側の列に画像設定が表示されます。ここから、画像のタイトルまたは代替テキストを提供したり、説明を追加したり、サイズを選択したり、リンクを追加したりできます。
完了したら、「ウィジェットに追加」ボタンをクリックして変更を保存できます。ウィジェット設定エリア内に画像のプレビューが表示されます。
画像ウィジェットを保存するには、「保存」ボタンをクリックするのを忘れないでください。
これで、ウェブサイトにアクセスして、WordPress ブログのサイドバーに画像が表示されていることを確認できます。
オプション5：カスタムHTMLウィジェットブロックの使用
場合によっては、標準の画像ブロックがサポートしていない特定のトラッキングクラスや高度な属性を追加する必要がある場合があります。その場合は、ブログのサイドバーに手動で画像を追加する必要があります。
まず、メディア » 新規追加から画像をWordPressサイトにアップロードします。
画像をアップロードした後、画像の横にある「編集」リンクをクリックする必要があります。
WordPress は「メディア編集」ページに移動し、画面の右側に画像ファイルの URL が表示されます。
このURLをコピーして、メモ帳などのテキストエディタに貼り付ける必要があります。
次に、WordPressダッシュボードから外観 » ウィジェット画面に移動する必要があります。
その後、「カスタムHTML」ウィジェットブロックを、画像を表示したいサイドバーに追加できます。
ウィジェットのテキストボックス領域に、このコードを使用して画像を挿入する必要があります。
<img src="Paste The File URL Here" alt="Strawberries" />
imgタグは、HTMLで画像を表示するために使用されます。2つの属性が必要です。最初の属性はsrcで、画像ファイルの場所を定義します。ここに、先ほどコピーしたURLを貼り付けます。
2番目は、画像に代替テキストを提供するために使用されるaltです。最終的な画像タグは次のようになります。
<img src="https://www.example.com/wp-content/uploads/2014/09/strawberries.jpg" alt="Strawberries" />ウィジェットの設定を保存するには「更新」ボタンをクリックし、ウェブサイトをプレビューする必要があります。
WordPressの画像とサイドバーに関するよくある質問
WordPressで画像を挿入したりサイドバーをカスタマイズしたりすることに関して、読者からよく寄せられる質問をいくつかご紹介します。
WordPressで画像を横並びに配置するにはどうすればよいですか？
デフォルトのギャラリーブロックを使用して、画像を横並びに配置できます。ブロックをコンテンツに追加し、メディアライブラリから複数の写真を選択するだけで、WordPressはそれらを自動的にグリッドレイアウトで隣り合わせに配置します。
詳細については、WordPressで画像を簡単に横並びにする方法に関するチュートリアルをご覧ください。
WordPressでサイドバーウィジェットを編集するにはどうすればよいですか？
サイドバーウィジェットを編集するには、WordPressダッシュボードの外観 » ウィジェットに移動します。そこから、既存のブロックをクリックして設定を変更したり、移動したり、ビジュアルエディターを使用して完全に削除したりできます。
WordPressのメニューバーに画像を追加するにはどうすればよいですか？
メニューに画像を追加する最も簡単な方法は、Menu Image のようなプラグインを使用することです。インストールしたら、外観 » メニューに移動すると、各メニュー項目のアイコンまたは写真のアップロードボタンが表示されます。
始めるには、WordPressナビゲーションメニューに画像アイコンを追加する方法に関するガイドを確認してください。
WordPressでサイドバーをデザインする方法は？
コーディングなしでレイアウトを作成するために、SeedProd のようなドラッグ＆ドロップページビルダーを使用してカスタムサイドバーをデザインできます。または、外観 » ウィジェットのブロックエディターを使用して、ブロックをグループ化したり、背景色を追加したり、見出しを視覚的にスタイル設定したりできます。
ウィジェットをカスタマイズできますか？
はい、ほとんどの最新のWordPressウィジェットは完全にカスタマイズ可能なブロックです。エディターでウィジェットをクリックし、右側の設定パネルを使用して色、タイポグラフィ、配置、表示オプションを調整するだけです。
この記事がWordPressサイドバーウィジェットに画像を追加するのに役立ったことを願っています。また、WordPressの最高のドラッグ＆ドロップページビルダーとWordPressでサイドバーの位置を変更する方法に関する専門家のおすすめも確認したいかもしれません。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
Holly
こんにちは、
ホームページにしか画像が表示されず、サイトの他のページには表示されないという問題について質問を送信しました。問題を解決したので、他の人の役に立つかもしれないと思い、解決策を共有したいと思います。カスタムHTMLウィジェットを使用して、コンテンツサイドバーにいくつかの画像を表示しようとしていましたが、表示したいページを具体的に設定したとき（「すべて一致」のチェックを外した状態）、画像はホームページにしか表示されませんでした。
解決策は、それを逆にし、ページが404（または好きなもの）の場合にウィジェットに非表示にするように指示することでした。これで、すべてのページでサイドバーに画像が表示されるようになりました。
ありがとうございます、
ホリー
WPBeginnerサポート
解決策を共有していただきありがとうございます
管理者
Holly
こんにちは、
ホームページでカスタム HTML ウィジェットを機能させることができましたが、他の固定ページに画像が表示されません。設定を「表示する」に構成し、希望するページを選択しましたが、画像はホームページにのみ表示されます。ウィジェットを削除して再追加したり、ページを削除して再追加したりしましたが、うまくいきません。何かアイデアはありますか？
ありがとうございます！
ホリー
WPBeginnerサポート
テーマによっては、配置しているウィジェットエリアがホームページにのみ表示される場合があります。ウィジェットをどこに表示すべきか、テーマのサポートに確認することをお勧めします
管理者
アリス
こんにちは、画像を投稿の左上隅に追加して表示させようとしています。追加してプレビューするとすべて表示されますが、公開すると表示されません。何か考えはありますか？
WPBeginnerサポート
キャッシュをクリアして、それが原因でないことを確認してみてください：https://014.leahstevensyj.workers.dev/beginners-guide/how-to-clear-your-cache-in-wordpress/
また、テーマのサポートに確認すると、変更が必要なテーマ固有の設定がある場合があります。
管理者
キャシー・ターナー
フッターに画像を追加しましたが、デスクトップのChromeでは表示されてすぐに消えます。サイズを小さくしたり、HTMLで画像として追加したりしましたが、問題は解決しません。モバイルのChromeでは問題ありません。デスクトップには広告ブロックはありません。Firefoxでも問題が発生しますが、Microsoft Edgeではすべて正常に動作します。何かアイデアはありますか？
素晴らしい
こんにちは、WordPressでブログを作成しましたが、コンテンツの投稿言語はテルグ語です。テルグ語の投稿のフォントスタイルを変更するにはどうすればよいですか？
ミッキー
こんにちは。
この動画で説明されている両方の方法を試しましたが、サイドバーの画像はまったく表示されません。
この問題をトラブルシューティングする方法について、何かアイデアはありますか？
ありがとうございます！
ドマ
ありがとう、迅速かつ的確でした…非常に役立ちました。
MSラーマン
何もウィジェットにない場合にデフォルトの画像を表示したいのですが、どうすればよいですか？
ありがとう
Krishna
画像をホームページのみに表示するように設定する方法はありますか？
サラ・ウィリアム
ありがとうございます。プロフィール写真をアップロードしようと頑張っていますが、今では簡単にできるようになりました。
アネット
簡単なステップで説明してくれてありがとう！
レベッカ・クラクストン
WordPress関連のランダム検索でいつも上位に来てくれてありがとう。そして、WPを使う一般の人にも役立つ情報もありがとう！
WPBeginnerサポート
こんにちは、レベッカさん。
WPBeginnerがお役に立てて嬉しいです
WordPressのヒントやチュートリアルについては、Twitterでフォローしてください。
管理者
カルティク・マリプーディ
詳細な記事をありがとうございます。ウィジェットセクションに広告を掲載したいと考えています。この方法は私の要件にぴったりです。しかし、一つ問題があります。ブログ投稿ごとに異なる画像を追加するにはどうすればよいですか？そのような方法はありますか？
ミンハズ
素晴らしい投稿、WPBeginnerが大好きです
マーク
ビデオでは「Altタグ」と言っていたと思います。それは正しい用語ではありません – タグのAlt属性になります。
Victoria
このチュートリアルは素晴らしいですが、私のWordPressバージョンではテストされていないと表示されているため、画像ウィジェットをダウンロードすることに懐疑的です。すぐにアップデートは来ますか、それとも私のWordPressバージョンでどのようにテストされますか？
WPBeginnerサポート
Victoria様
WordPressのバージョンでテストされていないプラグインをインストールすべきかについての記事をご覧ください。
管理者
メレッサ
こんにちは、コメントのどこかでそれを見落としていないことを願っていますが、サイドバーの「私について」セクションに四角い画像ではなく、円形または楕円形の画像を入れるにはどうすればよいですか？Divi by Elegant Themesを使用しています。
WPBeginnerサポート
WordPressで丸いGravatar画像を追加する方法についてのガイドをご覧ください。この記事ではGravatarについて説明していますが、CSSはどの画像にも使用できます。
管理者
ロッド
こんにちは、
CSSファイルから「list-style-type: none」を削除し、以下のコードに置き換えたにもかかわらず、サイドバーウィジェットで箇条書きが表示されない理由について、何か考えはありますか？それでも機能しません。
.widget ul li { list-style: circle }
サム
画像をクリック可能なリンクにするにはどうすればよいですか？
ありがとう
デビッド
すごい！その通りです。単なるプレーンな画像には、ビジュアルテキストは手間がかかりすぎます。まさにこれを行うプラグインを探していました。本当にありがとうございます。
モリー
ありがとうございます。まさに私が求めていたもので、とても簡単に説明してくれました！
WPBeginnerサポート
こんにちは、モリーさん、
お役に立てて嬉しいです
WordPressのビデオチュートリアルのために、私たちのYouTubeチャンネルを購読することも検討してください。
管理者
サンドラ・ウィーゼ
ありがとうございます – 完璧に機能します！
WPBeginnerサポート
ヘイ、サンドラ、
お役に立てて嬉しいです
WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読することも検討してください。
管理者
ジャナ
こんにちは。
いくつか質問があります。まず、なぜかWidget Imageプラグインのインストールに苦労しています。以前にもプラグインをインストールしたことはありますが、今回はうまくいかないようです。確かに、私は初心者で、約1年前にプラグインを追加したので、何か忘れているのかもしれません。何かヒントをいただけますか？
しかも、信じられないかもしれませんが、HTMLコーディングを使ってウィジェットに画像を表示させることができました！（私がコーディングできるなんて驚きですが、あなたはそれを非常に簡単で分かりやすくしてくれました）唯一の問題は、画像がフルサイズであることです。サムネイルにしたいのですが、それ用のコードはありますか？もしあれば、プラグインをインストールする必要はありません。
ありがとうございます！
WPBeginnerサポート
画像編集ツールを使用してコンピューター上でより小さな画像を作成し、その画像をアップロードできます。
管理者
ジェームズ・マカリスター
ブログのウィジェットにある画像を更新しようと、これを読みました。
あなたたちは私たちと同じ惑星にいるのですか？書いたことを読んでみてください。指示を理解するには、フィラデルフィアの弁護士とスティーブ・ジョブズを掛け合わせたような人物でなければならないでしょう。
とにかく、画像の変更に戻ります。トリックはどこかにあるはずです。
マービス
この情報、本当にありがとうございます。しかし、投稿やサイドバーにGoogle広告を表示する方法を本当に知りたいです。すでに承認されたAdSenseアカウントを持っており、広告コードも生成しました。しかし、次のステップがわかりません。助けが必要です。
WPBeginnerサポート
AdsanityでWordPressの広告を管理する方法についてのガイドをご覧ください。
管理者
アビー
お話しいただいたことの多くを見落としたか、サイトが変更されたかのどちらかです。おっしゃっている画像ウィジェットは存在しないようですが、オプションとして表示されています。画像をアップロードできるメディアやギャラリーは表示されていません。
では、ファイルをどこにアップロードすれば、フォームの必要な場所に配置して画像ウィジェットを設定するためのURLを取得できますか？
ポール
メディアライブラリにアップロード
ニッキー
ありがとうございます、大変参考になりました。動画はもう少しゆっくりでもよかったかもしれません
ルーク
ヘルプをありがとう！画像ウィジェットプラグインを使用する方がはるかに簡単です。
マンモハン
それは私にとって本当に役立ちます…この投稿をありがとうございます。
しかし、質問があります
エリカ
こんにちは。サイドバーに画像を表示する方法はわかっていますが、スペースを取りすぎるため、ここではクリックして進むギャラリーを作成しようとしています。クリックして進むための小さなボックスは表示されますが、画像は何も表示されません。自動スライドショーもできましたが、非常に気が散るのでそれは望んでいません。次の画像に進むためにクリックするフォトギャラリーだけが必要なのですが、ここで修正方法が見つかりません。
WPBeginnerサポート
EnviraでレスポンシブWordPress画像ギャラリーを簡単に作成する方法についてのガイドをご覧ください。
管理者
ジュリア
こんにちは、
画像ウィジェットの追加に問題が発生しています。新しいウィジェットを追加しようとすると（削除した後も）、変更が保存されず、ページが読み込み停止し、サイト（管理画面と通常表示）にアクセスしようとするとサーバーに接続できないというメッセージが表示されます。つまり、サイトがダウンしている状態です。以前、コンピューターを再起動し、アップデートをインストールしたところ、一度は解決しましたが、再びウィジェットを追加しようとすると同じ問題が発生しました。今回は再起動しても解決しません！
お願いします！本当に感謝します！
事前に感謝します！
グレゴール・イーガン
こんにちは、ありがとうございます、うまくいきました。質問があります。すべてのページに同じ画像を表示したくありません。特定のページに制限するにはどうすればよいですか？そうすれば、後続のページに別の画像を使用できます。
よろしくお願いいたします。
グレゴール
WPBeginnerスタッフ
ありがとう、リーさん。対応中です。
リー
ありがとうございます。ビデオは役立ちますが、会話が非常に速いため、一時停止、巻き戻し、一時停止、一時停止を何度も繰り返す必要がありました。私たちの中にはWordPressの絶対的な初心者もいることをご理解ください。素晴らしい教材をありがとうございます…しかし、もっとゆっくりだとより役立ちます。
シェリル・アンダーソン
ウィジェットに画像は表示されていますが、そのウィジェットをオプトインフォームに紐付ける方法を知りたいです。コードを追加するにはどうすればよいですか？
スルタン・アヤズ
画像ウィジェットというアイデアは非常に新しく、WordPressサイトに画像を追加するのに非常に役立ちます。非常に役立つ記事です。
フィオナ
これを学びたいと思っていました。ちょうど良いタイミングです。ありがとうございます！
チュムブルンネン
もう1つの良い方法は、テキストウィジェットを使用することですが、TinyMCEエディター（投稿に使用されるようなもの）を使用します。それ用のプラグインがあります（実際には複数あります）：https://wordpress.org/plugins/black-studio-tinymce-widget/