Hodakaの居場所 - XOOPS実験室

fig（sitefig）タグによるマークアップ

[fig align="値" alt="値" credit="値" title="値" caption="値"]画像url[/fig]

このように旧来のimgをfigに書き換えるだけで次のようなマークアップに変換します。

<div class="figure">
  <img src="figの値" alt="alt属性の値" />
  <p class="credit"><abbr class="type" title="Photograph">Photo</abbr> by <cite>credit属性の値</cite></p>
  <p class="caption"><em class="title">title属性の値</em>caption属性の値</p>
</div>

credit、title、caption属性を指定しない場合のマークアップは次のようにシンプルになります。

<div class="figure">
  <img src="figの値" alt="alt属性の値" />
</div>

これらの属性選択は用途に応じて好きに組み合わせることができます。また、その記述順序に決まりはありません。

注）altだけは特別です。

creditもtitle、captionもない場合はシンプルなマークアップになりますが、その場合はimgのalt属性の値として必須になります。それ以外の用途では不要です。もちろん、あえて記述した場合でも反映はしますが。

siteurl、sitefig

xoops_urlに相当する部分を省いたパスで記述可能になります。最初の'/'を除きます。記述するとき便利だし、サイト移転時には威力を発揮するでしょう。

属性は最低一つは指定してください。

以上の説明では、urlタグまたはsiteurlタグによってネストされてませんので画像はハイパーリンクにはなりませんが、次に実用的なケース例を見てみましょう。

左の画像を表示する元のxcodeは次ぎのようになっています。

[url=http://www.kuri3.net/uploads/photos1/9.jpg][fig title="春の訪れ" caption="柔らかな花弁ながら、谷戸特有の寒さに鍛えられた芯の強さをにじませている"]http://www.kuri3.net/uploads/photos1/thumbs1/9.jpg[/fig][/url]

これが変換されると：

<div class="figure">
  <a href="http://www.kuri3.net/uploads/photos1/9.jpg"><img src="http://www.kuri3.net/uploads/photos1/thumbs1/9.jpg" alt="" /></a>
  <p class="caption"><em class="title">春の訪れ</em>柔らかな花弁ながら、谷戸特有の寒さに鍛えられた芯の強さをにじませている</p>
</div>

この例ではalign属性が指定されていませんから、何もしなければfloatしません。つまり、この説明部分のようなブロック要素のテキストは回り込みはしません。この説明部分が回り込んでいるのは、デフォルトのスタイルシートでクラスfigureに対してfloat:leftを与えているためです。

続いて右floatの例です。

figの属性をフルに使っています。
入力値は次のようになっています。
caption属性を与えているので、alt属性のvalueは不要でしょう。

[url=http://www.kuri3.net/uploads/photos1/9.jpg][fig credit="hodaka" align="right" title="春の訪れ" caption="柔らかな花弁ながら、谷戸特有の寒さに鍛えられた芯の強さをにじませている"]http://www.kuri3.net/uploads/photos1/thumbs1/9.jpg[/fig][/url]

これがマークアップされと：

<div class="figure figright">
  <a href="http://www.kuri3.net/uploads/photos1/9.jpg"><img src="http://www.kuri3.net/uploads/photos1/thumbs1/9.jpg" alt="" /></a>
  <p class="credit"><abbr class="type" title="Photograph">Photo</abbr> by <cite>hodaka</cite></p>
  <p class="caption"><em class="title">春の訪れ</em>柔らかな花弁ながら、谷戸特有の寒さに鍛えられた芯の強さをにじませている</p>
</div>

注）imgのtarget

お気づきのように、画像にリンクがある場合"target=_blank"にはしません。あくまで"target=_self"です。もうとっくにタブブラウジングの時代なんだから別窓で開くなんてやめようよ、業界のみなさん。

[fig][sitefig]タグの属性とプロパティ

属性alignのプロパティleft|center|right

centerまたはrightが指定されたらfigureクラスと連結するクラス（figleft、figcenterまたはfigright）を自動生成します。これらセレクタ別にスタイルシートを用意すれば、left、rightの場合は左または右にfloatさせることもできるし、centerを中央配置にすることが可能になります。下にあるスタイルシート（同梱）を参考にしてください。

属性altのプロパティ

imgのalt属性の値となります。'または"で囲んでください。

属性creditのプロパティ

citeの値になります。'または"で囲んでください。

属性titleのプロパティ

画像のタイトルです。'または"で囲んでください。

属性captionのプロパティ

titleに続く画像説明文です。'または"で囲んでください。

スタイルシート

デフォルトのスタイルは次の通りです。widthと画像の幅、テーマとの相性などを考慮してカスタマイズする必要があるでしょう。また、IEは擬似クラスに対応してないのでtitleの後ろの処理に工夫がいるかもしれません。

/* default */
.figure {
  clear: both;
  margin: .3em .3em 1em 0;
  width: 160px;
  float: left;
}
.figure.figcenter {
	margin: .3em auto 1em auto;
	float: none;
}
.figure.figright {
	margin: .3em 0 1em .3em;
	float: right;
}
.figure p {
  margin: 0;
  width: auto;
}
.figure .credit {
  font-size: .8em;
  text-align: right;
}
.figure .credit cite {
  font-style: inherit;
}
.figure .caption {
  font-style: italic;
  font-size: .9em;
}
.figure .title {
  font-style: normal;
  font-weight: bold;
}
.figure .title:after {
  content: ":";
}

FigureHandlerへの応用

一般設定でonにすると、画像の横サイズ（width）と親ノードの横サイズを自動計算して、その比率に応じた文字回り込みのon/offを自動で行うことができます。
画像マークアップに詳しくない人が投稿するときなどに向いているかもしれません。
ただし、JavaScriptを用いていますので、賛否両論があります。
実際に使うにはサイトのテーマに応じて付属のFigureHandler.jsをカスタマイズする必要があります。興味のあるかたはA List ApartのIf I Told You You Had a Beautiful Figure...に詳しい説明があるので参考にしてください。

d3blog-1.02のダウンロード

当サイトのダウンロードページにあるd3blog_1.0xを落としてください。