はてなブログ リンクの貼り方・方法まとめ

f:id:TomoG:20191020140658p:plain

今回の記事では、はてなブログでリンクを貼る方法についてまとめました。

リンクの貼り方1つで、ブログの回遊率やPV数が違ってきます。なので、まずは簡単なリンクの貼り方を直していくことが始めたいと思います。

はてなブログデフォルト

このはてなブログにデフォルトであるリンクの貼り付け方法は、とても簡単ですが一応ご説明します。

f:id:TomoG:20181231171653p:plain

上図のように記事作成の時、赤枠内のリンクというボタンが存在するので、このボタンを押してください。

f:id:TomoG:20181231171852p:plain

リンクボタンを押すと上図のような画面が出てきます。

一番上のURLの欄に、貼りつけたいリンクを入力してください。その後プレビューを押すと、どの形式でリンクを貼りつけるか設定することができます。

 

記事本文にペーストすると、リンクボタンを押さなくても、この画面にいくことができます。

※ペーストはWIndowsなら初期設定で【Ctrl+V】

追記【2019/10/20】

記事本文中にリンクを直接貼り付けると、URLのみの挿入になります。

なので、URLのみの挿入にしたくないという方はリンクボタンを押してください。

URLのみ

f:id:TomoG:20181231154713p:plain

 上のように、URLだけ貼られている形式です。

これはリンク先がどのような記事なのか分からないため、リンク先に行く人がとても少ないかと思います。

記事タイトルのみ

f:id:TomoG:20181231155815p:plain

上のように記事タイトルが貼られる形式です。

あえてシンプルさを出すために、この記事タイトルを使用する方もいます。

埋め込み

f:id:TomoG:20181231171138p:plain

はてなブログのほとんどの方は、この埋め込み形式を使用しています。

この埋め込み形式は記事タイトルとサムネ画像等々見えて、とても使いやすいのですが、大きいので少し使いにくいところがあります。

文字・画像に埋め込む

文字にリンクを埋め込む

f:id:TomoG:20181231172620p:plain

上図のように、自分の好きな文字、所謂フリーテキストにリンクを埋め込むことができます。

方法として

f:id:TomoG:20181231172705p:plain

記事作成画面で、埋め込みたいテキストを選択してください。

埋め込みたいテキストを選択し、埋め込みたいリンクをコピーした状態でペーストしてください。そうすると

f:id:TomoG:20181231172853p:plain

このような画面になるとので、選択範囲にチェックを入れ、選択した形式でリンクを挿入してください。

そうすると、文字にリンクを埋め込むことができます。

画像にリンクを埋め込む

↓本当にリンクが埋め込まれています。

f:id:TomoG:20181208162915p:plain

私も実際にメインブログで使用している画像にリンクを埋め込む方法です。

f:id:TomoG:20181231174239p:plain

まずは上図のように記事作成画面にて、画像を貼り付けてください。そして、その貼りつけられた画像をクリックして選択してください。

この状態でペーストすると

f:id:TomoG:20181231174443p:plain

上図のような画面が出てきます。ここで、上図の赤枠内のように選択範囲にチェックを入れて、貼りつけると画像にリンクを埋め込むことができます。

この時、利用する画像を軽量化しておくことで読み込み時間を抑えた記事にできます。

カーソルを画像に合わせた時のアイコン変更
f:id:TomoG:20210412172956p:plain
f:id:TomoG:20210412172956p:plain

上記の2つの画像ですが、どちらも画像リンクです。

しかし、カーソルを合わせた時のアイコンが違います。

左は虫眼鏡のような画像にカーソルを合わせた時と同じアイコンに、右はリンクにカーソルを合わせた時と同じアイコンになります。

本記事でご紹介している方法では、左の画像と同じアイコンになると思いますが、右に変更したい場合があると思います。

f:id:TomoG:20210412174556p:plain

画像のHTMLを見てみると、上図のようなソースコードになっていると思います。

その中に上図の赤線のように【class="hatena-fotolife"】があると思うので、これを削除してください。

これで、カーソルを合わせたらリンクのようになります。

カスタマイズして貼る方法

f:id:TomoG:20181231174845p:plain

こちらははてなブログをカスタマイズして、リンクを目立たせる方法です。

方法は下記リンクにあるので、こちらをご覧ください。

www.notitle-weblog.com

YouTubeの動画リンクを貼る方法

YouTubeの動画リンクを張り付ける方法ですが、先述したようにリンク貼り付けボタンを押して動画URLを入れるだけで行えます。

しかし、そこに入れる動画URLによって結果が変わってしまいます。

どのようなものかというと下記のようになります。

youtu.be

 

www.youtube.com

どのような違いか分かりやすくするためスクショしました。

f:id:TomoG:20200116142011p:plain
上図のような形で異なってきます。これは、どの環境でもそうなのかは分かりませんが筆者の環境(Windows10、Google Chrome)で異なっているため対策をしておいた方がいいと思われます。

 

上記の上のリンクだと何の動画が分かりにくく、読者はわざわざその動画リンクを踏んでYouTubeに行き動画を見なくてはいけません。

 

そうはならないよう、その対策について本章ではご紹介していきます。

f:id:TomoG:20200116141409p:plain

律儀な人はYouTubeのリンクを貼り付けるとき、上図のように共有ボタンを押し出てきたURLをコピーすると思います。

この共有からURLをコピーした場合、動画の埋め込みができないようになっています。なので、共有からURLをコピーしないようにしてください。

f:id:TomoG:20200116141548p:plain

代わりに上図のように、検索エンジン上部等に表示されているURLを直接コピーしてください。

このURLを利用することで記事にYouTube動画を埋め込むことができます。

注意点

はてなブログは非常に簡単にリンクを貼り付けることができます。しかし、その反面貼り付けたリンクによりブログへ悪影響が出てくる可能性があります。

そのため、下記の記事でもご紹介していますがHTTPS通信をしているリンクを基本的に貼り付けるようにしておいてください。


以上ではてなブログでの、リンクの貼り方をまとめました。

その他の貼り方は発見次第、順次追加していく予定です。皆さんもリンクの貼り方に気を付けて、回遊率アップを目指してください。

それではお疲れ様でした。

 

↓はてなブログ その他のカスタマイズ

↓本記事を活用したはてなブログのプロフィールの作り方