【JIN】ブログカードを『５分』でかっこよくする方法！　追加CSSのみで簡単実装！！

この記事がおすすめの人

ブログカードについて知りたい人
ブログカードの見た目を良くしたい人
他のデザインが崩れたりするリスクを出来るだけ低くしたい人

ブログを運営する上で、見た目やデザインは重要です。

少しでも見た目がおしゃれなら読者もそのサイトを覚えやすくなるし、見てくれる機会が増えます。

りりまん

できるだけ個性を出していかないとね！！

そこで、今回は簡単に実装できる『追加CSS』でブログカードをおしゃれにする方法をご紹介します！

ちょっとしたことですが、こだわり大事です！

追加CSSを入力する前には、確実にバックアップを取っておきましょう。

目　次

1 ブログカードとは
2 ブログカードの変更内容
- 2.1 ①ブログカードのタイトルをリンク色に変更
- 2.2 ②ブログカードに「続きを読む」を追加
3 まとめ

ブログカードとは

ブログカードとは、簡単にいうと”おしゃれな”内部リンクのことで、以下のようなものです。

タップすると記事に飛びます。

【完全保存版】ブログのノウハウを全て公開｜初心者のためのブログ運営！！ 2021年5月22日：初版発行2021年6月30日：記事追加（6記事追加） 2021年2月10日よりブログを開始し、...

JINの場合、自分が作成した記事のURLを貼ると簡単に表示させることができるので便利です。

上記のブログカードは既にデザインを変更したものになります。

なにもデザインをいじらなかった場合、以下のようになります。

なにが違うか分かりますでしょうか？

次項で詳しい変更内容をご説明します。

ブログカードの変更内容

では、もう一度「変更前」と「変更後」をお見せします。

図に記載の通り、変更点は以下の2点です。

ブログカードのタイトルをリンク色に変更
ブログカードに「続きを読む」を追加

1つずつ詳しく説明していきます。

気に入ったらご自身のブログにも導入してみてください！！

①ブログカードのタイトルをリンク色に変更

まずは、タイトルの色をリンク色に変更する方法です。

私たちはリンクと言えば「青色」と感覚的に認識しています。

そのため、内部リンクのタイトルも青色にしておくことで、タップしてもらえる確率が増えるように思います。

追加CSSのコードは以下に示します。

/*ブログカードのタイトルをリンク色に変更*/
.blog-card-title {
		color: #0003ea;
		text-decoration: underline;
	}

3行目の「color: #0003ea;」の部分の赤文字部を変更するとリンク色が変更できます。

ご自身が設定しているリンク色と同じにすることをおすすめします。

設定しているリンク色は以下の方法で確認・編集可能です。

「WordPress」⇒「外観」⇒「カスタマイズ」をクリック。

「カラー設定」をクリック。

中段程度にある「リンクの色」の色を選択をタップすると、自分が設定している色が見れます。

りりまん

僕の場合「#0003ea」にしてるけど、完全に感覚で設定してるので、みなさんの好きな色（青系）にするといいと思います！！

②ブログカードに「続きを読む」を追加

次に「続きを読む」を追加する方法について説明します。

こちらも凄く簡単で以下のコードを追加CSSに入力するだけです。

/*ブログカードに「続きを読む」を追加*/
a.blog-card{
		padding-bottom:40px;
}
a.blog-card{
		position: relative;
}
a.blog-card:after{
		position: absolute;
		font-family: sans-serif,'Font Awesome 5 Free';
		content:'続きを読む ⇒';
		font-weight: bold;
		right:10px;
		bottom: 10px;
		padding:1px 10px;
		background:#ff6868; /*背景色*/
		color:#fff; /*文字色*/
		font-size: .8em;
		border-radius:2px;
}

11行目の「content:’続きを読む ⇒‘;」の赤文字の部分を変更すると表記される文言を変更できます。

例えば「詳細はこちら」や「ここをクリック」などでも良いかもしれません。

りりまん

「続きを読む」があるだけでクリックしやすくなるのは僕だけだろうか？

まとめ

ブログカードについてまとめます。

◆ブログカードのタイトルをリンク色に変更

/*ブログカードのタイトルをリンク色に変更*/
.blog-card-title {
		color: #0003ea;
		text-decoration: underline;
	}

◆ブログカードに「続きを読む」を追加

/*ブログカードに「続きを読む」を追加*/
a.blog-card{
		padding-bottom:40px;
}
a.blog-card{
		position: relative;
}
a.blog-card:after{
		position: absolute;
		font-family: sans-serif,'Font Awesome 5 Free';
		content:'続きを読む ⇒';
		font-weight: bold;
		right:10px;
		bottom: 10px;
		padding:1px 10px;
		background:#ff6868; /*背景色*/
		color:#fff; /*文字色*/
		font-size: .8em;
		border-radius:2px;
}

上記のコードを追加CSSに入力すれば簡単にデザインを変更することができます。

有料テーマを使用するとデザインが似てくるので、ちょっとずつ工夫し個性を出していくことをおすすめします。

今後も簡単にできるデザイン変更についてご紹介していきますので、よろしくお願いいたします。

以下の記事に全てまとめてますので、暇な時に覗いてみてください。

では、また！！