- 締切済み
CSS レスポンシブサイトでヘッダー画像の調節
レスポンシブサイトでヘッダー画像の調節をしたいのですが なぜかPCとスマホでヘッダー画像の表示が異なります 同じように表示するにはどうすればいいでしょうか？ 参考用ですが、こちらは同じように表示されています https://f-tpl.com/tpl_096/ 添付画像は上がPCで下がスマホです このように半分しか表示されず、PCのものを縮小して表示させられません
- masterkentaros
- お礼率16% (1/6)
- CSS
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- hashedbutter
- ベストアンサー率28% (292/1017)
これでは何もわかりません。
関連するQ&A
- CSSでヘッダー画像の調節
レスポンシブサイトを作っているのですが、スマホで見るとヘッダー画像がPCと同じになりません。 どうしたらPCとスマホのヘッダー画像を同じ位置やサイズで表示できますか？
- 締切済み
- CSS
- AFFINGER6のヘッダーエリアの高さCSS
環境 Wordpress 6.0.2 AFFINGER6 AFFINGER6のレイアウトのブラウザ上端から94pxの高さの画像（写真）をいれたいのですが、図の青いバーを越えて、投稿（本文/記事）近に画像の下端が来ていました。 そこでヘッダーに使用されている領域に色をつけてみたところ、図のように緑色の範囲が存在していることがわかりました。 【質問】 このうち、赤い枠で囲った範囲は不要で、上端から94pxの高さにピッタリと画像をいれたいと考えました。 【やったこと】 設定項目で探して設定したものは、図の下半分にあるように ｜Wordpress ｜外観＞ヘッダー＞・各メニュー設定＞ヘッダー画像 ｜「ヘッダー画像エリア」 ｜AFFINGER管理＞ヘッダー＞ヘッダーエリア ｜「PCのみ」 をみつけ、そこに高さの数値（94）を入力しましたが、赤い枠のエリアは消えません。 外観＞テーマファイルエディターから、 CSS（style.css） を開き「/** ヘッダー画像」と書かれている項目もみてみましたが、CSSを書き換える箇所がみつけられません。 AFFINGER6を購入してまだ日が浅いのでわかっていない箇所も多いのですが、どこ/どの設定を編集したら、図の赤いエリアは消える（ヘッダー画像は上から94pxのみに設定）できるでしょうか？ （スマホ表示も同様にしたいのですが、とりあえず今はPCブラウザーでの表示設定について質問させていただきます）
- 締切済み
- ブログ
- ワードプレス ヘッダー画像の件についておたずね致し
ワードプレス ヘッダー画像の件についておたずね致します。 ワードプレスの「ONE PRESS」無料版のテーマを利用しています。 カスタマイズにてヒーローセクションにてキービジュアル（ヘッダー画像）を1920×1238pixのサイズを設置しました。 ヘッダー画像の確認で、PC画面では問題なく表示されているですが、スマホで確認をした際にヘッダー画像の左右が切れて画像の中心部のみ表示されます。 テーマのカスタマイズの設定をいろいろ確認しましたが、スマホ用に画像を切り替えるような設定欄は見当たりません。 ネットでも調べてみましたが、キービジュアル（ヘッダー画像）をスマホに切り替えるような説明をしているサイトも見当たりませんのでお手上げ状態です。 このような場合、スマホにあわせた画像サイズでキービジュアルを作成して、その後CSSなどをカスタマイズにて追記することで対応できるのでしょうか？ もしそれで対応できるのであれば、その際に追記するCSSのコードを教えて頂けましたら助かります。 それともPHPなどを直接さわらないといけないのでしょうか？ ちなにみWPに関してはあまり詳しくはありません。 具体的なやり方を教えて頂けますと非常に助かります。 どうぞよろしくお願い致します。
- ベストアンサー
- その他（インターネット・Webサービス）
- ヘッダーの画像表示について
下記のサイトのヘッダー部分に当たる画像がどのように表示されているのか分かりません。 単純に画像を配置しているのかと思いましたが、右クリックで画像の保存もできず、ソースコードは<divid=animal,class=png>となっているようです。 これはどのような配置方法となっておりのでしょうか？ http://kanahapi.com/
- ベストアンサー
- その他（インターネット・Webサービス）
- 画像の縮小
３８３ＫＢある画像をペイントにかけて縮小を１００％から５０％に直したら、３７．２ＫＢになりました。私としては半分の大きさつまり２００ＫＢぐらいになると思っていたのですが・・。半分グライにするには、なん％にしたら良いのですか？叉、メールの添付を見ると27.9ＫＢになってさらに１０ＫＢ少ない表示になっていて良く解かりません
- ベストアンサー
- その他（メールサービス・ソフト）
- アメブロのヘッダーが変わらない
アメーバブログをしています。 カスタム可能デザインにして、ヘッダー画像を変えているのですが、 いつもならできるのに、なぜか今回はできません。 デザインの変更でヘッダー画像を選び、 保存。 そしてブログを確認してみると前の画像（削除したはず）が表示されています。 このサイト http://ameblo.jp/usc606/ 変更したい画像は↓に添付しました。 画像の形式も,jpegです。 いつもどおりしたのにならないなんて初めてなので分かりません・・。 パニクっています
- ベストアンサー
- ブログ
- ヘッダーだけのメール？
最近ヘッダーだけのSPAMメールが頻繁に来ます。正確にはHTML形式ではない、添付ファイルの無い、本文の無いメールで、開くとヘッダーが表示されるものです。 (試しに自分でテキスト形式の本文なしメールを自分に送っても、それを普通に開いただけでは全くの空白のメールになり、ヘッダーは表示されません。) それにヘッダーをよく見るとスパムメールには下記の2行もありません。 Content-Type: multipart/mixed; boundary="" Content-Transfer-Encoding: 7bit 送信者名無し、件名なしです(それは入れなければ入らないのはわかりますが) どうやって送ったらこういうメールになるのでしょうか？ 受信に使用しているメーラーはBecky2.62です。 ＝＝＝ 実はこういうメールは全てPCに受信せずにサーバーから消していたのですが、最近スマホから本文なしで添付ファイルだけが送信されてきたメールがこういう形だったため中身を見て選別せざるを得なくなりました。しかしやはり危険なメールは触りたくもないのでもっとメールの構造を知りたいと思って質問してみました。
- ベストアンサー
- その他（メールサービス・ソフト）
- FC2 ブログのヘッダー画像について
自ブログとしてFC2ブログサービスを利用しておりまして、 共用テンプレートとして「SUP04_1」を利用させて頂いています。 自環境はFirefox(8.0)を利用しており、ヘッダー画像を変更し（自分で描いたイラスト） 問題なく表示されているのですが、IE9で見てみたところ、ヘッダー部が真っ黒で ブログタイトルのみしか表示されておりません。 ブログを作られた方のサポートページも見ましたが、画像の差し替え方、 また画像サイズ（ピクセル）も全く同じにしており、原因が分からない状態です。 FC2ブログでIE9に対応していないと言うことなのでしょうか? 解決法などがおわかりの方が居られましたら、ご教授お願い致します。 参照ページ：http://kururuzero.blog.fc2.com/
- ベストアンサー
- ブログ
- ヘッダーの背景画像が表示されません。
fc2のブログを使って、ブログを作っています。 ↓ http://bkk55.blog48.fc2.com/ IE7ではCSSで指定したブログのトップ画像が表示されるのに、Firefox3.0.5で表示すると、ヘッダーの画像が表示されなくなってしまいます。 fc2 ブログで使ってテンプレートは下記のものです。 ↓ sea_simple_seo_v2 IEでは問題なく表示されるのですが・・・ cssとhtmlを確認しましたが、私の知識では特に問題ないのではないかと思うのですが・・・ 恐らく知識不足だろうと思うのですが・・ この問題の解決策を教えていただけませんでしょうか？ どうぞよろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- サイトに添付されてる画像を、常時最大化で表示したい
パソコンでサイトに添付してある画像をクリックしても縮小状態で表示されます。 以前は、最大化で表示されていたので、常時、最大化になるようにするにはどうしたらいいのでしょうか？ 使用しているPCは、Windows7です。F11でも最大化になるようですが、ツールバーが見える状態にしたいです。 パソコン初心者なので、宜しくお願いします
- ベストアンサー
- Windows 7
補足
HTML <header> <a href="URL"><img src="img/ロゴ画像.png" id="logo" alt=""></a> <h1>私のサイトです。</h1> </header> CSS header {order:0;width:100%;height:120px;background-image:url(img/header.jpg);box-sizing:border-box;} #logo {width:250px;height:auto;margin:20px 37px 0;} @media screen and (max-device-width:385px) { header {height:140px;} #logo {padding-left:35px;margin:20px 25px 0;} }