神戸大学大学院理学研究科 化学専攻
ホームページ 納品 連絡事項
合同会社ビネクティア
当社で利用したエディタ
Visual Studio Code
お持ちでない、利用したい場合は、下記 URL でダウンロードしていただき、
起動後、機能拡張をインストールしてご利用ください。
https://code.visualstudio.com/download
機能拡張
・Japanese Language Pack（VSCODE 日本語化機能拡張）
・liveserver（ローカルでサーバーを起動できる。FTP にアップせずに確認できる）
・live-sass（scss を利用する場合 ※css を触らない場合必要なし）
その他学内サーバーにアップロードする際につかえそうな機能拡張
・SFTP（サーバーにあげる機能拡張）
参考：https://www.aura-office.co.jp/blog/vscode-sftp/
フォルダ構成
index.html（トップページ）
は触らない方がいいフォルダ
chemistry（化学科・化学専攻）
assets（コアファイルをまとめたフォルダ）
index.html（化学科・化学専攻一覧ページ）
scss（css を生成する scss）
chara-education.html（教育の特色ページ）
css（スタイルシートをまとめたフォルダ）
chara-research.html（研究の特色ページ）
fonts（フォントフォルダ）
curriculum-policy.html（カリキュラム・ポリシーページ）
js（JS フォルダ）
diploma-policy.html（ディプロマ・ポリシー）
images（画像フォルダ）
members（研究室・教員）
index.html（研究室・教員ページ）
common（共通画像フォルダ）
page（Top 以外ページ使用画像フォルダ）
top（Top ページ使用画像フォルダ）
exam-info（受験情報）
index.html（受験情報一覧ページ）
includes
transfer.html（3 年次編入試験ページ）
header.html（ヘッダーのパーツ）
master.html（博士課程前期課程入学試験ページ）
footer.html（フッターのパーツ）
doctor.html（博士課程後期課程入学試験ページ）
students（在学生の方へ）
共通パーツ。js で各ページに呼び出し
サーバーアップで動く
index.html（在学生の方へページ）
open-lab（オープンラボ）
index.html（オープンラボページ）
news（News）
index.html（News 一覧と過去の News へのリンクページ）
2020
index.html（2020 年の記事まとめ）
.vscode
extensions.json
settings.json
VS CODE ソフト用のフォルダ
sample.html（編集サンプル）
2021
index.html（2021 年の記事まとめ）
2022
index.html（2022 年の記事まとめ）
2023
index.html（2023 年の記事一覧ページ）
js でフォルダ指定し、記事呼び出し
どの年を呼び出すかの設定は
index.html や
news/index.html
のソースで
※別ページ参照
20230116̲1.html（この年の記事）
・
・
・
2024
index.html（2024 年の記事一覧ページ）
※とりあえずおいています
evens（Events）
index.html（Events 一覧）
News と同じ構成
access（アクセス）
index.html（アクセスページ）
english（英語）
index.html（英語ページ・英語のメンバー紹介）
js でフォルダ指定し、記事呼び出し
どの年を呼び出すかの設定は
index.html や
events/index.html
のソースで
※別ページ参照
トップページの重要なお知らせ
重要なお知らせの更新は、トップページ（index.html）のデータの下記の <!-- ▼記事▼--><!-- ▲記事▲--> で
囲まれた部分を追加・削除・変更してください。
.news-date ▶ 日付をいれてください。例）2023/12/25
.news-cat ▶ <span> の中にカテゴリ名をいれてください。例）<span> 受験情報 </span>
news-title ▶ タイトルをいれてください。リンク先がある場合は、<a> タグでリンク先を設定してください。
index.html
<!-- ▼▼.topImportant▼▼-->
<section id="topImportant" class="topImportant">
<div class="topImportant-inner container-lg">
<div class="topImportant-box">
<div class="topImportant-titleArea">
<h2 class="topImportant-title"><i class="fa-solid fa-circle-exclamation"></i> 重要なお知らせ </h2>
</div>
<div class="topImportant-newsArea">
<ul class="newsList iconuse">
<!-- ▼記事▼-->
<li>
<div class="news-meta">
<div class="news-date">2023/12/25</div>
<div class="news-cat"><span> 受験情報 </span></div>
</div>
<div class="news-title"><a href="http://www.sci.kobe-u.ac.jp/exam/adm̲doctor2024̲2̲2.htm" target="̲blank"> 博士課程後期課程
令和 6 年度 4 月入学（進学）試験（第 III 期）を 2 月 9 日に行います。</a></div>
</li>
<!-- ▲記事▲-->
</ul>
</div>
</div>
</div>
</section>
<!-- ▲▲.topImportant▲▲-->
News と Events について
トップページのトピックスである News・Events は
news と events フォルダ内の各年の index.html の
class 名「newsList」の html 部分から自動で取得します。
<ul class="newsList iconuse">
<li>
<div class="news-meta">
<div class="news-date">2024/01/01</div>
※Ajax で取得するため、サーバーにアップロードしない
と動きません。
<div class="news-cat"><span> 受験情報 </span></div>
</div>
<div class="news-title"><a href="./"> タイトル </a></div>
</li>
</ul>
設定で呼び出しを変更できます。
例）2024/index.html の .newsList 部分
年度のタイミングで記事を
<ul class="newsList iconuse load-newsList" data-load-target-year="2023" data-per-num="5"></ul>
ニュースを読み込む class 名
イベントの場合は
load-eventsList
news の何年のフォルダの
index.html を参照するか。
複数指定もできます。
"2024,2023"
何件出力するか。
ちなみに -1 だと全件です。
※5 件と設定して、フォルダ指定 2024,2023 とした場合は、2024 年が先なので 2024 年の上から 5 件
しか取得しません。
index.html の news 取得部分（#topTopics 内）
<!-- サーバーに上げると news を JS が取得し下の内容を書き換えます。
data-load-target-year にカンマ区切りで取得フォルダ名（年）を指定（複数フォルダ指定可）例：2023 複数例：2024,2023
data-per-num に件数を指定 例：20,10,-1（-1 は全件）
-->
<ul class="newsList iconuse load-newsList" data-load-target-year="2023" data-per-num="5">
</ul>
index.html の events 取得部分（#topTopics 内）
<!-- サーバーに上げると events を JS が取得し下の内容を書き換えます。
data-load-target-year にカンマ区切りで取得フォルダ名（年）を指定（複数フォルダ指定可）例：2023 複数例：2024,2023
data-per-num に件数を指定 例：20,10,-1（-1 は全件）
-->
<ul class="newsList iconuse load-eventsList" data-load-target-year="2023" data-per-num="5">
</ul>
トップページのバナー追加について
トップページにバナーを追加する時は、トップページ（index.html）のデータの下の方にある、<!-- ▼▼.
secBnr▼▼--> 内の <ul class="secBnrLink-list"> の <li> 部分を追加してください。
画像は assets/images/common/ にいれてください。
サイズは線の縁をつけた 320 X 100 px の画像バナーを作成してください。
index.html 内
<!-- ▼▼.secBnr▼▼-->
<section id="secBnr" class="secBnr">
<div class="secBnr-inner container">
<ul class="secBnrLink-list">
<li>
<a href="http://www.sci.kobe-u.ac.jp/index.htm" >
<img src="assets/images/common/bnr-sci.jpg" alt=" 神戸大学大学院理学研究科・理学部 ">
</a>
</li>
<li>
<a href="https://www.kobe-u.ac.jp/">
<img src="assets/images/common/bnr-kobeuniv.jpg" alt=" 神戸大学 ">
</a>
</li>
</ul>
</div>
</section>
<!-- ▲▲.secBnr▲▲-->
研究室・教員のメンバーの追加について
members/ や english/ ページの教員の追加・編集・削除は各のページの index.html の
<section class="memberCardList"></section> で内の、
<div class="memberCard"></div> を編集してください。
<div class="memberCard">
名前
<p class="memberCard-name"><span class="data"> 和田 昭英 </span></p>
肩書
<p class="memberCard-job"><span class="data"> 教授 </span></p>
電話番号
<p class="memberCard-tel"><span class="label">Tel</span><span class="data">078-803-5695</span></p>
部屋番号
<p class="memberCard-room"><span class="label">Room</span><span class="data"> 自 4-305</span></p>
Web サイト <p class="memberCard-website"><a href="http://www2.kobe-u.ac.jp/~adwada/index.html" target="̲blank">Web サイト
URL
</a></p>
</div>
members/index.html または english/index.html 該当部分
<section class="memberCardList">
<div class="memberCard">
<p class="memberCard-name"><span class="data"> 和田 昭英 </span></p>
<p class="memberCard-job"><span class="data"> 教授 </span></p>
<p class="memberCard-tel"><span class="label">Tel</span><span class="data">078-803-5695</span></p>
<p class="memberCard-room"><span class="label">Room</span><span class="data"> 自 4-305</span></p>
<p class="memberCard-website"><a href="http://www2.kobe-u.ac.jp/~adwada/index.html" target="̲blank">Web サイト </a></p>
</div>
<div class="memberCard">
<p class="memberCard-name"><span class="data"> 笠原 俊二 </span></p>
<p class="memberCard-job"><span class="data"> 准教授 </span></p>
<p class="memberCard-tel"><span class="label">Tel</span><span class="data">078-803-5678</span></p>
<p class="memberCard-room"><span class="label">Room</span><span class="data"> 自 4-304</span></p>
<p class="memberCard-website"><a href="http://www2.kobe-u.ac.jp/~kasha/index.htm" target="̲blank">Web サイト </a></p>
</div>
</section>
.memberCard
.memberCardList
.memberCard
ニュースとイベントの一覧ページについて
news/ と events/ ページの一覧は、トップページと同じく、指定した news と events フォルダ内の各年の
index.html の class 名「newsList」の html 部分から自動で取得します。
※Ajax で取得するのでサーバーにアップロードしないと動かないです。
<ul class="newsList iconuse load-newsList" data-load-target-year="2023" data-per-num="-1">
例）2023 年の記事を取得。お知らせの場合は年ごとにこの部分だけ変更すればいい
-1 にすると、
記事を全件取得
news/index.html または events/index.html 該当部分
<!-- サーバーに上げると news を JS が取得し下の内容を書き換えます。
data-load-target-year にカンマ区切りで取得フォルダ名（年）を指定（複数フォルダ指定可）例：2023 複数例：2024,2023
data-per-num に件数を指定 例：20,10,-1（-1 は全件）
-->
<ul class="newsList iconuse load-newsList" data-load-target-year="2023" data-per-num="-1">
</ul>
<hr>
<h4> 過去の年度の News</h4>
<ul class="jumpMenuList auto-fit iconuse">
<!--<li><a href="2023/">2023 年 </a></li>-->
<li><a href="2022/">2022 年 </a></li>
<li><a href="2021/">2021 年 </a></li>
<li><a href="2020/">2020 年 </a></li>
</ul>
お知らせ・イベントの記事は年度ごとのフォルダにわけて
管理するのが分かりやすいと思います。
<ul class="newsList iconuse">
2023
index.html
（ニュースの一覧）
お知らせの一覧の 1 記事
<li>
<div class="news-meta">
<div class="news-date">2023/12/20</div>
<div class="news-cat"><span> 受賞 </span></div>
</div>
<div class="news-title"><a href="20231220̲1.html"> 中明育さん（M2）
が第２９回渦糸物理ワークショップ口頭発表の部にて学生優秀発表賞を受賞しま
20230116̲1.html
（記事の html）
※ファイル名の後ろ ̲1 などは同じ日に記事が
複数あっても対応できるように。
̲1 や ̲2 など。
した。</a></div>
</li>
</ul>
ニュースとイベントの記事ページについて
news/ と event/ ページの記事ページは
年のフォルダ内に 20230116̲1.html など、日付と番号で html を作っています。
記事ページの html
<!-- ▼▼編集はここから▼▼-->
<article class="entry-box">
<div class="entry-header">
日付
<div class="entry-meta">
カテゴリラベル
<p class="entry-date">2023/01/16</p>
<p class="entry-category"><span class="label"> 学会発表 </span></p>
</div>
<h1 class="entry-title">2022 年 12 月に開催された国際会議・国内学会等で、当専攻の学生が研究発表を行いました。
</h1>
</div>（）
<div class="entry-body">
タイトル ：<h1 class="entry-title"> 内
本文 <div class="entry-body"> 内
<p>2022 年 12 月に開催された国際会議・国内学会等で、当専攻の学生が研究発表を行いました。</p>
<ul>
<li> 学術変革領域「散乱・揺らぎ場の包括的理解と透視の科学」 第 4 回領域会議（12/9-11・静岡）</li>
</ul>
</div>
</article>
<p class="aligncenter mt50"><a class="btn aligncenter" href="./">News 一覧へ戻る </a></p>
<!-- ▲▲編集はここまで▲▲-->
記事やページを作成した際に大切なこと
記事やページを作成した際は html の上の方にある <head> 内の
<title> や <meta content=" name="description">
<meta property="og:title"> と <meta property="og:description">
を内容に沿った変更をしてください。
ページの html の上の方にあります。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
タイトル
<meta content="width=device-width,initial-scale=1" name="viewport">
<title> あああああああああああを行いました。| 神戸大学大学院理学研究科 化学専攻 </title>
<meta content="2022 年 12 月に開催された国際会議・国内学会等で、あああああを行いました。"
name="description">
説明文
<!-- ogp -->
<meta property="og:site̲name" content=" 神戸大学大学院理学研究科 化学専攻 " />
<meta property="og:type" content="website" />
<meta property="og:image"
content="http://www.chem.sci.kobe-u.ac.jp/assets/images/common/ogp-1200x630.png">
<meta property="og:url" content="http://www.chem.sci.kobe-u.ac.jp/" />
<meta property="og:title" content=" あああああああああああを行いました。| 神戸大学大学院理学研究科 化学専
攻 "/>
タイトル（SNS など用）
<meta property="og:description" content="2022 年 12 月に開催された国際会議・国内学会等で、あああああ
を行いました。">
説明文（SNS など用）
<!-- favicon/webclipicon -->
<link rel="shortcut icon" href="/assets/images/common/favicon.ico" />
<link rel="apple-touch-icon" href="/assets/images/common/apple-touch-icon.png" />
<!-- css -->
<link rel="stylesheet" href="/assets/css/style.css">
<!-- js -->
<script src="/assets/js/main.js"></script>
<script src="/assets/js/page-function.js"></script>
</head>
html での編集で使えそうなサンプル
html での編集に使える class 名などをまとめたページを sample.html としておいております。
アップロードしても検索にかからないようにしています。
設置 URL/sample.html でアクセスしてご活用ください。
クリックでジャンプメニュー
開きます。
ソース表示部分のこちらをクリックすると
サンプルソースをコピーできます。
ヘッダーとフッターの場所
ヘッダーとフッターは共通で変更を容易にするため
assets/includes/ フォルダ内に存在します。
header.html・footer.html として存在しております。
各ページに javascript で読みこんでいますので、サーバーにアップロードすると表示されます。
<!-- ▼▼header▼▼-->
<header id="header" class="header">
<div class="header-inner">
<p class="header-logo">
<a href="{$root}"><span><img class="" src="{$root}assets/images/common/site-logo.svg" alt=" 神戸大学大学院理学研究科 化学専攻 "
/></span></a>
</p>
<div class="header-right">
<div class="header-right-up">
<div class="header-kobeuniv-logo"><a href="https://www.kobe-u.ac.jp/" target="̲blank"><img class="" src="
{$root}assets/images/common/kobe-univ-logo.svg" alt=" 神戸大学 " /></a></div>
<div class="langNavi header-langNavi">
<ul class="langNavi-links">
<li><a href="{$root}" class="langNavi-links-toggle lang-ja">JP</a></li>
<li><a href="{$root}english/" class="langNavi-links-toggle lang-en">EN</a></li>
</ul>
</div>
</div>
<nav class="globalNavi">
<ul class="globalNavi-links iconuse">
<li><a href="{$root}chemistry/"> 化学科・化学専攻 </a>
<ul>
<li> <a href="{$root}chemistry/chara-education.html"> 教育の特色 </a></li>
<li><a href="{$root}chemistry/chara-research.html"> 研究の特色 </a></li>
<li><a href="{$root}chemistry/curriculum-policy.html"> カリキュラム・ポリシー </a></li>
<li><a href="{$root}chemistry/diploma-policy.html"> ディプロマ・ポリシー </a></li>
</ul>
</li>
<li><a href="{$root}members/"> 研究室・教員 </a></li>
<li><a href="{$root}exam-info/"> 受験情報 </a>
<ul>
<li><a href="http://www.sci.kobe-u.ac.jp/exam/gakubu.htm" target="̲blank" rel="noreferrer noopener"> 学部一般選抜 </a></li>
<li><a href="{$root}exam-info/transfer.html">3 年次編入試験 </a></li>
<li><a href="{$root}exam-info/master.html"> 博士課程前期課程入学試験 </a></li>
<li><a href="{$root}exam-info/doctor.html"> 博士課程後期課程入学試験 </a></li>
</ul>
</li>
<li><a href="{$root}students/"> 在学生の方へ </a>
<ul>
<li><a href="http://www.sci.kobe-u.ac.jp/jimu/kyomu/riyotei.pdf?20210311" target="̲blank" rel="noreferrer noopener"> 理学部年
間行事 </a></li>
<li><a href="http://www.sci.kobe-u.ac.jp/chem/subject̲fsci.htm" target="̲blank" rel="noreferrer noopener"> 化学科（学部）講義
</a></li>
<li><a href="http://www.sci.kobe-u.ac.jp/chem/subject̲gssci.htm" target="̲blank" rel="noreferrer noopener"> 化学専攻講義
</a></li>
</ul>
</li>
<li><a href="{$root}open-lab/"> オープンラボ </a></li>
<li><a href="{$root}news/">News</a></li>
<li><a href="{$root}events/">Events</a></li>
<li><a href="{$root}access/"> アクセス </a></li>
</ul>
</nav>
</div>
<div class="sp̲btn">
<span class="sp̲btn-arrow"><span></span><span></span><span></span></span>
</div>
</div>
スマホのメニュー部分は <nav class="globalNavi"> の内容を js で複製して生成されています。