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