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

ここあです。

 

WordPressテーマSTORK(ストーク)

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

 

今回は、STORKユーザーが

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

カスタマイズ方法です。

 

正直なところ…

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

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

 

ですが…

 

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

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

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

 

自分にとっては…

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

と思うようなことでも

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

 

私はとあるセミナーで

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

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

 

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

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

 

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

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

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

 

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

 2019.02.01 テーマアップデートv1.2.3〜によるリンクカードの崩れに関する対処法と追記しました。

 

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

リンクカードと聞いて

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

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

 

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;
}

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

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

 

ちなみに余談ですが…

border: none;

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

 

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

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

 

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

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

CSSで変更できます。

リンクカード:タイトルカラー変更

CSSコードは…

CSSコード

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

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

 

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

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

 

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

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

リンクカード:日付の色変更

CSSコードは…

CSSコード

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

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

 

私のリンクカード設定

最後に、私がしていた

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

 

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

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

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

 

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

STORKリンクカード

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

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コードを探して調整してください。


.related_article .thum{
width: 30%;
margin-right:2%;
position: relative;
top: -30px;←ここの数値を変える
box-shadow: 0px 0px 2px #aaa;
}

 

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

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

 

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

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

 

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

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

 

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


.related_article a:before{
font-family:"FontAwesome";
content:"\f0a4 "'CHECK';
color:#fff;
font-size: 13px ;
background: #ffb36b ;
border-radius: 12px;
padding:4px 10px 3px 10px;
margin:0 0 1% 32%;←ここの数値を変える
font-weight:bold;
}

 

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

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

 

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

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

 

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

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

 

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

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

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

 

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

STORKのリンクカードはおしゃれにカスタマイズできる!

 

STORKのリンクカードを

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

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

 

何となくこれを見て

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

 

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

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

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

 

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

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

 

WordPressテーマ「THE THOR」
一流の開発陣によって集客と収益に徹底的にこだわり開発された究極のテーマ「ザ・トール」。どのテーマよりも早く実装された革新的機能が詰まったこのテーマで、あなたもインターネットを活用したビジネスを始めませんか?