ブログを運営しているうえで重要とされているSEO。
このSEOに効果的と言われている一つに、
適切にリンクを貼る
というのがあります。
はてなブログでも簡単にリンクを貼ることができますが、はてな記法においては、画像にリンクを貼るのには少し工夫が必要となります。
なので今回は
「はてな記法」で画像にリンクを貼ってみる
を解説します。
まずは「はてな記法」でリンクを貼る各種方法をおさらい
ブログではSEOのためだけではありませんが、「リンクを貼る」という機会が頻繁にあります。
例えば、
のように文字をクリックすることで対象のURLへリンクを貼ることもできますし、
「はてなブログ」であれば、
こんなリンクが簡単に貼れます。
さらには、
→任天堂スイッチのジョイコンについて書かれている記事にリンクしています
このように適当な写真(画像)をクリックして対象のURLへリンクを貼ることもできます。
しかし、今紹介した3つの方法のうち、画像にリンクを貼るという作業が「はてな記法」だと一工夫必要なので、今回はこの方法をお伝えします。
使用する画像について
何気なく画像を使用しましたが、ここは著作権に注意が必要です。
おもむろに会社のロゴ等を使用するのはNGです。
そのため画像を自作することをおススメします。画像を自作する方法の一つとしてパワーポイントを使用して画像を作成する、をまとめていますので、ご参考まで。
「はてな記法」で画像にリンクを貼ってみる
それでは実際に貼ってみますが、前提として下記までの行程は終わっていると想定して話しを進めたいと思います。
・使用する画像を準備してある(パワーポイントで作成済み、もしくは写真など)
・使用する画像を「はてなフォトライフ」にアップロード済み
・リンク先のURLを準備しておく
仮に今回のデモでは
の画像をクリックすることで
https://www.amazon.co.jp/
(Amazonの公式Hpです↑)
へリンクされるように設定してみたいと思います。
はてなフォトライフを開く
記事編集画面等の右上に下の画像のようなところがあると思いますので、赤矢印で示しているところを選択。
ここを選択することで「はてなフォト」が開かれたかと思います。
「はてなフォト」の画面の右上に「フォルダ編集」がありますのでクリック
すると下記のような画面になると思います。
この画面で使用したい画像にマウスを置くと「選択」「編集」という選択肢が出てくるので、選択にレ点をつけます。
レ点をつけた状態で「ブログに貼り付ける」を選択すると「HTMLタグ」というものが出現します。
※タグの一部を黒塗りにさせていただいています。
このHTMLを全てコピーしましょう！！
こうすることで、下記のようなHTMLをゲットできたはずです。
<a href="http://f.hatena.ne.jp/yakuzari/●●●●"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/yakuzari/●●●●/●●●●.png" alt="●●●●"></a>上記のHTMLに記載されている内容としては、
後半の「img src」以降で指定されている画像をクリックすることで、
前半の「a href」以降で指定されているURLへリンクを貼るというようなイメージです。
つまり、前半の「a href」以降に書かれているURLを、自分がリンクを貼りたいURLに書き換えてあげれば良いのです！！
よって、前半のURLをAmazonのURLに書き換えることで、今回の画像でリンクを貼るという目標が達成されます。
<a href="https://www.amazon.co.jp/"><img src="ｈttps://cdn-ak.f.st-hatena.com/images/fotolife/y/yakuzari/●●●●/●●●●.png" alt="●●●●"></a>ここで出来上がったHTMLを「はてな記法」で記事の挿入したいところにでコピペするだけです！
しっかりと「はてな記法」で反映させるとこんな感じ↓↓になります。
※本当にAmazonにリンクを貼っています。
はてな記法で画像にリンクを貼る方法「まとめ」
はてなブログでは様々な記事の記載方法があり、人それぞれのスタイルに合った記法でブログ生活を楽しんでいるかと思います。
その中でも人気がある(？)「はてな記法」ですが、たまに一工夫しないと出来ないことが出てきます。
今回の画像にリンクを貼るのも、他の記法であれば記事編集画面の左上のアイコン操作だけで出来るはずなのですが、「はてな記法」だとそれが叶いません。
そのため悪戦苦闘されている人が多いとTwitterで目にしましたので、今回まとめてみました。
もしかしたらもっと簡便な方法があるかもしれないので、その時はまた情報をアップしたいと思いますのでお楽しみに！！
ちなみに、「はてな記法」で工夫が必要なことは下の記事でも書いてます。
