【WordPress】サイドバーにリンク付き画像を表示する方法

記事内に商品プロモーションを含む場合があります

今回は、ブログのサイドバーにリンク付き画像を設定する方法をご紹介します。

完成イメージは以下のような形です。
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つだけ表示する場合(画像ウィジェット)

1.ウィジェットページを開く

管理画面から外観>ウィジェットに進み、「画像」ウィジェットを開きます。

2. 画像ウィジェットを追加・移動する

「サイドバー」(画像を表示したい場所)を選択して[ウィジェットを追加]します。

ウィジェットはドラッグ&ドロップで移動できますので、お好みの位置に移動しましょう。

3. タイトルを入力する

見出しとなる「タイトル」を入力します。
タイトルが不要の場合は空欄でも問題ありません。

4. 画像をアップロードする

[画像を追加]から画像をアップロードします。

画像が挿入されました。

5. リンクを設定する

「リンク先」に飛び先のURLを入力して[保存]します。

リンク先を別タブで開く場合は、[画像を編集]から画像詳細を開き、「リンクを新しいタブで開く」にチェックして[更新]します。

最後にサイトの表示とリンクを確認して設定完了です。

まとめ

今回はサイドバーにリンク付き画像を表示する方法を解説しました。

WordPress5.8から導入された「ブロックウィジェット」での設定方法は別の記事でご紹介しますね。

この記事で紹介した方法を試してみたけれど、うまくいかない…。そんな時は、Dressingのウェブサポートを活用してみませんか?

WordPressのお悩みに経験豊富な専門スタッフが対応します。設定方法のご説明から、代行設定まで柔軟に承ります。

ホームページ運営でお困りの際は、ぜひDressingにご相談ください。

PR