白い平屋の家を建てました

~ミサワホーム 蔵がある家~

画像をクリックしたら目的のURLにジャンプ出来る画像リンクの作り方(はてなブログ版)

複数ブログを自由に回れるどこでもドアを作りたい

こんばんは、3つのブログを書いているたよらこです。

それぞれのブログから他のブログに入れるドアをつけたいなぁと思っていました。

その名は画像リンク

サイト作りや記事を書くことに精一杯でなかなか挑戦出来ずにいましたが、一週間ほど前にやっと設置することが出来ました。

予想以上に手間取ったので、備忘録として残しておきたいと思います。

 

画像リンクとは?

画像(写真やイラスト)をクリックすることで、目的のURLにジャンプする機能です。

文字をクリックするよりも、ジャンプ先のイメージが持ちやすいのがメリット。そして何だかオシャレ♪

サブブログを持っていない方も、自己紹介記事へのリンクなどに使えます。


f:id:tayorako:20190412102740j:image

 

HTMLにおけるリンクの記述方法は

①<a href="URL"><img src="画像URL"></a>

 

②<a class="http-image" href="リンク先のURL">

画像のHTML

</a>

の2種類を見つけました。

classとhrefの違いと使い分けについて調べたのですが…じぇんじぇん分かりませんでした(´*ω*`)

はじめは②の記述方式を使っていましたが、この記事を書くために改めて調べると①の記述方式の方が多かったため、差し替えました。

どちらの記述方式でもジャンプは出来ました。

…なんて書くとわたしと同じ初心者の方は混乱すると思うので、①の記述方式に絞って説明します。

 

準備するものは2つ

  • リンクを貼るための画像またはイラスト
  • ジャンプ先のURL

これだけ。

パソコン初心者だから躓いたものの、基本シンプル。なのに汗だくだったわたし。

たくさんある情報を組み合わせてやっと設置することが出来ました。

 

画像リンクの作り方

  • 使いたい画像(イラスト)はてなフォトライフにアップロードします。まずここで、となりました。普段使わないなぁ。矢印の部分をクリックすると飛べました。

    f:id:tayorako:20190412091753j:plain


    アップロードを選んでクリック。使いたい画像を選んでクリックすればアップロード出来ます。
  • アップロードが出来たら、フォルダの編集を選びます。この時に画像サイズを調整します。貼り付けたい大きさに合わせて数字を入れます。色々試した結果150ピクセルにしました。

    f:id:tayorako:20190412101100p:plain


    わたしのリンク画像を見て、もっと小さくしたい場合は数字を小さく、大きくしたい場合は数字を大きく調整して下さい。
  • 調整した画像を選択して「ブログに貼り付ける」というボタンを押すと、その写真のURLが出てきます。

    f:id:tayorako:20190412101134p:plain


    それをどこかにコピーして下さい。わたしはWordを開いて使用しました。
  • URLは庭ブログ用の写真の場合、こーんなに長い。

<a href="http://f.hatena.ne.jp/tayorako/20190411182034"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/tayorako/20190411/20190411182034.png" alt="20190411182034"></a>

  • 使う部分は太文字のところ→https://cdn-ak.f.st-hatena.com/images/fotolife/t/tayorako/20190411/20190411182034.png だけです。ここが分かりづらくて四苦八苦しました。全部を使ったらリンク先がはてなフォトライフになってしまったの。切り取った部分が画像URLになります。
  •  <a href="URL"><img src="画像URL"></a>の緑色部分にはジャンプしたい先のURLを、その後ろに画像URLを入れたらHTMLが完成です。※HTMLとはWebページを作るための最も基本的な言語だそうです。

わたしの庭ブログの場合

<a href=" https://tayorako.hateblo.jp/"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/tayorako/20190411/20190411182034.png" ></a>

これをコピーして貼ったら「https://tayorako.hateblo.jp/ほどほど庭のtayora koffie☕」に飛んじゃうので、ご注意を~!

飛びたい場所と画像のURLを入れて下さいね。

  • 出来上がった画像リンクのHTMLを、ブログのサイドバーに貼りたい場合は管理画面からデザインカスタマイズサイドバーモジュールを追加HTMLという場所をクリックして上で作ったHTMLを入れます。

    f:id:tayorako:20190412101250p:plain


    適用をクリック。最後に変更を保存するを押したら完成です。実際にリンク先にジャンプ出来るか試してみて下さい。
  • 記事の中に入れたい時には、見たまま編集やはてな記法の横にHTML編集があるので、それを開いてコピーしたものを貼ればOKです。こんなふうになります。

平屋ブログ

20190411182013

庭ブログ

20190411182034

保育・子育てブログ

20190411182049

ジャンプした時の感動♡

初心者ならではの達成感!

小さくしているので、画像は悪くなります。それが難点ですね。

サイドバーに入れたものは、スマホだと記事下に載りますよ。

 

貼り付けた画像リンクの横ズレを直したい

貼りつけてジャンプは出来たものの、画像リンクが寄ってしまったのが気になりました。

検索してみると

<DIV align="center">

</DIV> 

で挟めば良いことが分かりました。

<DIV align="center">

<a href="https://tayorako.hateblo.jp/"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/tayorako/20190411/20190411182034.png" ></a>
</DIV> 

こんなふうに。

 

平屋ブログでは寄せたままにしています。

f:id:tayorako:20190412101519p:plain

庭ブログと保育・子育てブログではセンターにして設置しています。

f:id:tayorako:20190412101539p:plain 

昨日までは画像リンクだけにしていたのですが、コン(id:konma08)さんからTwitterでこんなメッセージを頂いて嬉しかったのと
f:id:tayorako:20190412102215j:image

分かりづらかったことが判明したので、サイドバーへの貼り付けにタイトルや説明を加えてみました。

 

before
f:id:tayorako:20190412102226j:image

  ↓

after
f:id:tayorako:20190412102237j:image

コンさーん、どうかな。

分かりやすくなった?

またふらりと遊びに来て下さい♪

 

3つのブログ全てに設置しました。

みなさんも「どれどれ、たまには…」とお気軽にお立ち寄り下さい♪

 

画像リンクを貼りたいけれど、初心者だから難しいかも……と思っている方の参考になったら嬉しいです。

最後までお読み下さり、どうもありがとうございました!

 

 

※追記:違う方法の記事も更新しました。写真がボケずに小さく貼ることが出来ます!

良かったら参考にして下さい(*^^*)/