FontAwesome応用編

前提fontawesomeをもっと色々適用したい

fontawesomeは実に便利です。画像をわざわざ探さなくてもモダンで、また標準的なアイコンを自由に使う事ができます。 (まだフォーラムに書かないからこの表記で)"某文芸サイト"が使用するCSSにはこのfontawesome(ver.4.3.0)が既にimportされている為、この素晴らしいアイコンを自由に使う事ができます。

しかし、このfontawesomeの標準的な使い方、例えば

[[span class="fa fa-angellist"]]@<&nbsp;>@[[/span]]

だけでは自由にfontawesomeを使えないものがあります。それは[[collapsible]]等のギミックが含まれたWikidot構文です。

例えば下のコードを書いた場合、構文エラーとなってしまいます。

コード:

[[collapsible show="[[span class='fa fa-angle-double-down']]open[[/span]]" hide="close"]]
 aaaaaaa
[[/collapsible]]

表示:

もしかしたら上のコードを見て、「何Wikidot素人クサイ事やっているんだ、Wikidotにおける属性の指定はシングルクォーテーション(')じゃなくてダブルクオーテーション(")だろ」と思う方がいらっしゃるかも知れません。おっしゃる事はごもっともです。しかし、もう1度上のコードを見てください。ダブルクォーテーションしか使えないのならばそれこそ通常の方法では折り畳みブロックにfontawesomeが使えない事がわかるでしょう。

今回はこうしたギミックを持つ要素にfontawesomeを適用する方法をお伝えします。

折り畳みにfontawesomeをつける

折り畳み文章の展開/格納をアイコンで示す事によってスペシャルな折り畳みを演出する事ができます。

サンプル

コード

[[div class="special-collapsible"]]
[[collapsible show="隠された文章を開く" hide="閉じる"]]
折り畳み文章よ
[[/collapsible]]
[[/div]]
 
[!-- CSS --]
[[module css]]
/*using font-awesome4.3.0*/
.special-collapsible .collapsible-block .collapsible-block-folded .collapsible-block-link,
.special-collapsible .collapsible-block .collapsible-block-unfolded .collapsible-block-unfolded-link .collapsible-block-link
{
    /*font-awesome fa*/
    display:inline-block;
    font:normal normal normal 14px/1 FontAwesome;
    font-size:inherit;
    text-rendering:auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    transform:translate(0, 0);    
}
 
.special-collapsible .collapsible-block .collapsible-block-folded .collapsible-block-link:before{
/*fa-angle-double-down*/
content:"\f103";
}
.special-collapsible .collapsible-block .collapsible-block-unfolded .collapsible-block-unfolded-link .collapsible-block-link:before{
/*fa-angle-double-up*/
content:"\f102";
}
[[/module]]

ファイルオープン型 タブビュー

ファイルアイコンをつける事でタブビューをよりシステマチックに見せる事が可能になります。

サンプル

ファイルが欠損しています。別のファイルを参照してください。

コード

[[div class="flieNav"]]
[[tabview]]
[[tab ファイルA]]
ファイルが欠損しています。別のファイルを参照してください。
[[/tab]]
[[tab ファイルB]]
そうです。それは鮫[ファイルが欠損しています]
[[/tab]]
[[tab ファイルC]]
鮫が空より降る。チェーンソー。あれ?映画の序盤で食われた手と鮫の腹から出てきた手違くね?
[[/tab]]
[[/tabview]]
[[/div]]
[!-- module css --]
[[module css]]
.flieNav .yui-navset .yui-nav .selected a em,
.flieNav .yui-navset .yui-nav a em{
    /*font-awesome fa*/
display:inline-block;
    font:normal normal normal 14px/1 FontAwesome;
    font-size:inherit;
    text-rendering:auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    transform:translate(0, 0);
}
 
.flieNav .yui-navset .yui-nav a em:before{
    /*folder*/
    content:"\f07b";
}
.flieNav .yui-navset .yui-nav .selected a em:before{
    /*folder-open*/
    content:"\f07c";
}
[[/module]]
特に指定がない限り、このサイトのコンテンツには次のライセンスが適用されます: Creative Commons Attribution-ShareAlike 3.0 License