キャンプ・アウトドア情報メディア向け無料ホームページテンプレート tp_media1

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

利用規約のご案内

このテンプレートは、Template Partyにて無料配布している『キャンプ・アウトドア情報メディア向け無料ホームページテンプレート tp_media1』です。必ずダウンロード先のサイトの利用規約をご一読の上でご利用下さい。

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

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

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

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

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

● ● ● ●
cssフォルダのtheme.cssで一括置き換えできますし、個別に直接カラーコードを指定してもOKです。

当テンプレートの使い方

titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>キャンプ・アウトドア情報メディア向け無料ホームページテンプレート tp_media1_camp</title>
を編集しましょう。
あなたのホームページ名が「サンプルアウトドアマガジン」だとすれば、
<title>サンプルアウトドアマガジン</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。
記事ページは、ページごとに記事のタイトルを入れるのがおすすめです。

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

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

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

ロゴ画像のaltタグも変更しましょう。
headerとfooterのhtml側に2箇所、
alt="あなたのサイト名"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。

h1（一番大きな見出し）について

headerの一番上の小さな1行（<h1>週末をもっと楽しくする、キャンプ・アウトドア情報メディア</h1>）がh1です。サイトの内容が伝わる一文に書き換えて下さい。ロゴは<p class="logo">にしています。
画面幅600px以下では、このh1は非表示になります。

3カラムのレイアウトについて

中央の<main>と、左右の<div class="sub">（2つとも同じclassです）を横に並べています。cssはstyle.cssの「contents（３カラム）」で検索すると該当ブロックが出てきます。

2カラム・1カラムにする

2つ目の<div class="sub">〜</div>を削除すると、2カラム（左にサブ、右にmain）になります。mainの幅は自動で広がります。
両方の.subを削除すると、1カラムになります。
このページ（_readme.html）は、両方の.subを削除した1カラムの見本です。

サブを右側に置いた2カラムにしたい場合は、.subを1つだけ残した上で、style.cssの「#contents .sub」のorder: -1;の1行を削除して下さい。

画面幅による変化

画面幅1200pxより広い場合：3カラム
画面幅900〜1200px：左のサブとmainの2カラム。右のサブはmainの下に回り、中のボックスが横に並びます
画面幅900px以下：main → 左のサブ → 右のサブの順に縦に並びます

サブの幅、サイト全体の幅

左右のサブの幅は、style.cssの「#contents .sub」（左）と「#contents .sub + .sub」（右）のwidth: clamp(180px, 18%, 230px);で変更できます。（最小、基本、最大の順です）
サイト全体の最大幅は、「#container」のmax-width: 1280px;で変更できます。

サブのボックスを枠線付きにする

このテンプレートのサブのボックスは、枠線なし（直置き）のデザインです。
<div class="sub box">とすると、その列のボックスがすべて枠線付きになり、見出しが色付きの帯になります。
1つのボックスだけ枠線付きにしたい場合は、<div class="sub-box box">として下さい。

検索窓（Googleのサイト内検索）について

headerの検索窓は、Googleの検索結果から、あなたのサイトのページだけを探す仕組みです。プログラムは不要です。

ご自分のサイトのドメインに書き換えて下さい。
html側の<input type="hidden" name="sitesearch" value="example.com">のexample.comを、ご自分のサイトのドメイン（例：sample.com）に変更して下さい。全ページのheaderにあります。

ご利用の前に、次の2点を必ずご確認下さい。

Googleに登録（インデックス）されていないページは、検索しても表示されません。新しくサイトを作った場合は、Googleに登録されるまで、何もヒットしないことがあります。
検索結果は、あなたのサイトの中ではなく、Googleの検索結果ページで表示されます。

検索窓が不要な場合は、html側の<form class="search"〜</form>を削除して下さい。cssはstyle.cssの「検索窓」で検索すると該当ブロックが出てきます。画面幅900px以下では、ロゴの下に幅いっぱいで表示されます。

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

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

headerのSNSアイコンは、画面幅600px以下では非表示になります（footerにも同じアイコンがあります）。

メニューは均等の幅で横に並びます。メニューを増やして1行に入りきらなくなった場合は、自動で折り返します。
「記事一覧」には、ドロップダウンメニューを入れています。記事一覧ページ（list.html）の各カテゴリー（id="cooking"など）に直接飛びます。

このテンプレートのメニューは、枠線だけのデザインです（<div id="menubar" class="border">）。class="border"を削除すると、メインカラーで塗りつぶしたメニューになります。

現在表示しているページのメニューには、<li class="current">を付けています。

画面幅900px未満で開閉メニューになります

900pxの数値を変更したい場合は、jsフォルダのmain.js冒頭にある、
const breakPoint = 900;
この数字を変更して下さい。

動作確認の際にあまりに素早い動作をされるとスクリプトが追いつかない場合があります。特にweb業者様など慣れている環境でテストされる際は、あくまで通常ユーザーの速度で試して下さい。

アイコン画像について（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」、英字は「Jost」を使っています。どちらもGoogle Fontsで、cssフォルダのtheme.css冒頭で読み込んでいます。

日本語のフォントはtheme.cssの--base-font、英字のフォントは--accent-fontで変更できます。

写真素材について

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

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

3枚の写真が5秒ごとに切り替わるスライドショーです。cssはstyle.cssの「メイン画像」で検索すると該当ブロックが出てきます。

写真の左下に、記事のタイトルを表示しています。<h2><a href="…"><span>特集</span>タイトル</a></h2>のspanの部分が、カテゴリーのラベルになります。タイトルの部分をクリックすると、リンク先に飛びます。
画面幅600px以下では、タイトルの下の説明文は非表示になります。

画面幅900px以下では、mainimg1_s.jpgなどの、スマホ用の写真に切り替わります。

切り替えの間隔を変えたい場合は、<div class="mainimg" data-interval="7000">のように指定して下さい（7000で7秒）。

見出し（h2・h3）について

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

見出しの右の英字は、html側の<h2>見出し<span>英字</span></h2>のspanの部分です。不要な場合は、spanごと削除して下さい。
h3は、記事ページの小見出しで使っています。

トップページの各ブロック

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

特集（.list1 big）

新着記事と同じ.list1にbigを追加すると、2列の大きなカードになり、タイトルが写真の下に重なります。mainの幅が499px以下で1列になります。

キャンプ飯、ギア・道具（.list3）

写真が左、文字が右の横長のリストです。2列で、mainの幅が599px以下で1列になります。

お知らせ（.news）

日付の横の小さな枠はカテゴリーです。目立たせたい場合は<span class="accent-color">とすると、アクセントカラーの背景になります。
カテゴリーの文字数が多くても、日付の列の幅が自動で広がるので、折り返しません。

サブ（左右の列）の各ボックス

いずれも、style.cssでそれぞれの名前で検索すると該当ブロックが出てきます。ボックスは<div class="sub-box">〜</div>単位で、追加・削除・左右の入れ替えができます。

カテゴリー（.sub-menu）：右端の数字は記事数です。<span>(24)</span>を削除すれば、数字なしになります。
タグ（.sub-tags）：角の丸いタグです。
お知らせ（.sub-news）：日付とタイトルのリストです。
人気記事（.sub-ranking）：順位の番号は自動で付きます。1〜3位はアクセントカラーです。写真は小さな正方形に切り抜いて表示しています。
運営者（.sub-profile）：写真は丸く切り抜いて表示しています。

下層ページについて

記事一覧（list.html）

カテゴリーごとに、新着記事と同じカード（.list1）を並べています。各カテゴリーの<section id="cooking">などに、メニューのドロップダウンから直接飛びます。

記事ページ（article.html）

記事の見本です。小見出し（h3）、箇条書き、写真の説明文（<figcaption>）、「ポイント」の囲み（<div class="box">）を使っています。記事を増やす場合は、このページをコピーして使って下さい。

特集（feature.html）

トップページの特集と同じ.list1 bigです。

このサイトについて（about.html）

運営者情報の表は.ta1です。

お問い合わせ（contact.html）

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

footerブロックの解説

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

デフォルトのパララックス効果の変更（.inview）

ブロックが下からふわっと出現してくるパララックスも一括置き換えができます。
変更したい場合は、js/jquery.inview_set.jsの冒頭にある、
const FX_DEFAULT = 'up';
のupを変更するだけです。デフォルトで準備されているのは以下です。
'up','down','transform1','transform2','transform3','blur'
up以外に入れ替えてみて下さい。html側にclass="inview"とあるブロックに適用されます。

補足：一部だけ違う効果（例えばblur）を使いたい場合はdata-fxを使って、
class="inview" data-fx="blur"
とすればそこだけblurが適用されます。

オリジナルで準備することもできます。css/inview.cssにcssを追加し、js/jquery.inview_set.jsの「const FX_LIST」の行に設定したスタイルを追加して下さい。

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

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

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

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

週末をもっと楽しくする、キャンプ・アウトドア情報メディア