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

~こだわりの蔵がある家~

【画像リンク作成方法】写真の中にURLを埋め込みたい!はてなブログ版

画像をクリックすると、URLに飛んでいける画像リンク。

わたしは複数ブログを書いているので、ブログのサイドバーにも設置しています。

そして最近、この方法を使ってプロフィール画像を大きくしました。

すごく便利なので、ぜひご活用ください!

f:id:tayorako:20190502232223j:image

画像リンク方法

画像を貼ります

デスクトップからドロップしても良いですし、写真の投稿機能を使ってもOK。

※ドロップ:貼り付けたい画像を左クリックしたままマウスを移動させ、貼りたい場所に落とす。

 

貼り付けたいURLをコピー

コピーの方法も色々あります。

上部に出ているURLをコピーする。

f:id:tayorako:20190429111121j:plain

タイトルを右クリックしてコピーなど。

f:id:tayorako:20190429111146j:plain


画像にURLを貼り付ける

画像を右クリックで選択して
f:id:tayorako:20190429105328p:plain

リンクをクリックします。

f:id:tayorako:20190429105344j:plain

コピーしておいたURLを貼り付けてプレビューすると、選択範囲・埋め込み・タイトル・URLと出てくるので、選択範囲を選んでリンクを挿入。

f:id:tayorako:20190429105400p:plain

これだけで、画像をクリックするとURLに飛べるようになります。 

f:id:tayorako:20190429102951j:plain

画像がきれいなままで嬉しい✨

 

サイドバーに貼る場合

上の容量で作った画像リンクを、HTML編集画面に切り替えてコピーし、デザイン→カスタマイズ→サイドバー→モジュールを追加→HTMLを選択してコピーしたものを貼り付ければOKでした。←嫁氏さん、合ってます?

f:id:tayorako:20190502230746p:plain

こんなふうに反映されていました!

f:id:tayorako:20190502230726j:plain

写真には予め文字を入れておくのがコツですね。

嫁氏(id:mashley_slt )さんのブログに、この方法を使って内部リンクが貼られています。

f:id:tayorako:20190501142148j:image

こんなふうに!

参考になると思いますので、ぜひご覧下さい。

カスタマイズ、HTMLって奥深い✨ 

また一つ勉強になりました(*^^*)

嫁氏さん、ありがとうございました♡ 

 

☆プロフィール画像を大きくする方法 

www.tayorako-hiraya.com