メッセージの編集
タイトル
お名前
本文
テンプレートサイト様から借りてきているもテンプレートなのですが、トップ画像がどうしてもケータイの画面からはみ出てしまいます。 HEADタグはこんな感じです。 body{ font-family:"Alegreya Sans","メイリオ", sans-serif; font-size:12px; letter-spacing:1px; line-height:150%; color:#000; background:#fff; margin:0; padding:0;} @media screen and (min-width: 701px){ .wrp{ width:700px; margin:0 auto;} .wrp2{ display:flex; flex-direction:row; flex-wrap:wrap;} .act{ text-align:center; position:relative; width:290px; display:inline-block; border:double 3px #000; margin:10px auto; padding:15px 15px 20px;} } @media screen and (max-width: 700px){ .wrp{ width:100%; margin:0 auto;} .act{ text-align:center; border:double 3px #000; margin:20px; padding:15px 15px 20px;} } .wrp2{ margin-bottom:20px;} .con{ margin:20px; text-align:right;} .change{ text-align:center; border:solid 1px #000; margin:20px; padding:15px;} .menu{ margin:-110px 30px 50px;} .menu a{ background:rgba(255,255,255,.8); border:solid 1px #fff; padding:2px; margin:5px; display:inline-block; width:120px; text-align:center;} .menu a:hover{ color:#fff; background:rgba(0,0,0,.6); border:solid 1px #000; padding:2px; margin:5px; display:inline-block; width:120px; text-align:center;} .top{ margin-left:-7px; padding:5px; border:solid 2px #ccc;} .act a{ display:inline-block; width:70%; margin:5px 0; padding:0 10px; text-align:left;} .text{ line-height:200%; font-size:13px; padding:30px 0 10px; margin:20px; text-align:left;} .text p{ line-height:150%; border:solid 2px #efefef; margin:10px; padding:10px; font-size:10px; } header{ max-width:390px; margin:0 auto;} .ft{ margin-top:20px; text-align:center;} .ft a{ margin:0 10px; padding:1px 10px; background:#555; color:#fff; border:solid 1px #555;} .ft a:hover{ background:#fff; color:#555; border:solid 1px #fff;} hr{ display:inline-block; border:none; height:10px; background-image:linear-gradient(hsla(0, 0%, 0%, 1),hsla(0, 0%, 0%, 1) 33.33%,hsla(0, 0%, 0%, 0) 33.33%,hsla(0, 0%, 0%, 0) 100%); background-size:100% 3px; width:40px;} h1{ height:200px; line-height:100%; font-weight:normal; font-family:はんなり明朝, sans-serif; color:#000; margin:-200px 0 0; padding:5px 15px; background:rgba(255,255,255,.7); display:inline-block; text-align:center; position:relative; top:215px; right:15px; writing-mode:tb-rl; writing-mode:vertical-rl; -moz-writing-mode:vertical-rl; -o-writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl;} h2{ color:#000; font-family:はんなり明朝, sans-serif; font-weight:normal; font-size:15px; margin:0 5px; padding:0 5px 5px; text-align:center;} h3{ font-size:24px; font-weight:normal; font-family: はんなり明朝, sans-serif; color:#000; margin:30px 0 0; padding:10px; text-align:center;} a{ color:#000; text-decoration:none; padding:0 3px; border-bottom:solid 2px #efefef; transition:0.5s;} a:hover{border-bottom:solid 2px #bc8f8f;} input[type],textarea{ height:50px; width:100%; font-family:"Alegreya Sans","メイリオ", sans-serif; font-size:12px; letter-spacing:1px; line-height:150%; background:#d4dcda; color:#555; border:solid 1px #d4dcda; margin:5px 10px; padding:2px 5px; } input[type=text]{ margin:5px; height:24px; width:80px;} input[type=submit]{ margin:5px; height:auto; width:80px; cursor:pointer; text-shadow:none; border:solid 1px #555; background:#555; color:#fff; } </style> そして表紙タグなのですが <header><div class="con"><h1>サイト名</h1><img class="top" src="##画像URL##"></div><div class="menu"><a href="#">name change</a> <a href="#">attention</a></div></header> となっていて、その画像のサイズが2136×1424に設定されていてその通りに独自タグを使って貼り付けてみると画像が大きすぎてしまって希望通りになりません。 画像のサイズを変えても、PCではそれなりに見えますがケータイではやはりはみ出て見えてしまいます。いま設定してある画像サイズは364×247です。 いろいろと自分で試してはみたのですが手に追えず、説明下手で申し訳ないのですがどう対処すればいいのか教えてくださると幸いです。 よろしくお願いいたします。
編集パス
編集
記事削除
×
「#エロ」のBL小説を読む
BL小説 BLove
- ナノ -