日記にアップロードされた写真を最新順に表示するモジュール。
(1月分のカレンダーを写真入りで表示するモジュール→calendar2photoモジュールもあります。ご参照下さい)
最近の日記から写真だけを一覧表示するphotoモジュールの提供を開始しました。ヘッダ、フッタ等で
<hatena name="photo">と指定すると、最近登録された写真が一覧で表示されます。
<hatena name="photo" listlimit="10" size="small">といった指定により、
- listlimit
- 最新の何件の写真を表示するか(初期値:5)
- size
- "small"の際にはサムネールを表示
の指定が可能です。
photoモジュールが表示するHTMLについて、さきほどUL要素に変更をしました。
管理ツール画面「デザイン > 詳細デザイン設定」でスタイルシート欄に
ul.hatena-photo { list-style-type: none; } ul.hatena-photo li { display: inline; }
と書き加えれば、写真が横並びになります。
横並びになるようあらかじめテーマ内に設定されていますので、上記を書き加える必要はありません。
管理ツール画面「デザイン > 詳細デザイン設定」でスタイルシート欄に
ul.hatena-photo { list-style-type: none; } ul.hatena-photo li { display: block; }
と書き加えれば、縦一列並びになります。
左側のマージンが気になって無くしたい場合は、スタイルシート欄に
ul.hatena-photo { margin: 0; }
も追加します。
(例)縦並び・マージン0にする指定
ul.hatena-photo { list-style-type: none; margin: 0; } ul.hatena-photo li { display: block; }
photoモジュールで表示される画像やサムネールにリンク色の枠線が出るのを無くしたい場合は、スタイルシート欄に
img.hatena-photo { border-style: none; }
を追加します。(img.hatena-photoはphotoモジュールで表示される画像・サムネール用のセレクタです)。
※詳しい方は下記をより適切な内容に修正下さい。
いずれも、CSSを実装し解釈してくれるブラウザにおいての見た目を規定するものです。日記の書き手側で「閲覧者にこんなふうに見てほしい」という指定をしていますが、実際に閲覧者が書き手の側の思惑通りに見ているかというのは別の問題(使用ブラウザの違い、ユーザー自身のスタイルシートを使っている、スタイルシートを無効にしている、など)になります。
参照: