ワードプレスでサイド（ウィジェット）の画像にＵＲＬを貼ってリンクさせる方法

ホーム
SNS, ブログ
ワードプレスでサイド（ウィジェット）の画像にＵＲＬを貼ってリンクさせる方法

SNS

ワードプレスでサイド（ウィジェット）の画像にＵＲＬを貼ってリンクさせる方法

今回は、ワードプレスネタでも。

ＨＴＭＬってなんじゃらほいの自分なんで、
サイドに貼ってある画像にＵＲＬリンクを貼り付けるというのに、
３時間ほど
かかりました。

ネットで調べると解説がいっぱい出ているんですが、
テンプレートと同じようにやっても全然できなくて、
四苦八苦したわけです。

今回は、このやり方を、覚書として書いておきたいと思います。

アイコンクリックでリンク先に行きたい！

イメージはこれですね。
アイコンをクリックしたら指定した先に飛べるってやつ。

これっぽちのものを作るのに３時間かかりました（笑）

今現在、自分と同じように苦戦している方がいたら、
参考にしてみてください。

スポンサードリンク

テンプレート

①<a href=”リンク先URL“>タイトル</a>

②※画像
<img src=”画像URL” width=”200″ heigth=”" alt=”画像名前” title=”画像タイトル” />

③<br/>

このタグを組み合わせて、なんとか表示までこぎつけました。
①は文字とＵＲＬを組み合わせるタグです。
②はネット上にアップロードした画像を表示させるタグです。
③はよく見かけるタグですが段落のタグになります。

①の解説ですが
リンク先ＵＲＬ：ここにリンクさせたいＵＲＬを貼り付けます。
タイトル：リンク先の名前や「ここをクリック」みたいなことを書くスペースです。

　
　
②の解説ですが
画像ＵＲＬ：はワードプレスのメディアからアップしたＵＲＬをここに入力します。

　

画像名前：画像検索などされたときのキーワードになる名前です。表上には出てきません。
画像タイトル：画像タイトルはカーソルアイコンに合わせたときに浮き上がってくる文字です。

この１と２を組み合わせて、
アイコンクリックでリンク先に飛ぶタグを作りました。

このタグを３個作って、ひとつの枠に３個のアイコンを並べることに成功しました♪

どうしても表示されない

ただどうしてもこのタグを駆使しても、
丁寧に動画で解説しているのを見ても、
表示されない！

ここで悩みに悩んで３時間！

ついに表示できるようになりました！

ちなみにタグはこんな感じです。

赤字やリンク設定になっているところが指定したＵＲＬ先で、
青字が画像のリンクになります。

なにで困っていたかというと、
赤字のリンク先を見ていただければ分かると思いますが、
　
　
http://~~
　
　
というのを付けていません。
青字の所も本来はhttp://~~と続きますが、省いています。

どの説明でも普通にhttp://から貼り付けていたので、
何がダメなんだろうってずっと悩んでいましたが、
ここを省くことで解決しました！！

自分のブログのＵＲＬの先頭は
「https://amakasu-net.asia/」
となっていますが、
これを入れたままリンクさせると
「https://amakasu-net.asia/https://amakasu-net.asia/~~」
とかぶってしまい、リンクが繋がらなかったようです。

それと
”リンク先URL“
この名前の分からない記号も消さないといけませんでした。

なので自分のブログ内にある、ブログ記事や画像ＵＲＬはそこを省いて入力しました。
これで表示させることに成功！！

いやー気付くまでにかなり時間がかかりました。

リンクと画像の組み合わせ方

文字リンク<a href=”リンク先URL“>タイトル</a>のタグと
画像表示<img src=”画像URL” width=”200″ heigth=”" alt=”画像名前” title=”画像タイトル” />
を組み合わせて画像からリンク先に飛ぶように作るのですが、
組み合わせ方はかんたんです。

文字リンクのタイトルのところに画像表示タグをそのまま貼り付けて完成です。

<a href=”リンク先URL“><img src=”画像URL” width=”200″ heigth=”" alt=”画像名前” title=”画像タイトル” /></a>
　
　
　
といった具合です。

自分のブログ内にリンクを作るときはhttp://がかぶるところまで省略する。
外部リンクの場合はhttp://からでＯＫ！

それでも表示が上手くいかないときは、リンクと画像を囲んでいる“”この記号も
取ると上手く表示されるかもしれません。

いやー疲れた・・・。