レスポンシブ対応のモーダルウィンドウの作成の仕事 [広告・イベント・プロモーション]

見積もり募集の結果

実際の発注内容

依頼の予算

5,000 円 ~ 10,000 円

実際の支払い金額

6,000 円 ~ 7,000 円

製作期間

4日

実際の受注者

BUDDYZ

本人確認 納期を守り、迅速で丁寧な対応を心がけています。

• 希望時間単価 ---
• 実績 12
• 評価満足率 100 %
• プロジェクト完了率 100%

• 機密保持
• 本人確認
• 電話

2001年からフリーでWEB制作を生業としています。主にWEBデザイン、HTML・CSSコーディング、JavaScriptが守備範囲ですが、ロゴ作成なども承りますので、気軽にお問い合わせください。

スキル

HTML

CSS

Fireworks

JavaScript

... もっと見る

対応可能な依頼のジャンル

広告・イベント・プロモーション

... もっと見る

発注者の声

技術は言うまでもなく素晴らしいのですが、さらに嬉しかったのが、最初に提案いただいたときに質問をくださったことです。素人が依頼をしているものですから、「本当にちゃんと依頼内容が伝わっているのか？　依頼内容は的を得ているものなのか？」と不安だったのですが、最初の段階から、確認を含めて質問をしてくださいましたので、プロジェクトを安心して進めることができました。もちろん、進行中に出てきた修正にも丁寧に対応していただきました。とてもオススメです！　本当にありがとうございました。

見積もり募集の内容

依頼主の業種

広告・イベント・プロモーション

サイトの種類

プロモーションサイト

依頼の目的・背景

参考サイトに記載のWEBサイトを開くと自動でレスポンシブ対応のモーダルウインドウが表示されるようにして欲しいです（作成は1ページです）。理由は、ページ数が増えてきたので、アイコンをクリックすると目的のページに直接行けるようにガイドしたいのです。
Remodalのようなシンプルなものでいいのですが、Remodalは文字しか使えません。文字のほか、アイコン（画像）もクリックすると、自動で任意のページに移動して欲しいです。
iphone縦の場合は横に２つのアイコン、ipad縦の場合は横に３つのアイコン、PCの場合は横に4つのアイコンが並ぶようにしてほしいです。縦には1列から最大3列ぐらいまで並べられるようにしたいです。
まずは、
添付画像のlogo1をクリックすると、http://160.16.231.42/index.htmlに移動。
添付画像のlogo2をクリックすると、http://160.16.231.42/others.htmlに移動
するようにして欲しいです。また、logo1のアイコンの下には、「この画面を消す」というテキストを入れて、これをクリックしても、http://160.16.231.42/index.htmlに移動。logo2のアイコンの下には、「趣味のページへ」というテキストを入れて、これをクリックすると、http://160.16.231.42/others.htmlに移動するようにして欲しいです。
将来的には、GoogleAnalyticsを入れて、どのアイコンが多くクリックされているか調べたいので、ソースは、改行やコメントなどを入れていただけると、とても助かります。

以上です。できますでしょうか？
文字だけなら、自分でRemodalでできたのですが…。

期待する効果

• スマートフォンに対応させたい

ページ数

1 ～ 5ページ

スマホ対応の有無

レスポンシブWebデザイン

参考URL

http://160.16.231.42/

業務の範囲

• コーディング

用意してある素材

• イラスト

納品方法

ランサーに相談して決めたい

納品後のサポート

ランサーに相談して決めたい

補足説明

設定なし

イメージを添付してみました。
HPを開くと自動的に（ここはJavascriptでしょうか？）、添付pdfファイルのようなレスポンシブ対応のモーダルウィンドウが開き、iphoneだとアイコンが横に2つ、ipadだと横に3つ、PCだと横に4つ並ぶ（大きさも変わる）という感じにしたいと思っています。それぞれのアイコンをクリックすると、目的のページにジャンプします。

アドバイスいただき、Remodalを工夫してみたのですが、無事、アイコンは表示できたのですが、横に２つ、３つ、４つというところが難しく…。（ここはCSSなのかもしれません。一応、mediascreenの設定を少しは認識しているのですが。事実、HPのメニューはそのように設定してあります。しかし、やはり素人の域を脱しておりません）

何卒、よろしくお願いいたします。

添付ファイル

※ 締切後、添付ファイルはクライアントと当選したランサー以外は閲覧できません

• logo.png
• logo2.png
• イメージ.pdf