各ウェブページに共通する、グローバルメニューやフッター ( ページ最下部 ) については、どれも同じ HTML となりますので、1 箇所につき 1 つの HTML ファイルに記述し、そのファイルを呼び出して利用しています。
このような「 共通パーツ 」は、4 箇所あります。
このページでは、それら 4 つの「 共通パーツ 」について、表示位置と HTML の内容を確認していきます。
なお、HTML を更新する際には、以下の記事「 一般的なウェブページの更新方法 」もご参照ください。
あわせて読みたい
一般的なウェブページの更新方法
ウェブページの基本的な更新手順について、見ていきましょう。 HTML ファイルを編集する前に行うことHTML ファイルを編集する際に行うことHTML ファイルを編集した後に…
それでは、それぞれの「 共通パーツ 」を具体的に見ていきましょう。
グローバルメニューの共通パーツ
- / common / nav-main.html
- 共通パーツに関するファイルは、すべて
commonフォルダ内に存在しています
見た目上の表示位置
/ common / nav-main.html の中身を書き換えると、
すべてのページのこの箇所の表示内容が変更されます ( = 共通パーツ )
/ common / nav-main.html の中身は、全部で 7 行です。
<ul>
<li><a href="/sakura/index.html">さくらとは</a></li>
<li><a href="/support/index.html">地域支えあい</a></li>
<li><a href="/fukushi/index.html">介護保険・障がい福祉</a></li>
<li><a href="/collabo/index.html">行政とNPOの協働</a></li>
<li><a href="/contact/index.html">お問い合わせ</a></li>
</ul>- 横並びの 5 項目のリンクを <ul> タグと <li> タグで記述しています
- リンク先を変更する場合には <a> タグの href 属性の値を更新します
- リンク文字を変更する場合には <a> タグに囲まれたテキストを更新します
モバイル向けメニューの共通パーツ
- / common / nav-drawer.html
見た目上の表示位置
/ common / nav-drawer.html の中身を書き換えると、
スマートフォンでウェブサイトを表示した場合の、すべてのページ上のメニューの内容が変更されます ( = 共通パーツ )
/ common / nav-drawer.html の中身は、全部で 19 行です。
<ul class="drawer-menu drawer-menu--right">
<li><a class="drawer-menu-item" href="/index.html">HOME</a></li>
<li><a class="drawer-menu-item" href="/sakura/index.html">さくらとは</a></li>
<li><a class="drawer-menu-item" href="/sakura/index4.html">さくらだより</a></li>
<li><a class="drawer-menu-item" href="/support/index.html">地域支えあい</a></li>
<li><a class="drawer-menu-item" href="/fukushi/index.html">介護保険・障がい福祉</a></li>
<li><a class="drawer-menu-item" href="/facilities/index.html">複合施設(さくら一番館)</a></li>
<li><a class="drawer-menu-item" href="/homehelp/index.html">訪問介護支援</a></li>
<!-- li><a class="drawer-menu-item" href="/homehelp/index3.html">居宅介護支援</a></li -->
<!-- li><a class="drawer-menu-item" href="/homehelp/index2.html">デイサービス</a></li -->
<li><a class="drawer-menu-item" href="/childwelfare/index.html">障がい福祉・児童支援</a></li>
<li><a class="drawer-menu-item" href="/homehelp/shoukibo.html">小規模多機能型居宅介護施設</a></li>
<li><a class="drawer-menu-item" href="/collabo/index.html">行政とNPOの協働</a></li>
<li><a class="drawer-menu-item" href="/contact/index.html">お問い合わせ</a></li>
<li><a class="drawer-menu-item" href="/recruit/index.html">採用情報</a></li>
<li><a class="drawer-menu-item" href="/kyoju/index.html">居住支援</a></li>
<li><a class="drawer-menu-item" href="/kyoju/rent/index.html">住まいにお困りの方</a></li>
<li><a class="drawer-menu-item" href="/kyoju/kurasapo/index.html">くらサポ(R)のご案内</a></li>
</ul>
- 9 行目と 10 行目は、コメント化しており、現在は表示していません ( この 2 行は削除しても問題ありません )
- 縦並びの 15 項目のリンクを <ul> タグと <li> タグで記述しています
- リンク先を変更する場合には <a> タグの href 属性の値を更新します
- リンク文字を変更する場合には <a> タグに囲まれたテキストを更新します
サイドバーの共通パーツ
- / common / right.html
見た目上の表示位置
/ common / right.html の中身を書き換えると、
すべてのページのこの箇所の表示内容が変更されます ( = 共通パーツ )
/ common / nav-drawer.html の中身は、全部で 49 行です。
そのうち 13 行については、過去に存在したリンクを、記録としてコメント化して残しているものです。
<br>
<div class="waku_gray02 mt3"><a href="/facilities/index.html"><img src="/img/menu_r01.png" alt="複合施設"/></a>
<dl>
<dt><a href="/facilities/index.html">複合施設</a></dt>
<dd><a href="/facilities/index.html" class="link-arrow-s">さくら一番館</a></dd>
</dl>
</div>
<div class="waku_gray02"><a href="/homehelp/index.html"><img src="/img/menu_r02.png" alt="訪問介護支援"/></a>
<dl>
<dt><a href="/homehelp/index.html">訪問介護支援</a></dt>
<dd><a href="/homehelp/index.html#anc0" class="link-arrow-s">介護さくら名東</a></dd>
<dd><a href="/homehelp/index.html#anc3" class="link-arrow-s">介護サービスさくら砂田橋事業所</a></dd>
<dd><a href="/homehelp/index.html#anc6" class="link-arrow-s">訪問看護ステーション 心結（ここな）</a></dd>
</dl>
</div>
<!-- div class="waku_gray02"><a href="/homehelp/index3.html"><img src="/img/menu_r03.png" alt="居宅介護支援"/></a>
<dl>
<dt><a href="/homehelp/index3.html">居宅介護支援</a></dt>
<dd><a href="/homehelp/index3.html#anc0" class="link-arrow-s">夢のぽけっと名東</a></dd>
<dd><a href="/homehelp/index3.html#anc3" class="link-arrow-s">介護サービスさくら 夢のぽけっと</a></dd>
</dl>
</div -->
<div class="waku_gray02"><a href="/homehelp/shoukibo.html"><img src="/img/menu_r04.png" alt="小規模多機能型居宅介護"/></a>
<dl>
<dt><a href="/homehelp/shoukibo.html" class="link-arrow-s">小規模多機能型居宅介護<br>看護小規模多機能型居宅介護<br>住宅型有料老人ホーム</a></dt>
<dd><a href="/homehelp/shoukibo.html" class="link-arrow-s">よってたも～れさくら一番館</a></dd>
<dd><a href="/homehelp/shoukibo.html#anc2" class="link-arrow-s">よってたも～れ 熱田</a></dd>
<dd><a href="/homehelp/shoukibo.html#anc4" class="link-arrow-s">よってたも～れ・ひょうたん山<br>ゆめみぐさ・ひょうたん山</a></dd>
</dl>
</div>
<div class="waku_gray last"><a href="/childwelfare/index.html"><img src="/img/menu_r05.png" alt="障がい福祉・児童支援"/></a>
<dl>
<dt><a href="/childwelfare/index.html">障がい福祉・児童支援</a></dt>
<dd><a href="/childwelfare/index.html#anc4" class="link-arrow-s">子ども発達サポート ケルス</a></dd>
<dd><a href="/childwelfare/index.html#anc8" class="link-arrow-s">子ども発達サポートケルス砂田橋</a></dd>
<dd><a href="/childwelfare/index.html#anc16" class="link-arrow-s">障がい福祉サービスさくら</a></dd>
<dd><a href="/childwelfare/index.html#anc10" class="link-arrow-s">ガイドヘルプサービスさくら</a></dd>
<dd><a href="/childwelfare/index.html#anc20" class="link-arrow-s">就労継続支援Ｂ型事業所セレソ</a></dd>
<dd><a href="/childwelfare/index.html#anc13" class="link-arrow-s">相談支援事業 ポコッチェリ</a></dd>
</dl>
</div>
<!-- div class="waku_gray last"><a href="/homehelp/index2.html"><img src="/img/menu_r06.png" alt="デイサービス"/></a>
<dl>
<dt><a href="/homehelp/index2.html">デイサービス</a></dt>
<dd><a href="/homehelp/index2.html#anc0" class="link-arrow-s">デイサービス極楽</a></dd>
</dl>
</div -->
<a href="/sakura/index4.html"><img src="/img/tayori_r.png" alt="さくらだより" class="mt5"/></a>
<a href="https://www.facebook.com/people/%E6%9D%91%E5%B1%85%E5%A4%9A%E7%BE%8E%E5%AD%90/100010724236530" target="_blank"><img src="/img/fb.png" alt="Facebook" class="mt5"/></a>
- コメント化している箇所は、現在は表示していません ( 削除しても問題ありません )
- リンクを <dl> <dt> <dd> タグで記述しています
- リンク先を変更する場合には <a> タグの href 属性の値を更新します
- リンク文字を変更する場合には <a> タグに囲まれたテキストを更新します
フッターの共通パーツ
- / common / footer.html
見た目上の表示位置
/ common / footer.html の中身を書き換えると、
すべてのページのこの箇所の表示内容が変更されます ( = 共通パーツ )
/ common / footer.html の中身は、全部で 65 行です。
<footer>
<div id="f_main">
<ul class="f_nav">
<li><a href="/index.html">トップページ</a></li>
<li><a href="/sakura/index.html">さくらとは</a></li>
<li><a href="/support/index.html">地域支えあい</a></li>
<li><a href="/fukushi/index.html">介護保険・障がい福祉</a></li>
<br class="pc_no">
<li><a href="/collabo/index.html">行政とＮＰＯの協働</a></li>
<li><a href="/contact/index.html">お問い合わせ</a></li>
<li><a href="/recruit/index.html">採用情報</a></li>
</ul>
<ul class="f_menu">
<li>
<dl>
<dt><a href="/facilities/index.html">複合施設</a></dt>
<dd><a href="/facilities/index.html">・さくら一番館</a></dd>
<!-- dt><a href="/homehelp/index2.html">デイサービス</a></dt>
<dd><a href="/homehelp/index2.html#anc0">・デイサービス極楽</a></dd --><!-- 2020/11/09 -->
</dl>
</li>
<li>
<dl>
<dt><a href="/homehelp/index.html">訪問介護支援</a></dt>
<dd><a href="/homehelp/index.html">・介護さくら名東</a></dd>
<dd><a href="/homehelp/index.html#anc3">・介護サービスさくら砂田橋事業所</a></dd>
<dd><a href="/homehelp/index.html#anc6">・訪問看護ステーション 心結（ここな）</a></dd><!-- 2021/07/06 -->
<dt><a href="/childwelfare/index.html">障がい福祉・児童支援</a></dt>
<dd><a href="/childwelfare/index.html#anc4">・こども発達サポートケルス</a></dd>
<dd><a href="/childwelfare/index.html#anc16">・障がい福祉サービスさくら</a></dd>
<dd><a href="/childwelfare/index.html#anc8">・こども発達サポートケルス砂田橋</a></dd>
<dd><a href="/childwelfare/index.html#anc18">・介護サービスさくら砂田橋事業所</a></dd>
<dd><a href="/childwelfare/index.html#anc10">・ガイドヘルプサービスさくら</a></dd>
<dd><a href="/childwelfare/index.html#anc20">・就労継続支援Ｂ型事業所 セレソ</a></dd>
<dd><a href="/childwelfare/index.html#anc13">・相談支援事業所 ポコッチェリ</a></dd>
</dl>
</li>
<li>
<dl>
<!-- dt><a href="/homehelp/index3.html">居宅介護支援</a></dt>
<dd><a href="/homehelp/index3.html">・夢のぽけっと名東</a></dd>
<dd><a href="/homehelp/index3.html#anc3">・介護サービスさくら 夢のぽけっと</a></dd --><!-- 2020/11/09 -->
<dt><a href="/homehelp/shoukibo.html">小規模多機能型居宅介護</a></dt>
<dd><a href="/facilities/index.html#anc3">・よってたも～れさくら一番館</a></dd>
<dd><a href="/homehelp/shoukibo.html#anc2">・よってたも～れ 熱田</a></dd>
<dd><a href="/homehelp/shoukibo.html#anc4">・よってたも～れ・ひょうたん山</a></dd>
<dt><a href="/homehelp/shoukibo.html#anc4">住宅型有料老人ホーム</a></dt>
<dd><a href="/homehelp/shoukibo.html#anc4">・ゆめみぐさ・ひょうたん山</a></dd>
<dt><a href="/kyoju/index.html">居住支援</a></dt>
<dd><a href="/kyoju/rent/index.html">・住まいにお困りの方</a></dd>
<dd><a href="/kyoju/kurasapo/index.html">・くらサポ(R)のご案内</a></dd>
</dl>
</li>
</ul>
<ul class="f_sakura">
<li>特定非営利活動法人（NPO）法人<br>
<span>介護サービスさくら</span></li>
<li>〒465-0069 <br class="pc_no">
名古屋市名東区高針荒田1011番地<br>
電話番号：052-788-2390 <br class="pc_no">
ＦＡＸ番号：052-788-2391</li>
</ul>
</div><!-- #f_main End -->
</footer>
<div id="copy">Copyright (C) 特定非営利活動法人（NPO法人） <br class="pc_no">介護サービスさくら. All Rights Reserved. </div>- コメント化している箇所は、現在は表示していません ( 削除しても問題ありません )
- リンクを <dl> <dt> <dd> タグで記述しています
- リンク先を変更する場合には <a> タグの href 属性の値を更新します
- リンク文字を変更する場合には <a> タグに囲まれたテキストを更新します
以上、共通パーツの HTML ファイルの内容を見ました。
