メッセージの編集
タイトル
お名前
本文
曖昧なタイトルですみません。 今使っているブログなのですが、そのデザインについて若干変えたいところがあって質問します。 あるテンプレート配布サイト様からお借りしたテンプレートなのですが、見てもらったらお分かりになると思うのですが、タイトルを書くところのリボンのような一番くぼんだ所からブログの本文を書く四角いボックスを生やしたいと思っているのですが、上手くいきません。 試しに配布しているテンプレートを使って自分で改めて作ってみたのですが、配布先のようにはならず、タイトルの部分がズレたままになってしまいます。 誰かお分かりになられる方、いらっしゃいましたらお力をお貸し願えると助かります…!! これが私の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> という感じになっております。 元のデザインよりもだいぶ弄ってあるため、タイトルの部分がズレてしまったのかどうかは分かりませんが、お分かりになられる方がいらっしゃいましたら教えてくださると助かります。よろしくお願いいたします…!!
編集パス
編集
記事削除
×
人気急上昇中のBL小説
BL小説 BLove
- ナノ -