ホームページ作成について

質問

こちらhttp://www.hokuriku-mazda.jp/testdrive/?area=fukui
のページを参考にwordpressのオリジナルテーマにて作成中です。

私はHTML・CSSが分かる程度なので知識不足で・・
申し訳ございませんが、このページを作りにあたり、
どういったものを導入すれば宜しいでしょうか？
また、jQueryやWPのプラグインで簡単に設置する方法がもしありましたら
教えて頂けるとありがたいです。

どうぞご回答頂けますようお願い申し上げます。

回答No.3

coconutcurry

＞このページを作りにあたり、どういったものを導入すれば宜しいでしょうか？

まずはページのソースを確認しましょう。
上部にタブが２段ありますが（車から試乗車を選ぶ 等）ソースやパラメータをみる限りJavascriptではなくphp（include）を使っているようです。

＞jQueryやWPのプラグインで簡単に設置する方法
WPに組み込まれたjQueryがありますので、そちらを使ってください。
やり方はウェブ上に沢山公開されていますのでいろいろ検索してみてください。
通常のhtmlのように記述しても動かないことがあります。

回答No.2

noname#249914

回答#1です。質問者様の補足コメントにお答えします。

>phpは詳しくありませんが、代入されて表示されていたりするのでしょうか。
というのも、掲載されている内容の性格上、リストアップされている情報は更新されやすいと思いますし、車種・グレード・店舗となると、ほぼ重複無しで台数分補足情報を書かなければなりません。

参考サイトがphpなりを使用しているかどうかは、表側からみていてなんともいえません。ただ、頻繁に更新するページといえども、HTMLをゴリゴリと手動更新するケースもなくはないと思います。

お礼

そうなんですね。
ゴリゴリ・・確かに知識がないですし、手動更新するしかないかもしれません。

ご回答ありがとうございました。

回答No.1

noname#249914

制作したいサイト例をみたところ、以下がポイントになると思います。
1.エリアを選択すると、ページ内容が変わる
2.表組みの行全体がクリッカブルである。
3.表組みにオンマウスで表示（背景色）が変わる
4.表組みの行をクリックすると、モーダルウィンドウで補足情報が表示される。
5.PageTopへ、リンクをクリックするとニュルっとページ上部に戻る

以下、個別に説明していきます。
1.こちらはただのリンク設定です。

2と3.JQueryで実装可能です。以下が参考になると思います。
http://h2ham.seesaa.net/article/208820291.html

4.「jquery.colorbox-min.js」というJSで実装しているようです。設定方法は以下のサイトに掲載されています。
http://klutche.org/archives/893/

5.「jquery.smoothScroll.js」というJSで実装しているようです。設定方法は以下のサイトに掲載されています。
http://web-pc.net/jquery002

ご参考になれば幸いです。

補足

早速のご回答ありがとうございます。
甘えまして更にお伺いして宜しいでしょうか。
モーダルウィンドウにて表示される補足情報は、車種・グレード・店舗が出ていると思いますが、
単純に入力されているのでしょうか？
phpは詳しくありませんが、代入されて表示されていたりするのでしょうか。
というのも、掲載されている内容の性格上、リストアップされている情報は更新されやすいと思いますし、車種・グレード・店舗となると、ほぼ重複無しで台数分補足情報を書かなければなりません。
そういった事が可能なのでしょうか。。
重ね重ね伺いましてすみません。。