はてなフォトライフの写真を貼り付ける(fotolife記法)

はてなが提供するウェブアルバムサービス「はてなフォトライフ」にアップロードした画像を、fotolife記法でブログ記事に貼り付けることができます。

編集サイドバーの「写真を投稿」で画像をアップロードすると、はてな記法モードおよびMarkdownモードではfotolife記法で貼り付けられます。

fotolife記法の構文

fotolife記法は、次のような構文をしています。オプションはコロン(:)に続けて記述します。

[f:id:はてなID:画像番号:オプション]

はてなIDや画像番号は、はてなフォトライフの画像ページの上部に表示されている記法により確認できます。

fotolife記法のサンプル

fotolife記法の使用例

編集サイドバーの「写真を投稿」では、デフォルトで次のplainオプションが指定されます。

[f:id:hatenablog:20170217161727j:plain]

これは次のように表示され、PC環境で画像をクリックするとブラウザサイズのビューワで表示されます。

f:id:hatenablog:20170217161727j:plain

オプションを省略すると、画像をクリックまたはタップしたときに、はてなフォトライフの画像ページに移動するリンクになります。これは、imageオプションと同じ動作です。

[f:id:hatenablog:20170217161727j]の表示例(クリックするとはてなフォトライフに移動します)

編集サイドバーから写真を投稿すると、非公開の「Hatena Blog」フォルダにアップロードされるため、リンク先に移動してもユーザー本人にしかページは表示されません。

そのほかのオプション

plainオプションやimageオプションと同時に、画像のサイズや属性を指定することができます。

オプション 説明
w00 :wに続けて、画像の表示幅を数字で指定します。
h00 :hに続けて、画像の表示高さを数字で指定します。
alt :alt=に続けて、画像の代替テキスト(alt属性)を指定します。
title :title=に続けて、画像のtitle属性を指定します。
small,medium はてなダイアリーではご利用できましたが、はてなブログでは非推奨です。

altオプションとtitileオプションを省略したときには、はてな記法そのものがデフォルト値になります。また、等号(=)の右側に何も指定しないと、属性値を空にできます。

オプションは複数を続けて指定でき、順序を入れ替えてもかまいません。例えば、次のように指定できます。

[f:id:hatenablog:20170217161727j:plain:w120:title=小さいパンダをクリックすると大きくなります]
[f:id:hatenablog:20170217161727j:plain:alt=アドベンチャーワールドで見たパンダ:title=]

それぞれ次のように表示されます。

f:id:hatenablog:20170217161727j:plain:w120

アドベンチャーワールドで見たパンダ