detailsプラグインのバックアップ(No.1)

バックアップ一覧
差分を表示
現在との差分を表示
現在との差分 - Visual を表示
ソースを表示
detailsプラグインへ行く。
- 1 (2019-08-21 (水) 17:05:59)

概要
- 書式
使用例
注意事項
- 対応ブラウザについて
- 見出し先頭画像の表示について

概要

html5のdetailsおよびsummaryタグを出力し、折りたたみ表示可能な領域を作成します。
他にも折りたたみ領域を作成するプラグイン（region,fold）はございますが、これらとの違いはdetailsプラグインはインラインプラグインとして提供されるため、テーブル内にも折りたたみ領域を作成することが可能となります。
ただしdetailsプラグインはインラインプラグインのため、折りたたみ領域に他のブロックプラグイン（includeなど）を内包することはできません。

書式

&details(見出し,[見出し先頭画像]){本文};

見出し:
折りたたまれている状態でも表示される見出しです。<summary>タグ内の記述となります。
見出し先頭画像:（省略可能）
見出しの先頭に表示されるマークに用いる画像です。httpから始まる画像のURLを指定します。
画像サイズは10px～12px程度のものをご利用することをお勧めいたします。
「none」を指定すると先頭マークは表示されません。
省略時はブラウザ側で用意されている標準のインジケーターが表示されます。

本文:
折りたたみ領域の展開時に表示される本文です。
インラインプラグインやwiki構文を利用できます。

使用例

見出し先頭画像を省略

&details(見出し){detailsはhtml5で定義された折りたたみ領域を作成するためのhtmlタグです。};

見出し

detailsはhtml5で定義された折りたたみ領域を作成するためのhtmlタグです。

見出し先頭画像を非表示

&details(見出し,none){パラメータでnoneを指定すると見出しの先頭画像が非表示となります。};

見出し

パラメータでnoneを指定すると見出しの先頭画像が非表示となります。

見出し画像を指定

&details(見出し,https://www.wicurio.com/faq/detailsプラグイン/header_mark.gif){httpから始まる画像URLを指定することで、見出し画像を指定できます。};

見出し

httpから始まる画像URLを指定することで、見出し画像を指定できます。

注意事項

対応ブラウザについて

detailsプラグインはhtml5の「details/summary」タグを出力することで折りたたみ領域を作成するプラグインとなっております。
そのため非対応のブラウザ（IEやEdge）での表示は正しく行われません。

見出し先頭画像の表示について

summaryタグに対する見出し先頭画像のhtml5の仕様はchromeとFireFoxで大きく異なります。
差異が少なくなるようcss設定を行っておりますが、用いる画像サイズによっては意図した通りに表示されず、両ブラウザで表示に大きな差がでる可能性がございます。
そのような場合は見出し先頭画像のパラメータを省略し、ユーザーCSSを用いて調整していただくようお願い致します。
なお、参考までに当プラグインが出力する見出し先頭画像のCSS定義は以下のようなものとなります。
※chromeはsummaryタグに対するlist-style-image指定が非対応のため、-webkit-details-marker疑似要素を用いて画像を定義しています。

summary{
    display:list-item;
    list-style-image: url(指定された画像URL);
}
summary::-webkit-details-marker {
   background: url(指定された画像URL) no-repeat center/100%;
   color: transparent;
}

ユーザーCSSの作成はwicurioコントロールパネルの「Wiki基本情報 > ユーザーCSS」からご利用いただけます。

detailsプラグイン のバックアップ(No.1)

概要

書式

使用例