2017-06-10

画像バナー「イラストや写真をクリックすると別のページに飛ぶやり方教えて」

画像バナーの作り方

画像バナーの作り方って一旦分かるとどうってことないですが、知らないと「アレどうやってるんだろ?」ってすごい不思議ですよね。

上記画像は、当サイトのパソコン版HOME画面キャプチャ。

「スギサクさんのサイトにあるイラストや写真をクリックすると、別のページに飛ぶじゃないですか。あれってどうやってるんですか?」

みたいな質問を定期的にもらうので、ブログのネタにさせていただきます。

 

画像バナーをWPサイトに設置する一番簡単な方法

まず画像を作ります。今回であれば(↓)です。

アピール方法について

これは画像編集ソフトで、イラストと文字を組み合わせてるんですね。ただそれだけなのですね。私はイラストが描けないから「素材集」ってのを利用してるんですね。ただそれだけのことなのですね。

で、今日は一番簡単な方法なので「ダッシュボード>投稿>新規追加」に進みます。

以下はワードプレスの場合で説明していますが、無料ブログでも同じようにやればできるんじゃないでしょうか。(たぶん)

画像バナーの作り方WPの場合

投稿ページを「テキスト」にして「メディア追加



画像バナーの作り方WPの場合2

バナーとして使う画像を選択し、リンク先を「カスタムURL」にして、その下の空白ボックスに「リンク先のURL」をペースト。



画像バナーの作り方WPの場合3

投稿ページに画像バナーのHTMLコードが出来上がっているので、全部選択してコピー、使いたい場所(ウィジットのテキストとか)にペースト。以上でこれが出来上がっています。



手芸のスギサクHOMEキャプチャ

ありゃー簡単!ですね。

上記の説明で分からない場合は、どこでつまづいたか教えていただけますと、暇な時に追記させていただきます。

素材集についての質問も定期的にもらうので、また今度記事にさせてもらいますー

 

手芸のスギサク・手作り品のゆるPR部は、休日出掛ける予定なし、家で独り背中丸めて手芸に没頭する女性を応援したがるサイトです。

作家さんとコラボで長く愛される商品開発をすることを、目標としています。

関連するエントリー