はてなフォトライフに登録した写真を表示する(fotolife記法)
■ はてなフォトライフに登録した写真を表示する(fotolife記法)
fotolife記法を使うことで、日記の文章内にはてなフォトライフの写真を表示させることができます。各写真を表示するfotolife記法は、その写真の表示されるページの上部にあるパンくずリストに表示されています。

また、最後の「:image」に続けて、以下の指定を行うことで、画像のサイズや文字の回り込みを簡単に指定することが可能です。
- small
- その写真のサムネイル画像(長辺60px)を表示します
- medium
- その写真の大きいサムネイル画像(長辺120px)を表示します
- h**
- 表示する写真の縦サイズを**ピクセルにします
- w**
- 表示する写真の横サイズを**ピクセルにします
- left
- 写真を左寄せで表示し、文字を右に回り込ませます
- right
- 写真を右寄せで表示し、文字を左に回り込ませます
- movie
- 動画ファイルの場合、再生プレーヤーを表示します
上記の指定は、例えば以下のように行います。
[f:id:hatenadiary:20041007101545j:image] [f:id:hatenadiary:20041007101545j:image:small] [f:id:hatenadiary:20041007101545j:image:medium] [f:id:hatenadiary:20041007101545j:image:w50] [f:id:hatenadiary:20041007101545j:image:right] [f:id:hatenafotolife:20081030172138f:movie]
と記述すると、
のように表示されます。
画像の下から文章を書き始めたい場合は、その文章の上に <br clear="all"> と書き込むと、画像の回り込みが解除されます。
より簡単にフォトライフへの写真アップロード、記法の挿入を行いたい場合はfotolifeボタンをご利用ください。
なおfotolife記法を使うと、はてなフォトライフの対応する写真のページに自動的にトラックバックが送信されます(以下で述べる記法も同様)。
【上級者向け】画像サイズとレイアウトを同時に表示する方法
画像の縦・横のサイズやレイアウトを複数同時に指定するには、半角カンマ「,」を用いて指定を併記してください。
例えば、上記の画像を横90ピクセル、縦67ピクセルで右側に表示したい場合、以下のように指定します。
[f:id:hatenadiary:20041007101545j:image:w90,h67,right]
最後のカンマで繋げられた部分「w90,h67,right」は順不同で、「h67,w90,right」や「right,w90,h67」のように書くこともできます。
はてなフォトライフの各ページにリンクする
写真を表示するfotolife記法から、最後の「:image」を削除するとそのページへの単純なリンクになります。
その他、
f:id:hatenadiary:20041007101545j f:id:hatenadiary f:id:hatenadiary:favorite [f:t:hatena] [f:id:sample:t:hatena]
と記述すると、
のように、はてなフォトライフの各ページへのリンクを表示させることができます。
関連する情報
- 2012/02/13 17:06:08 はてなダイアリープラスってなに?
- 2009/05/26 11:23:52 はてなダイアリー有料オプションってなに?
- 2010/11/17 18:02:22 はてなダイアリー機能一覧
- 2009/01/07 16:18:58 はてなフォトライフに登録した写真を表示する(fotolife記法)
- 2011/05/04 18:44:32 複数の写真を掲載する(fotolife)
- 2012-01-13 05:44:25 わだいのたけひこのざっき - hatedma: はてなダイアリーマネジャー
- 2011-05-18 08:07:59 はてなグループ - 機能変更、お知らせなど - Re:イラストについて
- 2011-04-09 07:39:36 アーユーレディ? - 今日学んだこと
- 2011-04-08 11:35:45 はてなグループ - 機能変更、お知らせなど - Re:画像サイズの変更について
- 2010-12-24 23:14:26 はてなグループ - 機能変更、お知らせなど - Re:Re:画像をクリックして表示させる方法
- 2010-12-24 03:06:59 はてなグループ - 機能変更、お知らせなど - Re:画像をクリックして表示させる方法
- 2010-06-09 07:55:34 はてなグループ - 機能変更、お知らせなど - Re:Re:Re:ブログへの写真の掲載
- 2010-04-17 02:00:57 はてなグループ - WCGプロトコル - 画像貼り付け
- 2010-03-22 07:58:48 かとりの日記 - テスト
- 2010-01-28 16:18:39 :: Que Sera, Sera :: - テーブル二列表示・リンク右寄せ・写真貼付け







