photo soap2を使ってweb上で公開する方法とは?

このQ&Aのポイント
  • photo soap2はibookで提供される画像編集ソフトウェアで、画像の圧縮やサイズ変更が可能です。
  • web上で自分で撮った画像を公開するには、<img src="http://~~~jpg">のタグを使って画像を表示する方法が一般的です。
  • 画像のサイズを小さくしてweb上で公開するには、photo soap2を使って画像を圧縮・リサイズすることができます。
回答を見る
  • ベストアンサー

photo soap2を使ってweb上で公開するには?

ibookのos8.6を使っています。 私はデジカメを持っていないので、兄のデジカメを借りて 撮った画像をその都度、自分のパソコンに保存しています。 それでweb上で(私のHPではありません) その画像を1枚ほど公開したいのですがそのままのサイズ (何とかjpgとかいう感じの画像)では 大きすぎて見てる側に負担がかかると思い、画像サイズを小さくして 公開しようと考えていますが、そもそも画像の圧縮や小さくする方法を 知らないので、ibookに元から付いているphoto soap2を使って 画像を小さくしてみようと思いましたが、なかなか上手くいきません。 しかもibookを購入して以来、このphto soap2を使うのは 始めてな事なんです。(^^; そこで質問です。 1、photo soap2とは、そもそもどんな機能をしてくれるもの   なんでしょうか? 2、web上で自分で撮った画像を公開するにはどうすればいいのですか? (<img src="http://~~~jpg">)の画像の張る方法は知っていますが  同じなんでしょうか? 3、撮った画像のサイズを小さくしてweb上で公開するには   どうすればいいのでしょうか? パソコン歴はやや長い方ですが、今までネットとメールくらいしか パソコンを使っていないので、分かりやすく教えていただけると 幸いです。 よろしくお願いします。  

  • Mac
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

こんにちは。職場のiMacでphoto soap2を使ってみました。画像サイズの変更は、photo soap2の修正メニューから画像サイズを変えたいファイルを開きます。次に編集メニューからイメージサイズを選び、「このイメージの解像度を指定してください」で「画面 WEB表示 (72ピクセル/インチ)」を選びます。その下の「イメージのサイズを指定してください」でサイズを指定してください。右下にあるピクセルをクリックして縦横比維持にチェックを入れて置いた方が良いでしょう。サイズは400×300以下ぐらいの方が良いと思います。 1については、普通のフォトレタッチソフトだと思います。 2と3についてはですが、ご自身のホームページでないのですよね。画像を付けられる掲示板などでなければ、サーバーにファイルをアップする時に、ユーザーIDやパスワードなどが必要です。画像を公開するにはそのサイトの管理者の方に修正したファイルを渡してアップしてもらうのが普通です。 お分かりになりましたでしょうか?補足が必要ならまたアップしてください。

venetian
質問者

補足

sanocchi2001さん、こんばんは。 再度手持ちの画像を使って、photo soap2を試したところ 上手く出来ました。 ありがとうございました。 が、手持ちの画像の名前?(~JPG)にはJPGが付いていたのに photo soap2を使った後に保存して確認の為に見てみたのですが 画像の名前にJPG(~の部分だけ)が付いていませんでした。 これはサイズを変更した為に付いてないだけなのでしょうか? それと捕足なんですが、例えば画像を付けられる掲示板などの場合は どのようにして画像を張ればいいのでしょうか? (手持ちの画像の場合) 度々すみませんが、捕足をお願いします。

その他の回答 (1)

回答No.2

画像サイズの変更が無事に出来て良かったですね。ファイル名ですが、拡張子.JPGがどうして消えたのかは分かりません。今日、初めてphoto soap2を使って画像サイズを変えてみました。サイズの換え方だけ確認して保存をしなかったからです。Macでは拡張子無くてもファイルの種類が分かるので拡張子が消えてしまうのがphoto soap2の仕様なのかもしれません。 画像が付けられる掲示板ですが、一般的に「参照」というボタンがあると思います。それを押すと、ファイルを開くときに使うウィンドウが開くので、そこから送りたい画像を指定すればよいと思います。ファイルを送るときには、拡張子は付けておきましょう。

venetian
質問者

お礼

sanocchi2001さん、こんばんは。 画像が付けられる掲示板ですが、教えていただいた通りやってみたところ 上手く出来ました。 本当に度々親切に教えてくださって、ありがとうございました。 いろいろと勉強になりましたです。

関連するQ&A

  • ★PHP?★画像を縦横比を変えずに表示

    画像を縦横比を変えずに表示したいです。 簡単な方法を教えてください。 PHPで作成してます。 下記の画像のサイズはバラバラです。 150*150の正方形の中に全て収めたいです。 <table> <tbody> <tr> <td><img id="imgtf" src="photo1.jpg" alt="" /></td> <td><img id="imgtf" src="photo2.jpg" alt="" /></td> <td><img id="imgtf" src="photo3.jpg" alt="" /></td> <td><img id="imgtf" src="photo4.jpg" alt="" /></td> <td><img id="imgtf" src="photo5.jpg" alt="" /></td> </tr> </tbody> </table> 何か方法はありますでしょうか?

    • ベストアンサー
    • PHP
  • 順番にクラスをつけていく方法

    順番にクラスを付与していく方法を考えているのですが、 思いつかないのでご教授ください。 下記のようなソースでギャラリーをjqueryで作成しました。 「次へ」「戻る」を押すと画像が左右にスライドする仕組みにしました。 画像にたいしてフェードをかけようと思い、画像を 初期状態でフェード0にしてactiveクラスがついたときに フェードを100にしようと思いました。 対象の画像をクリックすることでクラスを追加したり 削除したりする方法はわかったのですが、 「次へ」「戻る」ボタンを押すことで画像を切り替えているため、 どのようにしたら順番に画像にクラスをつけることが できるのかがわかりません。 簡単な方法をご存知の方おられましたら よろしくお願いします。 <div id="gallery"> <ul> <li><a href="#"><img src="images/photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo2.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo3.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo4.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo5.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo6.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo7.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo8.jpg" alt="" /></a></li> </ul> </div> <div class="paging"> <a href="#" class="previous">戻る</a> <a href="#" class="next">次へ</a> </div>

  • 画像のサムネール+フォトアルバムを制作中で困っています

    こんにちは。 HTML + CSS + Javascriptを使用して、「サムネール画像+フォトアルバム」を作っています。 Javascriptの知識が乏しいため、質問させていただきました。 よろしくお願いいたします。 サムネール画像の並ぶ A.html 拡大画像の並ぶ B.html CSS外部をリンクさせている C.css Javascriptを外部リンクさせている D.js の4つのファイルがあります。 A.htmlでクリックした際に数字を記憶させて B.htmlに入れ込むことがしたいです。 □A.htmlは下記で画像を並べています。 <img src="images/photo1.jpg" alt="Photo" width="120" height="120" > <img src="images/photo2.jpg" alt="Photo" width="120" height="120" > <img src="images/photo3.jpg" alt="Photo" width="120" height="120" > <img src="images/photo4.jpg" alt="Photo" width="120" height="120" >           ・           ・           ・           ・      40枚くらいあります。 □B.htmlは下記で画像を表示しています。 <div id="mainPhoto"> <img src="images/photo1.jpg" id="slidePhoto" /> </div> <div id="mainPhotoNavi"> <script type="text/javascript">count = 0; imageLength = 9; baseuri = 'images'</script> <script src="js/slideshow.js" type="text/javascript"></script> </div> ※A.htmlのphoto3.jpgをクリックしたら、3という数字が記憶されて、  B .htmlの"mainPhoto"内部のphoto(x).jpg、(x)に当てはまる。       "mainPhotoNavi"内部のcount = (x)、(x)に当てはまる。 上記のような方法をとりたいです。 どうか、よろしくお願いいたします。

  • デジカメ画像を簡単にWeb上に公開したい

    約100枚のデジカメ画像を簡単にWeb上に公開するにはどうしたら良いでしょうか。私の頭にあるイメージとしては、サムネイル画面が作られて、それをクリックすると元サイズか大サイズの画面が表示される、ちょっとコメントも載せられる、、というホームページを作りたいのです。レイアウトとかはシンプルで構わないので、これが簡単に、というか一気にできるソフト、もしくはWebサイトがあれば教えてください。  一枚一枚ホームページビルダーに貼り付けていたら何日もかかってしまいそうです。一気にできるソフトがあったら嬉しいです。

  • 指定したフォルダの画像を一括でプリロードしたい

    ページが表示されたときに、指定した画像をプリロードするようjavascriptで実装しています。 preloadの引数に1つ1つプリロードしたいファイルを書いていかないといけないので ファイル数が多くなると手間です。 例えば img/photo1.jpg img/photo2.jpg img/thumb.jpg image/photo1.jpg image/photo2.jpg image/thumb.jpg という具合にimgとimageのフォルダがあってimgにだけある画像ファイル全てを一括でプリロード したいです。どのようなソースをかけばいいでしょうか? また、指定したフォルダ以下の画像ファイルを一括でプリロードする関数などがあるのでしょうか? function preload(imgs){   for(var i = 0; i < imgs.length; i++){    var imgObj = new Image();    imgObj.src = imgs[i];    } } preload(["./img/photo1.jpg", "./img/photo2.jpg", "./img/photo3.jpg"]);

  • php スクレイピングで処理後 修飾子?

    スクレイピング処理後、元のURLが/hoge.jpgなのでURLが正しく表示されません。 修飾子?みたいなので文章を追加して表示させるしか方法はないのでしょうか? このような状態です。 <img src="/hogehoge.jpg">の状態だと自分の管理しているHPのURLで開いてしまう。 これを <img src="/hogehoge.jpg">を<img src="http://hogehoge/hogehoge.jpg">としたいです。 あと、画像のサイズは変更できるのでしょうか? よろしくお願いします。

    • 締切済み
    • PHP
  • HTMLの画像のリンクについて

    ページ内にインラインフレームを作成し画像サムネイルをクリックするとフレーム内に表示するという感じにしたいのですが、フレームサイズを500×500にしたので、このサイズを超える画像を表示するとページのスタイルが崩れてしまいます。元画像のリサイズをせずに表示させる方法はないでしょうか? 構造は以下のようになってます。 <html> <head> <title>photo</title> </head> <body BGCOLOR="007777"> <br><br> <iframe NAME="photo" WIDTH="500" HEIGHT="500" FRAMEBORDER="0" ALIGN="right"></iframe> <br><br><br> <p>    <a HREF="gazou1.jpg" TARGET="photo"><IMG SRC="gazou1.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> <a HREF="gazou2.jpg" STYLE=""><IMG SRC="gazou2.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> </body>

  • 【jQuery】スライダーについて

    初めまして。 下記サンプルを元にカスタマイズをしてます。 参照URL http://bxslider.com/examples/ticker 写真をランダムで左に流したいのですが、 $(document).ready(function(){ $('.bxslider').bxSlider({ 'auto': true, 'minSlides': 6, 'maxSlides': 6, 'slideWidth': 160, 'slideMargin': 0, 'ticker': true, 'speed': 15000, 'randomize': true, }); }); 『'randomize': true,』を入れてもランダムになりません。 ダウンロードしたjquery.bxslider.jsの方の記述も同じように書き換えてます。 html側もサンプルのをそのまま貰ってるので <div class="slider"> <ul class="bxslider"> <li><a href="/"><img src="/img/photo01.jpg" alt="/"></a></li> <li><a href="/"><img src="/img/photo02.jpg" alt="/"></a></li> <li><a href="/"><img src="/img/photo03.jpg" alt="/"></a></li> <li><a href="/"><img src="/img/photo04.jpg" alt="/"></a></li> <li><a href="/"><img src="/img/photo05.jpg" alt="/"></a></li> <li><a href="/"><img src="/img/photo06.jpg" alt="/"></a></li> </ul> </div> でならんでます。 リロードするたびに photo01.jpg←photo03.jpg←photo06.jpg← や、 photo02.jpg←photo05.jpg←photo02.jpg← とか順不同で出来たら最高なんですが、そこまで私の技術は出来ないので、可能であればスタートする写真をランダムで出来たらと思ってます。 ご教授お願いします。

  • 【jQuery】setInterval

    jqueryの初心者です。 3つの画像を3秒間隔でクロスフェードさせ、それを繰り返したいのですが setIntervalの使い方が違うのか、思うような動きになりません。 何が原因なのかと、無駄な部分があると思いますので なるべくシンプルで初心者レベルのコードを教えて頂きたいです。 宜しくお願いします。 $(function(){ setInterval(function(){ setTimeout(function(){ $(".photo-1").fadeOut(1000); },3000); setTimeout(function(){ $(".photo-2").fadeIn(1000); },3000); setTimeout(function(){ $(".photo-2").fadeOut(1000); },6000); setTimeout(function(){ $(".photo-3").fadeIn(1000); },6000); setTimeout(function(){ $(".photo-3").fadeOut(1000); },9000); setTimeout(function(){ $(".photo-1").fadeIn(1000); },9000); },3000); }); <div id="photo-box"> <p class="photo-1"><img src="img/01.jpg" width="500" height="150" alt="" /></p> <p class="photo-2"><img src="img/02.jpg" width="500" height="150" alt="" /></p> <p class="photo-3"><img src="img/03.jpg" width="500" height="150" alt="" /></p> </div>

  • フルスライドの画像上に文字を入れたい

    すみません、初心者です。 htmlは、 <div id="container"> <div class="fullSlideShow"> <ul> <li><a href="#1"><img src="img/photo01.jpg" alt=""></a></li> <li><a href="#2"><img src="img/photo02.jpg" alt=""></a></li> <li><a href="#3"><img src="img/photo03.jpg" alt=""></a></li> <li><a href="#4"><img src="img/photo04.jpg" alt=""></a></li> <li><a href="#5"><img src="img/photo05.jpg" alt=""></a></li> <li><a href="#5"><img src="img/photo06.jpg" alt=""></a></li> </ul> </div> <div class="helo"> <h1>site title</h1> <p>abcdefg</p> </div> と書いてみました。CSSですが、 .fullSlideShow h1 { position: absolute; z-index:500; left: 40px; top: 40px; padding-right: 40px; font-size: 2em; line-height: 1.20; } .fullSlideShow h1 a.textlink { color: white; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); text-decoration: none; } としてみましたが表示されません。まだサイズや位置は気にせず表示されるように試してみているのですが、どうも文字が画面上に現れてくれません。 とりあえず、h1とpだけでも表示させたいのですが、教えて頂けないでしょうか。 どうぞ宜しくお願いします。

    • ベストアンサー
    • CSS