settings
Scrapboxの簡易マニュアル&サイトの設定用呪文ページです。
ここのページ名「settings」を変更すると呪文が発動しなくなってしまうため気を付けて下さい。
Scrapbox簡易マニュアル
特徴
編集権限を持つ人はページを表示すれば即編集可能、保存ボタン等は無いリアルタイム自動更新です。
一般的なブログ等に備わっている、Undo、Redo等も無いため、その点だけは編集時に気をつけてください。
ただし、Windowsの機能であるショートカットのCtrl+z(Undo)、Ctrl+Shift+z(Redo)は使えるので、それを上手く活用すれば困る事はそんなには無いと思います。
また、全ページ自動バックアップが毎日取られているので、間違ってページを削除してしまった等という場合はサイトオーナーの天使猫までDiscord等で連絡ください。
新規ページ作成
新規ページは上部にある検索窓左側の+をクリックで作成されます。
新規ページの最初の一行目がページタイトルになり、改行した二行目からがページの本文です。
画像貼り付け
画像を貼りたい場合は、ローカルのフォルダからページにドラッグ&ドロップしてください。
それだけで画像貼り付けが出来ます。
画像位置はマウスでドラッグか、行挿入、行削除で調整してください。
貼った画像を削除したい場合は、画像の右側(画像ではない空白部分)をクリックすると、画像URLとその右にゴミ箱アイコンが出るので、そのゴミ箱アイコンをクリックで削除出来ます。
表示サイズ設定のような物は無いので、予め画像は表示したいサイズの物を用意してください。
大きめの画像を貼り付けると勝手に縮小されてしまいますが、上記手順で画像URLを表示し、[[画像URL]]と記述を変えれば元サイズの画像表示になります。
ただし、それでもページの枠サイズより横幅が大きな画像は枠内に収まるように縮小されます。
縦方向も300pxが表示可能な最大値です。
なお、ページの一番上に貼った画像がサイトを表示した際のページ毎に見える画像(ページタイトル画像)になります。
また、現在は「ギルドからのお知らせ」をピン止めして常に最初のページに来るようにしてありますが、ここ(最先頭のピン止めページ)に貼られた最初の画像がサイトのFabiconになります。
文字装飾
基本的には装飾したい文字をドラッグで選択すると上部に黒い枠でメニューが出るのでそれを選べばいいだけです。
メニューは左から、リンク、太字、斜体、打ち消し線、文字コピーです。
手打ちをする場合の記述方法は以下です。
[* 太字] ⇒ 太字
[/ 斜体文字] ⇒ 斜体文字
[- 打ち消し] ⇒ 打ち消し
[-* 太字打ち消し] ⇒ 太字打ち消し
[__ アンダーライン] ⇒ アンダーライン
\`引用コード\` ⇒ 引用コード ( `はShift+@で入力)
[> 引用行] ⇒ > 引用行
太字のアスタリスクは増やすとその分文字が大きくなります
[**** 大きい文字] ⇒ 大きい文字
以下の文字装飾はギルドHP用にCSSで設定している物なので、Scrapboxの元からの仕様ではありません。
[! 赤文字] ⇒ 赤文字
[% 橙文字] ⇒ 橙文字
[# 緑文字] ⇒ 緑文字
[~ 青文字] ⇒ 青文字
[!* 赤太文字] ⇒ 赤太文字
[< センタリング] ⇒ 文字や画像をセンタリング表示します。画像のセンタリングは[< [画像URL]]で出来ます
あと、本来Scrapboxでは行頭に空白やタブを入れるとインデント表記(行頭に必ず・が付く)になるのですが、行頭に空白が入れられた方が記述の自由度が高くなるため、それもCSSで表示無しに設定しています。
その影響でこのサイトではScrapboxの仕様であるテーブル書式は使えません(正確には使えるのですが、テーブルが揃わずガタガタになってしまうため綺麗な表示になりません)。
リンク
外部サイトはURLを書くだけで自動でリンク表記になります。
URLを別名でリンクしたい場合は、[https://treeofsavior.jp/page/newslist.php ニュース]のように、[URL、空白、名称]と記述してください(URLと名称の位置は逆でも表示に問題はありません)。
サイト内のページからページへのリンクは[ページ名]でリンクになります。
また、このサイトのページを「リンクアドレスをコピー」でコピーすると、日本語部分がURLエンコードされてものすごく長いわけのわからん文字列になってしまいますが、その場合は「https://scrapbox.io/kabenaguri-daiko/カード会のご案内」のように変換されてしまった部分を元の日本語ページ名にすればDiscord等に貼ってもちゃんとリンクになるので短くかつわかりやすくなります。
画像も同様の方法でリンクを付ける事が出来ます。
画像をドラッグ&ドロップで貼り付けた後、画像右の空白部分をクリックして画像URLを表示し、そこに空白+URLを書き加えればOKです。
例として下のベイビースキアの画像からサイトTOPへリンクしてみました。
https://scrapbox.io/files/63ae9d8972eaa2001d7947f1.png https://scrapbox.io/kabenaguri-daiko/
小技
閲覧者にはリアルタイムで更新状況が見えてしまうため、新規で情報量の多いページを作成する場合は一度ローカルのメモ帳等に下書きを書いてからそれをコピペする、もしくはScrapboxにアカウントを登録した人は個人用のサイト(左上のScrapboxアイコンをクリック→「○○'s project」を開く)が使えるので、そこで下書きをしてからコピペで本番ページを作成したり、記述の練習や確認をするのが良いです。
以下はサイトの設定用呪文です。
現在は壁紙設定と、行頭にスペースやタブを入れた場合にインデントではなく普通にスペースやタブが反映される記述、文字色の指定、センタリングの指定を入れています。
基本的には弄らないで欲しいのですが、CSSに理解があり、「この機能便利だから入れたい!」という場合は記述を足してもらっても構いません。
ただし、その場合はDiscordのサイト関連chでその旨の報告をお願いします。
code:style.css
/* 壁紙設定 */
body{
background-repeat: repeat;
}
/* 行頭空白設定 */
.line-img { display: none }
.line .dot {
visibility:hidden !important;
margin-right:1em !important;
}
.indent {
text-indent: 1em !important;
margin-left:0px !important;
}
/* 文字色設定 */
.deco-\! {
color: crimson;
}
.deco-\% {
color: orange;
}
.deco-\# {
color: forestgreen;
}
.deco-\~ {
color: royalblue;
}
/* センタリング設定 */
.deco-\< {
position: absolute;
width: 100%;
text-align: center;
}