Skip to Content

Wiki source code of 使い方ガイド

Version 19.1 by Super Admin on 2026/03/18 03:55
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><strong>利用規約</strong>に同意してアカウント作成</li>
58 <li>メールが届いたら、メール内のリンクをクリックして完了</li>
59 </ol>
60 <div class="guide-tip">
61 <strong>ヒント:</strong> ニックネームはいつでも変更できます。本名はサイト内では見えません。メールが届かない場合は迷惑メールフォルダも確認してみてください。
62 </div>
63 </div>
64
65 <!-- ステップ2: マイページ -->
66 <div class="guide-step">
67 <div class="guide-step-header">
68 <span class="guide-step-num">2</span>
69 <h2 class="guide-step-title">マイページを確認する</h2>
70 </div>
71 <p>ログインしたら、メニューから「マイページ」に行くと、自分のプロフィールや投稿を管理できます。</p>
72 <ul>
73 <li><strong>プロフィール：</strong>ニックネーム、学校、立場などを確認・編集</li>
74 <li><strong>アカウント管理：</strong>ニックネームやパスワードを変更、プロフィール写真を設定</li>
75 <li><strong>役員設定：</strong>生徒会役員の人は、ここをオンにすると投稿に役員バッジが表示されます</li>
76 <li><strong>招待コード：</strong>承認済みの人からもらったコードを入力してアカウントをアップグレード</li>
77 <li><strong>投稿履歴：</strong>あなたが投稿した活動報告の一覧</li>
78 </ul>
79 <div class="guide-tip">
80 <strong>ヒント：</strong>プロフィール写真は JPEG、PNG、WebP形式で、2MB以下なら設定できます。設定しなければ、ニックネームの最初の文字がアイコンになります。
81 </div>
82 </div>
83
84 <!-- ステップ3: 学校ページを見る -->
85 <div class="guide-step">
86 <div class="guide-step-header">
87 <span class="guide-step-num">3</span>
88 <h2 class="guide-step-title">学校のページを見る</h2>
89 </div>
90 <p>全国の学校の生徒会情報がここに集まっています。</p>
91 <ul>
92 <li>メニューの「学校一覧」をタップして、都道府県から探す</li>
93 <li>または「検索」で学校名やキーワードで検索する</li>
94 <li>各学校ページで基本情報、組織図、活動内容、予算などを確認</li>
95 <li>「生徒会情報を見る」ボタンをタップして、組織図や予算などの詳しい情報を開く</li>
96 </ul>
97 <div class="guide-tip">
98 <strong>ヒント：</strong>一部の情報は「会員のみ」や「校内のみ」に設定されていることがあります。同じ学校に所属していれば「校内のみ」の情報も見られます。
99 </div>
100 </div>
101
102 <!-- ステップ4: 学校ページを編集する -->
103 <div class="guide-step">
104 <div class="guide-step-header">
105 <span class="guide-step-num">4</span>
106 <h2 class="guide-step-title">自分の学校のページを編集する</h2>
107 </div>
108 <p>あなたの学校のページなら編集できます。</p>
109 <ul>
110 <li>学校ページの「編集」ボタンをタップ</li>
111 <li>基本情報、組織図、予算、校則など各セクションを入力・更新</li>
112 <li>各セクションごとに「誰に見せるか」を設定（全員・会員だけ・校内だけ）</li>
113 <li>保存をタップして変更を反映</li>
114 </ul>
115 <div class="guide-tip">
116 <strong>ヒント：</strong>学校ページがない場合は、「学校ページを作成」から新しく作成できます。学校の正式な名前で検索して見つからないなら、新規登録できます。
117 </div>
118 <div class="guide-warn">
119 <strong>注意：</strong>他の学校のページは編集できません。
120 </div>
121 </div>
122
123 <!-- ステップ5: 活動報告を投稿する -->
124 <div class="guide-step">
125 <div class="guide-step-header">
126 <span class="guide-step-num">5</span>
127 <h2 class="guide-step-title">活動報告を投稿する</h2>
128 </div>
129 <p>生徒会の活動を報告して、他校と情報をシェアしましょう。</p>
130 <ul>
131 <li>学校ページの「活動を追加」で活動のテーマを作る（例：文化祭、校則見直し）</li>
132 <li>作成した活動で「活動報告を追加」をタップして、進捗や成果を投稿</li>
133 <li>他の人の投稿に「コメント」で感想や質問も書ける</li>
134 <li>画像（最大4枚）やファイル（PDF・Word・Excel・PowerPoint、最大2つ）を添付可能</li>
135 </ul>
136 <div class="guide-tip">
137 <strong>ヒント：</strong>投稿後に直すには「編集」ボタン、消すには「削除」ボタンをタップします。自分の投稿のみ編集・削除できます。
138 </div>
139 </div>
140
141 <div class="guide-section-divider">もっと知りたい方へ</div>
142
143 <!-- ステップ6: アカウント種別 -->
144 <div class="guide-step">
145 <div class="guide-step-header">
146 <span class="guide-step-num">6</span>
147 <h2 class="guide-step-title">アカウント種別と信頼度の仕組み</h2>
148 </div>
149 <p>生徒会Wikiでは、投稿の信頼度を分かりやすくするためにバッジを表示しています。</p>
150 <ul>
151 <li><span class="guide-badge-example guide-badge-verified">✓ 承認済み</span> 支援協会が本人確認したアカウント。招待コードの発行もできます</li>
152 <li><span class="guide-badge-example guide-badge-referred">🔗 紹介</span> 承認済みの人に招待されたアカウント</li>
153 <li><span class="guide-badge-example guide-badge-general">一般</span> 通常のアカウント</li>
154 </ul>
155 <p>投稿の左端に色のバーが表示され、投稿者の信頼度がすぐわかります。</p>
156 <ul>
157 <li><span class="guide-color-bar guide-color-gold"></span><strong>ゴールド</strong> 管理者の投稿</li>
158 <li><span class="guide-color-bar guide-color-navy"></span><strong>濃紺</strong> 承認済みアカウントの投稿</li>
159 <li><span class="guide-color-bar guide-color-purple"></span><strong>薄紫</strong> 紹介アカウントの投稿</li>
160 <li><span class="guide-color-bar guide-color-gray"></span><strong>グレー（破線）</strong> 一般アカウントの投稿</li>
161 </ul>
162
163 <p><strong>アカウントをアップグレードするには？</strong></p>
164 <ul>
165 <li><strong>一般 → 紹介：</strong> 承認済みの人に招待コードをもらい、マイページで入力</li>
166 <li><strong>紹介・一般 → 承認済み：</strong> 支援協会のイベントで本人確認を受ける</li>
167 </ul>
168 </div>
169
170 <!-- ステップ7: 検索 -->
171 <div class="guide-step">
172 <div class="guide-step-header">
173 <span class="guide-step-num">7</span>
174 <h2 class="guide-step-title">学校や活動を探す</h2>
175 </div>
176 <p>メニューの「検索」で全国の学校や活動を探すことができます。</p>
177 <ul>
178 <li><strong>学校検索：</strong>学校名、都道府県、学校種別などを入力して探す</li>
179 <li><strong>活動検索：</strong>活動のキーワード、都道府県、年度などで探す</li>
180 </ul>
181 <div class="guide-tip">
182 <strong>ヒント：</strong>活動検索で「承認済みのみ」を選ぶと、本人確認済みの人の投稿だけが見られます。
183 </div>
184 </div>
185
186 <!-- ステップ8: 年度管理 -->
187 <div class="guide-step">
188 <div class="guide-step-header">
189 <span class="guide-step-num">8</span>
190 <h2 class="guide-step-title">年度が変わったら</h2>
191 </div>
192 <p>学校情報は年度ごとに管理されています。4月に新年度が始まったら、学校の情報を最新に更新してください。</p>
193 <ul>
194 <li>学校ページの「○○年度をアーカイブして新年度に移行」ボタンをタップ（承認済み・管理者のみ）</li>
195 <li>現在の情報がその年度のアーカイブとして自動保存されます</li>
196 <li>新年度ページで変わった部分だけ編集すればOK</li>
197 </ul>
198 <p>活動報告は年度ごとのタブで見られます。過去の年度の投稿もいつでも確認可能です。</p>
199 </div>
200
201 <!-- ステップ9: 困ったとき -->
202 <div class="guide-step">
203 <div class="guide-step-header">
204 <span class="guide-step-num">9</span>
205 <h2 class="guide-step-title">トラブル時のよくある質問</h2>
206 </div>
207 <ul>
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 <li><strong>メール確認ができない：</strong>迷惑メールフォルダを確認するか、管理者に問い合わせてください</li>
215 <li><strong>退会したい：</strong>マイページから退会申請ができます。処理には数日かかります</li>
216 <li><strong>ルールを知りたい：</strong>メニューの「ガイドライン」ページで詳しく確認できます</li>
217 </ul>
218 </div>
219
220 <div class="guide-footer">
221 <p>ここまで読んでくれてありがとうございます！</p>
222 <p>楽しく、安全に生徒会の情報をシェアしていきましょう。</p>
223 <p>詳しいルールは<a href="/bin/SeitokaiCode/Guidelines">ガイドライン</a>をご覧ください。困ったことがあったら管理者に気軽に聞いてくださいね。</p>
224 </div>
225
226 </div>
227 {{/html}}
228 {{/velocity}}