今回は、ブログのサイドバーにリンク付き画像を設定する方法をご紹介します。
完成イメージは以下のような形です。
300×250pxのバナー画像を縦に並べて、それぞれセールスページにリンクしています。
![](https://dressing.works/wp-content/uploads/2021/11/sidebar-img.jpg)
自作の広告バナーや商品画像などををサイドバーに表示する時など、よろしければご活用ください。
ではさっそく解説していきます。
サイドバーにリンク付き画像を表示する方法
![パソコンを操作する女性](https://dressing.works/wp-content/uploads/2021/12/sidebar-widget-min.jpeg)
サイドバーの設定はウィジェットで行います。
0.事前準備
この記事では従来のウィジェットでの設定方法を記載しています。
WordPressのバージョン5.8(2021年8月〜)以降をお使いで、ブロックウィジェットになっている場合は、「Classic Widgets」プラグインを使って従来のウィジェット形式に戻してください。
ブロックウィジェット
![](https://dressing.works/wp-content/uploads/2021/12/block-widget-scaled.jpg)
従来のウィジェット
![](https://dressing.works/wp-content/uploads/2021/12/widget-scaled.jpg)
Classic Widgets をインストール・有効化する方法
管理画面から①プラグイン>新規追加に進み、②検索窓に「Classic Widgets」と入力して③Classic Widgetsをインストール・有効化します。
![](https://dressing.works/wp-content/uploads/2021/12/classic-widgets-scaled.jpg)
1.ウィジェットページを開く
管理画面から外観>ウィジェットに進み、「テキスト」ウィジェットを開きます。
![](https://dressing.works/wp-content/uploads/2021/11/sidebar-img01-1.jpg)
2. テキストウィジェットを追加・移動する
「サイドバー」(画像を表示したい場所)を選択して[ウィジェットを追加]します。
![](https://dressing.works/wp-content/uploads/2021/11/sidebar-img02.jpg)
ウィジェットはドラッグ&ドロップで移動できますので、お好みの位置に移動しましょう。
![](https://dressing.works/wp-content/uploads/2021/11/widget.gif)
3. タイトルを入力する
見出しとなる「タイトル」を入力します。
タイトルが不要の場合は空欄でも問題ありません。
![grid](https://dressing.works/wp-content/uploads/2021/11/sidebar-img03-1.jpg)
4. 画像をアップロードする
「ビジュアル」タブを選択して、[メディアを追加]から画像をアップロードします。
![](https://dressing.works/wp-content/uploads/2021/11/sidebar-img04-1.jpg)
画像が挿入されました。
![](https://dressing.works/wp-content/uploads/2021/11/sidebar-img04-2.jpg)
画像を中央揃えにする場合
画像をクリックすると配置変更ツールが表示されるので、中央揃えを選択します。
(初期設定は左揃えです)
![](https://dressing.works/wp-content/uploads/2021/11/sidebar-img07.jpg)
続けてリンクを設定していきます。
5. リンクを設定する
挿入した①画像をクリックして選択、②リンクアイコンから③飛び先のURLを入力して、④矢印マークで確定します。
![](https://dressing.works/wp-content/uploads/2021/11/sidebar-img05.jpg)
※リンク先を別タブで開く場合は、入力欄の右にある⑤設定マークから「リンクを新しいタブで開く」にチェックを入れて[更新]してください。
![](https://dressing.works/wp-content/uploads/2021/11/sidebar-img06-2.jpg)
これでリンク付き画像を1つ設定することができました。
複数画像を表示する場合
先に挿入した画像の右にカーソルを置いて改行してから、同様の手順で画像とリンクを設定します。
![](https://dressing.works/wp-content/uploads/2021/11/widget2.gif)
6.表示を確認する
全ての画像を設定したらサイトを表示して、画像とリンクが正しく設定できているか確認しましょう。
![](https://dressing.works/wp-content/uploads/2021/11/sidebar-img.jpg)
ここまで、リンク付き画像を複数サイドバーに設定する方法を解説しました。
なお、表示する画像が1つだけの場合は、「画像ウィジェット」でも設定可能です。
左右の位置調整はできませんが、画像1つをより簡単に設定したい場合はこちらがおすすめです。
以下に設定方法をご説明します。
画像を1つだけ表示する場合(画像ウィジェット)
1.ウィジェットページを開く
管理画面から外観>ウィジェットに進み、「画像」ウィジェットを開きます。
![](https://dressing.works/wp-content/uploads/2021/11/sidebar-img2-01.jpg)
2. 画像ウィジェットを追加・移動する
「サイドバー」(画像を表示したい場所)を選択して[ウィジェットを追加]します。
![](https://dressing.works/wp-content/uploads/2021/11/sidebar-img2-02.jpg)
ウィジェットはドラッグ&ドロップで移動できますので、お好みの位置に移動しましょう。
3. タイトルを入力する
見出しとなる「タイトル」を入力します。
タイトルが不要の場合は空欄でも問題ありません。
![grid](https://dressing.works/wp-content/uploads/2021/11/sidebar-img2-03.jpg)
4. 画像をアップロードする
[画像を追加]から画像をアップロードします。
![](https://dressing.works/wp-content/uploads/2021/11/sidebar-img2-04.jpg)
画像が挿入されました。
![](https://dressing.works/wp-content/uploads/2021/11/sidebar-img2-04-2.jpg)
5. リンクを設定する
「リンク先」に飛び先のURLを入力して[保存]します。
![](https://dressing.works/wp-content/uploads/2021/11/sidebar-img2-05.jpg)
※リンク先を別タブで開く場合は、[画像を編集]から画像詳細を開き、「リンクを新しいタブで開く」にチェックして[更新]します。
![](https://dressing.works/wp-content/uploads/2021/11/sidebar-img2-05-2.jpg)
![](https://dressing.works/wp-content/uploads/2021/11/sidebar-img2-05-3.jpg)
最後にサイトの表示とリンクを確認して設定完了です。
まとめ
今回はサイドバーにリンク付き画像を表示する方法を解説しました。
WordPress5.8から導入された「ブロックウィジェット」での設定方法は別の記事でご紹介しますね。
この記事で紹介した方法を試してみたけれど、うまくいかない…。そんな時は、Dressingのウェブサポートを活用してみませんか?
WordPressのお悩みに経験豊富な専門スタッフが対応します。設定方法のご説明から、代行設定まで柔軟に承ります。
ホームページ運営でお困りの際は、ぜひDressingにご相談ください。