Hike×Hack

ライフハックや日常に役立つガジェットなどを好物とするかけすけ(@kakesuke02)が書くライフハック系ブログ

「はてなフォトライフ」にアップロードした画像のHTMLコードを簡単に取得できる!便利なブックマークレット「はてなフォトライフ2HTML」の紹介。

20140512062705

 

こんにちは! Hike×Hackのかけすけ( @kakesuke02 )です!

 

私はブログの記事のほぼすべてを、「WindowsLiveWriter(以下WLW)」を使って書いています。別途ダウンロードのプラグインなどを使い、非常に快適な環境を整えているのです。

 

ですが、どこにいっても問題はつきもので。WLWでは、「画像をそのまま貼り付ける」ことができないのです。厳密に言えば、WLWに画像ファイルをペタリと貼り付けても、ネットワークには保存されていないということ。

 

これは言われてみれば当然のことで、その画像ファイルは「自分のパソコンに入ってるだけ」だからです。

 

では、どうすればWLWでもうまく画像を貼り付けることができるのでしょうか。答えは簡単です。

 

1.インターネットにアップロードする。

2.ネット上にあるその画像ファイルを指定する、HTMLコードを貼り付ける。

 

こうすれば、WLW上で画像を貼り付けることもでき、さらにはその記事をネットワークに送信した時にも、しっかり画像が表示されることになります。

 

肝心なのは、「どこに画像をアップロードするか」ということです。ブログサービスなどの環境によって変わりますが、私ははてなブログを使っているため、画像のアップロードは「はてなフォトライフ」に頼るようにしています。

 

つまり、私の画像貼り付け手順は

 

1.はてなフォトライフに画像をアップロードする。

2.アップロードした画像のHTMLコードを取得して、WLWに貼り付ける。

 

ということになります。

 

ここで、1つの疑問が生まれるかと思います。それは、「画像のHTMLコードをどうやって取得しているの?」というお話。

 

説明しましょう。私は、4月の上旬から。画像のHTMLコードを、あるブックマークレットを使うことで簡単に取得しています。

 

そのブックマークレットとは、「はてなフォトライフ2HTML」というもの。本日は、その「はてなフォトライフ2HTML」について、お伝えしようと思います。

 

 

≪1.はてなフォトライフ2HTMLの在り処≫

 

このブックマークレットは、「tarのブログるっ by @tarVolcano」というブログを運営している「tar@メガネ男子」様が作成してくださいました。

 

以下の2つが、ご本人が書いた「はてなフォトライフ2HTML」についての記事です。

 

 

はてなフォトライフの画像ページからHTMLを生成するブックマークレット - tarのブログるっ by @tarVolcanoはてなフォトライフの画像ページからHTMLを生成するブックマークレット - tarのブログるっ by @tarVolcano

 

 

はてなフォトライフ2HTMLブックマークレットの解説をするよ - tarのブログるっ by @tarVolcanoはてなフォトライフ2HTMLブックマークレットの解説をするよ - tarのブログるっ by @tarVolcano

 

 

「はてなフォトライフ2HTML」のブックマークレットは1つ目の記事にあります。

 

 

≪2.はてなフォトライフ2HTMLの使い方≫

 

この記事では、「はてなフォトライフを実際に使うとどんな感じなのか」というのを、手順の画像を踏まえながらお伝えしようと思います。

 

前提として、

 

1.上の記事から、ブックマークレットを取得(ブックマークに登録)している。

2.「はてなフォトライフ」に画像をアップロードしている。

 

この2点が条件となります。

 

*

 

準備はよろしいでしょうか。それでは、まず「はてなフォトライフ」の画像一覧を開きましょう。これまでにアップロードしてきた画像が、下のように表示されると思います。

 

 

20140514062640

 

 

「アップロードしてるはずなのに、画像がない!」という方は、画像が収納されているフォルダが違うのかもしれません。画面の右の方にフォルダ一覧が表示されているので、別のフォルダを参照してみてください。

 

さて、記事に貼り付けたい画像を見つけたら、その画像をクリックして選択してください。すると、下の画像のように、1つの写真が大きく表示されます。

 

 

20140514062641

 

 

ここまできたら、ついにやってまいりました。「はてなフォトライフ2HTML」の出番です。ブックマークに登録してある「はてなフォトライフ2HTML」をクリックしましょう。

 

すると、ブックマークレットが起動して、画像のHTMLコードを取得してくれます。

 

 

20140514062642

 

 

手順はこれにて完了です。

 

ブックマークレットを起動すると自動で全文が選択されているため、いちいち文字列を選択する手間をかけずにコピーすることができます。(些細なことですが、それが非常にありがたい)

 

あとは、あなたが貼り付けたい箇所にこのHTMLコードを貼り付ければ、外部のブログエディタであっても、画像が上手く機能してくれます。(※標準の「貼り付け」ではなく、「HTML形式で貼り付け」です)

 

*

 

以上で、「はてなフォトライフ2HTML」を使う手順は終了です。

 

最後に、この場を借りて、このブックマークレットを作成してくださった「tar@メガネ男子」様に感謝の言葉を述べたいと思います。

 

このブックマークレットによって、WLWを使ってのブログ執筆が快適になりました。便利なブックマークレットをありがとうございます!

 

 

――あなたの旅先案内人 かけすけ( @kakesuke02 )より

 

 

≪まとめ≫

 

■ 「WLWに画像を貼り付ける」では上手くいかない。

■ 「はてなフォトライフ」にアップロードした画像のHTMLコードを貼り付ければOK。

■ 画像のHTMLコードを簡単に取得できる「はてなフォトライフ2HTML」

 

 

関連記事

WindowsLiveWriterでHTMLコードを簡単に貼り付け&反映! WLWプラグイン「コード左衛門」のご紹介! - Hike×Hack

はてなブログでWindowsLiveWriterを使う時に、エラーメッセージ「オブジェクトのインスタンス~~」が出た場合の対処法。 - Hike×Hack

やらかした! これまでの画像をすべて削除してしまったので、新調します。 - Hike×Hack