WPBeginnerを立ち上げたとき、サイドバーが訪問者とつながる上でどれほど価値があるかをすぐに実感しました。
サイドバーに画像を使用し始めたところ、より視覚的に魅力的になり、その結果は印象的でした。
画像は、無料コースの宣伝、クーポン取引の強調表示、人気記事の紹介、読者をさまざまな記事タイプやツールキットに誘導するのに役立ちました。
いくつかの視覚的な工夫だけで、サイドバーはエンゲージメントとクリックを促進するサイトの最も効果的な部分の1つになりました。
このガイドでは、使用しているテーマや技術的な経験に関係なく、WordPressサイトのサイドバーウィジェットに簡単に画像を追加する方法を説明します。
WordPressサイドバーに画像を追加する理由
WordPressに画像を追加することは、ウェブサイトの視覚的な魅力と機能を大幅に向上させることができます。
単純なテキストとは異なり、画像は人々の注意を効果的に引きつけ、コンテンツへのエンゲージメントを高める可能性があります。これは、訪問者に気づいてほしい重要なガイド、プロモーション、またはリソースを強調するのに役立ちます。
さらに、画像はサイト全体の美観に貢献し、より視覚的に魅力的でユーザーフレンドリーになります。
画像を備えたデザイン性の高いサイドバーは、ユーザーエクスペリエンスを向上させ、サイト滞在時間の延長と直帰率の低下につながります。これにより、ウェブサイトの評判と信頼性も向上します。
とはいえ、WordPress のサイドバーに簡単に画像を追加する方法を見ていきましょう。
下のリンクをクリックするだけで、お好みのセクションにジャンプできます。
- オプション1：WordPress画像ウィジェットブロックの使用
- オプション2：画像ウィジェットプラグインを使用する
- オプション3：画像ギャラリーウィジェットを使用する
- オプション4：クラシックウィジェットエリアに画像を追加する
- オプション5：カスタムHTMLウィジェットブロックの使用
オプション1：WordPress画像ウィジェットブロックの使用
画像ウィジェットブロックを使用して、サイトのサイドバーに画像を追加できます。
ウィジェットブロックエディターは WordPress 5.8 で導入され、WordPress コンテンツエディターを使用する体験を再現しています。さまざまなブロックを使用して、ブロックを使用してウィジェットエリアにフォーム、関連記事、画像、その他の要素を追加できます。
開始するには、WordPressダッシュボードから「外観 » ウィジェット」ページにアクセスする必要があります。その後、「+」ボタンをクリックして、画像ウィジェットブロックを追加するだけです。
次に、3つの方法でウィジェットブロックに画像を追加できます。
例えば、画像をアップロードしたり、WordPressのメディアライブラリから既存の画像を選択したり、URLから画像を挿入したりできます。
ウィジェットブロックエディターでは、スタイルの変更、代替テキストの追加、画像サイズの編集オプションも利用できます。
画像の境界線やその他の高度な設定を変更するための設定があります。
完了したら、「更新」ボタンをクリックすることを忘れないでください。
次に、あなたのウェブサイトにアクセスして、サイドバーに画像が表示されていることを確認できます。
🔎 画像をよりインタラクティブにしたいですか？ 画像にホットスポットを追加して、ビジュアルの特定の機能を強調表示してみてください！ホットスポットの追加
オプション2：画像ウィジェットプラグインを使用する
WordPressサイドバーに画像を追加する別の方法は、プラグインを使用することです。これにより、さらにいくつかのオプションとシンプルなインターフェースが得られ、一部の初心者にとってはデフォルトの「画像」ウィジェットよりも簡単かもしれません。
まず、Image Widgetプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化したら、外観 » ウィジェットページに移動して、「画像ウィジェット」ブロックを追加するだけです。
次に、「画像を選択」ボタンをクリックして、画像をアップロードするか、メディアライブラリから選択します。
その後、「ウィジェットに挿入」ボタンをクリックすると、ウィジェット設定の下に画像のプレビューが表示されます。
タイトルや代替テキスト、リンク、キャプションを画像に追加できます。
利用可能なオプションのリストから画像サイズを選択したり、配置を編集したりすることもできます。
満足したら、更新ボタンをクリックして画像ウィジェットを保存するだけです。これで完了です。ウェブサイトにアクセスすると、サイドバーに画像が表示されているのが確認できます。
オプション3：画像ギャラリーウィジェットを使用する
複数の画像を表示したい場合は、画像ウィジェットの代わりにギャラリーウィジェットを使用できます。
再度、外観 » ウィジェットページに移動し、「ギャラリー」オプションをクリックしてください。
ここからギャラリー内の画像をカスタマイズできます。例えば、画像の角を丸くすることができます。
ギャラリーの外観に満足したら、「更新」をクリックするだけです。
より多くのカスタマイズオプションが必要な場合は、画像ギャラリープラグイン（例：Envira Gallery）の使用をお勧めします。
デフォルトのギャラリーウィジェットにはない、複数のギャラリーテンプレートなど、さらに多くの機能が付属しています。さらに、アルバムを作成したり、画像をウォーターマークで保護したりすることもできます。
詳細については、WordPressでレスポンシブな画像ギャラリーを簡単に作成する方法に関するガイドをご覧ください。WordPressでレスポンシブな画像ギャラリーを簡単に作成する方法。
プラグインをインストールしてギャラリーをいくつか設定すると、「Envira Gallery」ウィジェットがブロックベースのウィジェットエディタに表示されます。
次にすることは、表示したいギャラリーを選択するだけです。
ドロップダウンメニューをクリックして実行してください。
完了したら、ギャラリーをさらにカスタマイズできます。たとえば、列レイアウトを変更したり、画像をクリックしたときにライトボックスモードを有効にしたりできます。
満足したら、「更新」をクリックするだけです。
オプション4：クラシックウィジェットエリアに画像を追加する
WordPressの古いバージョンを使用しているか、ウィジェットブロックを無効にしている場合は、サイドバーに簡単に画像を追加することもできます。
WordPress管理画面から外観 » ウィジェットページに移動し、サイドバーに「画像」ウィジェットを追加するだけです。ウィジェットを初めて使用する場合は、WordPressでウィジェットを追加して使用する方法に関するガイドをご覧ください。
ウィジェットが展開され、その設定が表示されるようになります。
最初のアクションは、画像ウィジェットにタイトルを追加することです。その後、「画像を追加」ボタンをクリックして続行します。
これによりWordPressのメディアアップローダーが表示され、アップロードボタンをクリックして画像をアップロードするか、以前にアップロードした画像を選択できます。
画像をアップロードした後、右側の列に画像設定が表示されます。ここで、画像にタイトルまたはaltテキストを提供したり、説明を追加したり、サイズを選択したり、リンクを追加したりできます。
完了したら、「ウィジェットに追加」ボタンをクリックして変更を保存できます。ウィジェット設定エリア内に画像のプレビューが表示されます。
画像ウィジェットを保存するには、「保存」ボタンをクリックするのを忘れないでください。
これで、ウェブサイトにアクセスして、WordPress ブログのサイドバーに画像が表示されていることを確認できます。
オプション5：カスタムHTMLウィジェットブロックの使用
場合によっては、画像にさらにHTMLコードを追加する必要がある場合があります。デフォルトのテキストウィジェットは非常に基本的なHTMLを許可しますが、高度な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="http://www.example.com/wp-content/uploads/2014/09/strawberries.jpg" alt="Strawberries" />
ウィジェットの設定を保存するには「更新」ボタンをクリックし、ウェブサイトをプレビューする必要があります。
この記事がWordPressサイドバーウィジェットに画像を追加するのに役立ったことを願っています。また、WordPressのベストドラッグ＆ドロップページビルダーとWordPressのサイドバーの位置を変更する方法に関する専門家のおすすめもチェックすることをお勧めします。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Holly
こんにちは、
ホームページにしか画像が表示されず、サイトの他のページには表示されないという問題について質問を送信しました。問題を解決したので、他の人の役に立つかもしれないと思い、解決策を共有したいと思います。カスタムHTMLウィジェットを使用して、コンテンツサイドバーにいくつかの画像を表示しようとしていましたが、表示したいページを具体的に設定したとき（「すべて一致」のチェックを外した状態）、画像はホームページにしか表示されませんでした。
The solution was to reverse it and tell the widget to HIDE if the page was 404 (or whatever you want). Now the images show up on the sidebar of all my pages.
ありがとうございます、
ホリー
WPBeginnerサポート
Thanks for sharing your resolution
管理者
Holly
こんにちは、
ホームページでカスタム HTML ウィジェットを機能させることができましたが、他の固定ページに画像が表示されません。設定を「表示する」に構成し、希望するページを選択しましたが、画像はホームページにのみ表示されます。ウィジェットを削除して再追加したり、ページを削除して再追加したりしましたが、うまくいきません。何かアイデアはありますか？
ありがとうございます！
ホリー
WPBeginnerサポート
Depending on your theme, the widget area you are placing it at may only display on your home page. You would want to check with the theme’s support for where those widgets should show
管理者
アリス
こんにちは、画像を投稿の左上隅に追加して表示させようとしています。追加してプレビューするとすべて表示されますが、公開すると表示されません。何か考えはありますか？
WPBeginnerサポート
キャッシュをクリアして、それが原因でないことを確認することをお勧めします: https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/
また、テーマのサポートに確認すると、テーマ固有の設定を変更する必要がある場合があります
管理者
キャシー・ターナー
フッターに画像を追加しましたが、デスクトップのChromeでは表示されてすぐに消えます。サイズを小さくしたり、HTMLで画像として追加したりしましたが、問題は解決しません。モバイルのChromeでは問題ありません。デスクトップには広告ブロックはありません。Firefoxでも問題が発生しますが、Microsoft Edgeではすべて正常に動作します。何かアイデアはありますか？
harika
こんにちは、WordPressでブログを作成しましたが、コンテンツの投稿言語はテルグ語です。テルグ語の投稿のフォントスタイルを変更するにはどうすればよいですか？
Micky
こんにちは。
この動画で説明されている両方の方法を試しましたが、サイドバーの画像はまったく表示されません。
この問題をトラブルシューティングする方法について、何かアイデアはありますか？
ありがとうございます！
Doma
ありがとう、迅速かつ的確でした…非常に役立ちました。
MS Rahman
何もウィジェットにない場合にデフォルトの画像を表示したいのですが、どうすればよいですか？
ありがとう
Krishna
画像をホームページのみに表示するように設定する方法はありますか？
サラ・ウィリアム
ありがとうございます。プロフィール写真をアップロードしようと頑張っていますが、今では簡単にできるようになりました。
アネット
簡単なステップで説明してくれてありがとう！
レベッカ・クラクストン
WordPress関連のランダム検索でいつも上位に来てくれてありがとう。そして、WPを使う一般の人にも役立つ情報もありがとう！
WPBeginnerサポート
こんにちは、レベッカさん。
We are glad you find WPBeginner helpful
Don’t forget to join us on Twitter for more WordPress tips and tutorials.
管理者
カルティク・マリプーディ
詳細な記事をありがとうございます。ウィジェットセクションに広告を掲載したいと考えています。この方法は私の要件にぴったりです。しかし、一つ問題があります。ブログ投稿ごとに異なる画像を追加するにはどうすればよいですか？そのような方法はありますか？
Minhaz
素晴らしい投稿、WPBeginnerが大好きです
Mark
ビデオでは「Altタグ」と言っていたと思います。それは正しい用語ではありません – タグのAlt属性になります。
Victoria
このチュートリアルは素晴らしいですが、私のWordPressバージョンではテストされていないと表示されているため、画像ウィジェットをダウンロードすることに懐疑的です。すぐにアップデートは来ますか、それとも私のWordPressバージョンでどのようにテストされますか？
WPBeginnerサポート
Victoria様
WordPressのバージョンでテストされていないプラグインをインストールすべきかについては、こちらの記事をご覧ください: WordPressのバージョンでテストされていないプラグインをインストールすべきか。
管理者
melessa
こんにちは、コメントのどこかでそれを見落としていないことを願っていますが、サイドバーの「私について」セクションに四角い画像ではなく、円形または楕円形の画像を入れるにはどうすればよいですか？Divi by Elegant Themesを使用しています。
WPBeginnerサポート
WordPressで丸いGravatar画像を表示する方法については、こちらのガイドをご覧ください: WordPressで丸いGravatar画像を追加する方法。この記事ではGravatarについて説明していますが、CSSはどの画像にも使用できます。
管理者
Rod
こんにちは、
CSSファイルから「list-style-type: none」を削除し、以下のコードに置き換えたにもかかわらず、サイドバーウィジェットで箇条書きが表示されない理由について、何か考えはありますか？それでも機能しません。
.widget ul li { list-style: circle }
サム
画像をクリック可能なリンクにするにはどうすればよいですか？
ありがとう
デビッド
すごい！その通りです。単なるプレーンな画像には、ビジュアルテキストは手間がかかりすぎます。まさにこれを行うプラグインを探していました。本当にありがとうございます。
モリー
ありがとうございます。まさに私が求めていたもので、とても簡単に説明してくれました！
WPBeginnerサポート
こんにちは、モリーさん、
Glad you found it useful
You may also want to subscribe to our YouTube Channel for WordPress video tutorials.
管理者
サンドラ・ウィーゼ
ありがとうございます – 完璧に機能します！
WPBeginnerサポート
ヘイ、サンドラ、
We are glad you found it useful
You may also want to subscribe to our YouTube Channel for WordPress video tutorials.
管理者
Jana
こんにちは。
いくつか質問があります。まず、なぜかWidget Imageプラグインのインストールに苦労しています。以前にもプラグインをインストールしたことはありますが、今回はうまくいかないようです。確かに、私は初心者で、約1年前にプラグインを追加したので、何か忘れているのかもしれません。何かヒントをいただけますか？
しかも、信じられないかもしれませんが、HTMLコーディングを使ってウィジェットに画像を表示させることができました！（私がコーディングできるなんて驚きですが、あなたはそれを非常に簡単で分かりやすくしてくれました）唯一の問題は、画像がフルサイズであることです。サムネイルにしたいのですが、それ用のコードはありますか？もしあれば、プラグインをインストールする必要はありません。
ありがとうございます！
WPBeginnerサポート
画像編集ツールを使用してコンピューター上でより小さな画像を作成し、その画像をアップロードできます。
管理者
ジェームズ・マカリスター
ブログのウィジェットにある画像を更新しようと、これを読みました。
あなたたちは私たちと同じ惑星にいるのですか？書いたことを読んでみてください。指示を理解するには、フィラデルフィアの弁護士とスティーブ・ジョブズを掛け合わせたような人物でなければならないでしょう。
とにかく、画像の変更に戻ります。トリックはどこかにあるはずです。
マービス
この情報、本当にありがとうございます。しかし、投稿やサイドバーにGoogle広告を表示する方法を本当に知りたいです。すでに承認されたAdSenseアカウントを持っており、広告コードも生成しました。しかし、次のステップがわかりません。助けが必要です。
WPBeginnerサポート
WordPressでAdsanityプラグインを使用して広告を管理する方法については、こちらのガイドをご覧ください: AdsanityプラグインでWordPressの広告を管理する方法。
管理者
Abbie
お話しいただいたことの多くを見落としたか、サイトが変更されたかのどちらかです。おっしゃっている画像ウィジェットは存在しないようですが、オプションとして表示されています。画像をアップロードできるメディアやギャラリーは表示されていません。
では、ファイルをどこにアップロードすれば、フォームの必要な場所に配置して画像ウィジェットを設定するためのURLを取得できますか？
ポール
メディアライブラリにアップロード
Nikki
ありがとうございます、大変参考になりました。動画はもう少しゆっくりでもよかったかもしれません
ルーク
ヘルプをありがとう！画像ウィジェットプラグインを使用する方がはるかに簡単です。
マンモハン
それは私にとって本当に役立ちます…この投稿をありがとうございます。
しかし、質問があります
Erica
こんにちは。サイドバーに画像を表示する方法はわかっていますが、スペースを取りすぎるため、ここではクリックして進むギャラリーを作成しようとしています。クリックして進むための小さなボックスは表示されますが、画像は何も表示されません。自動スライドショーもできましたが、非常に気が散るのでそれは望んでいません。次の画像に進むためにクリックするフォトギャラリーだけが必要なのですが、ここで修正方法が見つかりません。
WPBeginnerサポート
こちらのガイドをご覧ください。EnviraでレスポンシブWordPress画像ギャラリーを簡単に作成する方法。
管理者
Giulia
こんにちは、
画像ウィジェットの追加に問題が発生しています。新しいウィジェットを追加しようとすると（削除した後も）、変更が保存されず、ページが読み込み停止し、サイト（管理画面と通常表示）にアクセスしようとするとサーバーに接続できないというメッセージが表示されます。つまり、サイトがダウンしている状態です。以前、コンピューターを再起動し、アップデートをインストールしたところ、一度は解決しましたが、再びウィジェットを追加しようとすると同じ問題が発生しました。今回は再起動しても解決しません！
お願いします！本当に感謝します！
事前に感謝します！
グレゴール・イーガン
こんにちは、ありがとうございます、うまくいきました。質問があります。すべてのページに同じ画像を表示したくありません。特定のページに制限するにはどうすればよいですか？そうすれば、後続のページに別の画像を使用できます。
よろしくお願いいたします。
Gregor
WPBeginnerスタッフ
ありがとう、リーさん。対応中です。
リー
Thank you, the video is helpful but you zip through the dialogue so fast I had to hit pause, rewind pause, pause, repeat….many times. Please realize some of us are ABSOLUTE newbies on WordPress. Thanks for the great material…but slower would be more helpful.
シェリル・アンダーソン
ウィジェットに画像は表示されていますが、そのウィジェットをオプトインフォームに紐付ける方法を知りたいです。コードを追加するにはどうすればよいですか？
Sultan Ayyaz
画像ウィジェットというアイデアは非常に新しく、WordPressサイトに画像を追加するのに非常に役立ちます。非常に役立つ記事です。
Fiona
これを学びたいと思っていました。ちょうど良いタイミングです。ありがとうございます！
chzumbrunnen
もう一つ良い方法は、テキストウィジェットを使用することですが、TinyMCEエディタ（投稿に使用されるようなもの）を使用することです。それ用のプラグインがあります（実際には複数あります）：https://wordpress.org/plugins/black-studio-tinymce-widget/