当テンプレートの使い方
titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>若い女性ファッション＆雑貨ブランド向け 無料ホームページテンプレート tp_fashion2</title>
を編集しましょう。
あなたのホームページ名が「Sample Fashion」だとすれば、
<title>Sample Fashion</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。
copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© あなたのサイト名 All Rights Reserved.
の部分もあなたのサイト名に変更します。
metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。
ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。
h1ロゴのaltタグも変更しましょう。
html側に、
alt="あなたのサイト名"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。
イラスト、写真素材について
当テンプレートで使用しているイラストや写真素材は、弊社素材サイトhaconanaにて無料DLできます。
ライセンス契約により、haconanaポイント特典付与を行っている場合もあるので、ご予定の場合はライセンスページをチェックして下さい。（※ポイント付与特典は予告なく終了する場合もあります）
テンプレートの色変更について
cssフォルダのstyle.css冒頭に、テンプレートで主に使っている色管理設定があります。
そこのカラーコードを変更するだけで、テンプレ全体の色が変わります。
個別に細かく調整したい場合は、各classなどの設定を直接カラーコードで指定してもOKです。
メニューについて
ヘッダー下メニューと、開閉メニューの２つが入っています
開閉メニューのコードは、htmlの下の方にあります。ヘッダーのメニューとは別になるので注意して下さい。
ヘッダー下メニューは、800px以下で非表示になります。この800pxの数字を変更したい場合は、cssフォルダのstyle.cssの、
/*ヘッダー直下のメニュー（※開閉メニューとはブロックが異なります）
の中にある、
@media screen and (max-width:800px) {
の800pxの数字を変更して下さい。
動作確認の際にあまりに素早い動作をされるとスクリプトが追いつかない場合があります。特にweb業者様など慣れている環境でテストされる際は、あくまで通常ユーザーの速度で試して下さい。
ドロップダウンメニューについて
当ページのヘッダーメニューのようにドロップダウンも使えます。
ドロップダウンを使う為の特別な設定は不要ですが、必ず親となるli要素の「中」に入れるようにして下さい。
OKな例
<li><a href="">親となるメニュー</a>
<ul>
<li><a href="">ドロップダウンのメニュー</a></li>
<li><a href="">ドロップダウンのメニュー</a></li>
</ul>
</li>
NGな例
<li><a href="">親となるメニュー</a></li>
<ul>
<li><a href="">ドロップダウンのメニュー</a></li>
<li><a href="">ドロップダウンのメニュー</a></li>
</ul>
トップページのメイン画像の解説
fashon2は全部で4タイプ
フォルダ名の語尾がカラー名で終わっているタイプは１枚静止画タイプ。
「_slide」となっているタイプはスライドショー構成。
「_movie」となっているタイプは動画。
「_imagemap」となっているタイプは、静止画ですが、上の画像がイメージマップ風になっており、クリックすることができます。
小さな端末向けの画像
画面幅800px以下の端末向けに小さな画像を使いたい場合は、htmlのsrcsetで指定されている画像ファイル名を準備したものに書き換えて下さい。デフォルトでは大きな端末用と同じファイルが指定されています。
mediaの値はcssのメディアクエリと同じなので、例えば縦長端末用などの指定も追加したいなら、
media="(max-width: 800px) and (orientation: portrait)"
にすればOKです。cssのメディアクエリと同じように設定できるので、他に必要条件があれば設定して下さい。
Photoshopのブラシで点線を描くマニュアル公開中
以下の点線を作るためのブラシ＆マニュアルを公開中です。
トップページで、セクション内の画像が横スクロールするブロック
「list-yoko-scroll2」のブロックですが、速度はcssフォルダのstyle.cssの、height: 300vh;の数値で変動します。html側のdata-speed（0.5=slow / 1=normal / 2=fast）でも変化しますが、cssの方が調整幅が広いです。中身の画像数にあわせて調整してみて下さい。
画像を増やしたり、この数値を小さくしたりした場合、横スクロール途中で解除されて縦スクロールになる場合もあるので、チェックしながら調整して下さい。
画像によっては非常に縦長にトリミングされる場合もあるので、注意して下さい。画像をしっかり見せるというより、装飾要素向き。
ul、ol要素
- これはol要素です。サンプルテキスト。
- これはol要素です。サンプルテキスト。
- これはol要素です。サンプルテキスト。
- これはul要素です。サンプルテキスト。
- これはul要素です。サンプルテキスト。
- これはul要素です。サンプルテキスト。
