WPテーマ「STORK」カスタマイズ!おしゃれなリンクボックスとアテンション!

WPテーマ「STORK」カスタマイズ!おしゃれなリンクボックスとアテンション!

ここあです。

 

ストークにはリンクカードを作れる

ショートコードもあり、非常に便利です。

 

しかし、記事中にリンクカードを配置すると

ちょっと目立ち過ぎるなぁ…と思うことがありますよね。

 

↓ こんな感じに…

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

 

ただ、リンクカードが目立ちすぎるからと言って

テキストリンクだけにしてしまうと…

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

 

それはそれで物足りない^^;

 

で、結局どうすれば一番いいのかわからない

という時におすすめなのが…

リンク用ボックスアテンション

 

例えば私の場合、記事の最後には…

合わせて読みたい!

このようなリンクボックスや

 

文中のテキストリンクには…

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

点滅するアイコンを付けていたりします。

 

こうすることでさりげなくアテンションをつけて

訪問者をリンク先の記事に誘導することができます。

 

今回は、そんな

  • 「リンク用ボックス」
  • 「アテンション」

2つのCSSコードをご紹介したいと思います。

 

もちろん、この記事を読んでいるあなたは

今から紹介するHTMLCSS

2つのコードをコピーするだけ。

 

なので、簡単にしかもすぐに反映できます。

ぜひやってみてください^^

 

テンプレートを使う前に…

今回ご紹介するコードはWebアイコンフォントのサービスである

Font Awesomeを使用しています。

 

またアイコンフォントに

アニメーションを付けるためのコードも必要なので

こちらの記事を参考に…

 

Font Awesome(Webアイコンフォント)の使い方をやさしく解説!

 

子テーマテーマヘッダー

以下「2つのコード」を追加してから進めるようにしてください。

 

1つは「Font Awesome 5」のコード

もう1つは「アニメーション」のためのコードです。

テーマヘッダーに貼り付ける

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />

 

テンプレートの使い方

今回はHTMLCSSコードの2種類を用意しています。

すでに「使い方が分かってる」という場合は読み飛ばしてください。

 

STEP.1:CSSにコードをコピペ

CSSコードの追記先は…

ダッシュボードメニューから「外観」→「カスタマイズ

ダッシュボードメニュー

 

追加CSS」に記述してください。

dropshadow

 

STEP.2:挿入したい場所にHTMLコードを貼り付ける

記事内に「リンク用ボックス」や

リンクテキストのアテンション」を挿入したい時は…

 

記事の編集モードを「ビジュアルエディタ」から

テキストエディタ」に切り替えて貼り付けます。

 

ビジュアルエディタ」モードで貼り付けると

うまく表示されませんので注意してくださいね。

 

リンク用ボックスデザイン4選

まずはリンク用ボックスのご紹介から。

 

ラベルのついたデザイン

ここにタイトル

私が普段使っているリンク用ボックスです。

 

CSSコード

.entry-content .margin-clear{
margin:0px;
}

.box01{
display: block;
height:auto;
text-decoration: none;
border:solid 3px #f05684;/*線種・太さ・色*/
background-color: #fffef7;/*背景色*/
border-radius: 0px 4px 4px 4px;
padding: 15px 20px;
margin: 0px auto 20px;
font-size: 18px;/*文字の大きさ*/
}

.entry-content .box-title{
display: inline-block;
padding: 1px 10px 0px 10px;
margin-bottom: 0px;
font-size: 14px;/*文字の大きさ*/
font-weight: bold;/*文字の太さ*/
background-color: #f05684;/*背景色*/
color: #fff;/*文字の色*/
border-radius: 4px 4px 0px 0px;
}

.recommend:before{
content:"\f0a9";/*アイコンの種類*/
padding-right:10px;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
animation: flash 5s ease infinite;/*点滅速度*/
-webkit-animation: flash 5s ease infinite;/*点滅速度*/
}

HTMLコード

<p class="box-title"><br />
ここにタイトル</p>
<p class="box01">
<a class="recommend" href="リンク先URL1">タイトル1</a><br />

<a class="recommend" href="リンク先URL2">タイトル2</a><br />
<a class="recommend" href="リンク先URL3">タイトル3</a></p>

リンクボックスのタイトルは打ち変えて使ってくださいね。

 

ボックス内にラベルのついたデザイン

ここにタイトル タイトル1
タイトル2
タイトル3

ボックス内にラベルが収まっているデザインです。

 

CSSコード

.box02 {
position: relative;
margin: 2em 0;
padding: 40px 25px 20px;
line-height: 2em;
border: solid 2px #FFC107;/*線種・太さ・色*/
}

.box02 .box-title {
position: absolute;
display: inline-block;
top: -2px;
left: -2px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 17px;/*文字の大きさ*/
background: #FFC107;/*背景色*/
color: #ffffff;/*文字の色*/
font-weight: bold;/*文字の太さ*/
}

.box01 p {
margin: 0;
padding: 0;
}

.recommend:before{
content:"\f0a9";/*アイコンの種類*/
padding-right:10px;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
animation: flash 5s ease infinite;/*点滅速度*/
-webkit-animation: flash 5s ease infinite;/*点滅速度*/
}

HTMLコード

<div class="box02"><span class="box-title">ここにタイトル</span>
<a class="recommend" href="リンク先URL1">タイトル1</a><br />
<a class="recommend" href="リンク先URL2">タイトル2</a><br />
<a class="recommend" href="リンク先URL3">タイトル3</a></div>

色などは自由に変えてくださいね。

 

枠の途中にタイトルのあるデザイン

ここにタイトル
タイトル1
タイトル1
タイトル1

ボックスの左上にタイトルを入れられるリンク用ボックスです。

 

CSSコード

.box04 {
position: relative;
margin: 2em 0;
padding: 0em 2em 1.5em;
line-height: 2em;/*行間*/
border: solid 3px #95ccff;/*線種・太さ・色*/
border-radius: 8px;/*角丸の大きさ*/
}

.box04 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;/*文字の大きさ*/
background: #FFF;/*背景色*/
color: #95ccff;/*文字の色*/
font-weight: bold;/*文字の太さ*/
}

.box04 p {
margin: 0;
padding: 0;
}

.recommend:before{
content:"\f0a9";/*アイコンの種類*/
padding-right:10px;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
animation: flash 5s ease infinite;/*点滅速度*/
-webkit-animation: flash 5s ease infinite;/*点滅速度*/
}

HTMLコード

<div class="box04"><span class="box-title">ここにタイトル</span>
<a class="recommend" href="リンク先URL1">タイトル1</a><br />
<a class="recommend" href="リンク先URL2">タイトル2</a><br />
<a class="recommend" href="リンク先URL3">タイトル3</a></div>

こちらも色はお好みで変更してください。

 

上部にタイトルを左右に伸ばしたデザイン

ここにタイトル

タイトル1
タイトル2
タイトル3

ボックス上部の真ん中にタイトルの入ったリンク用ボックスです。

 

CSSコード

.box03 {
margin: 2em 0;
background: #f1f1f1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

.box03 .box-title {
font-size: 1.2em;/*文字の大きさ*/
background: #5fc2f5;/*背景色*/
padding: 4px;
text-align: center;
color: #FFF;/*文字の色*/
font-weight: bold;/*文字の太さ/
letter-spacing: 0.05em;/*文字間*/
}

.box03 p {
padding: 15px 30px;
line-height: 2em;
margin: 0;
}

.recommend:before{
content:"\f0a9";/*アイコンの種類*/
padding-right:10px;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
animation: flash 5s ease infinite;/*点滅速度*/
-webkit-animation: flash 5s ease infinite;/*点滅速度*/
}

HTMLコード

<div class="box03">
<div class="box-title">ここにタイトル</div>
<p><a class="recommend" href="リンク先URL1">タイトル1</a><br />
<a class="recommend" href="リンク先URL2">タイトル2</a><br />
<a class="recommend" href="リンク先URL3">タイトル3</a></p>
</div>

 

とりあえず4パターンご紹介しました。

また少しずつ追加していきたいと思います。

 

テキストリンクのアテンション2選

次はテキストリンクのアテンションです。

Font AwesomeFont Awesome animationを導入することで

表示させることが可能です。

 

私の場合はこんな感じに使っています。

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

 

アイコンが点滅するアテンション

ここにタイトル

まずは私が文頭でご紹介した

アイコンを点滅させるアテンションです。

 

HTMLコード

<p><i class="fas fa-arrow-circle-right faa-flash animated fa-fw my-pink"></i><a href="リンク先URL">ここにタイトル</a></p>

CSSコード

.my-pink{
color: #f05689;/*アイコンの色*/
}

CSSコードでは単純にアイコンの色を変更しているだけです。

 

ちなみに…

fas fa-arrow-circle-rightの部分で違うアイコンに変えたり

faa-flash animatedの部分で動きを変えることもできます。

 

例えば…

faa-flash animatedの部分をfaa-horizontal animatedに変えてみてください。

動きが変わります^^

 

おすすめマークアテンション

CHECK!ここに文字リンク

超「ストーク」使いのエンジニア

コビトブログさんが紹介している「アテンション」。

 

点滅こそしませんが、テキストリンクの前にあることで

内部リンクを強調することができます。

 

HTMLコード

<span class="mark1">CHECK!</span>ここに文字リンク

CSSコード

/* マーク1 */
.mark1 {
position: relative;
margin: 0 10px 0 3px;
padding: 3px 8px 3px 5px;
color: #fff;/*文字の色*/
background: #f05684;/*背景色*/
font-weight: bold;/*文字の太さ*/
font-size: 0.8em;/*文字の大きさ*/
border-radius: 3px;/*角の丸み*/
}

.mark1:before{
margin: 0 3px 0 0;
content: "\f00c";/*アイコンの種類*/
font-family: FontAwesome;
color: #fff;
}

 

背景の色を変えれば雰囲気も変わります。

おすすめ!ここに文字リンク

 

ちょっとしたことですが

このような「アテンション」があるだけで

クリック率も変わってくるので、ぜひ取り入れてみてくださいね。

 

各コードに何を表すものなのか書いてあるので

数字やカラーコードを調整すれば

あなた好みのバランスに変更もできます。

 

好奇心旺盛な方は少しさわってみてください^^

 

おしゃれなリンクボックスとアテンションがコピペだけでできる!

ちょっと数は少ないですが…

おしゃれなリンク用ボックス

テキストリンクのアテンションをご紹介しました。

 

ブログの読者というのは基本面倒臭がりで

本文もかなり読み飛ばす傾向があるので

 

こういった別記事を読んでもらう内部リンクの

アテンション」はかなり重要になってきます。

 

慣れるまで少しコードの挿入などは

面倒に感じるかもしれませんが

 

訪問者のユーザビリティを上げ

1つでも多くの記事を読んでもらうためには

こういった影ながらの努力も大事です。

 

細かい部分にまでしっかりと配慮していけば

読者の印象も変わってきます。

 

ぜひ取り入れて

読者に好まれるブログを目指しましょう。

 

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

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

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

 

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

 

合わせて読みたい!

 

WPテーマ「STORK」カスタマイズ!おしゃれなリンクボックスとアテンション!

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


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

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


ABOUTこの記事をかいた人

ここあ

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