【Cocoon】ブログカードに追加する［続きを読む］デザインサンプル

最近、CSSのお勉強が進んだので、なにか面白いことに活かせないかな～と思ってるときに、ブログカードの「続きを読む」のことを思い出しました。

あれを、もう少し”カッコ可愛く”アレンジできないものか…。

始めてみたら楽しくなってしまい、いろいろ作ってしまいました。

ど素人が作ったデザインですが、よろしかったらお使いください。<(_ _)>

【初心者向け】ブログの始め方完全ガイド！立ち上げから収入を得る方法まで

その前に…
［続きを読む］デザイン

その前に…

この記事でご紹介しているボタンは、このサイトで実際に使っているWordPressの無料テーマ【Cocoon】のブログカードで使うことを前提にしています。

前置きを飛ばしてデザインを見る ≫

内部リンク用一択

本来「続きを読む」を表示をする機能はCocoonに装備されていません。

CSSを使って追加表示する方法は様々なサイトで紹介されていますが、ほとんどの場合、内部リンク用のカードに表示するように推奨されています。

ご存じかと思いますが、ブログカードには内部リンク用と外部リンク用の2種類が用意されています。

ブログカードは、リンク先の情報を視覚的に見せる機能として人気のブロックですが、運営の立場からいえば、サイト内の回遊率を上げる目的にも使われています。

サイト内の回遊率を高めることがSEO対策にもなるということで、できるだけ内部リンクをクリックしてもらうことが大切なのだそうです。

そのため、この記事でご紹介する［続きを読む］の設定は、内部リンク用を対象にしています。

CSSコードを追加する場所

［Wordpress管理メニュー］→［カスタマイズ］→［追加CSS］

　追加するコードは最終行に貼り付けましょう。

表示するテキストを変更するには…

サンプルテキストは主に「続きを読む」で作成しています。

お好みのテキストに変える場合はcontentプロパティの「””」（ダブルクォーテーション）に挟まれたテキストを書き換えてお使いください。

テキスト横に「\00bb」のような英数字の記述がある場合は、アイコンフォントを表示するためのコードです。

{content: “続きを読む”;}　　➡　　{content: “READ MORE”;}

［続きを読む］デザイン

基本形

.internal-blogcard::before{
    position: absolute; 
    content: "続きを読む \00bb"; /*表示テキスト*/
    bottom: 13px;
    right: 15px; 
    font-size: 14px; /*文字のサイズ*/ 
    padding: 2px 10px; /*左側余白*/
    background: #f39800;
    color: #fff;
}

「\00bb」はアイコンを表すUnicodeです。
先頭の記号は環境によって「\」（円マーク）または、「＼」（バックスラッシュ）のどちらかで表示されます。

飾り線入り

飾り線入り（実線）

.internal-blogcard::after{
    position: absolute; 
    content: "続きを読む \00bb"; /*表示テキスト*/
    bottom: 13px;
    right: 15px; 
    font-size: 14px; /*文字のサイズ*/ 
    padding: 2px 10px; /*左側余白*/
    background: #f39800; /*変更OK→背景の色（内側）*/ 
    color: #fff; /*変更OK→文字の色*/ 
    border-width: 1px; /*線の太さ*/
    border-style: solid; /*線の種類*/
    border-color: #fff; /*線の色*/
    box-shadow: 0 0 0 3px #f39800; /*変更OK→背景の色（外周）*/
}

線の種類は実線のほかにも破線や点線などを指定できます。

線種を変更する場合は、border-style部分を書き換えてください。

実線: solid
破線: dashed
点線: dotted

先端三角

コードを見る

.internal-blogcard::before{
	position: absolute;
	content: "続きを読む"; /*変更OK→表示テキスト*/
	bottom: 6px; /*調整OK→カード下端からの位置*/
	right: 30px; /*調整OK→カード右端からの位置*/
	font-size: 14px;
	color: #fff; /*変更OK→文字色*/
	padding-right: 6px;
	padding-left: 10px;
	background-color: #00a3af; /*変更OK→背景色*/
	line-height: 28px;
}
.internal-blogcard::after{
	position: absolute;
	content: "";
	bottom: 6px; /*調整OK→カード下端からの位置*/
	right: 0; /*調整OK→カード右端からの位置*/
	width: 0;
	border: 14px solid transparent;
	border-left: 16px solid #00a3af; /*変更OK→三角部分*/
	line-height: 28px;
}

先端矢印

コードを見る

.internal-blogcard::before{
	position: absolute;
	z-index: 99;
	content: "続きを読む"; /*変更OK→表示テキスト*/
	bottom: 12px; /*調整OK→カード下端からの位置*/
	right: 25px; /*調整OK→カード右端からの位置*/
	font-size: 14px;
	color: #fff; /*変更OK→文字色*/
	padding-right: 8px;
	padding-left: 8px;
	background-color: #333; /*変更OK→背景色*/
	line-height: 21px;
}
.internal-blogcard::after{
	position: absolute;
	z-index: 1;
	content: "";
	bottom: 7px; /*調整OK→カード下端からの位置*/
	right: 13px; /*調整OK→カード右端からの位置*/
	width: 0;
	 border-top: 16px solid transparent;
	border-bottom: 16px solid transparent;
	border-left: 15px solid #333; /*変更OK→矢じりの色*/
}

Font Awesome アイコンを使う

chevron-circle-right（四角）

コードを見る

.internal-blogcard::before{
    position: absolute;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "続きを読む \f138"; /*変更OK→表示テキスト*/
    bottom: 10px; /*調整OK→カード下端からの位置*/
    right: 10px; /*調整OK→カード右端からの位置*/
    background-color: #333333; /*変更OK→背景色*/
    font-size: 13px;
    color: #ffffff; /*変更OK→文字色*/
    padding: 2px 10px;
}

使用しているアイコンは、Font Awesome アイコンフォントです。

角丸タイプ

chevron-circle-right（角丸）Arial Black

コードを見る

.internal-blogcard::before{
  position: absolute;
  content: "READ MORE \f138"; /*変更OK→表示テキスト*/
  font-family: "Font Awesome 5 Free", "Arial Black" ;
  font-weight: 900;
  bottom: 10px; /*調整OK→カード下端からの位置*/
  right: 10px; /*調整OK→カード右端からの位置*/
  background-color: #333; /*変更OK→背景色*/
  font-size: 13px;
  color: #fff; /*変更OK→文字色*/
  padding: 2px 10px;
  border-radius: 20px;
}

POP 1

可愛くしてみた

コードを見る

.internal-blogcard::before{
	position: absolute; 
	content: "記事はこちら"; /*表示テキスト*/
	bottom: 12px;
	right: 15px; 
	font-size: 13px; /*文字のサイズ*/ 
	padding: 0 20px; /*余白*/
	background: #8bc34a;
	border-radius: 20px;
	color: #fff;
	font-weight: 900;
	line-height: 26px;
}
.internal-blogcard::after{
	position: absolute; 
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f4d8"; /*表示アイコン*/
	color: #8bc34a;
	bottom: 36px;
	right: 24px;
	font-size: 22px; /*文字のサイズ*/
	line-height: 26px;
}

Line + Font Awesome（飛行機）

飛行機

コードを見る

.internal-blogcard::before{
	position: absolute; 
	content: "続きを読む __"; /*変更OK→表示テキスト*/
	color: #000;
	bottom: 10px; /*調整OK→カード下端からの位置*/
	right: 24px; /*調整OK→カード右端からの位置*/
	font-size: 14px; /*文字のサイズ*/
	padding: 0 40px 0 10px; /*内部余白*/
	border-bottom: 4px solid #333333;
}
.internal-blogcard::after{
	position: absolute; 
	content: "\f5b0"; /*飛行機*/
	bottom: 3px; /*調整OK→カード下端からの位置*/
	right: 12px;  /*調整OK→カード右端からの位置*/
	font-size: 32px; /*文字のサイズ*/ 
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	padding: 0 6px; /*内部余白*/
	line-height: 46px;
}

Line ＋ Font Aowsome（歩く人）

歩く人

コードを見る

.internal-blogcard::before{
	position: absolute; 
	content: "\f554"; /*歩く人*/
	bottom: 13px; /*調整OK→カード下端からの位置*/
	right: 105px;  /*調整OK→カード右端からの位置*/
	font-size: 34px; /*文字のサイズ*/ 
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	padding: 0 3px; /*内部余白*/
	line-height: 40px;
	background: #fff; /*背景色*/
}
.internal-blogcard::after {
	position: absolute; 
	content: "続きはこちら ≫"; /*変更OK→表示テキスト*/
	color: #000;
	bottom: 12px; /*調整OK→カード下端からの位置*/
	right: 10px; /*調整OK→カード右端からの位置*/
	font-size: 14px; /*文字のサイズ*/
	border-bottom: 1px solid #333333;
	padding-right: 5px;
	padding-left: 40px;
}

Line + Font Awesome（走る人）

走る人

コードを見る

.internal-blogcard::before{
	position: absolute; 
	z-index: 99;
	content: "\f70c"; /*走る人*/
	bottom: 13px; /*調整OK→カード下端からの位置*/
	right: 105px;  /*調整OK→カード右端からの位置*/
	font-size: 34px; /*文字のサイズ*/ 
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	padding: 0 3px; /*内部余白*/
	line-height: 40px;
	background: #fff; /*背景色*/
}
.internal-blogcard::after {
	position: absolute; 
	content: "続きはこちら ≫"; /*変更OK→表示テキスト*/
	color: #000;
	bottom: 12px; /*調整OK→カード下端からの位置*/
	right: 10px; /*調整OK→カード右端からの位置*/
	font-size: 14px; /*文字のサイズ*/
	padding: 0 6px 0 40px; /*内部余白*/
	border-bottom: 1px solid #333333;
}

サークルタイプ（Type A）

疑似要素の::beforeと::afterを使って前後のパーツに分けています。

背景色background-colorの指定を前後で変えれば、２色で表示することも可能です。

サークル Type A

コードを見る

.internal-blogcard::before{
  position: absolute;
  z-index: 99;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f061"; /*アイコン*/
  bottom: 10px; /*調整OK→カード下端からの位置*/
  right: 112px; /*調整OK→カード右端からの位置*/
  font-size: 16px;
  color: #fff; /*変更OK→アイコン色*/
  text-align: center;
  background-color: #1e50a2; /*変更OK→円の背景色*/
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #fff;
  line-height: 30px;
}
.internal-blogcard::after{
  position: absolute;
  z-index: 1;
  content: "READ MORE"; /*変更OK→表示テキスト*/
  bottom: 10px; /*調整OK→カード下端からの位置*/
  right: 15px; /*調整OK→カード右端からの位置*/
  background-color: #1e50a2; /*変更OK→文字の背景色*/
  font-size: 12px;
  color: #fff; /*変更OK→文字色*/
  border-radius: 20px;
  padding-right: 15px;
  padding-left: 30px;
  line-height: 30px;
}

サークルタイプ（Type B）

サークル Type B

コードを見る

.internal-blogcard::before{
	position: absolute;
	z-index: 99;
	content: "READ MORE"; /*変更OK→表示テキスト*/
	bottom: 10px; /*調整OK→カード下端からの位置*/
	right: 16px; /*調整OK→カード右端からの位置*/
	font-size: 14px;/*文字サイズ*/
	font-weight: 900;
	font-family: "Arial Black";  
	color: #1e50a2; /*変更OK→文字色*/
	border: 3px solid #1e50a2; /*変更OK→枠線の色*/
	border-radius: 20px;
	padding-right: 30px;
	padding-left: 10px;
	line-height: 26px;
}
.internal-blogcard::after{
	position: absolute;
	z-index: 1;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f105"; /*アイコン*/
	bottom: 10px; /*調整OK→カード下端からの位置*/
	right: 16px; /*調整OK→カード右端からの位置*/
	font-size: 16px;
	color: #fff; /*変更OK→アイコン色*/
	text-align: center;
	background-color: #1e50a2;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	line-height: 30px;
}