[
[返信する]]
デザインの崩れが気になります【解決済】
by もも
2016-12-23 15:35
曖昧なタイトルですみません。
今使っているブログなのですが、そのデザインについて若干変えたいところがあって質問します。
あるテンプレート配布サイト様からお借りしたテンプレートなのですが、見てもらったらお分かりになると思うのですが、タイトルを書くところのリボンのような一番くぼんだ所からブログの本文を書く四角いボックスを生やしたいと思っているのですが、上手くいきません。
試しに配布しているテンプレートを使って自分で改めて作ってみたのですが、配布先のようにはならず、タイトルの部分がズレたままになってしまいます。
誰かお分かりになられる方、いらっしゃいましたらお力をお貸し願えると助かります…！！
これが私のHEAD内のタグです↓
<style type="text/css">
@media screen and (min-width: 600px){
.width{
width: 600px;
margin: 0px auto;}
}
body{
background: #fff;
font-family: "Indie Flower","メイリオ";
font-size: 10pt;
color: #7d7d7d;
letter-spacing: 3px;
line-height: 150%;
background: -moz-linear-gradient(left, #fff, #fff 50%, #a2d7dd 50%, #a2d7dd);
background: -webkit-linear-gradient(left, #fff, #fff 50%, #a2d7dd 50%, #a2d7dd);
background: linear-gradient(left, #fff, #fff 50%, #a2d7dd 50%, #a2d7dd);
-moz-background-size: 20px 20px;
-webkit-background-size: 20px 20px;
background-size: 20px 20px;
}
.title{
width: 450px;
position: relative;
z-index:10;
background: #b7282e;
color: #fdeff2;
font-size: 24px;
line-height: 1;
border-radius: 5px;
margin: 30px 0;
padding: 14px 5px 14px 20px;}
.title:after{
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
right: -26px;
height: 0;
width: 0;
border: 26px solid #b7282e;
border-right-color: transparent;}
.top{
background: #fff;
border-radius: 5px;
z-index:9;
margin: -57px 10px 0px 20px;
padding: 35px 10px 10px 10px;}
a{
text-decoration: none;
color: #dc143c;
border-radius: 5px;}
a:hover,active{
text-decoration: none;
background: none;
color: #f6bfbc;}
</style>
上部表示テキスト↓
<div class="width">
一覧部分↓
<div class="title">#title#</div>
<div class="top">#text#<div style="text-align:right;" align="right">#ext_...More#
<br>
#date# #time#</div></div><br>
下部表示テキスト↓
<center>#prev_prev_prev# | #next_next_next#<br></center></div>
になります。ちなみに、配布先のタグはこちらです。
HEAD内↓
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<style type="text/css">
@media screen and (min-width: 600px){
.width{
width: 600px;
margin: 0px auto;}
}
body{
background: #fff;
font-family: "Indie Flower","メイリオ";
font-size: 10pt;
color: #000;
letter-spacing: 3px;
line-height: 150%; }
.title{
width: 200px;
position: relative;
z-index:10;
background: #b7282e;
color: #fdeff2;
font-size: 24px;
line-height: 1;
border-radius: 5px;
margin: 30px 0;
padding: 14px 5px 14px 20px;}
.title:after{
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
right: -26px;
height: 0;
width: 0;
border: 26px solid #b7282e;
border-right-color: transparent;}
.top{
background: #fff;
opacity: 0.8;
border: solid 1px;
border-radius: 5px;
z-index:9;
margin: -57px 10px 0px 20px;
padding: 35px 10px 10px 10px;}
a{
text-decoration: none;
color: #666;
background: #e4ab9b;
border-radius: 5px;}
a:hover,active{
text-decoration: none;
background: none;
color: #b7282e;}
</style>
一覧部分上部↓
<div class="width">
一覧部分↓
<div class="title">【タイトル】</div>
<div class="top">【本文】<div style="text-align:right;" align="right">【追記リンク】
<br>
【日付】</div></div><br>
一覧部分下部↓
<center>【前へリンク】 | 【次へリンク】<br></center></div>
という感じになっております。
元のデザインよりもだいぶ弄ってあるため、タイトルの部分がズレてしまったのかどうかは分かりませんが、お分かりになられる方がいらっしゃいましたら教えてくださると助かります。よろしくお願いいたします…！！
pc
[編集]
by と
2016-12-24 10:26
元の方は.topにborder: solid 1px;がありますが改変した方では消しているからその分ずれてしまうのではないかと思います。(ちなみに元々のCSSもリボンと線がずれてるように見えます、自分だけかもしれませんが)
pc
[編集]
by もも
2016-12-24 18:44
と様、返信ありがとうございます…！！
border: solid 1px;ですが、本文ボックスの枠みたいで、それは無くしたかったので消した覚えがあります。
そして、border: solid 1px;を付け加えて見ても結局、ズレは変わりませんでした。
そうですか…と様がデザインのテストをされてもやっぱりズレが生じますか…。
私としてはリボンのくぼみを真ん中に持っていきたいだけといえばだけなのですが…うーん……どうしたらいいのやら……困りました。
pc
[編集]
by と
2016-12-25 18:19
これでどうでしょう
<style type="text/css">
@media screen and (min-width: 600px){
.width{
width: 600px;
margin: 0px auto;}
}
body{
background: #fff;
font-family: "Indie Flower","メイリオ";
font-size: 10pt;
color: #7d7d7d;
letter-spacing: 3px;
line-height: 150%;
background: -moz-linear-gradient(left, #fff, #fff 50%, #a2d7dd 50%, #a2d7dd);
background: -webkit-linear-gradient(left, #fff, #fff 50%, #a2d7dd 50%, #a2d7dd);
background: linear-gradient(left, #fff, #fff 50%, #a2d7dd 50%, #a2d7dd);
-moz-background-size: 20px 20px;
-webkit-background-size: 20px 20px;
background-size: 20px 20px;
}
.title{
width: 200px;
position: relative;
z-index:10;
background: #b7282e;
color: #fdeff2;
font-size: 24px;
line-height: 1;
border-radius: 5px;
margin: 30px 0;
padding: 14px 5px 14px 20px;}
@media screen and (min-width: 600px){
.title{
width: 450px;
}
}
.title:after{
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
right: -26px;
height: 0;
width: 0;
border: 26px solid #b7282e;
border-right-color: transparent;}
.top{
background: #fff;
border-radius: 5px;
z-index:9;
margin: -56px 10px 0px 20px;
padding: 35px 10px 10px 10px;}
a{
text-decoration: none;
color: #dc143c;
border-radius: 5px;}
a:hover,active{
text-decoration: none;
background: none;
color: #f6bfbc;}
</style>
追記
@media screen and (min-width: 600px){
.title{
width: 450px;
}
}
幅450pxだと横スクロールする機種があるので600以上の画面幅の機種だけに適応するようにしてみましたがお好みでどうぞ。
pc
[編集]
by もも
2016-12-26 21:24
申し訳ありませんと様…！！なかなかこのページを見れる状況になくお返事が遅れてしまいました。
そして、試してみましたがやはりズレたままですね……。私の方でもテスト画面を作り、そこで一から配布サイト通りに作ってみましたがズレはやはり、そこでも起こりました。
こうなってくると解決策はないと見た方がよろしいのでしょうか…？
折角アドバイスいただいたのに、こういった結果になってしまい申し訳ございません…。
pc
[編集]
by もも
2016-12-27 18:19
ご協力くださったと様に。
アドバイスをいただいた後、自分でいろいろとタグを弄ってみたところ、どうやら…。
.title{
width: 450px;
position: relative;
z-index:10;
background: #b7282e;
color: #fdeff2;
font-size: 24px;
line-height: 1;
border-radius: 5px;
margin: 11px 0;
padding: 14px 5px 14px 20px;}
ここの部分のmarginの数値の問題だったようで、無事解決いたしました。
ご親切にしていただき、嬉しく思っております。
ありがとうとうございました…！！
pc
[編集]
[返信する]
[
戻る
]
[返信する]]
2016-12-23 15:35
pc
戻る
]