カスタマイズ

【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から導入された「ブロックウィジェット」での設定方法は別の記事でご紹介しますね。

バナー画像は無料のグラフィックデザインツールCanvaで簡単に作成できますので、ご興味がある方は以下からご覧ください。便利すぎて私も毎日のように使っています。

どうしても設定方法が分からない、代わりに設定して欲しいという時は、Dressingのブログお悩み相談をご利用ください。あなたのご質問にチャットでお答えします。

ブログお悩み相談受付中


Dressingでは、ブログ作成中の疑問やお悩みにチャットを使ってお答えしています。

こんなお悩みありませんか?

  • WordPressが思ったより難しくて挫折しそう
  • 使い方が分からない、なぜか上手くいかない
  • 自分のブログはこのままでいいの?

など、お困りの際はお気軽にご相談ください。

今すぐ解決!