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

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

 

ここあです。

 

WordPressテーマSTORK(ストーク)

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

 

今回は、STORKユーザーが

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

カスタマイズ方法です。

 

正直なところ…

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

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

 

ですが…

 

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

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

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

 

自分にとっては…

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

と思うようなことでも

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

 

私はとあるセミナーで

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

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

 

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

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

 

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

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

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

 

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

 

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

リンクカードと聞いて

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

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

 

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

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

リンクカード:デフォルト

 

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

ということなんですね。

 

こんなシンプルな

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

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

 

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

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

 

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

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

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

 

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

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

 

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

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

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

 

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

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

 

ということで…

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

 

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

リンクカード:ノーマル

 

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

リンクカード:ラベル文字変更

 

CSSコードはこちら…

/* リンクカード:ラベル文字変更 */
.related_article .ttl:before{
content:'おすすめ!';/* 文字変更 */
width:auto;
padding:0 10px;
}

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

 

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

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

 

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

こんな感じに…

リンクカード:ラベル色変更

 

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

/* リンクカード:ラベル色変更 */
.related_article .ttl:before{
background: #f05689;/* 色変更 */
}

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

 

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

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

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

 

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

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

 

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

/* リンクカード:ラベルの角を丸く */
.related_article .ttl:before{
content:'おすすめ!';/* 文字変更 */
width:auto;
padding:0 10px;
background: #f05689;/* 色変更 */
border-radius:15px;/* 角を丸く */
}

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

 

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

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

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

リンクカード:ラベルにアイコン使用

 

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コードを追加しましょう。

/*リンクカード内画像サイズ調整*/
.related_article .thum{
width: 28%;/*画像サイズ*/
margin-right:2%;/*画像と文字の隙間*/
}

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

 

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

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

 

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

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

リンクカード:背景色変更

 

CSSコードはこちら…

/* リンクカードの背景色変更 */
.related_article a{
background: #fcedfa;/* 背景色変更 */
}

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

 

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

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

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

 

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

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

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

 

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

リンクカード:デフォルト背景色

 

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

リンクカード:ホバー時色変更

 

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

/* リンクカード:ホバー時の色変更 */
.related_article a:hover{
background: #f9caf4;/* 背景色変更 */
}

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

 

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

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

リンクカード:背景色変更

 

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

リンクカード:ホバー時色変更

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

 

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

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

 

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

リンクカード:枠線を破線に

CSSコードはこちら…

/* リンクカードの枠線を破線に変更 */
.related_article a{
border: 2px dashed #666666;/* 線種・太さ・色 */
}

 

 

点線にしたり…

リンクカード:枠線を点線に

CSSコードはこちら…

/* リンクカードの枠線を点線に変更 */
.related_article a{
border: 4px dotted #666666;/* 線種・太さ・色 */
}

 

 

二重線にもできます。

リンクカード:枠線を二重線に

CSSコードはこちら…

/* リンクカードの枠線を二重線に変更 */
.related_article a{
border: 4px double #666666;/* 線種・太さ・色 */
}

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

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

 

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

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

CSSで変更できます。

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

CSSコードは…

/* リンクカード:タイトルカラー変更 */
.related_article .ttl{
color:#4285f4;/* タイトルカラー変更 */
}

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

 

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

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

 

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

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

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

CSSコードは…

/* リンクカード:日付のカラー変更 */
.related_article .date{
color:#4285f4;/* 日付の色変更 */
}

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

 

私のリンクカード設定

最後に、私が今している

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

 

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

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

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

 

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

 

【STORK】カスタマイズ!コピペだけでオシャレにする方法まとめ

2018.04.25

 

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

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% 32%;
font-weight:bold;/* 文字の太さ */
}

/*リンクカードの枠線変更*/
.related_article a{
border: 2px dashed #666666;/* 線種・太さ・色 */
}

/*リンクカード内画像*/
.related_article .thum{
width: 30%;/*画像サイズ*/
margin-right:2%;/*画像と文字の隙間*/
position: relative;
top: -30px;
}

/*タイトルカラー変更*/
.related_article .ttl{
color:#0a69dd;/*タイトルカラー*/
font-size: 16px !important;/* 文字サイズ */
}

/*日付のカラー変更*/
.related_article .date{
color:#666666;/*日付の色*/
}

/*リンクカードのスペース調整*/
.related_article a{
padding-bottom: 8px;
}

タイトル文字の大きさは

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

 

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

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

 

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

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

 

STORKのリンクカードを

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

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

 

何となくこれを見て

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

 

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

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

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

 

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

 

もしも設定でよく分からないことがあれば

いつでも気軽にご相談くださいね!

「ここあ」に問い合わせをする

 

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

 

合わせて読みたい!

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

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。