05. トップページ概要 - plasma-fusion-youth-forum/pfyss GitHub Wiki

ここでは、今年度版のトップページを作成する手順を説明します。

目次

前年度のトップページを「夏学の歴史」ページに格納する

/pfyss/contentにある_index.mdファイルをコピーし、「夏学の歴史」ページである/pfyss/content/forepastの中にペーストして、名前を20✗✗.mdに変更します。その後、/pfyss/contentに残った_index.mdの内容を編集して今年度のものにしていきます。以下では_index.mdの各項目ごとにどのように編集するか説明します。

夏学の基本情報と夏学の参加申込み概要

今年度の情報を入力します。決まっていない項目は空白とし、決まり次第入力します。

カルーセル画像

トップページの上部に配置されている、スライドショーのように切り替わる画像のことです。今年度の開催地の景観やエクスカーションの内容を表すような、4~5枚の画像(1350x900px以上)を掲載しましょう。著作権フリーかつ、高画質な日本各地の景色を探すときは写真ACがおすすめです。画像に著作権がある場合は、著作者をcreditに記載しましょう。

カルーセル画像に限らず協賛企業のロゴ以外の画像は、GitHubリポジトリの容量を圧迫してしまうため、外部（Googleフォト）にアップロードしています。 以下でGoogleフォトにアップロードされた画像をホームページに掲載する方法を解説します。

  1. 若手フォーラムアカウントのGoogleフォトで"PFYSS 20✗✗ web"という名前のアルバムを作成
  2. ホームページに掲載したい画像をそのアルバムにアップロード
  3. 画像を開き、共有ボタン→"リンクを作成"→共有リンクをコピー
  4. Embed Google Photosにて、共有リンクを入れて埋め込みリンクを作成
  5. 作成された埋め込みリンクを画像リンクにペースト

[!WARNING] 4. を経ず、共有リンクをそのまま画像リンクにペーストすると、リンク切れして画像が表示されなくなります。

協賛リスト

協賛企業が確定する前は、enableをfalseに設定し、協賛企業を募集するメッセージを表示させます。協賛企業が確定したらenableをtrueにして各企業のロゴを表示させます。協賛金をいただくまでに時間がかかる場合があるので、前倒しでロゴを表示させてよいです。

  • ロゴは容量を取らないため、/pfyss/public/img/brandsに保存されています。
  • 2024.10.02現在、アライドマテリアル、EX‐fusion、Faraday Factory Japan、Helical Fusion、日立製作所、京都フュージョニアリング、LINEAイノベーション、金属技研、NTT、助川電気工業からロゴを頂いています。
  • ロゴを協賛企業からいただくときは、横向きで、svg形式のもの、なければ高画質で背景が抜かれたものをお願いしましょう。
  • ホームページがダークモードだと黒いロゴや文字は見えなくなるため、パワーポイント等で色味を若干調整しましょう。

※講師紹介

トップページでは協賛企業のロゴの下（スケジュールの上）に講師の紹介がありますが、実は_index.mdでは編集するところがありません。05. トップページにおける講師紹介で説明します。

スケジュール

スケジュールが確定する前は、enableをfalseに設定しておきます。確定次第、trueにします。 トップページに表示されるスケジュールはGoogleカレンダーの共有リンクを元に作成されるため、trueにする際は共有リンクが必要です。以下でGoogleカレンダーの共有リンクを作成する方法について説明します。

  1. 若手フォーラムアカウントのGoogleカレンダーで設定を開く
  2. カレンダーを追加→新しいカレンダーを作成（名前を"PFYSS 20✗✗"とする）
  3. 夏の学校の予定をカレンダーに登録する（カレンダーの種類は"PFYSS 20✗✗"とする）（カレンダーの色：講義→バナナ、ポスターセッション→ブルーベリー、特別講義→ブドウ、エクスカーション→バジルとすること）
  4. 設定→マイカレンダーの設定→"PFYSS 20✗✗"→予定のアクセス権限を"一般公開して誰でも利用できるようにする"にチェック→共有可能なリンクを取得

Venue_cards

宿泊場所、エクスカーション、懇親会についてカード形式で紹介します。内容が確定する前は、enableをfalseに設定しておきます。確定次第、trueにします。