ワードプレスにブログカードを表示できない。プラグインを使わずに作った。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

ワードプレスでブログを書いていて関連記事を紹介するブログカードが表示できないと辛いものがありますよね。

ブログカードの例

ブログカードの入れ方の入れ方は大きく3つあります。

  • URLを直接記事に書く。
  • URLを ショートコード embed /embedで囲う
  • プラグインPz-LinkCard を使う

しかし、私のブログでは全部うまくいきませんでした。

いろいろ調べましたが観念してHTMLとCSSで作りました。

いちいち写真とかリンクを入れないといけないのでめんどくさいのですが、無いよりずっとましです。

こんな感じです。

HTMLとCSSを紹介します。

HTML

<code><div class="card">
<div class="sum">写真</div><div class="text">ここに文章</div>
<div class="box-title">関連記事</div>
</div>

CSS

/*ブログカード*/
.card {
   	position : relative ;
	margin-top: 3em ;
	margin-right:0em;
	margin-left:0em;
	margin-bottom: 1em ;
    padding: 0em 0em;
    border: solid 3px #06ABC8;
	width :100%;
	max-width : 300px;
	vertical-align: middle;
}
.card .sum {
	width : 30% ;
    display : inline-block;
	    padding: 0;
        vertical-align: middle;
}


.card .text {
    display : inline-block;
	width : 65% ;
	    padding: 0;
	vertical-align: middle;
	}
.card .box-title {
     position : absolute ;
	left : -3px;
	top: -38px;
	padding : 5px ;
	vertical-align: middle;
    font-size: 17px;
    background: #06ABC8;
	color: #fff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}

コードの解説

<div>cardの中に写真(.sum)と文字(.text)とタイトル(.box-title)の3つの<div>要素を入れています。

写真と文字が横に並ぶように inline-blockにしました。

タイトルの”関連記事”は positionを使い上に配置しています。

AMPでの表示もできます。

お役に立てば幸いです。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

人気記事

コメントを残す

*

Translate »