Twitterはこちら仕事依頼はこちら

【WordPress】リンクカードの作り方【HTML・CSS】

WordPressでリンクカードを作る

当サイトでは、Amazonアソシエイトをはじめとした第三者配信のアフィリエイトプログラムにより商品・サービスをご紹介、適格販売により収入を得ています。

ブログカードとボタンの間くらいのリンクカードを作ります。

こちらがサンプルです。

こっちも見て！

インストールするだけでカスタマイズが終わるプラグインあります！

基本無料！ブロックエディタ限定のプラグイン！

テキスト、ラベルは自由に変更可能です！

「2パターン × 2ラベル × 5色分」コピペでできるようにしました。

影バージョン

短いテキストでもOK

この欄もラベルも消すこと可能です

では作り方を見ていきましょう！

この記事はWordPressユーザー向けに書いてますが、HTMLとCSSなのでなんでも使えます。

リンクカードをHTMLとCSSで作る方法

手順は以下の通りです。

手順

STEP1:共通のCSSコピペ

CSSをコピペしていきます。

メモ

「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

CSSが反映されない場合はスーパーリロード(Ctrl+F5orShift+F5)してください。

Copy
/* リンクカード */
.pb-btn{
	margin: 3em auto;
	max-width:500px;
	width:80%;
	position:relative;
}
.pb-btn p{
	margin:0 !important;
	padding:0 !important;
}
.pb-btn a{
	display:block;
	padding:1.5em 2em 1.3em;
	color:#333 !important;
	background:#FAFAFA;
	border:2px solid #777;
	font-size:16px !important;
	font-weight:600;
	position:relative;
	transition:all 0.2s;
	text-decoration:none;
}
.pb-btn .pb-btn__text{
	max-width: 90%;
	display: block;
	line-height:1.8;
}
.pb-btn .pb-btn__label{
	background: #EE8F81;
	color: #fff;
	display: inline-block;
	padding: 0.5em 1em !important;
	font-size: 12px !important;
	line-height: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	position:absolute;
	top: -12px;
	left: 23px;
	z-index: 1;
}
.pb-btn .pb-btn__add{
	font-size:12px !important;
	letter-spacing:0.5px;
	margin: 7px auto 0 !important;
	max-width:90%;
	color: #EE8F81;
	font-weight:600;
	text-align:center;
}
.pb-btn a:after{
	position: absolute;
	content: "";
	display: inline-block;
	right: 7%;
	top: 50%;
	width: 9px;
	height: 9px;
	border-top: 3px solid #333;
	border-right: 3px solid #333;
	-webkit-transform: rotate(45deg) translateY(-50%);
	transform: rotate(45deg) translateY(-50%);
}
.pb-btn a:hover{
	border-color:#EE8F81;
	transition:0.2s;
	text-decoration:none;
	opacity:1;
}
@media screen and (max-width:600px) {
	.pb-btn{
		width:90%;
	}
	.pb-btn a {
		padding: 1.3em 1.3em 1.2em;
		font-size:14px !important;
	}
	.pb-btn .pb-btn__label{
		left:14px;
	}
	.pb-btn .pb-btn__add{
		text-align:left;
	}
}

STEP2:必要な人だけCSSコピペ

CSSを先ほどの下に追加でコピペしていきましょう。

複数使い分けたい人は必要な分全てコピペしてください。

背景を影にする

テキスト

テキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

Copy
.pb-btn__shadow a{
	box-shadow: 0px 4px 10px rgba(0,0,0,0.09);
	border:unset !important;
}
.pb-btn__shadow:hover{
	transform: translateY(2px);
}
.pb-btn__shadow:hover a{
	box-shadow: 0px 2px 5px rgba(0,0,0,0.09);
}
.pb-btn__shadow:hover .pb-btn__add{
	transform: translateY(-2px);
}

ラベルデザインを変更する

テキスト

テキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

Copy
.pb-btn .pb-btn__label-2{
	color: #EE8F81;
	display: inline-block;
	font-size: 12px !important;
	line-height: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	position: absolute;
	top: -24px;
	left: -23px;
	z-index: 1;
	transform: rotate( -5deg);
}
.pb-btn .pb-btn__label-2:before,.pb-btn .pb-btn__label-2:after{
	display:inline-block;
}
.pb-btn .pb-btn__label-2:before{
	content:"＼";
	margin-right:3px;
}
.pb-btn .pb-btn__label-2:after{
	content:"／";
	margin-left:3px;
}

色を変更する

イエロー

テキスト

テキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

Copy
.pb-btn__yellow a{
	background:#fef9ed;
	border-color:#fdc44f;
}
.pb-btn__yellow.pb-btn__shadow a{
	box-shadow: 0px 4px 10px rgba(227,219,201,0.6);
}
.pb-btn__yellow.pb-btn__shadow a:hover{
	box-shadow: 0px 2px 5px rgba(227,219,201,0.6);
}
.pb-btn__yellow .pb-btn__label{
	background: #fdc44f;
}
.pb-btn__yellow .pb-btn__add{
	color:#fdc44f;
}
.pb-btn__yellow .pb-btn__label-2{
	color:#fdc44f;
}
.pb-btn__yellow a:after{
	border-top: 3px solid #fdc44f;
	border-right: 3px solid #fdc44f;
}

グリーン

テキスト

テキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

Copy
.pb-btn__green a{
	background:#F2F8E8;
	border-color:#91c13e;
}
.pb-btn__green.pb-btn__shadow a{
	box-shadow: 0px 4px 10px rgba(225,230,212,0.8);
}
.pb-btn__green.pb-btn__shadow a:hover{
	box-shadow: 0px 2px 5px rgba(225,230,212,0.8);
}
.pb-btn__green .pb-btn__label{
	background: #91c13e;
}
.pb-btn__green .pb-btn__add{
	color:#91c13e;
}
.pb-btn__green .pb-btn__label-2{
	color:#91c13e;
}
.pb-btn__green a:after{
	border-top: 3px solid #91c13e;
	border-right: 3px solid #91c13e;
}

ピンク

テキスト

テキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

Copy
.pb-btn__pink a{
	background:#ffefef;
	border-color:#fd9392;
}
.pb-btn__pink a:hover{
	border-color:#fdc44f;
}
.pb-btn__pink.pb-btn__shadow a{
	box-shadow: 0px 4px 10px rgba(237,210,210,0.8);
}
.pb-btn__pink.pb-btn__shadow a:hover{
	box-shadow: 0px 2px 5px rgba(237,210,210,0.8);
}
.pb-btn__pink .pb-btn__label{
	background: #fd9392;
}
.pb-btn__pink .pb-btn__add{
	color:#fd9392;
}
.pb-btn__pink .pb-btn__label-2{
	color:#fd9392;
}
.pb-btn__pink a:after{
	border-top: 3px solid #fd9392;
	border-right: 3px solid #fd9392;
}

ブルー

テキスト

テキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

Copy
.pb-btn__blue a{
	background:#f0f9fc;
	border-color:#6fc7e1;
}
.pb-btn__blue.pb-btn__shadow a{
	box-shadow: 0px 4px 10px rgba(197,208,212,0.5);
}
.pb-btn__blue.pb-btn__shadow a:hover{
	box-shadow: 0px 2px 5px rgba(197,208,212,0.5);
}
.pb-btn__blue .pb-btn__label{
	background: #6fc7e1;
}
.pb-btn__blue .pb-btn__add{
	color:#6fc7e1;
}
.pb-btn__blue .pb-btn__label-2{
	color:#6fc7e1;
}
.pb-btn__blue a:after{
	border-top: 3px solid #6fc7e1;
	border-right: 3px solid #6fc7e1;
}

STEP3：HTMLコピペ・内容書き換え

記事エディターにHTMLをコピペします。

  • グーテンベルク：カスタムHTMLにコピペ
  • クラシックエディタ：テキストタブにコピペ

基本となるHTMLがこちら！

Copy
<div class="pb-btn">
<p class="pb-btn__label">ラベル</p>
<a href="ここにリンク"><span class="pb-btn__text">テキストテキストテキストテキストテキストテキストテキストテキスト</span></a>
<p class="pb-btn__add">追記テキスト</p>
</div>

ラベルや追記テキストが必要ない場合は一行まるまる消してください。

各カスタマイズHTMLがこちら！

【HTML】影に変更

Copy
<div class="pb-btn pb-btn__shadow">
<p class="pb-btn__label">ラベル</p>
<a href="ここにリンク"><span class="pb-btn__text">テキストテキストテキストテキストテキストテキストテキストテキスト</span></a>
<p class="pb-btn__add">追記テキスト</p>
</div>

【HTML】ラベルデザイン変更

Copy
<div class="pb-btn">
<p class="pb-btn__label-2">ラベル</p>
<a href="ここにリンク"><span class="pb-btn__text">テキストテキストテキストテキストテキストテキストテキストテキスト</span></a>
<p class="pb-btn__add">追記テキスト</p>
</div>

【HTML】イエローに変更

Copy
<div class="pb-btn pb-btn__yellow">
<p class="pb-btn__label">ラベル</p>
<a href="ここにリンク"><span class="pb-btn__text">テキストテキストテキストテキストテキストテキストテキストテキスト</span></a>
<p class="pb-btn__add">追記テキスト</p>
</div>

【HTML】グリーンに変更

Copy
<div class="pb-btn pb-btn__green">
<p class="pb-btn__label">ラベル</p>
<a href="ここにリンク"><span class="pb-btn__text">テキストテキストテキストテキストテキストテキストテキストテキスト</span></a>
<p class="pb-btn__add">追記テキスト</p>
</div>

【HTML】ピンクに変更

Copy
<div class="pb-btn pb-btn__pink">
<p class="pb-btn__label">ラベル</p>
<a href="ここにリンク"><span class="pb-btn__text">テキストテキストテキストテキストテキストテキストテキストテキスト</span></a>
<p class="pb-btn__add">追記テキスト</p>
</div>

【HTML】ブルーに変更

Copy
<div class="pb-btn pb-btn__blue">
<p class="pb-btn__label">ラベル</p>
<a href="ここにリンク"><span class="pb-btn__text">テキストテキストテキストテキストテキストテキストテキストテキスト</span></a>
<p class="pb-btn__add">追記テキスト</p>
</div>

組み合わせて使う場合

HTMLで変更する場所は一部だけなので難しくありません。

1行目に注目してください。基本HTMLはこれです。

Copy
<div class="pb-btn">
<p class="pb-btn__label">ラベル</p>
<a href="ここにリンク"><span class="pb-btn__text">テキストテキストテキストテキストテキストテキストテキストテキスト</span></a>
<p class="pb-btn__add">追記テキスト</p>
</div>

影に変更したい時は「pb-btn__shadow」を追記します。

Copy
<div class="pb-btn pb-btn__shadow">
<p class="pb-btn__label">ラベル</p>
<a href="ここにリンク"><span class="pb-btn__text">テキストテキストテキストテキストテキストテキストテキストテキスト</span></a>
<p class="pb-btn__add">追記テキスト</p>
</div>

ラベルを変更したい時だけ2行目を変更します。

名前適当すぎて申し訳ないんですが「pb-btn__label」を「pb-btn__label-2」に変えるだけです。

Copy
<div class="pb-btn">
<p class="pb-btn__label-2">ラベル</p>
<a href="ここにリンク"><span class="pb-btn__text">テキストテキストテキストテキストテキストテキストテキストテキスト</span></a>
<p class="pb-btn__add">追記テキスト</p>
</div>

色も影同様に1行目にclassを追加してるだけです。

以上、お疲れ様でした！

コメント

ページトップへ