doshisha_commonheader

同志社大学ウェブサイト 共通ヘッダ設置に関するお願い（英語版）

同志社大学ウェブサイトにおけるユーザビリティ・アクセシビリティ改善施策の一環として、各部課で管理されているオリジナルサイトへの共通ヘッダ設置をお願い致します。
今回の共通ヘッダは、DOM(Document Object Model)による動的な設置を基本としていますが、サーバー環境や、セキュリティー(SSL)設定等の条件により、動的な設置が難しいケースも考えられます。その際は、以下の静的HTMLファイルを使用してください。

日本語版に関しては下記をご参照ください。
>>日本語版

動的html追加作業時の注意事項

設置に必要な作業

  1. 1）共通ヘッダ表示用のscriptタグおよび、linkタグを<head>タグ内に追加
  2. 2）共通ヘッダ表示用のdivタグを<body>開始タグの直後に追加

設置の手順(全ページへの作業をお願い致します。)

1）共通ヘッダ表示用のjavascriptとcssの設置
<head>タグ内に下記記述を追加してください。 
<link rel="stylesheet" href="https://www.doshisha.ac.jp/common_header/en/css/common_header.css">
<script src="https://www.doshisha.ac.jp/common_header/en/js/common_header.js"></script>
2）共通ヘッダ書き込み用divタグの設置
<body>開始タグの直後に下記記述を追加してください。 
<div id="doshisha_commonheader_wrapper"><span class="doshisha_commonheader_noscript">
doshisha_commonheader</span></div>

静的html追加作業時の注意事項

設置に必要な作業

  1. 1）共通ヘッダファイルをサーバーにアップロードする
  2. 2）共通ヘッダ表示用のscriptタグおよび、linkタグを<head>タグ内に追加
  3. 3）共通ヘッダの記述を<body>開始タグの直後に追加
  4. ※現在記載しているタグは「common_header」フォルダと同階層の場合となっております。各階層に設置する場合は相対パスの設定をお願い致します。

設置の手順(全ページへの作業をお願い致します。)

1）共通ヘッダファイルをサーバーにアップロードする
共通ヘッダ用のファイルをダウンロード後、サーバーへのアップロードをお願い致します。
>>共通ヘッダファイル
2）共通ヘッダ表示用のjavascriptとcssの設置
<head>タグ内に下記記述を追加してください。 
<link rel="stylesheet" href="【ディレクトリを指定】/common_header/en/css/common_header.css">
<script src="【ディレクトリを指定】/common_header/en/js/common_header_off.js"></script>
3）共通ヘッダの設置
<body>開始タグの直後に下記記述を追加してください。 
<div id="doshisha_commonheader_wrapper"><div id="doshisha_commonheader_header"><div id="doshisha_commonheader_inner">
<button id="doshisha_commonheader_globalNaviBtn"><span>menu</span></button><div id="doshisha_commonheader_globalNaviWrapper">
<div id="doshisha_commonheader_globalNaviInner"><div id="doshisha_commonheader_globalNavi"><ul>
<li class="naviHome"><a href="https://www.doshisha.ac.jp/en/"><span>Home</span></a></li>
<li class="navi01">
<a href="https://www.doshisha.ac.jp/en/information/index.html"><span>About</span></a></li>
<li class="navi02">
<a href="https://www.doshisha.ac.jp/en/academics/index.html"><span>Academics</span></a></li>
<li class="navi03"><a href="https://www.doshisha.ac.jp/en/education/index.html"><span>Education & Library</span></a></li>
<li class="navi04"> <a href="https://www.doshisha.ac.jp/en/research/index.html"><span>Research & Partnerships</span></a></li>
<li class="navi05"><a href="https://www.doshisha.ac.jp/en/student_life/index.html"><span>Student Life & Career Support</span></a></li>
<li class="navi06">
<a href="https://www.doshisha.ac.jp/en/international/index.html"><span>International</span></a></li>
</ul></div><div id="doshisha_commonheader_globalSubNavi"><ul>
<li class="contact">
<a href="https://www.doshisha.ac.jp/en/contact.html"><span><b>Contact</b></span></a></li>
<li class="access"><a href="https://www.doshisha.ac.jp/en/information/campus/list.html"><span><b>Access &<br>Campus Map</b></span></a></li></ul></div></div></div></div></div></div>

設置後の注意

設置後はページの上部に共通ヘッダが表示されます。デザイン処理によっては表示が崩れる場合があります。表示が崩れた場合はデザイン調整の作業を併せてお願い致します。

設置参考例