研究者WEBサイトテンプレート編集マニュアル

本テンプレートはデザインの整った研究室ホームページを作りたい方を対象とした無料のテンプレートです。HTML, CSS, JavaScriptを使って作成していますが、未経験者でも扱えるように基本的な部分はHTMLを差し替える、関連箇所をコピー＆ペーストするといった簡単な作業で作成・運用が可能な設計にしてあります。

本マニュアルはGitHub pagesを使って公開する前提で作成しています。GitHub pagesの環境構築がお済みでない方はGithubPagesマニュアルを参照してください。

また、デザインや機能の追加変更を希望される場合、作成・公開・更新のサポートを希望される場合は有償にて承っておりますので、ご希望の方はこちらからお問い合わせください。

ステップ1: テキストエディタを用意する

HTMLの編集自体はWindowsに標準搭載されているメモ帳等でも可能です。
しかし、メモ帳では使い勝手がよくないので テキストエディタ を使って作業することをオススメします。様々な種類のフリーソフトが公開されていますので「テキストエディタ」や「HTMLエディタ」で検索してみて、よさそうなものをダウンロードして使ってみてください。

ステップ2: テンプレートのHTMLを開く

GitHub Desktopのインストール時に設定した[Local path]内のリポジトリフォルダを開きます。場所がわからない場合はGitHub Desktopを立ち上げShow in Explorer をクリックしても開くことができます。
リポジトリフォルダ内にある index.html を右クリックしインストールした「テキストエディタ」で開いてください。

TIP
テンプレートのHTMLがどのような処理をしているのか知りたい場合には、ChatGPTなど無料で使える生成AIを活用すると便利です。
以下のように知りたい部分のソースコードをコピー＆ペーストしてプロンプトを作成するとわかりやすく回答してくれます。

ステップ3: テキストを編集する

このセクションではHTMLのテキスト編集について解説します。
HTMLを編集したあとにどのような表示になるか確認したい場合はindex.htmlをブラウザで開くか、テキストエディタのプレビュー機能を利用してください。

画像データの編集は ステップ4 で解説します。

ディスクリプションやOGPを編集する

<head>と</head>に囲まれている部分です。
headでは、検索したときに出てくるディスクリプション、ブラウザに表示されるファビコン、Xなどで共有したときに表示されるOGP(Open Graph Protocol)などの処理を行っています。
見栄えをこだわりたい場合にはこれらの表記を工夫する必要はありますが、テンプレートで「研究者WEBサイトテンプレート」となっている箇所をすべて「◯◯大学××研究室」などに置き換えるだけでも支障なく運用することは可能です。

TIP
Ctrl+Fで文字列の検索と一括置換が可能です。

TIP
OGPを適切に設定するにはページのURLと画像のURLを「絶対パス」で記述することが推奨されています。
以下、GitHubユーザ名をacademeiaに設定した場合の絶対パスの記載例です。

<meta property="og:url" content="https://academeia.github.io/index.html" />
...
<meta property="og:image" content="https://academeia.github.io/assets/images/common/ogp.jpg" />  

Newsを編集する

とに囲まれている部分です。
上から3件のニュースを表示し、それ以降のものは「もっと見る」を押すと3件ずつ見える仕様になっています。
また「記事を見る」を押すことで外部リンクに飛ばすことができます。

一つのニュースブロックは<li class="news-item" data-more="">と</li>に囲まれた部分です。ニュースの件数を増やしたい場合にはこの部分をコピー＆ペーストして編集し、古いニュースを消したい場合はこの部分を削除してください。なおニュースは時系列でソートされるわけではなく htmlに記載された順番 に表示されます。

日付、内容を編集する
日付は<div class="news-date">と</div>、内容は<div class="news-title is-link">と</div>に囲まれている部分を編集してください。
外部リンクを編集する
「記事を見る」を押すと外部リンクに飛ばすことができます。
```
  <a href="#" target="_blank" class="link">記事を見る
```
上記の”#”の部分にリンク先のURLを入れてください。
記事を見るを消す
<div class="news-text is-link">の箇所を<div class="news-text">に変更してください。

研究テーマを編集する

とに囲まれている部分です。

見出しを編集する
<h3 class="h3-number">人工知能における機械学習アルゴリズムの最適化</h3>のテキスト部分を編集してください。

見出しのナンバリングはCSSで自動的に行われます。

内容を編集する
<div class="theme-body">と</div>に囲まれている部分を編集します。
画像を表示させる場合、上部、文章の途中、下部の3つの表示が可能です。

一例として文章の途中に画像を表示させる場合を挙げます。

  <li class="theme-item">
      <h3 class="h3-number">人工知能における機械学習アルゴリズムの最適化</h3>
      <div class="theme-body">
          <p>
              当研究では、機械学習アルゴリズムの精度と効率を向上させる方法を探求しています。特に、データの前処理、特徴選択、モデル構築の各ステップでの最新の技術を組み合わせることに重点を置いています。
          </p>
          <div class="theme-img">
              <picture>
                  <img src="./assets/images/sample-ph-02.png" alt="Example image"/>
              </picture>
          </div>
          <p>
              この研究により、さまざまな分野での応用が可能なより高度な人工知能システムの開発を目指しています。例えば、医療診断、金融市場分析、自動運転車の技術など、社会に大きな影響を与える分野に貢献することを期待しています。
          </p>
      </div>
  </li>

imgのsrcには表示させたい画像のパスを入力してください。
alt（代替テキスト）はExample imageのままでもさほど支障はありませんが、画像の読み込み失敗時などに若干の影響が出る場合がありますので、簡単で構わないので画像の説明となる文章を入れておくとよいでしょう。

文章の上部もしくは下部に画像を表示させたい場合は、<p>と</p>に囲まれた文章を削除してください。

研究室のモットーを編集する

とに囲まれている部分です。

項目を編集する
<h2>研究室のモットー</h2>の部分を編集してください。
表題を編集する
<h3>知識の探求と社会への貢献</h3>の部分を編集してください。

本文を編集する

  <p>
      私たちの研究室は、最先端の科学技術を追求し、その成果を社会に還元することをミッションとしています。学術的な探究心と実社会への応用を通じて、世界に貢献することを目指します。
  </p>

を編集してください。

項目を追加する
<li>と</li>に囲まれている部分をコピー＆ペーストして編集してください。
このブロックをすべて削除したい場合
とに囲まれている部分をすべて削除してください。

研究室メンバーを編集する

とに囲まれている部分です。リストの2番⽬以降は⾮表⽰になり、もっと⾒るボタンで表⽰する仕様になっています。

属性を編集する
<h4>博士後期課程</h4>を編集してください。

メンバー名を編集する

  <div class="member-name">
      <p>佐藤　明子 (3年)</p>
      <p>田中　健一 (2年)</p>
      <p>鈴木　雅人 (1年)</p>
  </div>

に追記してください。

OB/OGを編集する
OB/OGは以下のような構造になっています。
年度を増やしたい場合には<li class="member-name-li">と</li>に囲まれている部分をコピー＆ペーストして編集してください。

  <li class="member-li-wrapp" data-more="">
      <h4>OB / OG</h4>
          <ul class="member-li">
              <li class="member-name-li">
                  <p class="member-year">1978年度</p>
                  <div class="member-name">
                      <p>山田　花 (芦田先端技研株式会社)</p>
                      <p>佐々木　一郎 (星明技術研究所　研究員)</p>
                  </div>
              </li>    
          </ul>
  </li>

項目を増やす
<li class="member-li-wrapp" data-more="">と</li>に囲まれた部分をコピー＆ペーストして編集してください。
このブロックをすべて削除したい場合
とに囲まれている部分をすべて削除してください。

プロフィールを編集する

とに囲まれている部分です。

肩書、氏名を編集する
肩書と氏名は以下のような構造になっています。
各テキストを編集してください。

  <div class="profile-info-text-wrapp">
      <p class="profile-info-position">教授</p>
      <div class="profile-info-name">
          <p class="profile-info-name-ja">佐藤 太郎</p>
          <p>Sato Taro</p>
      </div>
  </div>

外部リンクを編集する
Google ScholarやJREC-INなどの外部リンクを記載することができます。

a hrefの「#」に外部リンクのURLを記述してください。
表記を変える場合は”Google Scholar”となっている箇所を編集してください。

  <div class="profile-info-link-wrapp is-link">
      <a href="#" target="_blank" class="link"
          >Google Scholar<span class="ico"
              ><svg viewBox="0 0 14 12">
                  <use
                      xlink:href="./assets/images/ico/splite.svg#ico-link"
                  ></use></svg></span
      ></a>
  </div>

経歴などを編集する
サンプルでは項目として経歴、受賞歴、所属学会を設定しています。項目名の変更は<h4>のテキストを編集します。

年を入れた表記
各項目に年を入れる場合は以下のように記述してください。

  <li>
      <h4>受賞歴</h4>
      <ul class="profile-history-li">
          <li class="profile-history-text-wrapp">
              <p class="profile-history-year">2023</p>
              <div class="profile-history-text">
                  <p>日本データサイエンス賞受賞</p>
              </div>
          </li>
      </ul>
  </li>

同じ年の項目を増やしたい場合は<p>日本データサイエンス賞受賞</p>の下に同様の記述を追加してください。

異なる年の項目を追加したい場合は<li class="profile-history-text-wrapp">と</li>に囲まれた部分をコピー＆ペーストして追加してください。

年を入れない表記
項目に年を入れない場合は以下のように記述してください。

  <li>
      <h4>所属学会</h4>
      <ul class="profile-history-li">
          <li class="profile-history-text-wrapp">
              <div class="profile-history-text">
                  <p>全国人工知能研究学会</p>
                  <p>アジア人工知能技術学会</p>
                  <p>先端AIイノベーション学会</p>
              </div>
          </li>
      </ul>
  </li>

項目を削除する
上記をすべて削除してください。

論文・研究発表を編集する

とに囲まれている部分です。

タブを編集する
テンプレートでは、論文誌、学会発表、外部記事、書籍、その他の5つを設定しています。
<div class="swiper-slide" data-index="論⽂誌">論⽂誌</div>を編集してください。

data-index="論文誌"はグローバルナビのアコーディオンに出現する部分になりますので忘れずに編集してください。

タブの項目自体が不要な場合は上記を削除してください。

リストを編集する
<ul class="paper num">と</ul>に囲まれた部分を編集します。自動的に番号を振る表記と箇条書き表記の二種類の設定が可能です。

番号を振る場合
<ul class="paper num">としてください。上から順番に自動的に採番されます。
箇条書きにする場合
<ul class="paper">としてください。

年ごとに分類した箇条書きにする場合
以下のように記述してください。

<ul class="paper">
  <li style="list-style-type: none;">
    <span class="list-history-year">2023年</span>
  </li>
  <li class="list-item">佐藤 太郎(2023).生成モデルによるクリエイティブコンテンツの自動生成（2023年5月，全国人工知能研究学会 第38回大会）
  </li>
  <li class="list-item">佐藤 太郎(2023).スマートシティにおけるAIの役割と将来展望（2023年9月，先端AIイノベーション学会 第10回大会）
  </li><br>
</ul>

このように表示されます。 kajo-nen

Contactを編集する

とに囲まれている部分です。

テキストの編集
<p class="contact-text">と</p>に囲まれている部分を編集してください。不要な場合はこの部分を削除してください。
メールアドレスの編集
迷惑メール対策としてメールアドレスは表示させず、ボタンを押すことでコピーする仕様となっています（ボタンを押してもメーラーは立ち上がりません）

問い合わせ用のメールアドレスはinput内にあるvalue=に入力してください。
```
  <input id="tagText" type="text" value="sample@test.co.jp" hidden readonly
  />  
```
住所の編集
<div class="contact-adress">と</div>に囲まれている部分の郵便番号、住所を差し替えてください。
GoogleMapの編集
GoogleMapを使って研究室の地図を表示させることができます。

GoogleMapで表示させたい位置にピンを立て、共有アイコンを押してください。
地図を埋め込むを選択し、HTMLをコピーを押してください。
<iframe src="https...">から</iframe>までの部分をコピーした内容に差し替えてください。

フッターを編集する

とに囲まれている部分です。

ステップ4: 画像データを編集する

画像データはリポジトリフォルダ内の assets > images に格納されています。

画像は用途に応じて.jpg,.png,.svg,.icoという4種類の画像形式を用いており、差し替えたい場合は同ファイル名、同拡張子のもので上書きすればhtmlを修正することなくそのまま利用できます。
別のファイル名の画像を用いる場合はサンプル画像と同じフォルダ内に保存し、該当するパスのファイル名を書き換えてください。(altの変更は任意です)

例：メインビジュアルをlab-photo.jpgに差し替える場合
<img src="./assets/images/sample-mv.png" alt="Example image" />
↓
<img src="./assets/images/lab-photo.jpg" alt="Lab Photo2023" />

jpgとpngはWindowsのペイント等で作成編集できますが、svgやicoの編集はWindows標準搭載のアプリケーションではできません。jpg等を無料でsvgやicoに変換できるツールがありますので、インターネットで「png svg 変換ツール」「png ico 変換ツール」などと検索して探してみてください。

それぞれの画像は以下のとおりです。

imagesフォルダ

logo-lab.svg
ヘッダー左上に表示される研究室のロゴです。サンプルでは180×180のものを入れていますがサイズは自動調整される仕様になっています。
logo-university.svg
ヘッダー右上に表示される大学のロゴです。サンプルでは当社のロゴ（128×38）を入れてあります。大学ごとにレギュレーションが設定されていますので利用する際にはご自身で担当部署にお問い合わせください。
sample-mv.jpg
メインビジュアルの画像です。推奨サイズは1190×430です。縦横比が異なる画像を入れても表示はできますが、サンプルの見た目とは変わってしまいますのでペイント等で編集することをお勧めします。

TIP
AppleのRetinaディスプレイに対応させたい場合は縦横それぞれ2倍のものを用意してください。表示は重くなりますがRetinaディスプレイでもぼやけずに表示させることができます。

sample-ph-01.jpg, sample-ph-02.jpg
研究テーマ内に表示される画像です。サンプルでは200×200と300×200の二種類を用意してありますので、お好みのサイズのものを用意してください。
sample-profile.jpg
プロフィール画像です。240×320サイズを推奨しています。

commonフォルダ

ブラウザのタブに表示されるファビコンやXなどで共有したときに表示されるogpなどを入れるフォルダです。サンプルとして当社のロゴを入れてありますので必要に応じて差し替えてください。

apple_touch_icon.png
主にiOSデバイスでウェブサイトをホーム画面に追加する際に使用されるアイコンを指定するために用いられます。180×180サイズを推奨しています。
favicon.ico, favicon.svg
どちらもブラウザのタブやブックマークに表示されるファビコンです。icoは32×32サイズを推奨しています。
ogp.png
SNSでシェアされたときに表示される画像です。1200×630サイズを推奨しています。

研究室ホームページテンプレートマニュアル

株式会社アカデメイアが無料で提供している研究室ホームページテンプレートのマニュアルです