dポイントプレゼントキャンペーン実施中!

ブログのデザインを編集しています。
投稿日時の下に記事のタイトルを表示したいのですが、
CSSの.box h1 や.box pの余白設定をいじっても添付画像のように想定した位置に改行できず困っています。

ソースは下記になります。
どなたかご教授願えないでしょうか。

<!-- 記事の一覧の開始 -->
<IndexArticlesLoop>
<!-- トップページの記事一覧ループ -->
<div class="box">
<header class="article-header">
<div class="article-body">
<div class="article-body-inner">
<!-- 参加している共通テーマの表示 -->
<$CommonTheme$>

<!--見出し画像の表示-->
<IfArticleCoverImage> <a href="<$ArticlePermalink$>">
<img class="border-img" src="<$ArticleCoverImage$>" width="250" height="140" border="15" alt="" align="left" hspace="15"vspace="15" /></a>
</IfArticleCoverImage>

<!-- 投稿日時 -->
<p class="article-header-date"><time datetime="<$ArticleDateISO8601$>" pubdate="pubdate"><$ArticleDate$></time></p>

<!-- 記事のタイトル -->
<h1 class="article-title" itemprop="name">
<a href="<$ArticlePermalink$>" itemprop="url">
<$ArticleTitle ESCAPE$>
</a>
</h1>

<!-- 続きを読む -->
<IfArticleBodyMore>
<a href="<$ArticlePermalink$>">
<div align="right">
<img src="http://livedoor.blogimg.jp/test.png" width="240" height="91" border="0" alt="続きを読む" class="pict" /> </a> <br />
</div>
</IfArticleBodyMore>

<!-- タグのリスト表示セット -->
<$ArticleTagsList$>
</div>

<!-- 記事の評価アイコン -->
<IfArticleRating><span class="article-rating"><$ArticleRatingIcon$></span></IfArticleRating>
</header>
</div>

<!-- 広告表示 -->
<IfFirstArticle>
<$Advertise$>
</IfFirstArticle>

</IndexArticlesLoop>

<!-- ページ送り -->
<$IndexNavigator$>

</div>
</div>


/*記事一覧の囲い*/
.box {
color: #2c2c2f;
background: #fff8e8;
width:710px;
margin-left:auto;
margin-right:auto;
border: solid 1px black;
box-sizing: border-box;
margin-top: 1rem;

}
.box h1 { margin-top: 0; }
.box p{ }

「改行がしたいのですが、うまく反映されませ」の質問画像

A 回答 (1件)

スクリーンショットが表示された時のHTMLを開示してください。


ブログシステムのオリジナルタグが混ざったソースを解析するのは厳しいです。
    • good
    • 0
この回答へのお礼

すみません、こちらになります。
CSSを編集した結果、想定の位置に改行できたのですが、
投稿時間とタイトルとの余白の設定がうまく反映されず困っています。

a.title-nameの余白をいじってもダメなのですが、
どこが問題なのでしょうか?

<div class="box">
<header class="article-header">
<div class="article-body">
<div class="article-body-inner">

<!--見出し画像の表示-->
<a href="http://www.test/archives/8616145.html"><img class="border-img" src="http://www.test/imgs/a/a/aa93555c-s.jpg" width="250" height="140" border="15" alt="" align="left" hspace="15"vspace="15" /></a>

<!-- 投稿日時 -->
<p class="article-header-date"><time datetime="2018-04-22T21:31:02+0900" pubdate="pubdate">2018年04月22日</time></p><br />

<!-- 記事のタイトル -->
<h1>
<a class="title-name" href="http://www.test/archives/8616145.html" itemprop="url">
テスト2
</a>
</h1>

.article-body-inner h1{
font-size: 20px;
padding: 0;
margin:0;
}

.article-body-inner p{
line-height: 0;
}

a.title-name
{
margin-left: 0;
}

.box p{
margin-top: 20px;
margin-bottom: 0;}

お礼日時:2018/04/29 19:24

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!