[[返信する]]
トップ画像の設定
by 小巻
2019-10-24 12:41
テンプレートサイト様から借りてきているもテンプレートなのですが、トップ画像がどうしてもケータイの画面からはみ出てしまいます。

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です。
いろいろと自分で試してはみたのですが手に追えず、説明下手で申し訳ないのですがどう対処すればいいのか教えてくださると幸いです。
よろしくお願いいたします。
pc
[編集]
by tok
2019-10-25 15:51
テンプレートの内容は詳しくみてないのですが、とりあえず↓をCSSに追記してみてはどうかと思います。

img{
max-width: 100%;
height: auto;
}

上記を追記しても出来なかった場合、追記した結果どのような状態になったかをお書き添えの上、他の方のご回答をお待ちください。
pc
[編集]

[返信する]
[戻る]
×
人気急上昇中のBL小説
BL小説 BLove
- ナノ -