eco-maman エコママン

主婦が気になるコト・モノを消費者目線で分析するブログ

バナーを貼り付けリンクさせる。WordPressで画像リンク・かんたん設置方法

バナーを貼り付けリンクさせる。WordPressで画像リンク・かんたん設置方法

近頃の私、@カオジロは、バナーやチラシ制作、アイキャッチ画像などのデザイン業務に昼夜どっぷりと浸かっております。おかげさまで色々な方から制作の依頼を受けるようになりました。本当に感謝です。

そんな中、バナーの貼り付け方が分からない。という質問を受けましたので、こちらでも簡単にシェアしたいと思います。

ワードプレスのサイドバーにバナーを設置する方法

バナー 画像 リンク 貼り付け

WordPressでブログやサイト構築を行っている方向けに解説していきます。
サイドバー、こちらにバナーを貼り付ける手順です。

貼り付けたい画像(バナー)をWordPressにアップロードする

まずは、wordpress管理画面の左側ダッシュボードから「投稿→新規追加」をクリックし新規投稿画面を開きます。

バナー 画像 リンク 貼り付け

つぎに、記事投稿画面から「メディアを追加」→「ファイルをアップロード」をクリックし、バナー画像をアップロードします。

バナー 画像 リンク 貼り付け

上のようにドラッグ&ドロップで、表示させたい画像をサーバーにアップロードします。
(またはファイルから指定してアップロードする。)
今回私は、この青いエコママンの問い合わせバナーを設置することにします。

バナー画像のリンク先を設定する

バナー 画像 リンク 貼り付け

画像をアップロードしたら、その画像にチェックが入った状態で、画面右下の「添付ファイルの表示設定」の「リンク先」から「カスタムURL」を選択。
そこにバナー画像をクリックしたときのリンク先URLを入力していきます。

そして、「投稿に挿入」ボタンをクリック。

次に、コピーしたリンク画像ソースをウィジェットに貼り付ける

バナー 画像 リンク 貼り付け

投稿画面に戻ったら、「ビジュアルモード」ではなく「テキストモード」にしてください。これがリンク画像のソースとなります。これを全選択&コピーします。コピーが済んだら、このページ自体はもう必要ありませんので、削除(ゴミ箱へ移動)します。
(記事公開ボタンの左側に「ゴミ箱へ移動」リンクがあるのでそこをクリック。)

バナー 画像 リンク 貼り付け

そして、左側のダッシュボードから「外観」→「ウィジェット」を選択。

バナー 画像 リンク 貼り付け

ウィジェット内から「テキスト」を選び、サイドバー内で設置したい箇所まで持っていき、ドラッグ&ドロップし挿入します。
(お使いのWordPressテーマによってはテキストでなくても表示される場合があります。ソースが入力できるものを選んで挿入してください)

バナー 画像 リンク 貼り付け

先ほどコピーしたリンク画像のソースをこの部分にペーストし、「保存」をクリック。

きちんとリンク出来ているか?思ったように貼れているか?サイトで最終確認しましょう。

バナー 画像 リンク 貼り付け

完成です!

画像をリンクさせるためのソースだけ知りたい方はこちら

今回は、ごくシンプルに初心者さん向けに解説しました。基本を押さえたら、どんどんサイトの導線を整えていきましょう!

それでは。カオジロでした!

エコママン お問い合わせ

Return Top