【STORK】の関連記事（リンクカード）を超カスタマイズ

この記事では、当サイトで使用している「WordPressテーマ「ストーク」 」に標準装備されているショートコード「リンクカード」のカスタマイズ方法を書きました。

細かくカスタマイズ「枠線」「タイトル」「ラベル」「投稿日」「マウスを乗せた時のカラー」できるよう１つずつコードの解説をしています。

まず「WordPressテーマ「ストーク」 」はデフォルト機能でも以下の４パターンで表示できるようになっています。

関連記事「ラベルあり」１つの記事

ショートコード

[Kanren postid="記事のID"]

関連記事「ラベルあり」複数の記事

ショートコード

[Kanren postid="記事のID,記事のID"]

関連記事「ラベルなし」１つの記事

ショートコード

[Kanren2 postid="記事のID"]

関連記事「ラベルなし」複数の記事

ショートコード

[Kanren2 postid="記事のID,記事のID"]

ということで、ここからカスタマイズをしていきます。

カスタマイズは必ず子テーマを使いましょう。まだ導入していない方はこちらの記事を参考に。

2017.08.22Cyberduckの使い方WordPressの子テーマを分かりやすく解説

１.リンクカードの枠線をカスタマイズ

style.css
.related_article.cf a{
 border:solid 1px #000;/*枠線の種類、太さ、カラー*/
 border-radius:2px;/*枠線の角を丸める*/
 background-color:#fffff9;/*カード内背景カラー*/
 position:relative;/*枠線の相対位置*/	
}

補足

position:relative;は後ほど解説する「関連記事ラベル」の位置調整に使います。

枠線の種類はこちらを参考に。

2017.09.12border線の種類別HTML&CSSデザイン１４選

２.リンクカード内ラベルをカスタマイズ

リンクカード内の「ラベル表示あり」を使う場合は、デフォルトでは黒い背景に白字で「関連記事」と表示されています。

そこで「ラベル」と「タイトル」を切り分けます。

今回はこんな感じにしてみました。

style.css
/*　デフォルトのラベルを消す　*/
.related_article .ttl:before {
display:none;	
}
/*　新しいラベルを追加　*/
.related_article a:before {
position:absolute;
bottom:0;	
right:0;
content:'この記事を読む';
color:#fff;
font-size:90%;
background:#f46b6b;
font-weight:bold;
padding:3px;
}

アイコンはFontAwesomeを使用しているので、導入がまだの方はこちらへ

2018.03.05STORKでFont Awesome 5アップデート後に修正したところ

「この記事を読む」は好きな文字に変更して下さい。

３.リンクカード内のタイトル変更

タイトルを変更するとしたら、カラーやフォントサイズくらいですかね。

style.css
.entry-content .related_article p.ttl{
ここにcolorやfont-sizeのCSSを書く
}

４.リンクカード日付変更

style.css
 .entry-content .related_article .date {
ここにCSSを書く
}

例えば

font-weight:bold;を追加すれば太字にできます。

display:none;を追加すれば日付は非表示になります。

５.リンクカードにマウスオーバー時の変更

デフォルトでは、薄い黄色が指定されています。

カスタマイズ後

style.css
/*マウスオーバー背景カラー*/
.entry-content .related_article a:hover{
background:#eee;	
}
/*マウスオーバーテキストカラー*/
.entry-content .related_article p.ttl:hover{
color:#555;
}

６.ショートコードを登録しておこう

「関連記事コード」はよく使うと思うので、「AddQuicktag」というプラグインに登録しておくと便利です。

登録しておくと、下記のように投稿の編集エディター画面にドロップダウンで表示されるので、そこから選ぶだけでコードを使えます。

「AddQuicktag」のマニュアル書はこちら。

2017.11.27AddQuicktagの使い方と設定【隠れた機能も全て解説】

７-１・記事IDの確認方法

毎回記事IDの確認が面倒だという方は、投稿一覧画面に表示できるカスタマイズコードをこちらの記事に書いています。

2017.11.10WordPressのfunctions.phpで使える超カスタマイズまとめ

まとめ

今回のCSSコードをまとめると、以下のようになります。

style.css
/*　リンクカード枠線　*/
.entry-content .related_article.cf a{
 border:solid 1px #000;
 border-radius:2px;
 background-color:#fffff9;
 position:relative;
}

/*　デフォルトのラベルを消す　*/
.entry-content .related_article .ttl:before {
display:none;	
}
/*　新しいラベルを追加　*/
.related_article a:before {
position:absolute;
bottom:0;	
right:0;
content:'この記事を読む';
color:#fff;
font-size:90%;
background:#f46b6b;
font-weight:bold;
padding:3px;
}
/*　リンクカードタイトル変更　*/
.entry-content .related_article p.ttl{

}
/*　リンクカード日付変更　*/
.entry-content .related_article .date {

}

「STORK」のカスタマイズならこちらの記事もどうぞ。

2018.03.05STORKでFont Awesome 5アップデート後に修正したところ

2018.04.08【STORK】全ショートコードのカスタマイズ方法を解説

Amazonで見る

楽天市場で見る

Yahoo!で見る