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

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

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

メニュー
>>動的html追加作業時の注意事項
>>静的html追加作業時の注意事項
>>設置後の注意

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

設置に必要な作業

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

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

1）共通ヘッダ表示用のjavascriptとcssの設置

<head>タグ内に下記記述を追加してください。

<link rel="stylesheet" href="https://www.doshisha.ac.jp/common_header/jp/css/common_header.css">
<script src="https://www.doshisha.ac.jp/common_header/jp/js/common_header.js"></script>

2）共通ヘッダ書き込み用divタグの設置

<body>開始タグの直後に下記記述を追加してください。

<div id="doshisha_commonheader_wrapper"><span class="doshisha_commonheader_noscript">こちらに共通ヘッダが追加されます。</span></div>

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

設置に必要な作業

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

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

1）共通ヘッダファイルをサーバーにアップロードする

共通ヘッダ用のファイルをダウンロード後、サーバーへのアップロードをお願い致します。
>>共通ヘッダファイル

2）共通ヘッダ表示用のjavascriptとcssの設置

<head>タグ内に下記記述を追加してください。

<link rel="stylesheet" href="【ディレクトリを指定】/common_header/jp/css/common_header.css">
<script src="【ディレクトリを指定】/common_header/jp/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>同志社大学共通メニュー</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/"><span>同志社大学ホーム</span></a></li>
<li class="navi01"><a href="https://www.doshisha.ac.jp/information/index.html"><span>大学紹介</span></a></li><li class="navi02"><a href="https://www.doshisha.ac.jp/academics/index.html"><span>学部・大学院</span></a></li><li class="navi03"><a href="https://www.doshisha.ac.jp/education/index.html"><span>教育・図書館</span></a></li><li class="navi04">
<a href="https://www.doshisha.ac.jp/research/index.html"><span>研究・産官学連携</span></a></li>
<li class="navi05"><a href="https://www.doshisha.ac.jp/student_life/index.html"><span>学生生活・就職</span></a></li><li class="navi06"><a href="https://www.doshisha.ac.jp/international/index.html"><span>国際交流・留学</span></a></li></ul></div><div id="doshisha_commonheader_globalSubNavi"><ul><li class="entrance"><a href="https://www.doshisha.ac.jp/admissions_undergrad/entrance_exam.html"><span><b>入学試験情報</b></span></a></li><li class="recruit"><a href="https://career-center.doshisha.ac.jp/index.html"><span><b>就職・キャリア</b></span></a></li><li class="contact">
<a href="https://www.doshisha.ac.jp/contact.html"><span><b>お問い合わせ<br>一覧</b></span></a></li>
<li class="access"><a href="https://www.doshisha.ac.jp/information/campus/list.html"><span><b>交通アクセス・<br>キャンパスマップ</b></span></a></li></ul></div></div></div></div></div></div>

設置後の注意

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

設置参考例