FAQ -Wicurio-detailsプラグイン
概要
html5のdetailsおよびsummaryタグを出力し、折りたたみ表示可能な領域を作成します。
他にも折りたたみ領域を作成するプラグイン（region,fold）はございますが、これらとの違いはdetailsプラグインはインラインプラグインとして提供されるため、テーブル内にも折りたたみ領域を作成することが可能となります。
ただしdetailsプラグインはインラインプラグインのため、折りたたみ領域に他のブロックプラグイン（includeなど"#"で始まるプラグイン）を内包することはできません。
書式
&details(見出し,[見出し先頭画像]){本文};
- 見出し:
折りたたまれている状態でも表示される見出しです。<summary>タグ内の記述となります。 - 見出し先頭画像:（省略可能）
見出しの先頭に表示されるマークに用いる画像です。httpから始まる画像のURLを指定します。
画像サイズは10px～12px程度のものをご利用することをお勧めいたします。
「none」を指定すると先頭マークは表示されません。
省略時はブラウザ側で用意されている標準のインジケーターが表示されます。
使用例
見出し先頭画像の指定を省略
&details(見出し先頭画像の指定を省略){detailsはhtml5で定義された折りたたみ領域を作成するためのhtmlタグです。};
- 実行結果↓
見出し先頭画像の指定を省略
detailsはhtml5で定義された折りたたみ領域を作成するためのhtmlタグです。
見出し先頭画像を非表示
&details(見出し先頭画像を非表示,none){パラメータでnoneを指定すると見出しの先頭画像が非表示となります。};
- 実行結果↓
見出し先頭画像を非表示
パラメータでnoneを指定すると見出しの先頭画像が非表示となります。
見出し画像を指定
&details(見出し画像を指定,https://www.wicurio.com/faq/index.php?plugin=ref&page=detailsプラグイン&src=star_mark.gif){httpから始まる画像URLを指定することで、見出し画像を指定できます。};
- 実行結果↓
見出し画像を指定
httpから始まる画像URLを指定することで、見出し画像を指定できます。
行内での利用について
detailsプラグインは簡易な折り畳み領域をテーブル内でも利用できるようインラインプラグインとして提供していますが、出力されるdetailsタグはinline-block要素となります。
そのため1行内の途中で使用すると表示が崩れる、または不自然なレイアウトになる場合がございます。
このように文章の行内&details(見出し){折り畳み内容};で記述するとレイアウトが崩れます
- 実行結果↓
このように文章の行内で記述するとレイアウトが崩れます見出し
折り畳み内容
注意事項
対応ブラウザについて
detailsプラグインはhtml5の「details/summary」タグを出力することで折りたたみ領域を作成するプラグインとなっております。
そのため「details/summary」タグ非対応のブラウザ（IEやEdgeなど）での表示は正しく行われません。
見出し先頭画像の表示について
html5におけるsummaryタグに対する見出し先頭画像の仕様はchromeとFireFoxで大きく異なります。
差異が少なくなるようcss設定を行っておりますが、用いる画像サイズによっては意図した通りに表示されず、両ブラウザで表示に大きな差がでる可能性がございます。
そのような場合は見出し先頭画像のパラメータを省略し、ユーザーCSSを用いて調整していただくようお願い致します。
なお、ご参考までに当プラグインが出力する見出し先頭画像のCSS定義は以下のようなものとなります。
※chromeはsummaryタグに対するlist-style-image指定が非対応のため、-webkit-details-marker疑似要素を用いて画像を定義しています。
summary{
cursor:pointer;
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
」からご利用いただけます。