マップ画像を先にDLし、 imagesフォルダ内に入れてからプレビューして下さい。地図の上の任意の場所にアイコンを重ねたタイプ。
マップ画像を先にDLし、 imagesフォルダ内に入れてからプレビューして下さい。
マップもピンの位置もも全てhtml側に直接指定が入っています。 ピンの位置は、styleという後の数値になります。top(上からの配置)とleft(左からの配置)のみ使って下さい。bottomやrightを使うと場所がずれます。
html
css
カレンダーです。カレンダーの設定はjsで、レイアウトはcssで調整。
この例では、外側ブロック幅いっぱいに大きくなっていますが、外側ボックスが狭ければその中におさまります。 カレンダーの詳しい使い方はマニュアルをご覧下さい。
js
スクロール量と少しずれて背景動画が動きます。
スクロールとともに動画が少し上にずれていくパララックス。 微調整はjsで行うことができます。
動画の色そのまま。
動画に半透明の黒を重ね、上にテキスト配置。
ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。
幅いっぱい確保したい場合は、others-bg-slideup-movie1にbleed-x-partsを追加して下さい。
上のオーバーレイタイプ。
スクロール量と少しずれて背景画像が動きます。
スクロールとともに画像が少し上にずれていくパララックス。 微調整はjsで行うことができます。
画像の色そのまま。
画像に半透明の黒を重ね、上にテキスト配置。
幅いっぱい確保したい場合は、others-bg-slideup1にbleed-x-partsを追加して下さい。
section内で使う2カラムボックス。
titleブロックです。
reverseタイプ
汎用的なレイアウト。
使いたいブロックの「list-parts」をコピペしてください。外側の「others-free1-parts」は必須です。画面幅500px以下では全て1カラムになります。
美味しさと品質にこだわった、選りすぐりのグルメをセレクトしました。 贅沢な和牛や新鮮なシーフード、農家直送の旬の野菜、心ときめくスイーツまで。 特別な日のおもてなしにも、日々の食卓を豊かにする一品にも最適です。
お気に入りの味を見つけて、もっと楽しく、もっと美味しい食の時間を始めませんか? あなたの毎日を特別にする、とっておきのグルメをお届けします。
アスペクト比固定でGoogle MapをiFrameで埋め込む。YouTube動画にも。
GoogleMapの地図を変更する方法はマニュアルをご覧下さい。
日本地図。
サムネイルがレンガ状に隙間なく積み重なるレイアウト。ご利用の際はこちらをお読み下さい。
使い方マニュアルと、素材のダウンロードはこちらから。
画像の他、動画も配置できますが、容量が大きいとページの表示がガタつくので注意して下さい。 素材を追加する場合は、既存の画像または動画のブロックをコピペし、ファイル名だけ入れ替えればOKです。 「data-caption」はクリック時に画像下に表示されるテキストです。
FAQ用などに使える汎用的な開閉ブロック。
以下は「よく頂く質問」を仮定してサンプルを用意していますが汎用的な開閉ブロックなので、基本的にはどこにでも使えます。 クリック対象としたいブロックにclass="others-openclose1-parts"とつければ、続く要素が自動的に開閉ブロックになります。
アイコンを変更したい場合はマニュアルをご覧下さい。
FAQ用などに使える汎用的な開閉ブロック。開閉でアイコンが入れ替わるタイプ。
以下は「よく頂く質問」を仮定してサンプルを用意していますが汎用的な開閉ブロックなので、基本的にはどこにでも使えます。 クリック対象としたいブロックにclass="others-openclose2-parts"とつければ、続く要素が自動的に開閉ブロックになります。
マウスオンで黒のオーバーレイが上スライドして消えるタイプ。
ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。
ここに説明を入れます。サンプルテキスト。
左右の余白をなくしたい場合は、 others-overlay1-parts にbleed-x-partsを追加して下さい。
ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。
マウスオンで黒のオーバーレイが横スライドして消えるタイプ。
ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。
View More
ボックスにreverseを追加すると、このように逆配置になります。 ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。
左右の余白をなくしたい場合は、 others-overlay2-parts にbleed-x-partsを追加して下さい。
3秒後にポップアップ表示します。表示させるまでの秒数はjsで、レイアウトはcssで調整できます。
天地左右中央に出現するポップアップです。同一ページでは一回だけ表示しますがブラウザを閉じて開き直すと再び表示されます。 ボックスの色やサイズなどはcssで調整できます。ポップアップ出現までの時間はjsで調整できます。 sectionの上にある「others-popup1-overlay-parts」の1行を削除すれば、背後のオーバーレイ効果(薄暗くなる)がなくなって通常表示されます。
下部に出現するポップアップです。同一ページでは一回だけ表示しますがブラウザを閉じて開き直すと再び表示されます。 ボックスの色やサイズなどはcssで調整できます。ポップアップ出現までの時間はjsで調整できます。
画面右下に出現するポップアップです。同一ページでは一回だけ表示しますがブラウザを閉じて開き直すと再び表示されます。 ボックスの色やサイズなどはcssで調整できます。ポップアップ出現までの時間はjsで調整できます。
javascriptを使った簡易検索。
「清水の舞台」で有名。古都京都の風情と、四季折々の絶景を一望できます。
朱色の千本鳥居が幻想的なトンネルを作る、海外からも人気の高い神社です。
黄金に輝く舎利殿と鏡湖池のコントラストが美しい、京都を代表する名刹です。
天高く伸びる竹林に囲まれた癒やしの空間。着物での散策にもおすすめです。
石畳の路地に京町家が並ぶ風情ある通り。運が良ければ舞妓さんに出会えるかも。
該当するスポットが見つかりません。
javascriptを使った簡易検索です。 あらかじめ、キーワードをhtml側のdata-keywordに入れておいて下さい。 キーワード検索欄にテキストを入力するとリアルタイムで検索結果が出ます。
Font Awesomeを使用したSNSアイコンです。
制作時点でFont Awesomeにあった主なSNSアイコンを揃えました。 使いたいものだけ残し、残りは削除して下さい。サイズや色はcssで調整できます。 アイコンをセンタリングしたい場合は、html側の「sns1-parts」の部分を「sns1-parts center」に書き換えて下さい。 Font Awesomeの詳しい使い方はこちら。
ステップ案内用。
セクションが終わるまで左側の見出しが固定表示されます。
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
タブ切り替えブロック
ここにタブ1の内容を入れます。 ここにタブ1の内容を入れます。 ここにタブ1の内容を入れます。 ここにタブ1の内容を入れます。 ここにタブ1の内容を入れます。
ここにタブ2の内容を入れます。 ここにタブ2の内容を入れます。 ここにタブ2の内容を入れます。 ここにタブ2の内容を入れます。 ここにタブ2の内容を入れます。 ここにタブ2の内容を入れます。 ここにタブ2の内容を入れます。
ここにタブ3の内容を入れます。 ここにタブ3の内容を入れます。 ここにタブ3の内容を入れます。 ここにタブ3の内容を入れます。 ここにタブ3の内容を入れます。
複数のサムネイルが並んでいて、クリックすると、メイン画像が入れ替わります。静止画・動画に対応。
html側を参考に、表示させたい画像は全て「others-thumbnail-changer1-parts」内に入れて下さい。 大きな画像も兼用するので、ある程度大きめにしておきます。 ※必ず「thumbnail-view-parts」ブロックの直後に「others-thumbnail-changer1-parts」ブロックを配置して下さい。間に他のタグがあると正常に動作しません。
html側を参考に、表示させたい画像は全て「others-thumbnail-changer2-parts」内に入れて下さい。 大きな画像も兼用するので、ある程度大きめにしておきます。 ※必ず「thumbnail-view-parts」ブロックの直後に「others-thumbnail-changer2-parts」ブロックを配置して下さい。間に他のタグがあると正常に動作しません。
html側を参考に、表示させたい画像は全て「others-thumbnail-changer3-parts」内に入れて下さい。 大きな画像も兼用するので、ある程度大きめにしておきます。 ※必ず「thumbnail-view-parts」ブロックの直後に「others-thumbnail-changer3-parts」ブロックを配置して下さい。間に他のタグがあると正常に動作しません。