神戸大学大学院理学研究科 化学専攻
ホームページ 納品 連絡事項
合同会社ビネクティア
当社で利用したエディタ
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)
が第29回渦糸物理ワークショップ口頭発表の部にて学生優秀発表賞を受賞しま
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 で複製して生成されています。
0
You can add this document to your study collection(s)
Sign in Available only to authorized usersYou can add this document to your saved list
Sign in Available only to authorized users(For complaints, use another form )