READMEテンプレートの説明

テンプレートのご利用前に必ずお読み下さい

利用規約のご案内

このテンプレートは、Template Partyにて無料配布している『アクセシビリティに配慮した（WCAG 2.2 AA目安）地方議員向け 無料ホームページテンプレート tp_universal1』です。必ずダウンロード先のサイトの利用規約をご一読の上でご利用下さい。

HP最下部の著作表示『Web Design:Template-Party』は無断で削除しないで下さい。
わざと見えなく加工する事も禁止です。

下部の著作を外したい場合は
Template-Partyのライセンス契約を行う事でHP下部の著作を外す事ができます。

【お知らせ】弊社運営サイト（Frames CMS）を使えば、コード編集不要！

コード編集に挫折しそうなお客様向け。コードを開く必要がなく、管理ページから楽々更新。
まずは、Frames CMS のFree（無料版）を使ってみて下さい。
業者様のクライアントへのご活用にも。

普段のテンプレートと違う書き方をしている所

アクセシビリティのため、当サイトの他のテンプレートとは書き方が違う所があります。消したり書き換えたりすると配慮が崩れる所なので、意味を知った上で編集して下さい。

このテンプレートで使用しているカラーセット

● ● ● ●
cssフォルダのtheme.cssで一括置き換えできますし、個別に直接カラーコードを指定してもOKです。
お休みのマスの背景色（style.cssの「.week1 td.off」）と、フォームの必須マークの色（form.css）は、直接カラーコードを指定しています。

当テンプレートの使い方

titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>アクセシビリティに配慮した（WCAG 2.2 AA目安）地方議員向け 無料ホームページテンプレート tp_universal1</title>
を編集しましょう。
あなたのホームページ名が「サンプル太郎 事務所」だとすれば、
<title>サンプル太郎 事務所</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。

titleとmetaタグ（description）は、ページごとに変えるのがおすすめです。
例えば「取り組み」ページなら<title>取り組み｜サンプル太郎 事務所</title>のように、そのページの内容が分かるtitleにすると、検索結果で見つけてもらいやすくなります。読み上げソフトでも、最初にtitleが読まれます。

copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© あなたのサイト名 All Rights Reserved.
の部分もあなたのサイト名に変更します。

metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。

ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。

ロゴ画像のaltタグも変更しましょう。
headerとfooterのhtml側に2箇所、
alt="あなたのサイト名"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。footerのロゴは、紺の背景用に白い文字のlogo_white.pngを使っています。

アイコン画像について（Font Awesomeの解説）

アイコンは主にFont Awesomeの素材です。
Font Awesome 公式サイト
Font Awesome アイコン一覧

iタグを使ってhtmlに直接アイコンを読み込む場合と、cssの擬似要素を使って読み込む場合があります。
それぞれ他のアイコンに置き換えたい場合は、当サイトのマニュアルをお読み下さい。

Font Awesomeを使う為に必要なタグ、ファイル類。
cssフォルダのtheme.css冒頭で読み込んでいる「Font Awesomeの読み込み」のブロック。

何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、theme.cssの冒頭でCDNから読み込んでいるFont Awesome関連のファイルのバージョンを変更して動作するか確認してみて下さい。

フォントについて

日本語は、見やすいゴシック体の「Noto Sans JP」、英字（NEWS、STEP 01など）は「Jost」を使っています。どちらもGoogle Fontsで、cssフォルダのtheme.css冒頭で読み込んでいます。
本文のフォントはtheme.cssの--base-font、英字は--accent-fontで変更できます。細すぎるフォントや、飾りの多いフォントは読みにくくなるのでご注意下さい。

写真素材について

当テンプレートで使用している写真素材は、弊社素材サイトhaconanaにて無料DLできます。

文字サイズ変更ボタン

ヘッダーの「標準」「大」のボタンです。押すとhtmlタグにf-smallまたはf-largeのclassが付き、文字の大きさが変わります。選んだサイズは、ブラウザを閉じるまで他のページでも引き継がれます。

「大」の時の文字サイズは、style.cssの「文字サイズの設定」にあるhtml.f-largeで変更できます（標準の約1.2倍）。
最初から「大」にしたい場合は、jsフォルダのmain.jsの「文字サイズ変更ボタン」にあるchangeFontSize('f-small');を'f-large'に変更して下さい。

ボタンが不要な場合は、html側の<div id="f-size">〜</div>を全ページから削除して下さい。

ヘッダー（header）とメニューについて

cssフォルダのstyle.cssを開き、「header」「#menubar」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。

ヘッダーの右側に、電話番号・文字サイズ変更ボタン・ご相談・ご意見ボタンを並べています。画面幅900px以下では、電話番号とご相談・ご意見が2列、その下に文字サイズ変更ボタンが並びます。

メニューは大きな端末では横1列、画面幅900px以下では2列のボタンになります。メニューの数が奇数の時は、最後の1つが横いっぱいになります。
表示中のページのメニューは、大きな端末では下線、小さな端末では紺の背景になります。

トップページメイン画像の解説

cssフォルダのstyle.cssを開き、「.mainimg」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。

左にキャッチコピーとボタン、右に写真を並べた、動きのない（静止画の）メイン画像です。写真は画面の右端までくっつき、左側の角だけ丸くしています。画面幅900px以下では、キャッチコピーの下に写真が並びます。
写真はimagesフォルダのmainimg1.jpgです。横4：縦3がおすすめです。

キャッチコピーは、トップページのh1（一番大きな見出し）です。

見出し（h2）について

cssフォルダのstyle.cssを開き、「main h2」で検索すると該当ブロックが出てきます。
<h2><span>NEWS</span>お知らせ</h2>のように書くと、上に小さな英字が付きます。英字が不要な場合はspanごと削除して下さい。

お知らせブロック（.news）

cssフォルダのstyle.cssを開き、「.news」で検索すると該当ブロックが出てきます。
日付の横の小さな枠はカテゴリーです。目立たせたい場合は<span class="accent-color">とすると、アクセントカラーの背景になります。

市民相談日の表（.week1）

cssフォルダのstyle.cssを開き、「.week1」で検索すると該当ブロックが出てきます。

お休みのマスは<td class="off">休</td>です。色だけでなく「休」の文字でも伝えているので、文字は消さないで下さい。
表の中の<caption>は、読み上げソフト用の表の説明で、画面には表示されません。scope="col"（列の見出し）、scope="row"（行の見出し）も、読み上げソフトに表の読み方を伝えるためのものです。

行を増やす場合は、<tr>〜</tr>をコピーして追加して下さい。

カードを並べるブロック（.list1）

cssフォルダのstyle.cssを開き、「.list1」で検索すると該当ブロックが出てきます。

トップの「取り組み」、プロフィールの「3つのお約束」、アクセスの「事務所の設備」で使っています。3列で、画面幅に合わせて2列、1列になります。1列の時は、アイコンを左・文字を右に並べてコンパクトにしています。

トップの「取り組み」は、タイトル（h3）の中のリンクをカード全体に広げて、どこを押してもリンク先へ移動するようにしています。リンクが不要なカードは、<h3>タイトル</h3>のようにaタグを外して下さい（3つのお約束がこの形です）。

ごあいさつ（.flex1）

cssフォルダのstyle.cssを開き、「.flex1」で検索すると該当ブロックが出てきます。
左に写真、右に文章を並べています。画面幅700px以下では縦に並びます。写真はimagesフォルダのprofile.jpgです。

ご相談の流れ（.flow1）

cssフォルダのstyle.cssを開き、「.flow1」で検索すると該当ブロックが出てきます。

4列で並び、画面幅900px以下で2列、700px以下で1列になります。ステップの数を変える場合は、html側の<li>〜</li>を追加・削除し、style.cssの「.flow1」の中にあるrepeat(4, minmax(0, 1fr))の数字も合わせて変更して下さい。

よくある質問（.faq）

cssフォルダのstyle.cssを開き、「.faq」で検索すると該当ブロックが出てきます。

質問を押すと答えが開く、開閉ブロックです。htmlの<details>と<summary>タグを使っているので、jsを使わずに動きます。キーボード（Enterキー）でも開閉でき、読み上げソフトにも開いているか閉じているかが伝わります。

最初から開いておきたい質問は<details open>とします（見本では1つ目が開いています）。質問を増やす場合は、<details>〜</details>をコピーして追加して下さい。

アクセス・Google Map（.access1、.map）

cssフォルダのstyle.cssを開き、「.access1」「.map」で検索すると該当ブロックが出てきます。

地図を差し替える場合は、Google Mapで場所を表示し、「共有」→「地図を埋め込む」でコードをコピーして、iframeタグと入れ替えて下さい。
入れ替えた後、iframeタグにtitle="○○の地図"を付け直して下さい。読み上げソフトに、何の地図かを伝えるためのものです。

地図は見やすさを優先して、カラーで表示しています。

下層ページ

ページタイトル（h1.page-title）

各ページの一番上の見出しです。<h1 class="page-title"><span>PROFILE</span>プロフィール</h1>のように書きます。

表（.ta1）

プロフィールの「経歴」「事務所の概要」、アクセスの表です。画面幅600px以下では、見出しと内容が縦に並びます。

取り組みページ（.pagelink、.box1、.check）

冒頭のボタン（<ul class="pagelink">）を押すと、ページ内の各項目（id="policy1"〜id="policy6"）へ移動します。トップの「取り組み」のカードからも、このidに移動します。項目を増やす場合は、idが重ならないようにして下さい。
「こんなお声をお聞きしています」の枠は<div class="box1">、チェックマーク付きのリストは<ul class="check">です。どちらも他のページでも使えます。

お問い合わせフォームについて

contact.htmlのフォームはサンプルです。そのままでは動作しません。
フォームのデザインは、cssフォルダのform.cssで指定しています（contact.htmlでのみ読み込んでいます）。

項目名の<label for="name">と、入力欄のid="name"は、同じ名前でつながっています（項目名を押すと入力欄が選ばれ、読み上げソフトにも項目名が伝わります）。項目を増やす時は、forとidを同じ名前にして下さい。
「ご用件」のような選択肢のまとまりは、<fieldset>と<legend>で囲んでいます。
autocomplete="name"などは、ブラウザに保存された名前や電話番号を自動で入力できるようにするためのものです。

footerブロックの解説

cssフォルダのstyle.cssを開き、「footer」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。

テンプレートの使い方に迷った場合は

サポート掲示板をご利用下さい。

足りないレイアウトは「パーツ」で補えます

新しいレイアウトを追加したい場合は、パーツのコード単体（html / css / js コード）をコピペしてご利用頂く事もできます。

パーツは、このテンプレートほどアクセシビリティ（文字の大きさ・色のコントラスト・キーボード操作など）に配慮した作りにはなっていません。
パーツを追加すると、その部分は配慮が行き届かない場合があります。使う時は、文字を小さくする指定（font-size: 0.8rem;など）を外す、薄い色の文字を濃くする、などをすると見やすくなります。