CONTENTS TYPE
コンテンツタイプ
このテンプレートにはコンテンツタイプが大きく3つ用意されています。
| class | コンテンツ幅(width:) | |||
|---|---|---|---|---|
| 1025xp~ | ~1024xp | ~960px | ~560px | |
| contents--type1 | 1180px | 100% - 165px | 100% - 10vw | 100% |
| contents--type2 | 1350px | 100% - 5vw | 100% - 10vw | 100% |
| contents--type3 | 15% / 85% | 25% / 75% | 25% / 75% | 100% |
Plugin
プラグイン
このテンプレートは以下のjQueryプラグインを使用しています。
| 名称 | 目的 | 読込み方法 |
|---|---|---|
| slick | ヘッダー、コンテンツ内のスライダー設置のため | CDN |
| easeScroll | 慣性スクロール実装のため | DL(jsフォルダ内) |
Parallax
パララックス
このテンプレートのパララックスの使い方は以下の通りです。
-
効果を付けたい要素にclass="para-item"を付加する
-
js/init.jsで基本移動値を設定する
-
class="para-item"を付けた要素にdata-reg="数値"を付加して個々のバランスを調整する。
デフォルト(基本移動値10)の場合、data-reg="数値"で以下のような動きになります。
Scllor animation
アニメーション
このテンプレートのスクロールアニメーションの使い方は以下の通りです。
-
効果を付けたい要素にclass="move"を付加する
-
効果を付けたい要素にclass="fadeInUp"かclass="fadeIn"を付加する
-
動きの調整をしたい場合はcss/animation.cssで調整する。
デフォルトの動きは以下のようになります。
fadeIn |
1.5秒かけてフェードイン |
|---|---|
fadeInUp |
1.5秒かけて上方向に移動しながらフェードイン |
|
1.5秒かけて上方向に移動しながらフェードイン(delay有) |
Slider
スライダー
このテンプレートのすべてのスライダーはslick.jsを利用しています。
js/init.jsにてオプションの変更が可能で、レスポンシブ設定も同ファイルで可能です。
画像以外にコンテンツのスライドにも対応しています。また、スライド自体にリンクを付加することも可能です。
Loading animation
ローディングアニメーション
このテンプレートのローディングアニメーションはcss/animation.cssとjs/init.jsで以下のように実装しています。
Navigation
ナビゲーション
このテンプレートのナビゲーションはグローバルナビ・SNS用ナビのセットが2種、960px以下用のドロワーナビ1種類です。TOPと本ページで確認可能です。
css/header.css(垂直ナビ)、css/header2.css(平行ナビ)で制御しているので必要な方をstyle.cssにまとめて使用して下さい。
Button
ボタン
このテンプレートではボタンに以下のスタイルがあります。
使い方
- ※OneDriveのマニュアルのテンプレート制作(制作のしかた)にてファイル構造の確認をお願いします。
- web_share_nas > 自社 > 対象のテンプレート > 必要なファイルをコピペして使用して下さい。
- 垂直ナビはheader.css、水平ナビはheader2.cssをstyle.cssにまとめて下さい。記述が重複する場合は削除をお願いします。
- wordpressは垂直ナビの下層ページで制作しております。必要に応じて差し替えて下さい。