当テンプレートの使い方
titleタグ、copyright、metaタグ、他の設定
titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>市役所・区役所・自治会向け無料ホームページテンプレート tp_yakuba1</title>
を編集しましょう。
あなたのホームページ名が「東京九州市役所」だとすれば、
<title>東京九州市役所</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。
copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© 東京九州市役所 All Rights Reserved.
の部分もあなたのサイト名に変更します。
metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。
ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。
h1ロゴのaltタグも変更しましょう。
html側に、
alt="東京九州市役所"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。
アイコン画像について（Font Awesomeの解説）
imagesフォルダに入っていない画像（アイコン）は全てFont Awesomeの素材です。
Font Awesome 公式サイト
Font Awesome アイコン一覧
iタグを使ってhtmlに直接アイコンを読み込む場合と、cssの擬似要素を使って読み込む場合があります。
それぞれ他のアイコンに置き換えたい場合は、当サイトのマニュアルをお読み下さい。
Font Awesomeを使う為に必要なタグ、ファイル類。
cssフォルダのstyle.css冒頭で読み込んでいる「Font Awesomeの読み込み」のブロック。
何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、style.cssの冒頭でCDNから読み込んでいるFont Awesome関連のファイルのバージョンを変更して動作するか確認してみて下さい。
当テンプレートには、ロゴが２種類設定されています
大きな端末用と、小さな端末用で表示を切り替えています。
<img src="images/logo.png" alt="東京九州市役所" class="pc-logo"><!--大きな端末用ロゴ-->
<img src="images/logo_s.png" alt="東京九州市役所" class="sh-logo"><!--小さな端末用ロゴ-->
logo.pngやlogo_s.pngが実際に表示させるロゴ画像で、pc-logoやsh-logoは表示を切り替える為のスタイル設定です。
ロゴ画像については、できるだけimagesフォルダに梱包されているロゴに近い状態で準備して下さい。
トップページのスライドショー（slick）の解説
トップページのスライドショーには、slickを使用しています。
slick 公式サイト
slickのスタイルは、cssフォルダのstyle.cssで設定しています。それ以外に、jsフォルダのslick.jsにも設定があります。スライドの速度はこのslick.js内の「autoplaySpeed」で調整できます。
他、slickには様々なオプションもあるので気になる人、カスタマイズしたい場合は「slick オプション」などでGoogle検索してみて下さい。
画像の追加方法
html側に既存のタグをコピペするだけでOKです。
例えば「4.jpg」という画像をスライドショーに１枚追加したい場合、現状では、
<aside class="mainimg">
<div><img src="images/1.jpg" alt=""></div>
<div><img src="images/2.jpg" alt=""></div>
<div><img src="images/3.jpg" alt=""></div>
</aside>
ですが、これに１行加えるだけです。
<aside class="mainimg">
<div><img src="images/1.jpg" alt=""></div>
<div><img src="images/2.jpg" alt=""></div>
<div><img src="images/3.jpg" alt=""></div>
<div><img src="images/4.jpg" alt=""></div>
</aside>
画像ごとにリンクも設定できます
通常の画像へのリンク設定と同じやり方でOKです。
<div><a href="index.html"><img src="images/1.jpg" alt=""></a></div>
slickを使う為に必要なタグ、ファイル類。
1. html下部にある、「jQueryの読み込み」のタグ。※slick.jsより上の行で読み込んで下さい。
2. その下にある、「スライドショー（slick）」のタグ。
3. jsフォルダ内のslick.jsファイル。
何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、CDNから読み込んでいるjQueryのバージョン及びslick関連のファイルのバージョンを変更して動作するか確認してみて下さい。
スライドショーでなく、固定画像にしたい場合。
1. htmlのスライドショー画像のうち、残したい画像以外を削除。
2. html下部にある、「スライドショー（slick）」のブロックを削除。
3. jsフォルダのslick.jsファイルも合わせて削除しておきます。
4. 上記の作業までで固定画像になりますが、関連スタイルを削除しておきたいなら、cssフォルダのstyle.cssの、
/*スライドショー（slickを使用）
からのブロックを全部削除して下さい。
上部メニューについて
画面幅が900px未満で、メインメニューが開閉ブロックタイプになります。
この数値を変更したい場合は、jsフォルダのmain.jsの、
if(window.innerWidth < 900)
の、900の数値を変更して下さい。
また、文字サイズ「大」を選択すると、２段になります。
ドロップダウンメニューについて
「区役所」のメニューはドロップダウンメニューになっています。
ドロップダウンを使う為の特別な設定は不要ですが、必ず親となるli要素の「中」に入れるようにして下さい。
※OKな例：
<li><a href="">親となるメニュー</a>
<ul>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
</ul>
</li>
※NGな例
<li><a href="">親となるメニュー</a></li>
<ul>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
</ul>
親の<a>のリンク先は上記のように空っぽ（""）にしておいて下さい。
ドロップダウンの親メニューについているアイコンもFont Awesomeです。
cssフォルダのstyle.cssの「a.ddmenu::before」で読み込んでいます。
トップページの「お知らせ」ブロックのアイコンについて
アイコン内のテキストはhtml側で直接入力されていますので必要に応じて編集して下さい。
背景色は、cssフォルダのstyle.cssの、
.new dt span
や、
.new dt span.icon-bg1
や、
.new dt span.icon-bg2
のbackgroundでそれぞれ変更できます。
新しいアイコンを追加したい場合、上記の「.new dt span.icon-bg2」ブロックをコピペし、.icon-bg2部分を.icon-bg3などに変更し、backgroundに好きな色を設定します。
後はhtml側で、
<span class="icon-bg3">〜〜〜</span>
などとすればOKです。
尚、あまり文字数が増えるとレイアウトが崩れるので注意して下さい。
文字サイズ「小」「大」について
「小」「大」の文字サイズを変更したい場合
cssフォルダのstyle.cssの冒頭にある、
/*文字サイズの設定
の所でそれぞれ指定しています。お好みで変更して頂いて構いません。
「大」をデフォルトにしたい場合
jsフォルダのfontSizeChanger.jsを開き、中のコメントを読んで変更して下さい。
ページ単位でリセットされます
サイト全体に対して適用したい場合、こちらのマニュアルをご覧下さい。
各ページの色の切り替えについて（※colorfulタイプのみ）
colorfulタイプのみ、ページ単位でテーマカラーが変わります。
使い方としては、まずhtmlのbody要素にそれぞれのclassをつけます。
「暮らし」ページであれば、
<body class="kurashi">
です。
それぞれ対応するスタイルは、cssフォルダのstyle.cssで、
/*色分け
をテキスト検索して下さい。詳しいコメント説明があります。
それぞれ、「メニューの背景色」「メインコンテンツのh2の背景色」「サブコンテンツがある場合のh3の背景色」「サイトの最上部にあるアクセントライン」を指定しています。
「#menubar li:nth-of-type(1) a」などの部分がメニューの指定ですが、ここの(1)の数字部分がメニューの何個目かの指示になります。
(3)と記載があれば３個目のメニューである「医療・福祉」となります。
テーブル
テーブルのサンプルです。必要があればコピペして使って下さい。
| 見出し | ここに本文を入れます。サンプルテキスト。 |
|---|---|
| 見出し | ここに本文を入れます。サンプルテキスト。 |
| 見出し | ここに本文を入れます。サンプルテキスト。 |
| 見出し | ここに本文を入れます。サンプルテキスト。 |
| 見出し | ここに本文を入れます。サンプルテキスト。 |
| 見出し | ここに本文を入れます。サンプルテキスト。 |
汎用開閉ブロックのサンプル
以下は「よく頂く質問」を仮定してサンプルを用意していますが汎用的な開閉ブロックなので、基本的にはどこにでも使えます。
クリック対象としたいブロックにclass="openclose"とつければ、続く要素が自動的に開閉ブロックになります。
もしすでにclass指定がある場合は、半角スペースで区切って追加すればOKです。
例：class="sample openclose"
- ここに質問を書きます。クリックで回答が開きます。
- ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。
- ここに質問を書きます。クリックで回答が開きます。ここに質問を書きます。クリックで回答が開きます。ここに質問を書きます。クリックで回答が開きます。ここに質問を書きます。クリックで回答が開きます。
- ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。
ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。