読者です 読者をやめる 読者になる 読者になる

Xamarin 日本語情報

Xamarin(ザマリン) の代理店だったエクセルソフト田淵のブログです。主に Xamarin に関するエントリーをアップしていきます。(なるべく正しい有益な情報を掲載していきたいと考えていますが、このブログのエントリーは所属組織の公式見解ではありませんのでご注意ください)

はてなブログではてなフォトライフ以外の場所にある画像を拡大表示したい

こんにちは。エクセルソフトの田淵です。

Xamarin とは関係ないのですが、忘れないようにメモしておきます。

何かつらつら書いていたら長くなってしまったので笑、結論だけ先に。

他のサイトの画像を表示するときは

<img src="http://example.com/hoge.png" width="xx" class="hatena-fotolife" />

class="hatena-fotolife" を指定してあげると、width で表示画像サイズを指定しつつ、元画像の大きさでポップアップしてくれます。

便利です。

以下駄文です笑

私はすべてのネタはこのはてなブログに書いていますが、技術情報は Qiita にもマルチポストしています。また、Mac で技術情報のブログを書くときは Markdown エディタとして Kobito を使っています。

この Kobito は Qiita 謹製のアプリですので、Markdown のリアルタイムプレビューだけでなく、ローカルの画像をエディタにドラッグ&ドロップすると自動的に Qiita にアップロードしてくれて、ファイル名を元に以下のようなリンクを自動生成してくれて大変便利です。

![代替テキスト](画像のURL "画像タイトル")

更に、これをこの書式のままはてなブログの Markdown として書いても認識してくれて、はてなブログで画像が表示されます。

一方、はてなブログの Web エディタで直接ブログを書いて画像を挿入する時に自動生成してくれる

[f:id:ytabuchi:xxxxxxxxxxxxxxx:plain]

の最後に :w450 などを付け足して

[f:id:ytabuchi:xxxxxxxxxxxxxxx:plain:w450]

とすると、画像の width を 450px にしてくれて、更に元の画像のサイズでポップアップしてくれます。これもまた便利です。

で、マルチポストするとはてなブログで Qiita の画像を参照することになるので、この書き方が使えません。

また、Qiita の方の画像挿入の Markdown だとどうやら画像サイズが指定できないようでこれはこれで困ります。

仕方ないので、はてなブログ以外の場所の画像を参照するには、冒頭に記載したように普通に <img> タグを使って書くしかないのかな?という話です。class="hatena-fotolife" を付けるだけで拡大表示してくれますので、そんなの知らなかった!って方は使ってみてください笑

以上です。