LogoMark.png

坂本隆太朗/編集マニュアル の変更点


#author("2026-02-19T01:19:42+09:00;2026-02-10T00:37:34+09:00","default:member","member")
CENTER:&scale(170){&color(#2f4f4f){''編集マニュアル''};};
RIGHT:&scale(120){&color(#2f4f4f){''坂本隆太朗''};};

CENTER:&message("サイト説明", "自分用の編集マニュアルなので意味分かんなかったらごめんなさい!なんか分かんないことあったら聞いてください!",#44617b);

''[[&color(#dc143c){お試し};>https://design.kyusan-u.ac.jp/socialdesign/?%E5%9D%82%E6%9C%AC%E9%9A%86%E5%A4%AA%E6%9C%97/%E3%81%8A%E8%A9%A6%E3%81%97]]''

(())
#contents2_1

**目次の作り方
 #contents   見出しが目次になる

**文頭記号
 :〇〇〇|△△△   定義文 〇に言葉、△に説明文
 //   編集画面でのみ閲覧可
 *   大見出し
 **   中見出し
 ***   小見出し
 -   ・1行目
 --     ◦2行目
 ---    ◦3行目
 +   01.
 ++  ⅰ.
 +++    a.
 ~   改行扱いに
&br  改行
 %%〇〇〇%%   取り消し線
 __〇〇〇__     下線
 ----  水平線
 #hr   水平線
 LEFT:    左寄せ
 CENTER:  中央寄せ
 RIGHT:   右寄せ


**文字色,背景色
 &color(#2f4f4f){〇〇〇};   {}に色を変えたい文
 #settextcolor(#2f4f4f)       ()にカラーコードでページ全体の文字色変更
 #settextcolor(#2f4f4f)       サイト全体の文字色を変更
 #setbgcolor(#2f4f4f)       サイト全体の背景色を変更
 #setbgcolor("linear-gradient(-90deg, #FF00A1, #F6FF00)")   グラデーション
 &textcolor_picker();       文字色を閲覧者が変更可能
 &bgcolor_picker();         背景色を閲覧者が変更可能
 #setbgimage(画像ファイル名)       背景を画像に変更可能
 #setbgimage(画像ファイル名,cover)   ウィンドウの長辺に合わせる
 #setbgimage(画像ファイル名,contain)   ウィンドウの短辺に合わせる
  #setbgimage(画像ファイル名,〇〇〇,opacity)  不透明度(動作不安定)  
''[[&color(#dc143c){カラーコード表};>https://www.colordic.org/]]''
''[[&color(#dc143c){カラーコードレーン};>https://www.materialpalette.com/colors]]''
''[[&color(#dc143c){カラーコードカーソル};>https://www.toptal.com/designers/colourcode]]''
''[[&color(#dc143c){グラデーション};>https://jxnblk.io/shade/?base=%23296BD6&hueShift=130&saturate=0&lighten=0]]''

**リンク
 [[ページ名]]   ソーシャルデザインのサイト内のリンク(例:サブページ等)
 URL          外部ページはURLを直接貼るだけ
 [[〇〇〇>URL]]   〇が表示されリンクになる
 #iframe( URL, [幅%], [アスペクト比%] )  サイトを表示可(できないサイトもある)
 #setunderline   リンク文字にアンダバーを表示可

 youtube,vimeoはプラグインにより簡略化
 https://youtu.be/IDOPbPJIufAの「IDOPbPJIufA」部分を
 #youtube(IDOPbPJIufA)と貼るとHPに表示
 #youtube(URL,〇〇)     〇にアスペクト比入力(0.1~3.0。4:3は0.75,16:9は0.5625)
 #youtube(URL,loop)    ループ再生可
 #youtube(URL,autoplay) ページ読み込み時に自動再生(ミュートになる)
 #youtube(URL,flip-h)    左右反転
 #youtube(URL,flip-v)    上下反転
 #youtube(URL,50%)     50%のサイズに

**画像
 画像を表示させたいページ下の「UPLOAD」にjpg,png,gif,WebP,SVGをアップロード
 推奨は200KB(512KBまでは可能)
 #image(〇〇〇) 〇には画像の名前
 #image(〇〇〇,left,50%) rightで右寄せ
 &image(〇〇〇,,50%);&image(〇〇〇,,50%) で並べて表示
 #clear で回り込み防止(画像の横に文字が来ることを防止)
 他ページにある画像は#image(ページ名/画像ファイル名)でアップロードなしで表示可
 #imageの代わりに#lightboxでも代用可(こっちはサイズを〇x〇で指定可)
''[[&color(#dc143c){画像圧縮サイト};>https://squoosh.app/]]''

**文字の大きさ
 &scale(サイズ%){〇〇〇};   画面比率に対して文字の大きさを変える(-40~500%まで)
 &small(〇〇〇);          文と相対的にサイズ縮小(文章途中に使用)
 &size(サイズ){〇〇〇};       サイズに数値を入力

**表
 |〇〇〇|  左寄せ100&の表(横や下に増やせる)
 |〇〇〇|h   ヘッダー行(上部)を太字
 |〇〇〇|f    フッター行(下部)を太字
 #settableborder(box)  罫線で囲まれる
 #settableborder(line)  罫線が上下の横線だけに
 #settableborder(none) 罫線なし,画像や動画の空白0に
 |>|  表の中に>を入れると表を空欄にできる
 |~|  でhやfを残したまま改行可能
''[[&color(#dc143c){罫線プラグイン説明};>https://design.kyusan-u.ac.jp/socialdesign/?Plugin/SetTableBorder]]''

**スライド
 #slider( 位置, 幅, パターン, 滞留時間, 切替時間, 画像01, 画像02, 画像03,・・・)
-位置     left,right,center left.rightは回り込みあり
-幅       %で設定
-パターン
--fade  デフォルト
--h1      水平スライド(数字は同時表示数。9まで可)
--v1      垂直スライド(数字は同時表示数。9まで可)
-滞留時間  スライドが止まって表示される時間(msで数値のみ入力)
-切替時間  スライドの切替にかかる時間(msで数値のみ入力)
-画像01     画像ファイル名を入力
-画像02     3つ目以降も同じように増やす

**MainVisual
[[坂本隆太朗/MainVisual]]
1.自分のMainVisualページを作成
2.自分のMainVisualページに画像や動画を表示させる
3.MainVisualの画像や動画が[[〇〇〇//MainVisual]]の〇のページに表示される

**アイコン
 &fontawesome(fas fa-home);           アイコン
 [[&fontawesome(fab fa-home); >URL]]      リンク付き
 
''[[&color(#dc143c){使用可能アイコン検索サイト};>https://fontawesome.com/v5/search?q=list&o=r&m=free]]''
↑HTML用の<i class="fas fa-home"></i>みたいなコードのfas fa-homeを()の中に入力
Fas:Font Awesome Solid
Fad:Font Awesome Brand
 block:#twitter   TwitterのPostリンク
 inline:&twitter;   TwiiterのPostリンク

**ダミースペース
 #spacer( 幅, 高さ, 回りこみ)
-幅       %で数値入力
-高さ      pxやremで数値入力
-回り込み  left,rightで回り込み指定可

**サイドバー
 #setsidebar(left)   左にサイドバー表示
 #setsidebar(right)    右にサイドバー表示
 #setsidebar(none)  サイドバー無し

**QRコード
 #qrcode( [URL], [left], [サイズ%] )     左寄せ(文章回り込み)
 #qrcode( [URL], [right], [サイズ%] )       右寄せ(文章回り込み)
 #qrcode( [URL], [center], [サイズ%] )    中央揃え

**カウント
 &counter(total);   累計のアクセス数
 &counter(today);   一日のアクセス数
 &counter(yesterday);   昨日のアクセス数

**コメント
  #article    投稿フォームを作成可
 #comment    簡易コメント窓口作成可
 #comment(above)   コメントを入力欄上部に追加
 #comment(below)   コメントを入力欄下部に追加
 #comment(nodate)  コメント時間を表示させない(デフォは表示)
 #comment(noname) コメント記入者の入力なしに可(デフォは入力) 

**解答
 &answer(〇〇〇);          〇をカーソルによって表示可(パソコンのみ)
 ''ans:''&answer(〇〇〇);みたいなのがおすすめ
 &answer2(〇〇〇,△△△);  △を〇をクリックすることで表示可

**スケジュール
 #schedule  カレンダー表示可

**RSS(Rich Site Summary)表示
 #showrss( RSSのURL )  ニュースやブログの更新情報を表示可

**ドキュメントファイル
 UPLOADでファイルをアップロード
 &ref();  ファイルを表示可

**検索バー
 #lookup( InterWikiName,検索,フォームのデフォルト)
''[[&color(#dc143c){検索対応サイトリスト};>https://design.kyusan-u.ac.jp/socialdesign/?InterWikiName]]''

**数式(何もわかってない)
 &mathjax( LaTex記法の数式 ); > インライン数式モードが適用
 #mathjax( LaTex記法の数式 ) > ディスプレイ数式モードが適用
 2次方程式 &mathjax(  ax^2+bx+c=0 \quad ( a \neq 0 )  ); の解は
 #mathjax( x = \frac{-b \pm \sqrt{b^2-4ac}}{2a} )
 #mathjax( a=\sum_{i=0}^{n} (1+x_i+x_i^2) )

#settextcolor(#2f4f4f)
~
~