PCとスマホでのヘッダー画像の切り替え(アドバイスお願いします)

スマホでTwitter開いたらいきなりヘッダーが目に飛び込んできて無理 心臓がばくばくする
スマホのホーム画面とラインとツイッターのアイコンは友達に書いてもらったのにしてるけどヘッダーなーどうしよ
しかしヘッダーもスマホで見るとカーニバルスターが見切れてるじゃん。ひどいな公式のレイアウト
ヘッダー虹ちゃんからチキパに変えました~、まぁこっちの写真変えてもそんな影響ないですよね?笑 てかスマホの壁紙とかロック画面とか何枚か変更出来るじゃないですか? 昨日、気づいたら全部ひなちゃんに変わってました爆笑 最近ひなちゃん好きすぎてヤバい気が、、、😅 チキパも大好きだぁ~😄
スマホだけかもしれんけどプロフィールでアイコンの裏に隠すヘッダーはいいぞ(?????????)
今改めて初めてスマホのロック&ホーム画面とTwitterのアイコン&ヘッダーをTOKIO仕様にして引いたガチャ結果の画像見てびっくりしてる...ホームズとカレイドスコープ同時に引いたんやな私...

アドバイス頂きたいのですが、お願いできますでしょうか?

http://moteworld.net/

PCのヘッダー画像をスマホで見ると小さすぎるので、スマホ用に画像を切り替えたいのですが、
以下のサイトのようにうまく表示されません。

https://www.nishi2002.com/20835.html

どうすればうまく表示されるでしょうか?

ちなみにワードプレスの「スマートフォン用スタイルシート 固定ページテンプレート (smart.css)」の
ページは以下のようになっています。

/*
Template Name: スマートフォン用スタイルシート
*/

@media screen and (max-width: 480px) {
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ●style.css 画面の横幅が480px以下 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* PC用のヘッダー画像を消す */
.main-image .main-image-in {
display: none;
}

/* スマホ用のヘッダー画像を表示 */
.main-image:after {
background:http://moteworld.net/wp-content/uploads/2017/07/hseconds.jpg;
background-size: 100% auto;
content: '';
display: block;
height: 320px;
}
}

body {
height: 480px;
margin: 0;
padding: 0;
}
p {
font-size: 14px;
line-height: 1.40;
}
.imgl, .imgr, .alignleft, .alignright {
width: 80%;
padding: 0 10% 10px;
clear: both;
}

以下省略

求めるスキル : スマートフォン / CMS・WordPress
支払い方式 : 固定報酬制
予算 : 1,620円

  • コメント

    1. 匿名希望
      2017/08/21(月) 02:43:16

      しかしヘッダーもスマホで見るとカーニバルスターが見切れてるじゃん。ひどいな公式のレイアウト

    2. 匿名希望
      2017/08/21(月) 02:43:16

      スマホのホーム画面とラインとツイッターのアイコンは友達に書いてもらったのにしてるけどヘッダーなーどうしよ

    3. 匿名希望
      2017/08/21(月) 02:43:16

      スマホでTwitter開いたらいきなりヘッダーが目に飛び込んできて無理 心臓がばくばくする

    4. 匿名希望
      2017/08/22(火) 13:35:44

      ヘッダー虹ちゃんからチキパに変えました~、まぁこっちの写真変えてもそんな影響ないですよね?笑
      てかスマホの壁紙とかロック画面とか何枚か変更出来るじゃないですか?
      昨日、気づいたら全部ひなちゃんに変わってました爆笑
      最近ひなちゃん好きすぎてヤバい気が、、、😅
      チキパも大好きだぁ~😄

    5. 匿名希望
      2017/08/22(火) 23:57:32

      スマホだけかもしれんけどプロフィールでアイコンの裏に隠すヘッダーはいいぞ(?????????)

    記事に戻る

関連記事