プラグインガイド
SetMainVisual
概要
- 当サイトではページ個別にメインビジュアルを設定することができます。
- ページ名を MyPage とした場合、MyPage/MainVisual がメインビジュアル設置用のページで、MyPage は自動的にそれを読み込んで配置します。
- このページ SetMainVisual の場合、メインビジュアル設置用のページは、
プラグインガイド/MainVisualとなります。以下の記載をします。#youtube(r_25WWmmbcw)
- PageName/MainVisual
- メインビジュアル設置用ページの内容は、そのまま読み込まれます。
- スライド（#slider）、画像（#image）、動画（#youtube）などが使えます。
- いくつか準備して、不要なものをコメントアウトしておくとよいでしょう。
- 以下、メインビジュアル設置用のページの記載例
// #slider(center, 100%, fade, 3000, 2000, images/01.jpg, images/02.jpg, images/03.jpg) #youtube(r_25WWmmbcw) // #image(images/sample.jpg)
- 添付画像を使用する場合のファイル名の記載について
＃image や ＃slider を使って添付画像をメインビジュアルに設定する場合は、画像のファイル名を「フルパス」で記載する必要があります。例えば、MyPage/Mainvisual のページに sample.jpg を直接添付した場合、通常どおりの＃image(sample.jpg) という記載では、MyPage/Mainvisual には表示されますが、埋め込み先の MyPage では「sample.jpg が MyPage には存在しない」という理由で表示されません。MyPage に埋め込まれた場合にも表示されるようにするには、以下のようにファイル名をフルパスで記載する必要があります。#image(MyPage/Mainvisual/sample.jpg)
このような埋め込みの場合、あるいはまた、複数のページで画像を流用掲載する場合は、メインのページ（[ 名前 ]）を「画像倉庫」として、そこにアップロードすることを推奨します。その場合、以下のような比較的シンプルな形式で記述することができるようになります。#image( [ 名前 ] /sample.jpg)
Plugin FontAwesome
fontawesome.io の iconフォントを使用するためのプラグイン
- プラグインの活用方法
- 引数 fontawesome で提供されるアイコンの class名
- 記述例
&fontawesome(fas fa-home); &color(red){&fontawesome(fas fa-home);};
- アイコンにリンクを設定するには
利用できるアイコン
- 以下のサイトでアイコンのクラス名を確認できます。
- HTML埋め込み用に以下のようなコードが提供されています。
<i class="fas fa-home"></i>
- クラス名（ fas fa-home ）の部分のみ抜き出してご利用下さい。
&fontawesome(fas fa-home);
- 記号の意味は以下のとおりです。
- Fas：Font Awesome Solid
- Fad：Font Awesome Brand
Plugin SetTableBorder
概要
- 表組みに関して、罫線のスタイルを設定するプラグインです。
- 編集画面内の先頭部分に記載して下さい。
- SideBar のページに設定するとサイト全体に適用されます。
- 適用の優先順度は、以下のとおりです。
- 1. 個別ページで設定されたもの（当該ページにのみ適用）
- 2. SideBar で設定されたもの（サイト全体に適用）
- 3. システムの skin において設定されたもの（サイト全体のデフォルト）
書式
#settableborder( box / line / none )
- 引数は、罫線パターンで３種類
- box：縦横グリッド （デフォルト）
- line：ヘッダー：上ボーダー、データ：下ボーダー（統計データ用）
- none：罫線なし・要素間余白 0（画像・動画の表組み）
事例
このページでは、編集画面内に以下のように記載しています。
#settableborder( line )
|City|>|City proper|>|Metropolitan area|>|Urban area|h |~|Population|Area|Population|Area|Population|Area| |Tokyo|13,515,271|2,191|37,274,000|13,452|38,505,000|8,223| |Osaka|2,725,006|225|19,303,000|13,228|17,150,000|3,004| |Nagoya|2,320,361|326|9,363,000|7,271|10,240,000|3,704| |>|>|>|>|>|>|RIGHT:https://en.wikipedia.org/wiki/List_of_largest_cities|f
| City | City proper | Metropolitan area | Urban area | |||
| Population | Area | Population | Area | Population | Area | |
| https://en.wikipedia.org/wiki/List_of_largest_cities | ||||||
| Tokyo | 13,515,271 | 2,191 | 37,274,000 | 13,452 | 38,505,000 | 8,223 |
| Osaka | 2,725,006 | 225 | 19,303,000 | 13,228 | 17,150,000 | 3,004 |
| Nagoya | 2,320,361 | 326 | 9,363,000 | 7,271 | 10,240,000 | 3,704 |
Plugin SocialButton
ページにソーシャルボタンを置くためのプラグイン
プラグインの活用方法
- Twitter シェアボタン
block：#twitter / inline：&twitter;
記述例
&twitter;
Plugin Spacer
ダミースペースを配置するためのプラグインです。
概要
ピクセル単位の透明ボックスを配置してスペースをつくります。
書式
#spacer( 幅, 高さ, [回りこみ] )
使用例１
#image(img01.png,,40%) #spacer( ,1rem) ← 上下の画像間に 2rem 分の隙間を作ります #image(img01.png,,40%)
使用例２
#spacer(50%,100px, left) ← 左に回り込んで 幅50% の余白を作ります ''ABCDE''
ABCDE
Plugin Slider
カルーセルスライダー
概要
jQueryカルーセルスライダー Slick を用いたプラグインです。
http://kenwheeler.github.io/slick/
編集画面内で以下のように記載しています。
#slider(center,75%,fade,3000,2000,01.JPG,02.JPG,03.JPG,04.JPG) #slider(left,75%,h2,3000,2000,01.JPG,02.JPG,03.JPG,04.JPG) #slider(right,75%,v2,3000,2000,01.JPG,02.JPG,03.JPG,04.JPG)
書式
#slider( 位置, 幅, パターン, 滞留時間, 切替時間, 画像01, 画像02, 画像03,・・・)
- 第１引数は、left / center / right のいずれか。center以外は回りこみます。
- 第２引数は、親領域に対する幅の％。
- 第３引数は、スライドのパターン。
- fade：デフォルトです。何も書かない場合はこれになります。
- h[1-9]：水平にスライドします。右の数字は同時表示数（例：h3）。
- v[1-9]：垂直にスライドします。右の数字は同時表示数（例：v2）。
- 同時表示数 ＜ スライドの枚数 であることが前提です。
- 第４引数は、スライドが止まって表示されている時間(ms)。
- 第５引数は、スライドの切り替えに要する時間(ms)。
- 第６引数以降に画像ファイルを列挙します。
画像ファイル自体は、当該ページに添付されていることが前提ですが、特定のページにまとめて添付して利用することも可能です。
Plugin QR Code
概要
QRコードを生成して表示します。
書式
#qrcode( [URL], [ left / right / center ], [サイズ%] )
- 第１引数：QRコードに変換したい文字列（一般に URL、メルアドなど）
空欄の場合は、掲載当該ページのURLが変換されます。 - 第２引数：表示位置（left, right を使うと文章が回り込み）
- 第３引数：表示サイズ（パーセンテージ）
事例１
このページのURLをQRコードにしてデフォルト幅（25%）で表示
#qrcode
事例２
このページのURLをQRコードにして中央に30%幅で表示
#qrcode( , center, 30% )
事例３
URL：http://www.example.com をQRコードにして中央に30%幅で表示
#qrcode( http://www.example.com, center, 30% )
事例４
URL：http://www.example.com をQRコードにして右回り込み30%幅で表示
#qrcode( http://www.example.com, right, 30% )
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
01.JPG
02.JPG
03.JPG
img01.png
04.JPG
