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

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

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

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

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

ショートコード

[Kanren postid="記事のID"]

補足

~~以下全てのコードでKanren部分の「K」を大文字にしていますが、本来は小文字です。~~

カスタマイズ後にデフォルトコードを載せると、実際に関連記事が表示されてしまいコードが表示できなかったので、「K」だけ大文字にしています。

ちとしさんより、アドバイスを頂き、ショートコードを記事中に文字列として表示させたい場合は、コードを[]で囲むと良いそうです。

今回の場合であれば[[card2 postid="記事のID"]]のように入力すればOKのようですね。

他の方にも参考になるよう、私の間違えはこのまま載せておきます。

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

ショートコード

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

ポイント

ID同士の間を「，」で区切る。

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

ショートコード

[Kanren2 postid="記事のID"]

ポイント

card2の後に「２」をつける。

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

ショートコード

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

ポイント

card2の後に「２」をつけ、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は使えません。

毎回記事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アップデート後に修正したところ