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

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

ここあです。

 

WordPressテーマ「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

/* リンクカードの枠線を破線に変更 */
.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コードは…

CSS

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

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

 

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

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

 

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

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

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

 

CSSコードは…

CSS

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

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

 

私のリンクカード設定

最後に、私が今している

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

 

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

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

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

 

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

 

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

2018.04.25

 

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

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% 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(ストーク)のリンクカードをおしゃれにカスタマイズ!

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


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

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


ABOUTこの記事をかいた人

ここあ

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