話題の節約術「ポイ活」って知ってる?

【JIN】ブログカードに「続きを読む」を追加するカスタマイズ

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

SANGOのブログカードに「続きを読む」を追加するカスタマイズを公開したところ好評だったので、JIN用のカスタマイズも用意しました。

 

▽こうなります。
JINブログカード

 

▽こちらもおすすめ。

JINの目次の余白を調整【JIN】目次の余白を調整するカスタマイズ

事前準備

このカスタマイズはスタイルシートを編集します。

親テーマを使っているとアップデートなどに対応出来ないので、子テーマのインストールを推奨します。

子テーマのダウンロードは公式サイトからどうぞ。

親テーマがインストールされている状態で、小テーマをインストール・有効化するだけで使えるようになります。

カスタマイズ方法:style.cssの編集

子テーマを有効化したら、ダッシュボード>外観>テーマの編集にアクセスします。

JINのstyle.css

最初から記入されている文字の下に、下記コードをコピー&ペーストします。

MEMO
外観>カスタマイズ>追加CSSでも可。

コードをコピー&ペースト

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

/*「あわせて読みたい」を消す*/
.blog-card-hl-box{
	display:none;
}

コピペしたら、「ファイルを更新」をクリックして完了です。

MEMO
「あわせて読みたい」を残しておきたい場合は、コードの/*「あわせて読みたい」を消す*/から下を消して下さい。

動作確認

ブログカードを挿入している記事を開いて、デザインが変わっているか確認してみましょう。

Win:「Ctrl」+「F5」で更新

Mac:「command(⌘)」+「shift(⇧)」+「R」で更新

デザインが反映されていれば完了です。

 

注意
キャッシュ系のプラグインを利用している場合は、キャッシュを削除しておきましょう。

 

りら

この記事が少しでもお役に立てたら嬉しいです

コメントを残す

メールアドレスが公開されることはありません。