この記事では、当サイトで使用している「WordPressテーマ「ストーク」 」に標準装備されているショートコード「リンクカード」のカスタマイズ方法を書きました。
細かくカスタマイズ「枠線」「タイトル」「ラベル」「投稿日」「マウスを乗せた時のカラー」できるよう1つずつコードの解説をしています。
まず「WordPressテーマ「ストーク」 」はデフォルト機能でも以下の4パターンで表示できるようになっています。
関連記事「ラベルあり」1つの記事
ショートコード
[Kanren postid="記事のID"]
以下全てのコードでKanren部分の「K」を大文字にしていますが、本来は小文字です。
カスタマイズ後にデフォルトコードを載せると、実際に関連記事が表示されてしまいコードが表示できなかったので、「K」だけ大文字にしています。
ちとしさんより、アドバイスを頂き、ショートコードを記事中に文字列として表示させたい場合は、コードを[]で囲むと良いそうです。
今回の場合であれば[[kanren postid="記事のID"]]
のように入力すればOKのようですね。
他の方にも参考になるよう、私の間違えはこのまま載せておきます。
関連記事「ラベルあり」複数の記事
ショートコード
[Kanren postid="記事のID,記事のID"]
ID同士の間を「,」で区切る。
関連記事「ラベルなし」1つの記事
ショートコード
[Kanren2 postid="記事のID"]
kanrenの後に「2」をつける。
関連記事「ラベルなし」複数の記事
ショートコード
[Kanren2 postid="記事のID,記事のID"]
kanrenの後に「2」をつけ、ID同士の間を「,」で区切る。
ということで、ここからカスタマイズをしていきます。
カスタマイズは必ず子テーマを使いましょう。まだ導入していない方はこちらの記事を参考に。

目次・読みたい所へタップできます
STORK-リンクカードの枠線をカスタマイズ
style.css.related_article.cf a{ border:solid 1px #000;/*枠線の種類、太さ、カラー*/ border-radius:2px;/*枠線の角を丸める*/ background-color:#fffff9;/*カード内背景カラー*/ position:relative;/*枠線の相対位置*/ }
STORK-リンクカード内ラベルをカスタマイズ
リンクカード内の「ラベル表示あり」を使う場合は、デフォルトでは黒い背景に白字で「関連記事」と表示されています。
- スマホで見たときに、ラベルが小さくなり「関連」と2文字分しか表示されない。
- ラベルとタイトルが繋がっているためバランスが悪い
そこで「ラベル」と「タイトル」を切り分けます。
今回はこんな感じにしてみました。
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を使用しているので、導入がまだの方はこちらへ
「この記事を読む」は好きな文字に変更して下さい。
STORK-リンクカード内のタイトル変更
タイトルを変更するとしたら、カラーやフォントサイズくらいですかね。
style.css.entry-content .related_article p.ttl{ ここにcolorやfont-sizeのCSSを書く }
STORK-リンクカード日付変更
style.css.entry-content .related_article .date { ここにCSSを書く }
例えば
font-weight:bold;
を追加すれば太字にできます。
display:none;
を追加すれば日付は非表示になります。
STORK-リンクカードにマウスオーバー時の変更
デフォルトでは、薄い黄色が指定されています。
カスタマイズ後
style.css/*マウスオーバー背景カラー*/ .entry-content .related_article a:hover{ background:#eee; } /*マウスオーバーテキストカラー*/ .entry-content .related_article p.ttl:hover{ color:#555; }
ショートコードを登録しておこう
「関連記事コード」はよく使うと思うので、「AddQuicktag」というプラグインに登録しておくと便利です。
登録しておくと、下記のように投稿の編集エディター画面にドロップダウンで表示されるので、そこから選ぶだけでコードを使えます。
「AddQuicktag」のマニュアル書はこちら。

記事IDの確認方法
「管理画面」→「投稿」→「投稿一覧」→「表示させたいタイトルにマウスを合わせる」
関連記事機能は、固定ページとランディングページのIDは使えません。
毎回記事IDの確認が面倒だという方は、投稿一覧画面に表示できるカスタマイズコードをこちらの記事に書いています。

STORK-リンクカードカスタマイズ【まとめ】
今回の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」のカスタマイズならこちらの記事もどうぞ。
こんにちは。
ストークカスタマイズ記事参考大変参考になります!
リンクカードのカスタマイズについて質問があるのですが、更新日のみを表示する場合はどうすればいいのでしょうか?お時間あるときに答えて頂けたら嬉しいです。
さんじー様
ストークでは更新日を表示する仕様になっていません。
ストーク公式の問い合わせフォームがあるので、そちらに要望を書くとアップデートで改善してくれる可能性はありますね。
よろしくお願いします。
ご返信ありがとうございます!!RECOMMEND記事にもタイトルしか反映されません。ストークを使用した他の人のブログには、記事の文頭が表示されるのですが…。何度も申し訳ございません。
アンパンマン様
STORKの標準仕様では、「RECOMMEND記事」の抜粋文は表示されないようになっています。
※なお「RECOMMEND記事」とは、記事の一番下に表示されている「関連記事」のことです。
なので、表示されているサイトは独自カスタマイズをしていることになりますね。
また、当記事で紹介しているリンクカードも「STORK」は抜粋文は表示しない仕様になっています。
どうしても表示させたい場合はこちらの記事が参考になるかもしれません
「https://nelog.jp/hatenablogcard」
よろしくお願いします。
カゲオ様
お忙しい中、ご返信ありがとうございます。
そうだったのですね!!
勉強不足でした!!
上記の記事を参考させて頂きます^_^
こんにちは。
ストークカスタマイズ記事参考にさせていただいています。
リンクカードのカスタマイズについて1点質問があるのですが、「リンクカード内ラベルをカスタマイズ」で紹介されているCSSを、【外観→カスタマイズ→追加CSS】に記載したところ、タイトル前の「関連記事」は消えたのですが、右下に「この記事を読む」が表示されません。
リンクカードについて、他のカスタマイズは一切行っていないのですが、もしこのような場合の解決策をご存知でしたら教えていただけないでしょうか。
よろしくお願いいたします。
えり様
こんにちは。
ストーク関連記事カードの件ですね。
キャッシュ削除されても表示されないということであれば、コードが間違っているかもしれないので、コピーしたコードを送っていただくか、えり様のサイトURLを送っていただければ確認致します。
※サイト確認する場合は、最短で木曜日以降となりますのでご了承ください。
いつも参考にさせて頂いております。
最新記事等、カード内に題名のみ表示されて記事内の文が表示されなくなって困っております。゚(゚´Д`゚)゚。
解決策はございますか!?初歩的なことで申し訳ありません!!
アンパン様
コメントありがとうございます。
1つ確認ですが、お使いのテーマは「STORK」で間違いないでしょうか?
「STORK」なら、冒頭文が抜粋されるはずなので、おかしいですね。
その場合、アンパン様のサイトを見てみないことには、お答えできかねますので、サイトURLを送ってくださいませ。
なお、現在出先でPCで確認できるのは、木曜日以降となりますので、ご了承ください。
ご返信ありがとうございます。
ストークを使っております。
初めて二ヶ月の初心者なのですが、分からないのにイジり過ぎたのかもしれません。゚(゚´Д`゚)゚。
アンパンマン様
お待たせしました。
サイトを拝見したところ「最新記事一覧」=ヘッダーメニューの「◯◯STORYをクリックした部分」はしっかり冒頭文が抜粋されているので問題ないですね。
気になっているのは、サイドバーにある「最新の投稿」でしょうか?
もしそうなら、こちらはもともと抜粋表示されないので問題ないですよ。
こんにちは。STORKのカスタマイズ記事参考になります。
ショートコードを紹介する時は[]で囲めばただの文字列として扱われて、機能が呼び出されることはないですよ。
今回の関連記事のショートコードなら
[[kanren2 postid=”,”]]
と入力すればOKです。僕も以前ショートコードを紹介しようと思ったらその機能が呼び出されて困ったものです(笑)
ご参考まで。
ちとしさん
こんにちは。
カゲオです。
アドバイスありがとうございます。
早速記事を修正いたしました。
他の方にも参考になるよう、私の間違いを載せたまま修正させて頂きました。
また何かありましたら、よろしくお願いします。