Skip to Content

Wiki source code of 使い方ガイド

Version 2.1 by Super Admin on 2026/03/06 00:42
Show last authors
1 {{velocity}}
2 {{html wiki="false" clean="false"}}
3 <div class="user-guide">
4 <style>
5 .user-guide { max-width: 800px; margin: 0 auto; padding: 0 16px; }
6 .guide-hero { text-align: center; padding: 40px 20px 32px; margin-bottom: 32px; background: linear-gradient(135deg, var(--primary-bg) 0%, #e8e9f5 100%); border-radius: var(--radius); }
7 .guide-hero h1 { font-size: 1.6em; color: var(--primary); margin: 0 0 8px; }
8 .guide-hero p { color: var(--text-mid); font-size: 0.95em; margin: 0; }
9 .guide-step { margin-bottom: 28px; padding: 24px; background: #fff; border-radius: var(--radius); border: 1px solid var(--border); }
10 .guide-step-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
11 .guide-step-num { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; font-size: 0.9em; flex-shrink: 0; }
12 .guide-step-title { font-size: 1.15em; font-weight: 700; color: var(--text-dark); margin: 0; }
13 .guide-step p, .guide-step li { font-size: 0.9em; color: var(--text-mid); line-height: 1.7; }
14 .guide-step ul { padding-left: 20px; margin: 8px 0; }
15 .guide-step li { margin-bottom: 4px; }
16 .guide-tip { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: var(--radius-sm); padding: 12px 16px; margin-top: 12px; font-size: 0.85em; color: #1e40af; line-height: 1.6; }
17 .guide-tip strong { color: #1e3a8a; }
18 .guide-warn { background: #fef3c7; border: 1px solid #fde68a; border-radius: var(--radius-sm); padding: 12px 16px; margin-top: 12px; font-size: 0.85em; color: #92400e; line-height: 1.6; }
19 .guide-badge-example { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 0.8em; font-weight: 600; vertical-align: middle; }
20 .guide-badge-verified { background: #e8e9f5; color: var(--primary); }
21 .guide-badge-referred { background: #f3e8ff; color: #7c3aed; }
22 .guide-badge-general { background: #f3f4f6; color: #6b7280; }
23 .guide-section-divider { text-align: center; margin: 40px 0 32px; color: var(--text-light); font-size: 0.85em; }
24 .guide-section-divider::before, .guide-section-divider::after { content: ''; display: inline-block; width: 40px; height: 1px; background: var(--border); vertical-align: middle; margin: 0 12px; }
25 .guide-footer { text-align: center; padding: 32px 20px; background: var(--primary-bg); border-radius: var(--radius); margin-top: 40px; }
26 .guide-footer p { color: var(--text-mid); font-size: 0.88em; margin: 4px 0; line-height: 1.6; }
27 .guide-footer a { color: var(--primary); text-decoration: none; font-weight: 600; }
28 .guide-footer a:hover { text-decoration: underline; }
29 .guide-color-bar { display: inline-block; width: 4px; height: 18px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
30 .guide-color-gold { background: var(--gold); }
31 .guide-color-navy { background: var(--primary); }
32 .guide-color-purple { background: #a78bfa; }
33 .guide-color-gray { background: #d1d5db; border: 1px dashed #9ca3af; }
34 </style>
35
36 <div class="guide-hero">
37 <h1>生徒会Wikiの使い方</h1>
38 <p>まずはここから。サイトの基本的な使い方をご案内します。</p>
39 </div>
40
41 <!-- ステップ1: アカウント登録 -->
42 <div class="guide-step">
43 <div class="guide-step-header">
44 <span class="guide-step-num">1</span>
45 <h2 class="guide-step-title">アカウントを作成する</h2>
46 </div>
47 <p>投稿して情報をシェアするにはアカウントが必要です。見るだけなら登録不要です。</p>
48 <ol>
49 <li>右上の「ログイン」ボタンをタップして、「新規登録」を選ぶ</li>
50 <li><strong>メールアドレス</strong>を入力</li>
51 <li><strong>パスワード</strong>を入力（8文字以上で数字を1つ以上含める）</li>
52 <li><strong>ニックネーム</strong>を入力</li>
53 <li>あなたの<strong>立場</strong>を選ぶ（生徒・教員・卒業生・その他）</li>
54 <li>所属する<strong>学校</strong>を検索して選ぶ</li>
55 <li>生徒の人は<strong>入学年度</strong>を入力</li>
56 <li><strong>利用規約</strong>に同意してアカウント作成</li>
57 <li>メールが届いたら、メール内のリンクをクリックして完了</li>
58 </ol>
59 <div class="guide-tip">
60 <strong>ヒント:</strong> ニックネームはいつでも変更できます。本名はサイト内では見えません。
61 </div>
62 </div>
63
64 <!-- ステップ2: マイページ -->
65 <div class="guide-step">
66 <div class="guide-step-header">
67 <span class="guide-step-num">2</span>
68 <h2 class="guide-step-title">マイページを確認する</h2>
69 </div>
70 <p>ログインしたら、メニューから「マイページ」に行くと、自分のプロフィールや投稿を管理できます。</p>
71 <ul>
72 <li><strong>プロフィール：</strong>ニックネーム、学校、立場などを確認・編集</li>
73 <li><strong>アカウント管理：</strong>ニックネームやパスワードを変更、プロフィール写真を設定</li>
74 <li><strong>役員フラグ：</strong>生徒会役員なら、ここをオンにすると投稿に役員バッジが付きます</li>
75 <li><strong>招待コード：</strong>アカウントをアップグレードするための招待コード</li>
76 <li><strong>投稿履歴：</strong>あなたが投稿した活動報告の一覧</li>
77 </ul>
78 <div class="guide-tip">
79 <strong>ヒント：</strong>プロフィール写真は JPEG、PNG、WebP形式で、2MB以下なら設定できます。設定しなければ、ニックネームの最初の文字がアイコンになります。
80 </div>
81 </div>
82
83 <!-- ステップ3: 学校ページを見る -->
84 <div class="guide-step">
85 <div class="guide-step-header">
86 <span class="guide-step-num">3</span>
87 <h2 class="guide-step-title">学校のページを見る</h2>
88 </div>
89 <p>全国の学校の生徒会情報がここに集まっています。</p>
90 <ul>
91 <li>メニューの「学校一覧」をタップして、都道府県から探す</li>
92 <li>または「検索」で学校名やキーワードで検索する</li>
93 <li>各学校ページで基本情報、組織図、活動内容、予算などを確認</li>
94 <li>「生徒会情報を見る」ボタンをタップして、組織図や予算などの詳しい情報を開く</li>
95 </ul>
96 <p>一部の情報は「会員のみ」や「校内のみ」の場合があります。条件に合わなければ見られません。</p>
97 </div>
98
99 <!-- ステップ4: 学校ページを編集する -->
100 <div class="guide-step">
101 <div class="guide-step-header">
102 <span class="guide-step-num">4</span>
103 <h2 class="guide-step-title">自分の学校のページを編集する</h2>
104 </div>
105 <p>あなたの学校のページなら編集できます。</p>
106 <ul>
107 <li>学校ページの「編集」ボタンをタップ</li>
108 <li>基本情報、組織図、予算、校則など各セクションを入力・更新</li>
109 <li>各セクションごとに「誰に見せるか」を設定（全員・会員だけ・校内だけ）</li>
110 <li>保存をタップして変更を反映</li>
111 </ul>
112 <div class="guide-tip">
113 <strong>ヒント：</strong>学校ページがない場合は、「学校ページを作成」から新しく作成できます。学校の正式な名前で検索して見つからないなら、新規登録できます。
114 </div>
115 <div class="guide-warn">
116 <strong>注意：</strong>他の学校のページは編集できません。
117 </div>
118 </div>
119
120 <!-- ステップ5: 活動報告を投稿する -->
121 <div class="guide-step">
122 <div class="guide-step-header">
123 <span class="guide-step-num">5</span>
124 <h2 class="guide-step-title">活動報告を投稿する</h2>
125 </div>
126 <p>生徒会の活動を報告して、他校と情報をシェアしましょう。</p>
127 <ul>
128 <li>学校ページの「活動を追加」で活動のテーマを作る（例：文化祭、校則見直し）</li>
129 <li>「活動報告を追加」で進捗や成果を投稿</li>
130 <li>「コメント」で他の投稿への感想や質問も書ける</li>
131 <li>画像（最大4枚）やファイル（PDF・Word など、最大2つ）を添付可能</li>
132 </ul>
133 <div class="guide-tip">
134 <strong>ヒント：</strong>投稿後に直すには「編集」ボタン、消すには「削除」ボタンをタップします。
135 </div>
136 </div>
137
138 <div class="guide-section-divider">もっと知りたい方へ</div>
139
140 <!-- ステップ6: アカウント種別 -->
141 <div class="guide-step">
142 <div class="guide-step-header">
143 <span class="guide-step-num">6</span>
144 <h2 class="guide-step-title">アカウント種別と信頼度の仕組み</h2>
145 </div>
146 <p>生徒会Wikiでは、投稿の信頼度を分かりやすくするためにバッジを表示しています。</p>
147 <ul>
148 <li><span class="guide-badge-example guide-badge-verified">✓ 承認済み</span> 支援協会が本人確認したアカウント。招待コードの発行もできます</li>
149 <li><span class="guide-badge-example guide-badge-referred">🔗 紹介</span> 承認済みの人に招待されたアカウント</li>
150 <li><span class="guide-badge-example guide-badge-general">一般</span> 通常のアカウント</li>
151 </ul>
152 <p>投稿の左端に色のバーが表示され、投稿者の信頼度がすぐわかります。</p>
153 <ul>
154 <li><span class="guide-color-bar guide-color-gold"></span><strong>ゴールド</strong> 管理者の投稿</li>
155 <li><span class="guide-color-bar guide-color-navy"></span><strong>濃紺</strong> 承認済みアカウントの投稿</li>
156 <li><span class="guide-color-bar guide-color-purple"></span><strong>薄紫</strong> 紹介アカウントの投稿</li>
157 <li><span class="guide-color-bar guide-color-gray"></span><strong>グレー（破線）</strong> 一般アカウントの投稿</li>
158 </ul>
159
160 <p><strong>アカウントをアップグレードするには？</strong></p>
161 <ul>
162 <li><strong>一般 → 紹介：</strong> 承認済みの人に招待コードをもらい、マイページで入力</li>
163 <li><strong>紹介・一般 → 承認済み：</strong> 支援協会のイベントで本人確認を受ける</li>
164 </ul>
165 </div>
166
167 <!-- ステップ7: 検索 -->
168 <div class="guide-step">
169 <div class="guide-step-header">
170 <span class="guide-step-num">7</span>
171 <h2 class="guide-step-title">学校や活動を探す</h2>
172 </div>
173 <p>メニューの「検索」で全国の学校や活動を探すことができます。</p>
174 <ul>
175 <li><strong>学校検索：</strong>学校名、都道府県、学校種別などを入力して探す</li>
176 <li><strong>活動検索：</strong>活動のキーワード、都道府県、年度などで探す</li>
177 </ul>
178 <div class="guide-tip">
179 <strong>ヒント：</strong>活動検索で「承認済みのみ」を選ぶと、本人確認済みの人の投稿だけが見られます。
180 </div>
181 </div>
182
183 <!-- ステップ8: 年度管理 -->
184 <div class="guide-step">
185 <div class="guide-step-header">
186 <span class="guide-step-num">8</span>
187 <h2 class="guide-step-title">年度が変わったら</h2>
188 </div>
189 <p>学校情報は年度ごとに管理されています。4月に新年度が始まったら、学校の情報を最新に更新してください。</p>
190 <ul>
191 <li>学校ページの「新年度に移行」ボタンをタップ（承認済み・管理者のみ）</li>
192 <li>前年度の情報は自動的に保存されます</li>
193 <li>新年度ページで変更があった部分を編集</li>
194 </ul>
195 <p>活動報告は年度ごとのタブで見られます。過去の年度の投稿もいつでも確認可能です。</p>
196 </div>
197
198 <!-- ステップ9: 困ったとき -->
199 <div class="guide-step">
200 <div class="guide-step-header">
201 <span class="guide-step-num">9</span>
202 <h2 class="guide-step-title">トラブル時のよくある質問</h2>
203 </div>
204 <ul>
205 <li><strong>不適切な投稿を見つけた：</strong>投稿の「通報」ボタンをタップします</li>
206 <li><strong>パスワードを忘れた：</strong>ログイン画面の「パスワードをリセット」をタップしてメール受け取り</li>
207 <li><strong>ニックネームを変えたい：</strong>マイページの「アカウント管理」から変更できます</li>
208 <li><strong>メールアドレスを変えたい：</strong>マイページの「アカウント管理」から変更できます</li>
209 <li><strong>投稿を編集・削除したい：</strong>投稿の「編集」または「削除」ボタンをタップ</li>
210 <li><strong>学校ページに投稿できない：</strong>あなたの学校コードと一致する学校ページのみ編集可能です。学校の登録を確認してください</li>
211 <li><strong>メール確認ができない：</strong>迷惑メールフォルダを確認するか、管理者に問い合わせてください</li>
212 <li><strong>退会したい：</strong>マイページから退会申請してください</li>
213 <li><strong>ルールを知りたい：</strong>メニューの「ガイドライン」ページで詳しく確認できます</li>
214 </ul>
215 </div>
216
217 <div class="guide-footer">
218 <p>楽しく、安全に生徒会の情報をシェアしましょう！</p>
219 <p>詳しいルールについては<a href="/xwiki/bin/view/SeitokaiCode/Guidelines">ガイドライン</a>をご覧ください。</p>
220 <p>わからないことがあったら、管理者に気軽に聞いてください。</p>
221 </div>
222
223 </div>
224 {{/html}}
225 {{/velocity}}