WordPressカスタマイズまとめ←クリック

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

ストーク関連記事カスタマイズ

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

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

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

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

ストーク関連記事サンプル

ショートコード

[Kanren postid="記事のID"]
補足

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

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

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

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

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

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

ストーク関連記事複数サンプル

ショートコード

[Kanren postid="記事のID,記事のID"]
ポイント

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

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

ストーク関連記事ラベルなしサンプル

ショートコード

[Kanren2 postid="記事のID"]
ポイント

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

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

ストーク関連記事ラベルなし複数サンプル

ショートコード

[Kanren2 postid="記事のID,記事のID"]
ポイント

card2の後に「2」をつけ、ID同士の間を「,」で区切る。

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

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

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

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

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

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

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

border線デザイン border線の種類別HTML&CSSデザイン14選

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

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

ラベル表記ありの問題点
  • スマホで見たときに、ラベルが小さくなり「関連」と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を使用しているので、導入がまだの方はこちらへ

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

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

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

ストーク関連記事タイトルカスタマイズ

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

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

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

ストーク関連記事日付カスタマイズ
style.css
 .entry-content .related_article .date {
ここにCSSを書く
}

例えば

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

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

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

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

ストーク関連記事マウスオーバー

カスタマイズ後

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

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

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

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

WordPress・エディター

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

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

7-1・記事IDの確認方法

WordPress 記事のID

「管理画面」→「投稿」→「投稿一覧」→「表示させたいタイトルにマウスを合わせる」

注意

関連記事機能は、固定ページとランディングページのIDは使えません。

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

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

WordPress投稿ID確認

まとめ

今回の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」のカスタマイズならこちらの記事もどうぞ。

ネットで「女性」に売る 数字を上げる文章とデザインの基本原則
この記事のURLとタイトルをコピー
お使いの端末ではこの機能に対応していません。
下のテキストボックスからコピーしてください。
★Amazonは現金チャージがお得★
Amazonギフトチャージ

チャージ額に応じてポイントが貯まります。

プライム会員」なら最大2.5%ポイント還元!!貯まったポイントは次回のお買い物から使えます。さらに、今なら初回購入1000ポイントキャンペーン中!!

※キャンペーン条件がやや複雑なので不安な方は下記の手順を確認してください

STEP1

キャンペーンページへ

Amazonギフトポイント付与キャンペーン

STEP2

エントリー完了後、「Amazonギフト券チャージタイプ」をクリック

Amazonギフトポイント付与キャンペーンエントリー

STEP3

キャンペーン条件の5000円以上を選択または自由金額を5000円以上に入力次へをクリック

Amazonギフトチャージタイプ購入

STEP4

Amazonギフトチャージタイプ支払い方法選択PC

「コンビニ・ATM・ネットバンキング払い・電子マネー払い」を選択次に進むをクリック


STEP5

注意×10

特に何もせず注文を確定するをクリック

Amazonギフトチャージタイプ購入PC

以下キャンペーン条件から外れてしまうトラップについて。

  • 支払い方法の「電子マネー」はNG
  • Amazonギフト券・Amazonショッピングカード・クーポンも使用できるようになっていますがNG
  • 2000円以上で200ポイントも初回特典ですが、チャージは対象外なのでこちらを選択すると本来1000ポイントもらえるのに200ポイントになってしまうのでNG

私はAmazonヘビーユーザーですが、このキャンペーンに関してはユーザーを欺くようなUX(導線)でよろしくないなと思いました。


STEP6

Amazonギフトチャージタイプ購入確認メール

Amazonに登録してるメールアドレスに「お支払い番号のお知らせ」メールが届きます。お支払い方法別の手順」のリンクをクリックしてください。


STEP7

Amazonギフトチャージタイプ支払い確定PC

もう一度言っておきますが、ここで「電子マネーでの支払い」を選択しないように注意してください。

それ以外の支払い方法をクリックすると詳細が載っているので、期限である6日以内に支払いを済ませて完了です。

以上がキャンペーンの手順です。注意点に気をつけながらぜひこの機会に1000ポイントGETしてください。

プライム会員」なら最大2.5%ポイント還元!!

※チャージした金額の有効期限は安心の10年間

2 Comments

ちとし

こんにちは。STORKのカスタマイズ記事参考になります。
ショートコードを紹介する時は[]で囲めばただの文字列として扱われて、機能が呼び出されることはないですよ。
今回の関連記事のショートコードなら

[[kanren2 postid=”,”]]

と入力すればOKです。僕も以前ショートコードを紹介しようと思ったらその機能が呼び出されて困ったものです(笑)
ご参考まで。

返信する
カゲオ

ちとしさん
こんにちは。
カゲオです。
アドバイスありがとうございます。
早速記事を修正いたしました。
他の方にも参考になるよう、私の間違いを載せたまま修正させて頂きました。
また何かありましたら、よろしくお願いします。

返信する

ご質問・ご感想・受付中

「メールアドレス入力欄」を削除した為「返信通知」は届きません。
確実に返信が必要な場合は「お問い合わせ」または「TwitterのDM」よりご連絡ください。

他の方にも有益になると判断した質問やコメントは記事に引用させて頂く場合がありますのであらかじめご了承下さい。