PAGETOP

Sampleサンプル

目次

ホームページ

ホームページの構成

レスポンシブデザイン構成図

header

#main-logoサイトのロゴ
サイトのマークと名前になります。トップページ以外の下層ページにも同じように表示するのが一般的です。
#menu-headヘッダーナビゲーション
下層ページへのリンク
#breadcrumbsパンくずリスト
ページの階層を表示しています。
#main-imgメイン画像
サイトのイメージをあらわす画像です。
#chatchキャッチコピー
このサイトのアピールフレーズになります。

main

#insistenceアピールポイント
このサイトは何をアピールしているのかのレビューです。
#main-themeメインテーマ
このページの本文

main/sider

#contact-min連絡先
aside/.linkリンク
サイト関連ページ、サイトへのリンク
aside/.bannerバーナー
aside/.sns sns関連
snsボタン

main2関連情報

.relation-info関連記事

footer

#sitemapサイトマップ
サイトの各ページへのリンク階層
#sns-timelinesnsタイムライン
snsタイムラインを埋め込み、リアルタイムに表示されます。
.copyright著作権表示

レスポンシブレイアウトパターン

レイアウトパターン図

0画面分割なし

1画面を立て並びに分割

2r右にサイド領域がある。

2l左にサイド領域がある。

3左右にサイド領域がある。

このパターン以外にも領域分割は自由に考えることができますが、基本的には上記のパターンで製作をすすめていくことになります。

パーツサンプル

カーソルを近づけると吹き出しがあらわます。

吹き出しメニュー

表示しているページのサイト階層を示すパンくずリスト

パンくずリスト

ページのトップに戻るボタン

ページトップに戻るボタン

ポータルサイト

只今調整中です。

オプション

更新情報フォーム設置

1-->タイトル、2--->投稿日、3--->分類、本文、4--->詳細リンク、5--->画像 をプライベートフォームから入力しデータベースに登録することにより、表示されます。 レスポンシブデザインだのでスマホにも対応しています。

更新情報画面

トップページにも更新情報を反映することができます。

更新レビュー画面

google mapに情報をプロットする

プライベートな位置情報をオリジナルアイコン、吹き出しにて表示いたします。別途、google api認証キーを取得する必要があります。

地図画面

スライドショー設置

何枚でも画像登録できます。速度調整、キャンプション、サムネイル選択、fadein,fadeout調整ができます。

  • 白州三つ葉つつじ
  • 白州山百合
  • わにつか桜
  • 韮崎おおきんけぎく
  • 韮崎おとぎりそう

料金計算

項目を選択、記入し、合計ボタンを押すと合計額が表示される。レスポンシブデザインなのでスマホ画面にも対応しています。