HPでの画像表示について

前へ 次へ
このQ&Aのポイント
  • サイトを運営しているのですが、Macユーザーの方から「MacではTOP絵が表示されないので改善して欲しい」という意見をいただきました。
  • Macの方には表示されないという事はあるのでしょうか？
  • 何が問題なのか知っておられる方が居ればぜひ教えてください。
回答を見る
  • ベストアンサー

HPでの画像表示について

サイトを運営しているのですが、ある時Macユーザーの方から「MacではTOP絵が表示されないので改善して欲しい」という意見をいただきました。 ほとんどの方には表示されているようなのですが、その方には表示されないようです。 私はWindowwsユーザーなのでMacにのことは全く分かりません。 Macの方には表示されないという事はあるのでしょうか？ ちなみに表示されないのはTOPに置いている絵だけのようです。（メニューボタンや拍手ボタンは表示されているようです。） やはり、私のイラストを見たいと言ってくださる方に見ていただけないというのは、運営している側としても心苦しいです。 何が問題なのか知っておられる方が居ればぜひ教えてください。 何かタグ等の問題なのでしょうか？

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

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

  • ベストアンサー
  • nori_007
  • ベストアンサー率35% (369/1048)
回答No.6

テストしてみました。 dreble 様の提示されたソースでは肝心のデータが無い為、以下のソースに修正しました。基本は <body> タグが無かった為、追加して、見出し、段落と、テーブルを作り、テーブルの中に画像を入れてみました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META name="GENERATOR" content="IBM WebSphere Homepage Builder Version 6.0.2.1 for Windows"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <META NAME="GOOGLEBOT" CONTENT="NOINDEX, NOFOLLOW"> <META NAME="ROBOTS" CONTENT="NOARCHIVE,NOINDEX,NOFOLLOW"> <title>TOP</title> <style type="text/css"> <!-- a:link { text-decoration:none; } a:visited { text-decoration:none; } a:active { text-decoration:none; } a:hover { text-decoration:none; color:#000000; position: relative; top: 1px; left: 1px; } body { scrollbar-3dlight-color:#000000; scrollbar-arrow-color:#ffffff; scrollbar-base-color:#000000; scrollbar-darkshadow-color:#000000; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff; background-attachment: fixed; background-image: url(ks.jpg); background-repeat: no-repeat; background-position: right top; } table { filter:Alpha(opacity=70); background-color: #ffffee} --> </style> </head> <body> <h1>テスト</h1> <h2>テスト２</h2> <p>ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落 </p> <table> <tr> <td> ここはテーブルの中 </td> </tr> <tr> <td> ここには写真を入れます。<br> <img src="./img_001.jpg" style="filter:Alpha(opacity=50); -moz-opacity:0.50; opacity:0.50"> </td> </tr> </table> </body> </html> 上記のソースで、自分の普段使っている環境で問題無く見ることが出来ます。 ホームページを制作して公開した場合、閲覧される環境で様々な問題が発生します。問題が発生したら、どの環境で問題が発生しているのか、閲覧している環境を確認するのが問題解決の第一歩です。 自分の環境は Mac OS X 10.5.6 ブラウザは safari3.2.1 最新の環境です。 上記のソースでは、最新の Mac の環境では問題が無いと言うことです。 （制作者の意図は反映していません、必要な情報が読み取れると言うことです） 解説 スタイルシートにて、「scrollbar」関連が対応していないと、回答がありましたが、対応は確かにしていません。対応していない為、自分の環境では無視されるだけ、画像が表示されない言うことはありません。 次に、「filter:Alpha(opacity=70)」に関しては、通常 img タグに追加する物ですが、table タグに指示されており、自分の環境では無視されています。ちなみに、img タグに「style="filter:Alpha(opacity=70); -moz-opacity:0.50; opacity:0.50">」と付け加えれば、効果が有効になりました。 ここまでテストしみましたが、やはり公開しているソース全体が解らなければ、何とも言えません。 問題の解決を望むなら、閲覧出来ないと言う方の環境と、ソースを全て公開してみてください。 ちなみに、Windows XP の環境でも確認してみました。 IE6 では多分制作者の意図通りに見ることが出来ましたが、モダンブラウザと言われる、FireFox 2.0 は、Mac OS X の safari3.2.1 と同じに見えました。報告まで。 最後に、ホームページを以下のサイトチェックしてみてください。 http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html 100点を目指す必要はありませんが、80点以上取れれば問題解決のヒントがあるかも知れません。

dreble
質問者

お礼

ソースの修正までしていただいて、ありがとうございました！ 今は貼っていただいたソースを参考にさせていただいてます。 ただ、例のMacユーザーの方から何も連絡がないので表示されているかは分かりません； でも、助かりました！！ありがとうございました。

その他の回答 (5)

noname#242220
noname#242220
回答No.5

以下のタグがMacに対応して居ないとプラウザチェックに掛かりました。 ファイアーフォックスも同様でした。 WinのIEではボディ右にボックスが表示されていましたが他では全滅。 最終行のタグはIE7には未対応との事。 body { scrollbar-3dlight-color:#000000; scrollbar-arrow-color:#ffffff; scrollbar-base-color:#000000; scrollbar-darkshadow-color:#000000; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff; background-attachment: fixed; background-image: url(ks.jpg); background-repeat: no-repeat; background-position: right top; } table { filter:Alpha(opacity=70); background-color: #ffffff}

dreble
質問者

お礼

チェックしていただけたようで、ありがとうございました！ ご指摘いただいた所を参考にさせていただくようにします。 ありがとうございました。

回答No.4

まずサイトURLは晒さないで下さい。 ここの規約で禁止されていますので、運営の気分次第で「URL部分が削除される」「質問ごと削除される」「質問を強制的に締め切られる」などの措置が取られます。 当該部分のソースを、ファイル名など隠した状態で書き込むのなら問題ないようです。 回答ですが、ソースを見ないと確実なことは言えないので推測になりますが、たぶんタグがどこか閉じていないのでしょう。 WindowsということですからブラウザはInternetExplorer(IE)だと思いますが、IEは他のブラウザとは挙動が大きく異なります。 タグが閉じていないなどの間違いがあった場合、他のブラウザは"正しく"判断して間違ったなりの表示をしますが、IEはそれでもなんとかそれっぽい表示をしてしまいます。 試しにFirefoxで表示して見るとよいでしょう。Firefoxの表示はかなり"正しい"です。 なお、相手の環境が古いという可能性は低いです。それなら他にも見えないページが多数あるはずなので。

dreble
質問者

補足

ご回答ありがとうございます！ ご指摘いただいたとおり、Firefoxで表示して確認してみたところ、何の問題もなく画像も表示されていました。 サイトのURLは載せられないので、TOPのソースを載せておきます（拍手ボタン・メニューボタンのソースタグは省き、TOP絵部分のみのソースです）↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <HTML> <HEAD> <META name="GENERATOR" content="IBM WebSphere Homepage Builder Version 6.0.2.1 for Windows"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <META NAME="GOOGLEBOT" CONTENT="NOINDEX, NOFOLLOW"> <META NAME="ROBOTS" CONTENT="NOARCHIVE,NOINDEX,NOFOLLOW"> <title>TOP</title> <STYLE type="text/css"> <!-- a:link { text-decoration:none; } a:visited { text-decoration:none; } a:active { text-decoration:none; } a:hover { text-decoration:none; color:#000000; position: relative; top: 1px; left: 1px; } body { scrollbar-3dlight-color:#000000; scrollbar-arrow-color:#ffffff; scrollbar-base-color:#000000; scrollbar-darkshadow-color:#000000; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff; background-attachment: fixed; background-image: url(ks.jpg); background-repeat: no-repeat; background-position: right top; } table { filter:Alpha(opacity=70); background-color: #ffffff} --> </STYLE> </head> </body> </html>

  • nori_007
  • ベストアンサー率35% (369/1048)
回答No.3

多分みれないと言われる方の環境が古いだと思います。 環境を聞いてみてください。Mac OS 9 だったら、今の時代まともにホームページを見ることが出来なくなっていると思います。

noname#242220
noname#242220
回答No.2

Windowsの場合ルナスケーブ上でエンジンを『webkit』に変更して確認して下さい。 IE7対応のソフトで作成し、スクリプトで表示している場合表示されなかったり、レイアウトが崩れる場合が有ります。 当地の有名な病院のサイト（複数）はMacで見るとトップのフラッシュ画像のレイアウトが可笑しく、ページ全体を見る事が出来ませんでした。 現在はページ全体は見れますが未だにフラッシュ画像が想定より大きくリンクを押す事が出来ない状態です。 一つの病院はアクセスしただけでサファリが落ちます。 この原因の一つはタグが閉じてなかった事も有り。 それと画像方式PNGは見れない時が多い。

  • 50kata
  • ベストアンサー率34% (1103/3201)
回答No.1

実際にサイトを見ないと 具体的にurlを晒せない理由でもあるんですか？

  1. カテゴリ
  2. パソコン・スマートフォン
  3. Mac

関連するQ&A

  • web拍手の画像について

    ＦＣ２でサーバーをサーバーを借りて ホームページを運営しています。 登録版web拍手を利用させていただいているのですが ＦＣ２では直リンクを禁止しているので 拍手絵を表示出来ないそうなのです。 それでも拍手絵を表示させる方法があるらしく 調べてみたのですがiframeタグというものが 必要になることが分かりました。 説明には使用したい画像だけが表示されるHTMLページを作る とあったのですが今までホームページ開設の際も 友人に手伝ってもらったくらいでタグと言うものを 使ったことが無く全く意味が分かりませんでした。 もしご存知の方がいれば分かりやすく説明してくれてるサイト様 などはないものでしょうか。 回答をよろしくお願いします。

  • safariで表示できるＨＰの秘訣

    今、ＨＰを作っています。本当は私自身はWinユーザーなのですが、事情でＭａｃ（OS10、ＧｏLIVE　CS）を使って作成しています。 内容は、３フレーム構成で、HTMLと簡単なCSSのみで記述しました。 ようやく完成したのでサーバーにアップしてブラウズしてみたところ、Winでは、IEでもネットスケープでもFireFoxでもうまく動くのですが、 Mac上のSafariではメインフレーム（他のフレームはタイトルとメニューです）が真っ白になります。トップページは表示できるんですが、メニューをクリックすると次のページからはメインが表示できない、、、という状況です。MacのFireFoxやネットスケープでは動きますが,safariで動かないのは致命的かと思います。 いろいろ構文チェックをしてみましたが、特にまずいと思われる点はありません。もしかすると３フレームという点がまずいのでしょうか？ Macユーザーの方、HP作成について、アドバイスをいただけると大変ありがたいです。

    • ベストアンサー
    • Mac
  • web拍手の画像が表示されない

    FC2にweb拍手(http://www.webclap.com/)を付けています。 web拍手に自作の画像をつけたいのですが、以下の方法でやると「×」と表示されます。 ・使用する画像を用意する。 ・自分のサイトスペースにアップする。 ・一度、アップした絵に直接アクセスしてみる。 ・正常に表示されたら、アドレスバーに表示されているＵＲＬ（http://～～）をメモする。 ・web拍手のお礼メッセージ編集画面に入り、以下のタグを打ち込む。 <img src="【画像のURL】"> ・タグ内の【画像のURL】の部分に、先ほどメモした画像のURLを打ち込む。 FC2でアップロードした絵に直接アクセスしてアドレスをコピーして、 img srcタグに貼り付けたのですが、うまくいきません。 「”」「＝」抜けなどはありません。 アプロの時点で間違っているのでしょうか。 自分としては、「自分のサイトスペースにアップする」というのがよくわかりません。 アドバイス、回答お願いします。

  • web拍手公式サイトというサイトで・・・

    私はHPを運営しています。 主にイラストなどを中心としているのですが HPにweb拍手をおいており、そのサイト様が 「web拍手公式サイト」というところです。 拍手をするとお礼画面というものが出てきてそこにイラストや 画像を貼り付けられるシステムになっています。 私もやってみたのですが、画像のところにバツ印が表示され、 イラストを見ることができませんでした。 サイト様の方で説明している画像の貼り付け方を見たのですが、 いまいち理解することができませんでした。 初心者ということもあり、説明に書いてあることが難しくて今もバツのままです。 説明には、こうかかれています Q 拍手送信後の画面に画像を貼り付けるにはどうしたら良いですか？ A 設定変更画面で拍手送信後画面の設定の項に画像を表示するタグをを挿入することで、拍手送信後画面に画像を貼り付けることができます。 詳しい手順は以下の通りです。 ・使用する画像を用意する。 ○自分のサイトスペースにアップする。 ○一度、アップした絵に直接アクセスしてみる。 ・正常に表示されたら、アドレスバーに表示されているＵＲＬ（http://〜〜）をメモする。 ・web拍手のお礼メッセージ編集画面に入り、以下のタグを打ち込む。 ＜img src="【画像のURL】"＞　　（＜＞は半角にしてください。） ・タグ内の【画像のURL】の部分に、先ほどメモした画像のURLを打ち込む。 もし、このやり方で表示されなかった場合、ユーザーさんのサイトを置いているサーバーが外部からの画像の呼び出しを禁止している可能性があります（geocities等） ・・・・・・・・ ○のついているところが私には理解できなくて困っています わかる方、知恵をお貸しください！ お願いします！！

  • 画像の一部分を。

    よく絵などを展示しているサイトで、イラストの一部分だけを表示させて そのイラストをクリックすると、イラストが表示されるようになっていますが イラストの一部分だけを表示させるにはどうしたらいいのでしょうか？ タグ等で出来ますか？教えてください。よろしくお願いします。

  • 同人のHPの作り方

    同人のHPを作ろうとおもいます。 警告ページ(注意書きのようなもの)はできました。 初心者なので全然わからないことだらけなのです；； 今トップページを作ろうと思い、テンプレートを探しています。 左にメニューが表示され、右にトップ絵などが表示される作りがいいです。 また、絵なども載せるつもりなので、メニューのギャラリーをクリックしたら 左からメニュー→絵の項目？→絵　と表示されるようにしたいです。 いいテンプレートがあれば是非教えてください。 テンプレートと言っても壁紙が指定されてる、とかじゃなくて、自分の絵などを 使いたいと思っているので編集できるものや、形だけのものがいいです。 その際、壁紙の張り方や、メニューのアイコンなどのはりかたはどうなるのでしょうか？ あと、トップページと、項目を開いたページ(ギャラリーやブログなど・・・) はそれぞれ別々につくって、最後にリンクさせればいいんですよね？ できればリンクさせる方法などを教えていただけると嬉しいです。 因みに忍者ホームページを借りていて、HTMLで作っています。 回答よろしくおねがいします。

  • iMacG5の漢字表示がぼやけてる

    Winユーザですが、このたびMacユーザにもなりました。 iMacG5です。この表示では「漢字文字」がぼやけて表示されます。 日本の「本」の字の下の十字のところがぼやけています。 Mac展示場で見ても、同様にぼやけていますので、そういうものかもしれません。ほかの機種では問題なく「ピシッ」と表示されているものなのでしょうか？それとも、Macとはこういうものなのでしょうか？Macは期待はずれでした。

    • ベストアンサー
    • Mac
  • HPで使う画像を有料で作成して欲しい

    個人でホームページを運営しています。タイトルロゴや、トップで使うイラストは、良いものを使いたいため、できればプロ（もしくは絵の上手い素人さん）に画像を作成して欲しいと思っています。 具体的に必要なのは、ホームページで使うアイコン、カットなど１０点程度です。すべてGIFで作成して頂ければと思っております。問題は１点あたりの金額ですが、１，０００円ぐらいを考えています。発注する前にどのような作品を作るのか見せて頂けるとありがたいです。 前に同じような質問をされている方がいましたが、「ロゴ職人」さんの１点５万円は高すぎます。こちらは個人HPなので、そこまでハイクオリティなものは期待していません。

  • ＨＰ作成時、ＩＥでは画像が表示されるのですが、Mozillaでは画像が表示されません。

    ＨＰ作成にお詳しい方、ご回答お願いします。 現在ＨＰを作成しています。（ＣＳＳ使用） 画像貼り付け(表示)についてなんですが、ＩＥで確認したところ、きちんと表示されたのですが、Mozillaでは全く表示されませんでした。(無表示) どんな問題点が考えられるでしょうか？ ちなみに、貼り付けにはimgタグを使用し、あるクラスの中で表示させようとしています。また、普通にまっさらなＨＴＭＬ文書にimgタグで画像を貼り付けたところ、Mozillaでも表示されました。 また、質問は変わりますが、topやrightなどのポジショニングのタグもMozillaでは対応していないのでしょうか？ 私の知識不足で、分かりにくい質問であったとしたらすいません。。

  • 画像が表示されません

    イラストサイトを作っているんですが… インラインフレームの中に別の フレームページを表示させたHPを作りました。 転送した後、確認してみたら index⇒top（フレーム）⇒ギャラリー(フレーム）⇒画像(右フレームに表示） >>topからインラインフレーム内に表示させてます。 ギャラリーの右フレームに最初から貼り付けている画像は表示されるのですが、 左フレームのmenuから見たい画像を選択すると、表示されません； 要するにギャラリーの画像だけ見れないんです。 でも、ファイルやビルダー上で見るとちゃんと見れるんです。 うまく転送できていないのかと確認してみたんですが、いったいどこが間違っているのか…；； どなたか分かるかたお願いします。 ちなみにFC2を借りています。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する