みんなのお仕事相談所

「みんなのお仕事相談所」では、ユーザーさまのご依頼の相場や製作期間、
契約書やお金に関する悩みを気軽に相談できるQ&Aコミュニティです。
違反案件についてはよくある質問の「【共通】違反のお仕事とは」をご覧ください。
また、違反報告についてはよくある質問の「【共通】違反報告とは」をご確認ください。

発注者からの相談
その他の相談(発注者)

お仕事の依頼内容について

解決済
回答数
4
閲覧回数
1212
すぐ知りたい!  : すぐ知りたい!

お仕事の依頼内容についてご相談させて下さい。
以前からクラウドワークスさんの事は存じていましたが、
自分のお願いしたい事はできるのかなと迷っていました。
今回「相談コーナー」が出来たという事で聞いてみたいです。

現在、フリーサイトを利用してホームページを運営しています。
求めている事は臨時の家庭教師?解説員?みたいな役割です。

現在、下記の2点を操作できたらいいなと考えています。

1.メイン画像をスライドショーみたいに設定したい。
2.画像にマウスを置いた時に透明感や色を付けてわかるようにしたい。

この場合、このやり方を実際にサイトで表現して頂いて、
そのやり方(どこをどう変えたのか?どう記述したのか?)を
メールでテキストみたいに記述して教えて頂けたらと考えています。
他に良い方法があれば、ご提案して下さい。
自分が理解できて、実践できれば問題ありません。


使用しているサイトは
http://簡単無料ホームページ.com/  です。
サンプルサイトは、こちらでご用意致します。
(IDやPWをご連絡致します。)

1件あたり2000円~2500円での報酬を考えており、
内容が良ければ今後もお願いしたいと考えております。

どうぞよろしくお願い致します。

2014年01月17日 10:39

ベストアンサーに選ばれた回答

A.R.T.Sさんからの回答

まず簡単な方から
2.はCSSの設定でも対応できますし、
jQueryというJavaScriptライブラリを設置して、html内にタグを記載することで簡単に実装できます。

1.も同様にjQueryで実装できます。

他にも方法はありますが、これが現実的で簡単です。

ただし、簡単無料ホームページ.comさんはftpによるファイルのアップロードができないようなので
どこか他の場所にjQueryのソースを設置して、そこからスクリプトを読み込ませる必要があるでしょうね。

ちなみにスクリプトが外部にあると、設定がちょっと面倒かもしれません。

私が趣味で運営しているサイトにスライドショーの説明がしてありますので
よければご覧ください。
http://www.creators-gate.net/blogs/flexslider
他にも10種類以上スライダーはあります。

回答がお役に立てれば幸いです。

2014年01月17日 15:31
相談者からのお礼コメント

とても参考になりました。
ありがとうございました。

2014年01月22日 13:25

すべての回答

A.R.T.Sさんからの回答

まず簡単な方から
2.はCSSの設定でも対応できますし、
jQueryというJavaScriptライブラリを設置して、html内にタグを記載することで簡単に実装できます。

1.も同様にjQueryで実装できます。

他にも方法はありますが、これが現実的で簡単です。

ただし、簡単無料ホームページ.comさんはftpによるファイルのアップロードができないようなので
どこか他の場所にjQueryのソースを設置して、そこからスクリプトを読み込ませる必要があるでしょうね。

ちなみにスクリプトが外部にあると、設定がちょっと面倒かもしれません。

私が趣味で運営しているサイトにスライドショーの説明がしてありますので
よければご覧ください。
http://www.creators-gate.net/blogs/flexslider
他にも10種類以上スライダーはあります。

回答がお役に立てれば幸いです。

2014年01月17日 15:31
相談者コメント

i-visionさん。早速のご回答ありがとうございます。
サイトを見たら驚きました。ますます素敵なスライドがいっぱいですね。
実は以前こちらのサイトも参考にチャレンジしてみました(笑)
でもダメダメでした。素人には???それで探していたのです。(泣)

でも、画像の方だけだったらできそうな感じ?でしょうか。
ご依頼、ご相談の際はまたよろしくお願い致します。
ありがとうございました。

2014年01月17日 16:36
A.R.T.Sさんからの回答

マウスオーバーで画像を半透明にするなら簡単です。

「マウスオーバー 画像 半透明 CSS」で検索すると優しい人が沢山解説してくれています。

よくわからなかったら、またご質問ください。
解説します。

2014年01月17日 18:41
usgloさんからの回答

はじめまして、ご相談内容に関して、下記情報が役に立つなら、喜びます。

1.メイン画像をスライドショーみたいに設定したい。
・Javascriptを利用して、複数画像の切り替えというスライドショーでしょうか?
参照URL:http://getbootstrap.com/examples/carousel/

2.画像にマウスを置いた時に透明感や色を付けてわかるようにしたい。
画像の透明感など変化はCSSだけで実化できるため、既存サイトのCSSを改造すればいいと思います。
.class_name:hover{
効果の変更内容
}

宜しくお願い致します。

2014年01月17日 18:45
相談者コメント

i-vision様 
ご返信ありがとうございます。
もう一度頑張ってみます。

usglo様
アドバイスありがとうございます。

1のリンクへアクセスしたところ
全文英語表示のサイトへ飛んでしまいました。
ちょっと色々な意味で苦手とする分野でして
私には合わなかったです。(笑)

2のマウスのアドバイスもありがとうございます。
ただ、素人の私にとってその意味が理解しがたく、
(今までも同じような内容は検索でチェックしていました)
それで今回のような依頼をお願いしてみました所です。

親切にご相談して頂き、
お二人ともありがとうございました。

2014年01月17日 19:54
(退会済み)
(退会済み)さんからの回答

こんにちわ!はじめまして、kousukeといいます。

スマホアプリ(Android用)に作った「画像スライドショー」のスクリプトがあるので、
良かったら、ご参考までに、ご紹介いたします。
(*ふつうにパソコンのWebサイトでも表示できます)
http://game-wings.net/work/imgview/rose/
http://game-wings.net/work/imgview/fireworks/

>1.メイン画像をスライドショーみたいに設定したい。
>2.画像にマウスを置いた時に透明感や色を付けてわかるようにしたい。

一応、「サムネイル画像」に、マウスオーバーしたら、画像が、微妙に透過します。
サムネイルをクリックしたら、メイン画像が切り替わります。
「メイン画像」「サムネイル画像」の
画像表示位置や画像サイズの調整、画面下部のコントローラの非表示等は
いくらでもできます。

>この場合、このやり方を実際にサイトで表現して頂いて、
>そのやり方(どこをどう変えたのか?どう記述したのか?)を
>メールでテキストみたいに記述して教えて頂けたらと考えています。
>他に良い方法があれば、ご提案して下さい。
>自分が理解できて、実践できれば問題ありません。

一応、この画像表示スクリプトを、スクリプト売りにできますが、
このスクリプト自体は「javascript」を利用していて、
正直、結構、ややこしい(笑)事になっています。

このような「画像ビューワ」でよければ、
「39partnerさん」の方で、使いたい「画像」を用意していただければ、
1件に対し、ご予算内で、
私の方で、カスタマイズして、設置する事はできます。

前述の「i-visionさん」が、おっしゃられている通り、
「簡単無料ホームページさん」の「無料サービス」ですと、
画像のみしかアップできず、ページやスクリプトをアップする事ができないので、
実際に設置をするには、
どこか、画像だけでなく「ページ」をアップできるサーバーが必要となります。

もし、このスクリプトの、ご利用を、ご検討でしたら、お声を、おかけください。

以上、ご参考までに。


2014年01月21日 08:58
相談者コメント

kousuke様
お返事が遅くなり申し訳ありません。
ご回答ありがとうございました。

メイン画像をスライドショーにというのは、現状だと大変だとわかりました。
外部に設置という方法も、依頼した時は出来ても、
その後好きな時に自分でしたい事を考えると大変だと思いました。
ですので、しばらくは見送ろうと思います。

画像の透明感の方ですが、調べた結果簡単無料HPでは「有料コース」に
申し込まないと、変更ができない事が分かりました。タグの追加?
それでこちらもしばらくは見送りにすることにしました。

kousuke様をはじめ、皆様の助言ありがとうございました。
モヤモヤしていたことがスッキリしたので、
このコーナーを使ってみて良かったです。

ベストアンサーには一番最初にご回答を頂いた
i-vision様に致しました。
皆様、大変ありがとうございました。

2014年01月22日 13:24
不安や疑問に真摯に向き合い改善につとめます クラウドワークス安心安全宣言