【コピペだけ！】STORK（ストーク）のリンクカードをおしゃれにカスタマイズ！

ここあです。

WordPressテーマSTORK（ストーク）の

カスタマイズ方法をいろいろと書いています。

今回は、STORKユーザーが

あまり使ってなさそうなリンクカードの

カスタマイズ方法です。

正直なところ…

• 「こんなとこカスタマイズする意味ある？」
• 「どうでもいいわ！」

と思う方もいるかもしれません…

ですが…

世の中にはSTORKユーザーがたくさんいますし

これからSTORKを購入し、いろいろと

「カスタマイズしたい」と思う人もいるかもしれません。

自分にとっては…

• 「どうでもいい！」
• 「当たり前！」

と思うようなことでも

その情報を欲しがっている人は必ずいるはずです。

私はとあるセミナーで

自分が当たり前に思っていることが

実は当たり前じゃないということを学びました。

もちろん、私も情報発信に当たり前はないと思っています。

ただ、独りよがりはダメですけどね…＾＾：

なので、今回はちょっとマニアックな

リンクカードのカスタマイズ方法ですが

はりきって紹介したいと思います。

誰かのお役に立てることを信じて…（笑）

そもそもリンクカードって何？

リンクカードと聞いて

ピンとこない人もいるかもしれないので

簡単に説明しておきますね。

STORKに実装されているショートコードを使えば

↓ こんなリンクカードを簡単に表示させることができます。

今回はこれをカスタマイズしてしまおう！

ということなんですね。

こんなシンプルな

「リンクカードのどこをカズタマイズするの？」と

ツッコミが来そうですが…

できることはたくさんあります＾＾

それでは順番に説明していきます。

リンクカードをカスタマイズする方法

STORKのシンプルなリンクカードですが…

シンプルだからこそカスタマイズがいろいろできます。

リンクカードの文字を変えてみよう！

STORKのラベル付きリンクカードは1種類です。

そもそも関連記事を表すための

リンクカードなのでラベルは1種類でも

確かに問題はありません。

しかし、せっかくのリンクカードを

いろいろと活用しないともったいない。

ということで…

まずはラベル名を変更してみましょう。

デフォルトでは関連記事となっています。

これを「おすすめ！」に変更してみます。

CSSコードはこちら…

CSSコード

.related_article .ttl:before{
content:'おすすめ！';
width:auto;
padding:0 10px;
}

※上記コードの「おすすめ！」の部分を自由に打ち変えてください。
※テキストの長さに応じて背景も伸びます。

ラベルの色を変えてみよう！

リンクカードのラベル色は黒1色ですよね。

このラベルの色を「変えたい！」という人もいるはずです。

こんな感じに…

そんな時はCSSコードを追加して変更しましょう。

CSSコード


.related_article .ttl:before{
background: #f05689;
}

※#f05689のカラーコードを変えることでお好みの色にカスタマイズできます。

ラベルの角を丸くしよう！

リンクカードのラベルの角を丸くして

少し可愛くすることもできます。

色を変えるとさらに可愛くなりますね。

CSSコードはこんな感じです。

CSSコード


.related_article .ttl:before{
content:'おすすめ！';
width:auto;
padding:0 10px;
background: #f05689;
border-radius:15px;
}

※border-radius:15px;の数字で丸みを調整できます。

ラベルにWebアイコンフォント導入しよう！

リンクカードのラベルの文字を変更して、さらに

Webアイコンフォントを組み合わすこともできます。

CSSコードは…

CSSコード


.related_article .ttl:before{
font-family:"FontAwesome";
content:"\f0a4 "'おすすめ';
font-size:13px;
width:auto;
padding:0 10px;
background: #f05689;
border-radius:8px;
}

※content:"\f0a4 "のコードを変えるとアイコンを変更できます。

WebアイコンフォントFont Awesomeについては

こちらの記事に詳しく記載しています。

Font Awesome（Webアイコンフォント）の使い方をやさしく解説！

画像サイズを変えてみよう！

リンクカードの画像サイズは控えめなので

もう少し大きくしたいという人もきっといるはず…。

CSSで指定すれば、画像サイズを大きくすることもできます。

↓ デフォルトのサイズ

↓ カスタマイズした画像サイズ

画像サイズを変更したい場合は

以下のCSSコードを追加しましょう。

CSSコード

.related_article .thum{
width: 28%;
margin-right:2%;
}

※width: 28%;の数字を変えると画像サイズを変更できます。

リンクカードの背景色を変えてみよう！

リンクカードの背景色も変更してみましょう。

リンクカードを少しだけ目立たせたい

という時には効果的です。

CSSコードはこちら…

CSSコード


.related_article a{
background: #fcedfa;
}

※#fcedfaのカラーコードを変えることでお好みの色にカスタマイズできます。

マウスホバー時の背景色を変えてみよう！

リンクカードの背景色を変えた時は

マウスホバー時の色も合わせて変更しましょう。

リンクカードの背景色がピンク色で

マウスホバー時に緑とかに変わったら気持ち悪いですよね＾＾；

※それはそれでインパクトはあるかもしれませんが…（笑）

デフォルトのリンクカードのマウスホバー時は黄色です。

これをピンク色に変更してみます。

マウスホバー時の背景色を変更するには…

CSSコード


.related_article a:hover{
background: #f9caf4;
}

※#f9caf4のカラーコードを変えることでお好みの色にカスタマイズできます。

ちょっと極端に色を変更してみましたが…

通常のリンクカードを薄いピンクに

マウスホバー時は濃いピンクにすると…

統一感を持たせることができます。

リンクカードの枠線を変えてみよう！

リンクカードは背景色だけでなく枠線も変更できます。

例えば、枠線を破線にしたり…

CSSコードはこちら…

CSSコード


.related_article a{
border: 2px dashed #666666;
}

点線にしたり…

CSSコードはこちら…

CSSコード


.related_article a{
border: 4px dotted #666666;
}

二重線にもできます。

CSSコードはこちら…

CSSコード


.related_article a{
border: 4px double #666666;
}

カラーコードを変更すれば

枠線の色も変えることができます。

ちなみに余談ですが…

とすれば、リンクカードの枠線は消すことができます。

もちろん、背景色と同色にしても枠線は消せますけどね＾＾

※消せるというか、背景に溶け込んで見えなくなります。

タイトルカラーを変えてみよう！

リンクカードのタイトル文字の色も

CSSで変更できます。

CSSコードは…

CSSコード

.related_article .ttl{
color:#4285f4;
}

※#4285f4のカラーコードを変えると色を変更できます。

日付の色を変えてみよう！

日付の色も変更できます。

投稿日をあまり目立たせたくない場合は

色を変更してみてもいいかもしれませんね。

CSSコードは…

CSSコード

.related_article .date{
color:#4285f4;
}

※#4285f4のカラーコードを変えると色を変更できます。

私のリンクカード設定

最後に、私がしていた

リンクカードの設定もご紹介しておきますね。

おそらく、気にならない人は全然気にならないと思いますが

わたしはラベル付きリンクカードの

ラベルとタイトルの位置関係が中途半端だと思いました。

なので、そこもカスタマイズしています。

あとはこれまで説明してきた

CSSコードを組み合わせて作っただけです。

念のためCSSコードも記載しておきます。

CSSコード

.related_article .ttl:before{
display:none;
}
.related_article a:before{
font-family:"FontAwesome";
content:"\f0a4 "'CHECK';
color:#fff;
font-size: 13px ;
background: #f05689 ;
border-radius: 12px;
padding:4px 10px 3px 10px;
margin:0 0 1% 0;
font-weight:bold;
}
.related_article a{
border: 2px dashed #666666;
}
.related_article .thum{
width: 30%;
margin-right:2%;
position: relative;
top: 0;
}
.related_article .ttl{
color:#0a69dd;
font-size: 16px !important;
}
.related_article .date{
color:#666666;
}
.related_article a{
padding-bottom: 8px;
}

タイトル文字の大きさは

トップページとのバランスも考え少し小さめ。

ちなみに上記コードはラベルあり、ラベルなしの

どちらのショートコードを指定しても結果は同じになります。

リンクカードが崩れたときの対処法

2019年2月1日にSTORKのテーマアップデートがあり

それに伴ってリンクカードのレイアウトが崩れる

という事態に見舞われました＾＾；

なので、おそらく私の記事を見て

リンクカードをカスタマイズされた方は

同じような症状が出ていると思いますので

参考にしてみてください。

ちなみに…、私の症状は2つでした。

• 1つはリンクカードの画像の天地がズレた
• もう1つはオレンジのラベルの左右がズレた

というものです。

↓こんな感じですね。なかなかのズレっぷり…＾＾；

ということで、コレを調整します。

画像の天地を修正する方法

リンクカードの天地のズレを直す場合は…

以下のCSSコードを探して調整してください。

上記、CSSコードのtop: -30px;。

ここの数字を変えることで、画像の天地が調整できます。

ちなみに私は0でちょうど良くなったので

top: -30px;の一行は丸ごと削除しました＾＾

ラベルの左右を修正する方法

ラベルの左右のズレを直す場合は…

以下のCSSコードを探して調整してください。

上記、CSSコードのmargin:0 0 1% 32%;。

ここの数字を変えれば調整できます。

おそらく、32％を0にすれば

ちょうど良い位置にラベルがくるのでコードは

↓このようにしてみてください。

margin:0 0 1% 0;←32を0にする

私の記事を見て同じCSSコードを追加している場合は

以上2カ所の修正でリンクカードは元通りになりますので

万が一崩れたという場合は、トライしてみてください＾＾

リンクカードがCSSのコピペだけでおしゃれにカスタマイズできる！

STORKのリンクカードを

カスタマイズする方法をお伝えしてきましたが

いかがでしたでしょうか？

何となくこれを見て

「やってみよう！」って思ってもらえると嬉しいです。

無理にカスタマイズする必要はありませんが

STORKは利用ユーザーも多いので

ちょっとしたところで差別化をして

あなたらしさを演出してみてはいかがでしょうか？＾＾

最後までお読みいただきありがとうございました！