「はてなフォトライフ」にアップロードした画像のHTMLコードを簡単に取得できる！便利なブックマークレット「はてなフォトライフ2HTML」の紹介。
こんにちは！ Hike×Hackのかけすけ( @kakesuke02 )です！
私はブログの記事のほぼすべてを、「WindowsLiveWriter(以下WLW)」を使って書いています。別途ダウンロードのプラグインなどを使い、非常に快適な環境を整えているのです。
ですが、どこにいっても問題はつきもので。WLWでは、「画像をそのまま貼り付ける」ことができないのです。厳密に言えば、WLWに画像ファイルをペタリと貼り付けても、ネットワークには保存されていないということ。
これは言われてみれば当然のことで、その画像ファイルは「自分のパソコンに入ってるだけ」だからです。
では、どうすればWLWでもうまく画像を貼り付けることができるのでしょうか。答えは簡単です。
１．インターネットにアップロードする。
２．ネット上にあるその画像ファイルを指定する、HTMLコードを貼り付ける。
こうすれば、WLW上で画像を貼り付けることもでき、さらにはその記事をネットワークに送信した時にも、しっかり画像が表示されることになります。
肝心なのは、「どこに画像をアップロードするか」ということです。ブログサービスなどの環境によって変わりますが、私ははてなブログを使っているため、画像のアップロードは「はてなフォトライフ」に頼るようにしています。
つまり、私の画像貼り付け手順は
１．はてなフォトライフに画像をアップロードする。
２．アップロードした画像のHTMLコードを取得して、WLWに貼り付ける。
ということになります。
ここで、１つの疑問が生まれるかと思います。それは、「画像のHTMLコードをどうやって取得しているの？」というお話。
説明しましょう。私は、４月の上旬から。画像のHTMLコードを、あるブックマークレットを使うことで簡単に取得しています。
そのブックマークレットとは、「はてなフォトライフ2HTML」というもの。本日は、その「はてなフォトライフ2HTML」について、お伝えしようと思います。
≪１．はてなフォトライフ2HTMLの在り処≫
このブックマークレットは、「tarのブログるっ by @tarVolcano」というブログを運営している「tar@メガネ男子」様が作成してくださいました。
以下の２つが、ご本人が書いた「はてなフォトライフ2HTML」についての記事です。
「はてなフォトライフ2HTML」のブックマークレットは１つ目の記事にあります。
≪２．はてなフォトライフ2HTMLの使い方≫
この記事では、「はてなフォトライフを実際に使うとどんな感じなのか」というのを、手順の画像を踏まえながらお伝えしようと思います。
前提として、
１．上の記事から、ブックマークレットを取得(ブックマークに登録)している。
２．「はてなフォトライフ」に画像をアップロードしている。
この２点が条件となります。
*
準備はよろしいでしょうか。それでは、まず「はてなフォトライフ」の画像一覧を開きましょう。これまでにアップロードしてきた画像が、下のように表示されると思います。
「アップロードしてるはずなのに、画像がない！」という方は、画像が収納されているフォルダが違うのかもしれません。画面の右の方にフォルダ一覧が表示されているので、別のフォルダを参照してみてください。
さて、記事に貼り付けたい画像を見つけたら、その画像をクリックして選択してください。すると、下の画像のように、１つの写真が大きく表示されます。
ここまできたら、ついにやってまいりました。「はてなフォトライフ2HTML」の出番です。ブックマークに登録してある「はてなフォトライフ2HTML」をクリックしましょう。
すると、ブックマークレットが起動して、画像のHTMLコードを取得してくれます。
手順はこれにて完了です。
ブックマークレットを起動すると自動で全文が選択されているため、いちいち文字列を選択する手間をかけずにコピーすることができます。(些細なことですが、それが非常にありがたい)
あとは、あなたが貼り付けたい箇所にこのHTMLコードを貼り付ければ、外部のブログエディタであっても、画像が上手く機能してくれます。(※標準の「貼り付け」ではなく、「HTML形式で貼り付け」です)
*
以上で、「はてなフォトライフ2HTML」を使う手順は終了です。
最後に、この場を借りて、このブックマークレットを作成してくださった「tar@メガネ男子」様に感謝の言葉を述べたいと思います。
このブックマークレットによって、WLWを使ってのブログ執筆が快適になりました。便利なブックマークレットをありがとうございます！
≪まとめ≫
■ 「WLWに画像を貼り付ける」では上手くいかない。
■ 「はてなフォトライフ」にアップロードした画像のHTMLコードを貼り付ければOK。
■ 画像のHTMLコードを簡単に取得できる「はてなフォトライフ2HTML」
――あなたの旅先案内人 かけすけ( @kakesuke02 )より
関連記事
■WindowsLiveWriterでHTMLコードを簡単に貼り付け＆反映！ WLWプラグイン「コード左衛門」のご紹介！ - Hike×Hack
■はてなブログでWindowsLiveWriterを使う時に、エラーメッセージ「オブジェクトのインスタンス～～」が出た場合の対処法。 - Hike×Hack
