ブログ

【WordPress】サイドバーに画像を表示させてリンクを追加する方法を紹介!

【WordPress】サイドバーに画像を表示させてリンクを追加する方法を紹介!

質問者
サイドバーに画像を表示させてリンクを追加したいんだけどやり方がわかりません

 

サイドバー 画像 挿入6

サイドバーに画像とはこのようなことです。

 

今回はこの様にサイドバーに画像を表示させる方法に合わせて、リンクの追加方法も紹介していきます!

 

サイドバーへの設定方法

サイドバーへ画像を表示させてリンクを追加するには3つの段階を踏む必要があります。

  1. 画像の追加
  2. 画像+リンクのコード取得
  3. ウェジェットの設定

では、やっていきましょう!

 

画像の追加

サイドバー 画像 挿入

「メディア」→「新規追加」を選択して、サイドバーに表示させたい画像を追加していきます。

 

ポイント

サイドバーへの画像のサイズは300×280をおすすめします!

 

画像とリンクのコード取得

サイドバー 画像 挿入2

「投稿」→「新規追加」を選択して画像を表示させます。

 

画像を表示させたいだけの場合はこのままテキストをクリックしますが、リンクを追加したい場合はこの段階でリンクを追加しておきましょう。

 

サイドバー 画像 挿入7

TinyMCE Advancedというプラグインを使用しているためツールバーが少し違うかもしれませんが、リンク追加/編集をクリックします。

 

リンクさせたいページのURLを入力したら保存して右上にあるテキストをクリックします。

 

サイドバー 画像 挿入3

テキストをクリックするとこのようなコードが出てくるためコピーします。

 

ウェジェットの設定

ここまで来たら残りは先ほどコピーしたコードを使用してウェジェットを設定していきます。

 

サイドバー 画像 挿入4

今回はサイドバートップへ追加していきます。

  1. 「外観」→「ウェジェット」をクリックします。
  2. 00_STINGERカスタムHTMLをクリックします。
  3. サイドバートップを選択してウェジェットを追加をクリックします。

 

サイドバー 画像 挿入5

タイトルを入力して内容に先ほどコピーしたコードを貼り付けます。

 

最後に「保存」をクリックして完了です!

 

【WordPress】サイドバーに画像を表示させてリンクを追加する方法を紹介のまとめ

今回はサイドバーに画像を表示させてリンクを追加する方法を紹介しました!

 

使っているテーマやおすすめのASPなどの画像やリンクを表示するにはサイドバーはもってこいだと思うのでまだ設置していない方は是非やってみてください!

 

では、また次の記事で会いましょう!!

-ブログ

Copyright© kane blog , 2020 All Rights Reserved.