【ライフハック】Pz-LinkCardの外観をスタイルシートでカスタマイズ

外観を合わせたかった

ヨメレバ、カエレバの外観をスタイルシートで替えているのですがPz-LinkCardの外観もおなじようにしてみたくなりました。
Pz-LinkCard


ヨメレバ

表示の設定

表示の設定はこんな感じ。

では、CSSです。

.linkcard
{
	padding: 15px !important;
	margin-bottom: 15px;
	border: solid 1px #CCC !important;
	overflow: hidden;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.lkc-external-wrap
{
	border: none;
	box-shadow: none;
               background-image: none;
                max-width:100%;
}

.lkc-external-wrap a
{
	text-decoration: none;
}

.lkc-thumbnail
{
	float: left;
	margin: 0 15px 0 0;
	min-width: 150px;
	text-align: center;
}
.lkc-thumbnail-img
{
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
	border-radius: 1px;
	border:none;
}

.lkc-content
{
	margin: 10px 0;
	line-height: 150%;
}
.lkc-title
{ 
	margin: 0 0 20px 0;
	overflow: hidden;
	font-weight: normal;
	font-size:95%;
	color: #3333cc;

}
.lkc-info
{
	margin: 0 0 0 150px;
	padding:15px 15px 20px 15px;
}

.lkc-domain
{
	margin: 5px 0 5px 0;
	padding:15px 25px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: solid 1px #999;
	color: #222;
}


.lkc-excerpt
{ 
	margin: 10px 0 10px 0;

}

とにかくすっきりさせたかったのです。

2018/07/30:不都合があったため、一部cssをいじりました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

one × 3 =