“Maple Leaf”の投稿タイトルの複数行対応化

  • 解決済 netoyaji

    (@netoyaji)


    15年、 7ヶ月前

    初めまして、WordPress初心者のネットオヤジといいます。HTML,CSS,PHPともに多少の知識はあるつもりの団塊世代者です。いろいろとご支援お願いいたします。

    templatelite.comの”Maple-Leaf”は、記事タイトルの左側と下にLine装飾が付いているのですが、タイトルが長くなった場合、2行目以降が投降者や投稿日と重なってします。

    そこで質問ですが、CSSを見ると、タイトル部分の装飾に関して、334行目から次のように記述してあります。
    /***** content *****/
    ＜中略＞
    .post{
    width:605px;
    margin:0 0 20px 0;
    border:0px red solid;
    }

    .post_top{
    position: relative;
    border-left:8px #5A6B1E solid;
    border-bottom: 1px #5A6B1E solid;
    height:40px;
    /*background: #f6f6f6;*/
    }
    ＜以下省略＞

    この装飾を生かしながら、長文タイトルに自動的に対応できるようにしたいのですが、どのように設定すればよいのでしょうか？
    具体的には、左側太線が複数行対応し、投降者と投稿日表示位置が下方に移動すれば良いのですが。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • rivaty

    (@rivaty)

    15年、 7ヶ月前

    他のデザインに影響が出るかどうかわかりませんが、ざっと見た感じでは .post_top 内の height:40px; を削除すればいいかと思います。

    モデレーター jim912

    (@jim912)

    15年、 7ヶ月前

    netoyajiさん、こんにちは。

    CSSの省略されちゃった部分が結構大事なのですが。。。

    このテーマは、タイトル部分にpositionが使われているため、長文タイトルに追従させるには、rivatyさんのおっしゃるように、.post_top 内の height:40px;を削除すると共に、これらのpostionおよびtop,left,rightの指定を削除、.posttitleにoverflow: hidden、.dateにfloat: rightとwidth、.authorにfloat: leftとwidthを加え、さらにつまった余白をpaddingで調整といった感じでしょうか。

    .posttitle{
	position:absolute;
	top:0px;
	left:5px;
	font-size:18px;
	font-family:arial;
	color:#5A6B1E;
	border:0px red solid;

}
.posttitle a{
	font-family:arial;
	color:#5A6B1E;
	text-decoration:none;
}
.posttitle a:hover{
	font-family:arial;
	text-decoration:underline;
	color:#5A6B1E;
}
.date {
	position:absolute;
	font-family:arial;
	top:24px;
	right: 20px;
	font-size: 10px;
	padding: 0px 0px 0px 0px;
}
.author{
	position:absolute;
	font-family:arial;
	font-size:11px;
	top:24px;
	left:5px;
}

    トピック投稿者 netoyaji

    (@netoyaji)

    15年、 7ヶ月前

    ご返事が遅くなりまして、申しわけありません。
    rivatyさんの方法だけでは、ダメでした。タイトル部分のデザインが完全に崩れてしまいました。
    そこで、jim912さんのアドバイスに沿って、あちこち修正してうまく行きました。ミソは、positionにあったようです。

    ただ、jim912さんのアドバイスにあった、「width」を使用しなくても問題なく表示しているのですが…。ここでの「width」を使用する意味は何でしょうか？

    修正したコードは以下の通りです。「/*・・・*/」部分は削除した部分です。追加・変更した部分は、< ・・・ >で括ってあります。

    .post_top{
	/*position: relative;*/
	border-left:8px #5A6B1E solid;
	border-bottom: 1px #5A6B1E solid;
	< padding-bottom: 20px; >
	/*height: 40px;*/
	/*background: #f6f6f6;*/
}
.post_bottom{
	margin: 0 50px 0 50px;
	height:3px;
	background:url(images/line.jpg) repeat-x bottom;
}
.posttitle{
	/*position:absolute;*/
	/*top:0px;*/
	/*left:5px;*/
	< overflow:hidden; >
	margin-left: 5px;
	font-size:18px;
	font-family:arial;
	color:#5A6B1E;
	border:0px red solid;
}
.posttitle a{
	font-family:arial;
	color:#5A6B1E;
	text-decoration:none;
}
.posttitle a:hover{
	font-family:arial;
	text-decoration:underline;
	color:#5A6B1E;
}
.date {
	/*position:absolute;*/
	font-family:arial;
	/*top:24px;*/
	/*right: 20px;*/
	< float:right; >
	font-size: 10px;
	< padding: 3px 20px 0px 0px; >
}
.author{
	/*position:absolute;*/
	float:left;
	< font-family:arial; >
	font-size:10px;
	< padding:3px 0px 0px 5px; >
	/*top:24px;*/
	/*left:5px;*/
}

    モデレーター jim912

    (@jim912)

    15年、 7ヶ月前

    netoyajiさん、こんにちは。

    ここでの「width」を使用する意味は何でしょうか？

    ブラウザによる差異を吸収するために追加してあります。
    自分が使うブラウザだけでなく、一般的に利用されている各種ブラウザで表示検証してみてください。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「“Maple Leaf”の投稿タイトルの複数行対応化」には新たに返信することはできません。