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

ここあです。

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

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

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

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

↓ こんな感じに…

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

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

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

それはそれで物足りない…＾＾；

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

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

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

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

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

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

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

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

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

今回は、そんな

2つの作り方をご紹介したいと思います。

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

今から紹介するHTMLとCSSの

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

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

ぜひやってみてくださいね＾＾

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

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

Font Awesomeを使用しています。

さらにアテンションを強調させるために…

アイコンフォントにアニメーションを付けるための

コードも必要なのでこちらの記事を参考に…

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

子テーマのテーマヘッダーに

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

1つは、Font Awesome 5のCDNコード

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

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

<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" />

※表示上は崩れていますが、コピペすれば3行になります。

テンプレートの使い方

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

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

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

CSSコードの記述先は…

ダッシュボードメニューから

外観 → カスタマイズをクリック。

以下、追加CSSに記述してください。

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コードはこちら…

HTMLコード

ここにタイトル</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>

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

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

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

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コードはこちら…

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>

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

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

CSSコード

.my-pink{
color: #f05689;
}

HTMLコード

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

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

ちなみに…

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

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

例えば、faa-flash animatedの部分を

faa-horizontal animatedに変えてみてください。

動きが変わります＾＾

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

超STORK使いのエンジニア

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

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

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

CSSコード

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

HTMLコード

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

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

ちょっとしたことですが

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

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

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

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

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

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

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

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

• おしゃれなリンク用ボックス
• テキストリンクのアテンション

をご紹介しました。

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

本文を読み流す傾向がありますので

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

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

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

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

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

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

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

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

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

ぜひ取り入れて読者に好まれるブログを目指しましょう。

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