nouveauテーマの効果のテスト

Tag: Geeklog nouveau テーマ効果 TIPS

Geeklogのnouveauテーマではなにやら色々な仕掛けが最初から用意されている。
それらはタグを記述するだけでよいようになっているので、日本語でのメモと効果の確認を以下で行っています。


次のように記述するとコンソール表示のようになります。

まずはpreタグです

次のように記述するとメモやTIPSのようになります。
次はspanタグでクラスがnote

次のように記述すると情報表示のようになります。
spanタグでクラスがinfo

次のように記述するとアイデアや工夫やTIPSのようになります。
spanタグでクラスがidea

次のように記述するとヘルプのようになります。
spanタグでクラスがhelp

次のように記述するとダウンロードのようになります。
spanタグでクラスがdown

次のように記述すると注意のようになります。
spanタグでクラスがalert

---

次はブロッククオートで囲みます。

ブロッククオートで囲みます。
一行だとブロッククオートのマークが綺麗に表示されないので二行以上必要です。

次はリスト表示の色々です。
まずはイメージでのリストです。

• <ul class="arrow"><li>...</li></ul>

• <ul class="bug"><li>...</li></ul>

• <ul class="cart"><li>...</li></ul>

• <ul class="check"><li>...</li></ul>

• <ul class="script"><li>...</li></ul>

次にリスト項目の小丸です。

• <ul class="bullet-blue"><li>...</li></ul>

• <ul class="bullet-grey"><li>...</li></ul>

• <ul class="bullet-plus"><li>...</li></ul>

• <ul class="bullet-rss"><li>...</li></ul>

• <ul class="bullet-star"><li>...</li></ul>

リストサンプルの最後は数値です。
ulタグは次のように宣言してliで数値を指定します。
<ul class="number">...</ul>

• <li class="num-1">...</li>
• <li class="num-2">...</li>
• <li class="num-3">...</li>
• <li class="num-4">...</li>
• <li class="num-5">...</li>
• <li class="num-6">...</li>
• <li class="num-7">...</li>
• <li class="num-8">...</li>
• <li class="num-9">...</li>

その他にもJavaScriptなどで効果が用意されてますので英語ですが配布サイトのドキュメントをご覧下さい