はてな用画像URLを取得するブックマークレットを紹介

あなたが毎日検索流入を意識してタイトルや内容を塾考しているのはよく知っています。
ですが、画像はもしかして普通にはてなブログの機能でペタッと貼り付けるだけですか？
それは検索流入を増やしたいならちょっと工夫が必要かもしれませんよ！
（今日は文章が長いです・・・。）

スポンサーリンク

画像のコードを解説

解説に入る前に一言。
理屈云々はいいから結論を！！という人は「ブックマークレットでコードを取得」まで飛んでください。

まず、以下のコードをみてください。

<p><img class="hatena-fotolife"
title="f:id:aqua935:20160303042757j:plain"
src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/aqua935/20160303/20160303042757.jpg"
alt="f:id:aqua935:20160303042757j:plain" /></p>

（ちなみにこれは見たまま編集モードの場合のコードです。）
これは単純にはてなの機能を使って画像を貼り付けた時にできるコードです。

実際は１行ですが、分かりやすくするために改行してあります。
通常画像を貼り付けるとこのようなコードになるんです。
一つ一つ簡単に説明しますね。

順番に解説

img class

まず一行目の「img　class」ですが、「これは画像なんですよ」って伝えるためのコードです。
imgというのはイメージの略ですね。
これがあることで機械が「あ、これは画像を貼り付けているんだな」って分かるわけです。

title

次に二行目の「title」。
これは読んで字のごとく画像のタイトルのことです。
実はこの””の間にある文字がタイトルなんです。
どのブログでも画像の上にマウスを持っていくとこの文字が出てくると思います。
ここを変えればその通りの文字が出てきますよ。
（私の上の画像は出てきませんが、それは後で解説します。）

src

三行目の「src」というのは画像が保管してある場所を示しています。
要はURLです。
ブログにその画像を直接貼り付けているのではなく、画像の保管場所から引っ張ってきているんですね。

alt

最後に「alt」ですが、これはよくalt属性という言葉で言われています。
（まあ、他もtitle属性とか言いますが・・・）
これは画像の説明文なんです。
通常、人が見るブログには画像が表示されますが、機械はコードのままで読み取っています。
その時にこれが何の画像かというのを伝えるためのものなんですね。

SEO的に良くない点

実はこの状態だとSEO的に良くない点が２つあります。
それは、

• 意味のわからない英数字の羅列
• 画像のサイズがわからない

の２つです。
そこを順番に解説しましょう。

意味のわからない英数字の羅列

さて、ここで改めて最初のコードを良く見てみましょう。

<p><img class="hatena-fotolife"
title="f:id:aqua935:20160303042757j:plain"
src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/aqua935/20160303/20160303042757.jpg"
alt="f:id:aqua935:20160303042757j:plain" /></p>

titleとaltが全く同じだということがわかりますでしょうか？
しかも、画像のタイトルだと言っているのに意味のわからない英数字の羅列・・・。
あなたはこのコードをみてどんな画像が貼ってあるかわかりますか？
わかりませんよね！
読み取る機械も同じです。
「なんか良くわからんけどこれは画像なんだな」
となってしまいます。
しかも、titleとaltにはそれぞれ別の役割があるにもかかわらず、全く同じ文字・・・。
「おいおい！この人はhtmlの構造を全然わかってない！」
と思われかねません。
なので、titleとaltは適宜内容を書いてあげた方が機械に優しいんです。
私の場合は両方編集するのは面倒くさいのでtitleは消して、altだけ編集しています。
機械にしてみればaltさえあれば内容がわかりますから。

画像のサイズがわからない

さて、２つ目の良くない点ですが、このコードにはサイズを指定するコードがないんです。
これがなくても問題はないんですが、サイズのコードを入れてないと読み取る時に一瞬「ん？」ってなるそうです。
ちゃんとコードを入れてあげると機械が迷うことなくスムーズに表示してくれるんですね。
読み込み速度を速くするのもSEOには大事ですからね！
私の場合はaltの後に「width=”550″」などと入れています。
これでサイズの指定ができるんです。
この２つをクリアすると機械にも優しい画像の完成です。
これでSEO的にもバッチリ！！

え！？いちいちこんなことやっているの？

最初は本当にいちいちこんなことやっていました。
画像を取り込んだらtitleを消してaltの文字変えてwidthを追加して・・・。

超めんどくさい！！！

しかも、私の場合、下書きは別で書いているので、下書きが終わったら全文コピペして画像を取り込んでからの作業なのでさらに面倒くさかったです。

はじめはコードの並びを辞書登録しておいて画像のURLだけを貼り付けようとしたんですが、ここでさらに問題が！！
srcの中のURLに問題があるんです。
http://の後にcdn-akと入っているんですが、これが画像の読み込み速度を速めてくれる大事な言葉なんですって！
ですが、単純にはてなフォトライフの画像からアドレスコピーをやってもその文字は入ってくれません・・・。
もう、やればやるほどいろんな問題が出てきます・・・。

ですが、それを全て解決してくれる画期的なアイテムを見つけました！

ブックマークレットでコードを取得

なんでこんな画期的なアイテムなのに検索してもなかなか出てこなかったんでしょうか？
この方が全て解決してくれましたよ！

本当にありがとうございます。

使い方もコードの説明も全て解説してあります！

ただし、これは私がやっているようにtitleを消したりはしてくれません。
あくまでも、はてなで取り込んだときと同じコードを取得してくれるだけです。

なので、改良を加えました。
titleは消してaltの中身のみを消し、widthは仮に550と入るようにしました。
それが以下です。

javascript:(function()%7Bvar%20c=/:%5C/%5C//;if(-1!=location.href.search(/http(s)?:%5C/%5C/f.hatena.ne.jp%5C//))%7Bvar%20a=document.getElementById(%22foto-body%22).getElementsByTagName(%22img%22)%5B0%5D;if(null!=a)%7Ba.removeAttribute(%22height%22);a.removeAttribute(%22title%22);a.removeAttribute(%22style%22);a.setAttribute(%22class%22,%22hatena-fotolife%22);a.setAttribute(%22itemprop%22,%22image%22);a.setAttribute(%22alt%22,%22%22);a.setAttribute(%22width%22,%22550%22);var%20b=new%20String,b=b+%22%3Cp%3E%3Cspan%20itemscope%20itemtype=%5C%22http://schema.org/Photograph%5C%22%3E%22+a.outerHTML.replace(c,%22://cdn-ak.%22),b=b+%22%3C/span%3E%3C/p%3E%22;prompt(%22%5Cu306f%5Cu3066%5Cu306a%5Cu30d5%5Cu30a9%5Cu30c8%5Cu30e9%5Cu30a4%5Cu30d5%5Cu304b%5Cu3089HTML%5Cu751f%5Cu6210%22,b)%7D%7D%7D)();

（横に隠れていますが長いのでドラッグで最後までコピーしてください。）
これをブックマークバーなどに置いておけばいつでも使えます。
アドレスをコピーしてブックマークを作ってください。

使い方

使い方はこの作者が解説してくれているので詳細はそちらで。
簡単に書くと
はてなフォトライフに画像をアップする→貼り付けたい画像を表示させる→ブックマークレットをクリックする→出てきたアドレスをコピーする。
の手順です。
これがあれば、下書きを別のソフトで書いている人もそのソフトに貼り付けておけます。
Markdownを使っている人でもhtmlコードが混ざっても問題ないそうなのでこれが使えますよ！
気に入っていただけるとありがたいです。

ちょっと注意が！！

javascriptとか全然わからない私が改良したのでこれで問題ないかは不安です・・・。
ですが、とりあえず表示はちゃんとされているのでいいのかな？って感じです。
心配な人は使用を控えてください。

それと、最初に説明したコードとは違う文字がいろいろ出てきていますが、はてなに取り込むとそれが消えてくれるので問題ないです。

あと、アドレスを作成して貼り付けたあとにaltの中身を自分で入力するのを忘れないように気をつけてください。
そこ忘れたら対策の意味なくなっちゃいますので・・・。

まとめ

何度も登場した「機械」という言葉ですが、これはつまりgoogleさんです。
googleに気に入られて検索上位に上げてもらうための策です。
これをやることでどのくらい効果があるかはわかりません。
ちょっとマシになる程度でしょうか。
でも、やらないよりはいいと思いますよ！

特に他のエディタを使って下書きしている方にオススメします！！
まあ、画像一つにここまでこだわりたいならですけどね（笑）