Hatena Blog Tags

photoモジュール

(はてな)
ふぉともじゅーる

photoモジュールとは

日記にアップロードされた写真を最新順に表示するモジュール。
(1月分のカレンダーを写真入りで表示するモジュール→calendar2photoモジュールもあります。ご参照下さい)

最近の日記から写真だけを一覧表示するphotoモジュールの提供を開始しました。ヘッダ、フッタ等で

<hatena name="photo">

と指定すると、最近登録された写真が一覧で表示されます。

<hatena name="photo" listlimit="10" size="small">

といった指定により、

listlimit
最新の何件の写真を表示するか(初期値:5)
size
"small"の際にはサムネールを表示

の指定が可能です。

photoモジュールが表示するHTMLについて、さきほどUL要素に変更をしました。

  • 使用実例
  • photoモジュール対応テーマ
    • hatenaテーマ
    • それ以外のテーマは未対応

写真を横に並べたい

日記のテーマでhatenaテーマ以外を使用している場合

管理ツール画面「デザイン > 詳細デザイン設定」でスタイルシート欄に

ul.hatena-photo { list-style-type: none; }
ul.hatena-photo li { display: inline; }

と書き加えれば、写真が横並びになります。

hatenaテーマ(デフォルトの設定です)を使用している場合(photoモジュール対応テーマ使用)

横並びになるようあらかじめテーマ内に設定されていますので、上記を書き加える必要はありません。

写真を縦一列に並べたい

hatenaテーマを使用している場合

管理ツール画面「デザイン > 詳細デザイン設定」でスタイルシート欄に

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モジュールで表示される画像やサムネールに枠線(境界線・ボーダー)をつけない

photoモジュールで表示される画像やサムネールにリンク色の枠線が出るのを無くしたい場合は、スタイルシート欄に

img.hatena-photo { border-style: none; }

を追加します。(img.hatena-photoはphotoモジュールで表示される画像・サムネール用のセレクタです)。

その他photoモジュールカスタマイズTips

上記指定の意味

※詳しい方は下記をより適切な内容に修正下さい。
いずれも、CSSを実装し解釈してくれるブラウザにおいての見た目を規定するものです。日記の書き手側で「閲覧者にこんなふうに見てほしい」という指定をしていますが、実際に閲覧者が書き手の側の思惑通りに見ているかというのは別の問題(使用ブラウザの違い、ユーザー自身のスタイルシートを使っている、スタイルシートを無効にしている、など)になります。
参照:

list-style-type: none;
リストの行頭マーカーを表示しないようにさせます。photoモジュールの場合、この指定をすることで「・」が写真の横に出てこなくなります。
display: inline;/display: block;
インライン表示にする(その要素の開始・終了では改行しない)/ブロック表示にする(その要素の開始・終了で改行する)
margin: 0;
要素の周りの余白(マージン)を四方(上・右・下・左)一括してゼロにします。
border-style: none;
枠線(ボーダー)の表示を消します。
このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。