SNS

ワードプレスでサイド(ウィジェット)の画像にURLを貼ってリンクさせる方法

html

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

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

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

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

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

1

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

これっぽちのものを作るのに3時間かかりました(笑)

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

スポンサードリンク

テンプレート

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

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

③<br/>

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

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

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

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

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

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

どうしても表示されない

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

ここで悩みに悩んで3時間!

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

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

<a href=/sns/2711/><img src=/wp-content/uploads/2015/11/c23958af926c5031e4abdbfad6abbf531.jpg width=”200″ heigth=”" alt=ラインアット” title=”ラインアット” /></a>
<br/>
<a href=https://www.facebook.com/Amakasu.Yutaka><img src=/wp-content/uploads/2015/11/feisubukku1.jpg width=”150″ heigth=”" alt=フェイスブック” title=”フェイスブック”></a>
<br/>
<a href=https://twitter.com/@doriru2210><img src=/wp-content/uploads/2015/11/2f0c145d5ea502b3f018ccada393469a1.jpg width=”150″ heigth=”" alt=ツイッター” title=”ツイッター”></a>

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

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

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

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

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

なので自分のブログ内にある、ブログ記事や画像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://からでOK!

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

いやー疲れた・・・。

各SNSでも情報発信中です!

というワケで各SNSでも情報を発信しています。

特にラインアットでは
ワンツーマンでの質問なども受け付けていますので、
メールだとアドレス知られるの嫌だなという方も
気軽にメッセージいただけるとうれしいです♪

ラインアット”

フェイスブック”

ツイッター”

 

せどりはどう動く?第66回紅白歌合戦出演歌手決定!前のページ

夜の足立区生物園にホタルを見に行ってきました。(光の祭典も同時開催)次のページ

【関連コンテンツ】

関連記事

  1. ネットビジネス

    ネットビジネスの始め方『アフィリエイトってどんなもの?』

     今回は解説していきます。  アフィリエイトとは?…

  2. せどり

    スマホでネットを見る人急増中。このサイトも驚愕の数字が!?

    こんにちは、「ネットビジネスきっかけ作りコンサルタント」…

  3. せどり

    ブログアクセス数600%アップ!?アドセンス・アフィリエイト収入も1年分公開!!

      ※画像はクリックすると拡大表示可能です。(一部原寸大あ…

  4. ネットビジネス

    ワードプレス、1つのドメインで複数のサイトを持つ!マルチサイト化に成功!!

    今回、サイトのボリュームアップを図るため、ワードプレスのブ…

  5. ネットビジネス

    ワードプレスでホームページ作成、画像で簡単解説。

    サーバーのレンタル、ドメインの取得が終わり、あとはワードプレス…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

  1. ネットビジネス

    自分の視野を自分で狭くしない。見方ひとつで人生は大きく変わる。
  2. 子ども

    足立区生物園の金魚展へ行ってきました。
  3. せどり

    せどりの仕入れはバランスよく。利益or回転重視??
  4. ネットビジネス

    やる気が出ない!?こんなことが原因かも。集中力を高める簡単な方法。
  5. 子ども

    日野市立新選組のふるさと歴史館に行ってきました。
PAGE TOP