Top > ガイドライン
|
ガイドライン の変更点
* ガイドライン [#guideline_top]
&attachref(./bnr_wiki_guidelines_rev2.jpg,nolink,50%);
編集の際に役立つPukiWiki記法のまとめと、
このwiki固有の注意事項を記載しています。&br;
編集ルール・方針については[[編集方針話し合い]]を参照してください。
* 基本記法 [#basic]
実際の書き方は、サイト上部の編集リンクをクリックしてご確認ください。
** テキスト装飾 [#text]
|記法|表示|
|''テキスト''|''太字''|
|'''テキスト'''|'''斜体'''|
|%%テキスト%%|%%取り消し線%%|
|COLOR(red):テキスト|&color(red){テキスト};|
|BGCOLOR(yellow):テキスト|背景色付きセル（テーブル内のみ）|
** 見出し [#heading]
#pre{{
* 大見出し(H1)
** 中見出し(H2)
*** 小見出し(H3)
}}
H4より下の見出しはありません。&br;
見出しにアンカーIDを付ける場合は以下の形式。
#pre{{
* 見出し [#anchor_id]
}}
意味のあるアンカーIDにしたほうが、
後々、ページ内リンクを作る際に便利です。
** リンク [#link]
#pre{{
[[ページ名]] 内部リンク
[[表示テキスト>ページ名]] 別名で内部リンク
[[表示テキスト>https://...]] 外部リンク
}}
** テーブル [#table]
#pre{{
|列1|列2|列3|
|データ|データ|データ|
}}
ヘッダー行（背景色付き）にするには `h` を末尾に付ける。
#pre{{
|列1|列2|列3|h
}}
列幅・配置の指定は `c` 行で行う。
#pre{{
|LEFT:200|CENTER:|RIGHT:|c
}}
セルの結合は `>` で右隣と、`~` で下と結合できる。
** 折りたたみ（region） [#region]
#pre{{
#region(ここをクリック)
折りたたむ内容
#endregion
}}
** コードブロック（pre） [#pre]
#pre{{
#pre{{
ここにコードや整形済みテキスト
}}
* 画像のアップロード方法 [#image_upload]
&attachref(./EnFQHxCWEAcamSB.jpg,nolink,50%);
''⚠️ 注意：手順を守らないと別の画像が上書きされるバグがあります。''&br;
このwikiでは、編集画面のプレビューからattachrefを保存せずに画像をアップロードしようとすると、
''そのページの1番目に添付されている画像が上書きされる''という不具合が確認されています。&br;
必ず以下のいずれかの手順でアップロードしてください。
*** 手順A：先に記述を保存してからアップロード（推奨） [#upload_a]
#pre{{
&attachref(,nolink,50%);
}}
+ 編集画面上記の書き方を記述する
+ ''一旦、記事を保存する（ここ重要）''
+ 保存後のページに表示される添付リンクをクリックしてアップロードする
パーセンテージの部分は実際の画像表示を確認して、
適宜調整してください。
*** 手順B：上部メニューの「添付」からアップロード [#upload_b]
複数の画像をまとめてアップロードしたい時に便利です
#pre{{
&attachref(./ファイル名.jpg,nolink,50%);
}}
+ 編集画面でファイル名を含む上記の書き方を記述する
+ 記事を保存する
+ ページ上部メニューの「添付」からアップロード画面を開く
+ ''手順1で書いたファイル名と同じ名前''のファイルをアップロードする
*** attachrefの基本記法 [#attachref_syntax]
#pre{{
&attachref(./ファイル名.jpg,nolink); 標準サイズで表示
&attachref(./ファイル名.jpg,nolink,50%); 50%で表示
&attachref(./ファイル名.jpg,nolink,320x100); ピクセル指定で表示
ブラウザの画像表示の仕様上、
100%や50%、25%、12.5%のような、2の累乗（1/2nの倍数）で指定すると、
クッキリハッキリ画像が表示されます。
画像を制作する場合、1280px x 720px が一番編集しやすく、使い勝手が良いです。
さらに専門的な話をすると、あえて表示したい大きさの2倍、4倍の画像サイズで作って
50%、25%に縮小して表示させると、スマホ画面では、そのまま表示するよりも綺麗に表示されます。
（Retinaディスプレイや最近のスマホディスプレイの仕様）
}}
`nolink` を付けると画像クリック時のリンクを無効化できる。
省略すると画像が別タブで開く。
*** 画像をリンクにする（クリックでページ遷移） [#image_link]
バナー画像をクリックしたら該当ページに飛ぶ、という使い方。
ウォーフェアのゲームモード一覧やオススメ記事バナーで使っている形式。
#pre{{
[[&attachref(ファイル名.jpg,nolink,640x160);>リンク先ページ名]]
[[&attachref(ファイル名.jpg,nolink,640x160);>https://外部URL]]
}}
''具体例''
#pre{{
[[&attachref(map_cracked.jpg,nolink,320x100);>焦土]]
[[&attachref(bnr_f45a.jpg,nolink,440x250);>F-45A戦闘機]]
}}
|記法|用途|
|`&attachref(...,nolink,50%)`|そのページに添付した画像を表示するだけ（リンクにできない）|
|`&attachref(...,nolink,50%)>リンク先ページ名`|画像をリンクにしたい時はこちらを使う|
`nolink` は画像単体クリック時の別タブ展開を防ぐためのオプション。&br;
リンク先への遷移はそのまま機能するので、バナーリンクには必ず付けておくこと。
* このwiki固有のルール・お作法 [#wiki_rules]
** アンカーIDの付け方 [#anchor_id_rule]
見出しのアンカーIDは、PukiWikiの編集画面でページを新規作成した際に
自動生成される8文字のランダム文字列を使うのが慣習。&br;
手動で付ける場合は `[#わかりやすい名前]` でも問題ない。
とりあえず自動生成で原稿作っといて、
他ページからリンク貼りそうな見出しだけ、
意味のあるアンカー名に整理するのが良いと思います。スピード優先。
** 画像ファイルの命名規則 [#filename_rule]
以下は筆者のマイルールなので、
必ずしも守る必要はありません。
ただ、ある程度の規則性があった方が、
後々、整理する際に楽になります。
- 乗り物バナー: `vehicle_乗り物名.jpg`（例: `vehicle_f45a.jpg`）
- マップバナー: `map_マップ名.jpg`（例: `map_cracked.jpg`）
- 記事バナー: `bnr_記事名.jpg`（例: `bnr_merit_system.png`）
- スクリーンショット: `sc_連番.png`（例: `sc_1919.png`）
画像を差し替える際は`ファイル名_rev数字.jpg`（例: `bnr_f-45a_rev2.jpg`）のように書くと、
後で差し戻したり、プレビュー画面で比較検討するのがやりやすいです。
*** 画像はなるべく圧縮しましょう [#cfbb1717]
このWikiは、700KBまでの画像がアップロード可能ですが、
700KBギリギリに収めるのではなく、可能な限り、ファイルサイズを圧縮してください。
ページの読み込み速度に直結します。&br;
以下のサイトで圧縮するのがオススメです。業務でもよく使われます。
Google社が開発した画像圧縮サービス「Squoosh」
https://squoosh.app/
* 編集でよく使うテンプレート [#templates]
** 新規ページの基本構造 [#template_page]
#pre{{
* ページタイトル [#anchor]
#youtube(https://www.youtube.com/watch?v=XXXXXX);
↑ページを説明する動画。出来るだけ、あった方が望ましいです。
画像よりも、動画がページ上部にあるほうが、SEO対策の観点で有利です。
&attachref(,nolink,50%);
↑ページを説明する画像。出来るだけ、あった方が望ましいです。
ユーザーは文章を一文字も読まない前提で、画像で説明するのがWEBサイトの基本です。
一言でページ内容を説明するデスクリプション。3行以内、120文字以内が基本。
SEO対策の観点から、書いたほうがいいです。
Googleとかの検索順位が上がります。
** セクション名 [#section]
内容
結論をなるべく一番上に書いてください。
記事全文を読んでほしい気持ちはよく分かりますが、
多くのWEBサイトで、ユーザーは1スクロールもせずに離脱します。
あなたが一番伝えたいことは、スクロールしなくても見えるようにしましょう。
** 関連ページ [#related]
* 関連記事 [#related]
[[ウォーフェア]] | [[関連ページ名]]
[[ウォーフェア]] | [[関連記事名]]
* コメント [#comment]
#pcomment(,reply,20,)
}}
** テーブルの基本形（色付きヘッダー） [#template_table]
#pre{{
|BGCOLOR(#555):COLOR(white):|200|200|c
||''列1''|''列2''|h
|行1|データ|データ|
|行2|データ|データ|
}}
* コメント [#comment]
#pcomment(,reply,20,)
|
