」に標準装備されているショートコード「リンクカード」のカスタマイズ方法を書きました。細かくカスタマイズ「枠線」「タイトル」「ラベル」「投稿日」「マウスを乗せた時のカラー」できるよう1つずつコードの解説をしています。」はデフォルト機能でも以下の4パターンで表示できるようになっています。以下全てのコードでKanren部分の「K」を大文字にしていますが、本来は小文字です。カスタマイズ後にデフォルトコードを載せると、実際に関連記事が表示されてしまいコードが表示できなかったので、「K」だけ大文字にしています。しさんより、アドバイスを頂き、ショートコードを記事中に文字列として表示させたい場合は、コードを[]で囲むと良いそうです。postid="記事のID"]]のように入力すればOKのようですね。他の方にも参考になるよう、私の間違えはこのまま載せておきます。postid="記事のID,記事のID"]ポイントID同士の間を「,」で区切る。postid="記事のID"]ポイントkanrenの後に「2」をつける。postid="記事のID,記事のID"]ポイントkanrenの後に「2」をつけ、ID同士の間を「,」で区切る。いうことで、ここからカスタマイズをしていきます。カスタマイズは必ず子テーマを使いましょう。導入していない方はこちらの記事を参考に。position:relative;/*枠線の相対位置*/}補足position:relative;は後ほど解説する「関連記事ラベル」の位置調整に使います。枠線の種類はこちらを参考に。border線の種類別ーHTML&CSSデザイン14選STORK-リンクカード内ラベルをカスタマイズリンクカード内の「ラベル表示あり」を使う場合は、デフォルトでは黒い背景に白字で「関連記事」と表示されています。ラベル表記ありの問題点スマホで見たときに、ラベルが小さくなり「関連」と2文字分しか表示されない。ラベルとタイトルが繋がっているためバランスが悪いそこで「ラベル」と「タイトル」を切り分けます。今回はこんな感じにしてみました。5アップデート後に修正したところ「この記事を読む」は好きな文字に変更して下さい。STORK-リンクカード内のタイトル変更タイトルを変更するとしたら、カラーやフォントサイズくらいですかね。{ここにCSSを書く}例えばfont-weight:bold;を追加すれば太字にできます。display:none;を追加すれば日付は非表示になります。STORK-リンクカードにマウスオーバー時の変更デフォルトでは、薄い黄色が指定されています。p.ttl:hover{color:#555;}ショートコードを登録しておこう「関連記事コード」はよく使うと思うので、「AddQuicktag」というプラグインに登録しておくと便利です。登録しておくと、下記のように投稿の編集エディター画面にドロップダウンで表示されるので、そこから選ぶだけでコードを使えます。「AddQuicktag」のマニュアル書はこちら。固定ページとランディングページのIDは使えません。毎回記事IDの確認が面倒だという方は、投稿一覧画面に表示できるカスタマイズコードをこちらの記事に書いています。今回のCSSコードをまとめると、以下のようになります。{}「STORK」のカスタマイズならこちらの記事もどうぞ。【この記事を書いた人】の解像度をプラグインで上げようこの記事を書いた人カゲオ陰ながら最高の人生を模索するブログ「カゲサイ」の管理人です。自分が好きなものやブログのことを色々書いています。2017年10月6日こんにちは。STORKのカスタマイズ記事参考になります。ショートコードを紹介する時は[]で囲めばただの文字列として扱われて、機能が呼び出されることはないですよ。postid=”,”]]と入力すればOKです。僕も以前ショートコードを紹介しようと思ったらその機能が呼び出されて困ったものです(笑)ご参考まで。2017年10月6日ちとしさんこんにちは。アドバイスありがとうございます。記事を修正いたしました。他の方にも参考になるよう、私の間違いを載せたまま修正させて頂きました。何かありましたら、よろしくお願いします。2019年8月5日こんにちは。ストークカスタマイズ記事参考にさせていただいています。リンクカードのカスタマイズについて1点質問があるのですが、「リンクカード内ラベルをカスタマイズ」で紹介されているCSSを、【外観→カスタマイズ→追加CSS】に記載したところ、タイトル前の「関連記事」は消えたのですが、右下に「この記事を読む」が表示されません。リンクカードについて、他のカスタマイズは一切行っていないのですが、もしこのような場合の解決策をご存知でしたら教えていただけないでしょうか。2019年8月6日えり様こんにちは。ストーク関連記事カードの件ですね。キャッシュ削除されても表示されないということであれば、コードが間違っているかもしれないので、コピーしたコードを送っていただくか、えり様のサイトURLを送っていただければ確認致します。※サイト確認する場合は、最短で木曜日以降となりますのでご了承ください。2019年8月13日いつも参考にさせて頂いております。最新記事等、カード内に題名のみ表示されて記事内の文が表示されなくなって困っております。2019年8月13日アンパン様コメントありがとうございます。1つ確認ですが、お使いのテーマは「STORK」で間違いないでしょうか?「STORK」なら、冒頭文が抜粋されるはずなので、おかしいですね。その場合、アンパン様のサイトを見てみないことには、お答えできかねますので、サイトURLを送ってくださいませ。現在出先でPCで確認できるのは、木曜日以降となりますので、ご了承ください。2019年8月14日ご返信ありがとうございます。ストークを使っております。二ヶ月の初心者なのですが、分からないのにイジり過ぎたのかもしれません。2019年8月15日アンパンマン様お待たせしました。サイトを拝見したところ「最新記事一覧」=ヘッダーメニューの「◯◯STORYをクリックした部分」はしっかり冒頭文が抜粋されているので問題ないですね。気になっているのは、サイドバーにある「最新の投稿」でしょうか?もしそうなら、こちらはもともと抜粋表示されないので問題ないですよ。2019年8月16日ご返信ありがとうございます!!RECOMMEND記事にもタイトルしか反映されません。ストークを使用した他の人のブログには、記事の文頭が表示されるのですが...。何度も申し訳ございません。2019年8月16日アンパンマン様STORKの標準仕様では、「RECOMMEND記事」の抜粋文は表示されないようになっています。※なお「RECOMMEND記事」とは、記事の一番下に表示されている「関連記事」のことです。表示されているサイトは独自カスタマイズをしていることになりますね。当記事で紹介しているリンクカードも「STORK」は抜粋文は表示しない仕様になっています。しても表示させたい場合はこちらの記事が参考になるかもしれません「https://nelog.jp/hatenablogcard」よろしくお願いします。2019年8月16日カゲオ様お忙しい中、ご返信ありがとうございます。2020年1月12日こんにちは。ストークカスタマイズ記事参考大変参考になります!リンクカードのカスタマイズについて質問があるのですが、更新日のみを表示する場合はどうすればいいのでしょうか?お時間あるときに答えて頂けたら嬉しいです。2020年1月15日さんじー様ストークでは更新日を表示する仕様になっていません。ストーク公式の問い合わせフォームがあるので、そちらに要望を書くとアップデートで改善してくれる可能性はありますね。コメントをキャンセルメールアドレスが公開されることはありません。7陰ながら最高の人生を模索するブログ「自分が好きなものを紹介したりブログのことを色々書いてます。