「ワードプレスのサイドバーに、自分で作った画像リンクを設置したいけど、やり方がわからない…」
「アフィリエイトや紹介リンクをもっと目立たせたいけど、自由にデザインできない…」
こんなお悩みはありませんか？
この記事では、ワードプレスのサイドバーに自作の画像とリンクを設置し、さらにキャプション（説明文）を表示する方法を、HTMLコードを使ってわかりやすく解説します。
HTMLを使うことで、自由度の高いカスタマイズが可能になり、あなたのサイトにぴったりのサイドバーが作れるようになります。
例えばチェースのクレジットカードの画像にリファーラルリンクを設置すキャプションを加えることが出来ます。
サイト内の関連記事やまとめ記事への誘導も可能です。
手順 1: ワードプレス(wordpress)のウィジェット画面を開く
- ワードプレス管理画面にログイン
- 左側メニューから 「外観」 → 「ウィジェット」 をクリック
- 「カスタムHTML」ウィジェット をサイドバーエリアに追加
カスタムHTMLをドラッグでブログ用サイドバーへ追加して下さい。
手順 2: HTMLコードを追加する
「カスタムHTML」ウィジェットに以下のコードをコピー＆ペーストしてください。
<div style="text-align: center;">
<a href="https://example.com/referral-link" target="_blank" rel="noopener noreferrer">
<img src="画像のURL" alt="キャプションはここ" style="max-width:100%; height:auto;">
</a>
<p style="font-size: 14px; color: #555; margin-top: 5px;">キャプションはここ</p>
</div>コードの説明
<a href="URL">で画像にリンクを設定（https://example.com/referral-linkを実際のリンクに変更）<img src="画像のURL" alt="キャプションはここ">で画像を表示（画像のURLをWordPressのメディアライブラリから取得したものに変更）<p>タグでキャプションを追加（好きなテキストに変更可能）style="max-width:100%; height:auto;"でレスポンシブ対応
手順 3: 画像のURLとキャプション(説明文)を設定
- 「メディア」→「ライブラリ」 に移動
- アップロードした画像をクリック
- 「ファイルのURL」 をコピーし、上記のHTMLコードの
画像のURL部分に貼り付け
画像の上にカーソルを合わせて右クリックで”Copy image address”でコピーして、先ほどの”画像のURL”へペースト。 - 2個所の
"キャプションはここ"にキャプションを書き込んで下さい。この例では”Chase Credit Card Referral Link”がキャプションです。
手順 4: 保存して確認する
- 「保存」ボタンを押す
- サイトをプレビューし、サイドバーに画像とキャプションが正しく表示されるか確認
- リンクをクリックし、正しいページに移動するかテスト
自作リンク付き画像を追加する方法 まとめ
この方法を使えば、WordPressのサイドバーに自由にカスタマイズしたリンク付き画像を設置できます。デザインをさらに調整したい場合は、<p> タグのフォントサイズや色を変更すると、よりオリジナルなスタイルが作れます。
ぜひ試してみてください！
ワードプレス関連記事
📌ワードプレスでロゴのサイズと位置の変更―追加CSS設定で超簡単
📌ワードプレスで文字色の変更-追加CSSで超簡単
📌ワードプレスで記事タイトルの行間を調整する方法-追加CSSで超簡単-
📌ワードプレス文字サイズと行間を調整する方法-追加CSSで超簡単
📌【HTML初心者向け】アフィリエイトリンク画像を左・中央・右揃えにする方法
📌ワードプレスの子テーマの作り方 – 初心者が最後に辿り着いた方法
📌もしもアフィリエイトどこでもリンクの画像の大きさを調整する方法
📌ワードプレスでアフィリエイトリンクを最適化｜収益を逃さないために
📌ワードプレスのサイドバーに自作リンク付き画像を追加する方法【HTML活用】