【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の指定を前後で変えれば、2色で表示することも可能です。

サークル 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;
}
Cocoon

高速かつ高い安定性を誇る高性能レンタルサーバー【エックスサーバー】は、サイト運営に便利な機能が盛りだくさん。長年のサーバー運用実績を誇る安心・安全のレンタルサーバーです。

なんと!エックスサーバーと人気テーマCocoonが提携しました。

スポンサーリンク
スポンサーリンク
ぱそびば
タイトルとURLをコピーしました