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の先頭は
http://amakasu-net.asia/」
となっていますが、
これを入れたままリンクさせると
http://amakasu-net.asia/ http://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でも情報を発信しています。

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

ラインアット”

フェイスブック”

ツイッター”

スポンサードリンク


メルマガ