おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ

投稿日：2017-01-16 更新日：2020-05-02

リンクを目立たせよう

クリックして欲しいリンクがある時、ただ単にリンクを貼るのではなく枠で囲って目立たせてみましょう。

できる限りコードはシンプルに、コピペだけでできるようにしました。

枠がない場合はこんな感じですね。

必見！はてなブログのカスタマイズを一気に紹介する – SHIROMAG

これを枠で囲って強調するようにカスタマイズします。

CSS

まずはCSSにコードを追加していきます。以下の中から好きなコードを選んで、ダッシュボードの「デザイン」→「カスタマイズ」→「デザインCSS」に追加して下さい。

スマホで使う場合は、<style>　～ </style>　で囲んでヘッダーのタイトル下にでもぶっこんでください。

シンプルなタイプ

必見！はてなブログのカスタマイズを一気に紹介する – SHIROMAG

.entry-content .emphasize-link {
position: relative;
margin: 36px 0 16px;
padding: 16px 10px;
border: 2px solid #df8182;
background-color: #fffbf5;
}
.entry-content .emphasize-link p:last-child {
margin-bottom: 0;
}
.entry-content .emphasize-link::before {
position: absolute;
bottom: 100%;
left: -2px;
padding: 2px 6px;
content: "あわせて読みたい";
background-color: #df8182;
color: #fff;
font-weight: bold;
}

これがベースで、コード内の、

content: "あわせて読みたい";

この部分を任意の文に書き換えて下さい。

background-color: #カラーコード;

この部分を変更すると色を変えられるので、好きな色に変えて下さい。カラーコードはこちらで調べて下さい。

www.color-sample.com

ここでいくつかデザイン例を載せておきます。

必見！はてなブログのカスタマイズを一気に紹介する – SHIROMAG

.entry-content .emphasize-link {
position: relative;
margin: 36px 0 16px;
padding: 16px 10px;
border: 2px solid #ee7917;
background-color: #fffbf5;
}
.entry-content .emphasize-link p:last-child {
margin-bottom: 0;
}
.entry-content .emphasize-link::before {
position: absolute;
bottom: 100%;
left: -2px;
padding: 2px 6px;
content: "Check!!";
background-color: #ee7917;
color: #fff;
font-weight: bold;
}

必見！はてなブログのカスタマイズを一気に紹介する – SHIROMAG

.entry-content .emphasize-link {
position: relative;
margin: 36px 0 16px;
padding: 16px 10px;
border: 2px solid #c62824;
background-color: #fffafa;
}
.entry-content .emphasize-link p:last-child {
margin-bottom: 0;
}
.entry-content .emphasize-link::before {
position: absolute;
bottom: 100%;
left: -2px;
padding: 2px 6px;
content: "関連記事";
background-color: #c62824;
color: #fff;
font-weight: bold;
}

アイコンが入ったタイプ

こちらはアイコンを入れたタイプ

CSSの読み込みを遅延させるJavaScriptコード

.entry-content .emphasize-link {
position: relative;
margin: 36px 0 16px;
padding: 16px 10px;
border: 2px solid #df8182;
background-color: #fffbf5;
}
.entry-content .emphasize-link p:last-child {
margin-bottom: 0;
}
.entry-content .emphasize-link::before {
position: absolute;
top: -12px;
left: 10px;
padding: 0 10px 0 26px;
content: "あわせて読みたい";
background-color: #df8182;
border-radius: 10px;
color: #fff;
font-size: 14px;
font-weight: bold;
line-height: 20px;
}
.entry-content .emphasize-link::after {
position: absolute;
top: -16px;
left: 4px;
width: 28px;
height: 28px;
background-color: #df8182;
border-radius: 14px;
line-height: 25px;
text-align: center;
content: "\f010";
font-size: 18px;
font-family: "blogicon";
color: #fff;
}

これがベースで、コード内の

content: "あわせて読みたい";

この部分を任意の文に書き換えて下さい。

background-color: #カラーコード;

この部分を変更すると色を変えられるので、好きな色に変えて下さい。カラーコードはこちらで調べて下さい。

www.color-sample.com

content: "\f010";

この部分がアイコンを指定するコードです。これを書き換えてアイコンを変えることができます。

アイコンを指定するコードはこちらの記事を参考にしてください。

shirokai.hatenablog.com

ここでいくつかデザイン例を載せておきます。

CSSの読み込みを遅延させるJavaScriptコード

.entry-content .emphasize-link {
position: relative;
margin: 36px 0 16px;
padding: 16px 10px;
border: 2px solid #ee7917;
background-color: #fffbf5;
}
.entry-content .emphasize-link p:last-child {
margin-bottom: 0;
}
.entry-content .emphasize-link::before {
position: absolute;
top: -12px;
left: 10px;
padding: 0 10px 0 26px;
content: "Check!!";
background-color: #ee7917;
border-radius: 10px;
color: #fff;
font-size: 14px;
font-weight: bold;
line-height: 20px;
}
.entry-content .emphasize-link::after {
position: absolute;
top: -16px;
left: 4px;
width: 28px;
height: 28px;
background-color: #ee7917;
border-radius: 14px;
line-height: 25px;
text-align: center;
content: "\f029";
font-size: 18px;
font-family: "blogicon";
color: #fff;
}

CSSの読み込みを遅延させるJavaScriptコード

.entry-content .emphasize-link {
position: relative;
margin: 36px 0 16px;
padding: 16px 10px;
border: 2px solid #c62824;
background-color: #fffafa;
}
.entry-content .emphasize-link p:last-child {
margin-bottom: 0;
}
.entry-content .emphasize-link::before {
position: absolute;
top: -12px;
left: 10px;
padding: 0 10px 0 26px;
content: "関連記事";
background-color: #c62824;
border-radius: 10px;
color: #fff;
font-size: 14px;
font-weight: bold;
line-height: 20px;
}
.entry-content .emphasize-link::after {
position: absolute;
top: -16px;
left: 4px;
width: 28px;
height: 28px;
background-color: #c62824;
border-radius: 14px;
line-height: 27px;
text-align: center;
content: "\f009";
font-size: 16px;
font-family: "blogicon";
color: #fff;
}

ちょっと浮かすだけ

吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】

.entry-content .emphasize-link a {
display: block;
padding: 16px;
border: 1px solid #eee;
box-shadow: 0 2px 2px rgba(0,0,0,.4);
-webkit-transition: all .3s;
transition: all 0.3s;
}
.entry-content .emphasize-link a:hover {
box-shadow: none;
-webkit-transition: all .3s;
transition: all 0.3s;
}

ボタンっぽいリンク

ボタンっぽいリンクにできます。文字数が多いと微妙かも。

はてなブログ用一括置換ツール

.entry-content .emphasize-link a {
display: block;
position: relative;
padding: 14px 30px 14px 16px;
border: 2px solid #fff;
color: #fff;
text-decoration: none;
background-color: #be2d32;
box-shadow: 0 2px 2px rgba(0,0,0,.4);
-webkit-transition: all .3s;
transition: all 0.3s;
border-radius: 6px;
}
.entry-content .emphasize-link a::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
content: "";
background-color: #fff;
opacity: .1;
}
.entry-content .emphasize-link a::after {
position: absolute;
top: 50%;
right: 14px;
margin-top: -10px;
font-family: "blogicon";
line-height: 20px;
content: "\f006";
}
.entry-content .emphasize-link a:hover {
box-shadow: none;
-webkit-transition: all .3s;
transition: all 0.3s;
}

はてなブログ用一括置換ツール

.entry-content .emphasize-link a {
display: block;
position: relative;
padding: 14px 30px 14px 16px;
border: 2px solid #fff;
color: #fff;
text-decoration: none;
background-color: #3156b9;
box-shadow: 0 2px 2px rgba(0,0,0,.4);
-webkit-transition: all .3s;
transition: all 0.3s;
border-radius: 6px;
}
.entry-content .emphasize-link a::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
content: "";
background-color: #fff;
opacity: .1;
}
.entry-content .emphasize-link a::after {
position: absolute;
top: 50%;
right: 14px;
margin-top: -10px;
font-family: "blogicon";
line-height: 20px;
content: "\f006";
}
.entry-content .emphasize-link a:hover {
box-shadow: none;
-webkit-transition: all .3s;
transition: all 0.3s;
}

記事で使ってみる

好きなコードを選んでCSSに追加したら、記事内で使ってみましょう。p要素にクラスを指定します。

見たままモード

見たままモードでタイトルのリンクを貼って、HTML編集に切り替えると以下のようなコードになります。

<p><a href="https://www.notitle-weblog.com/entry/hatena-customize">必見！はてなブログのカスタマイズを一気に紹介する - SHIROMAG</a></p>

強調したいリンクのp要素にクラスを指定してあげるだけでOKです。

<p class="emphasize-link"><a href="https://www.notitle-weblog.com/entry/hatena-customize">必見！はてなブログのカスタマイズを一気に紹介する - SHIROMAG</a></p>

Chrome拡張機能で簡単に<p>タグにクラスを指定することができますが、リンクが外れてしまうので再度リンクを貼りなおす必要があります。

はてなブログ編集用のChrome拡張機能を作りました（使い方の説明） | SHIROMAG

Chrome拡張を使う場合は、

カスタマイズしたいリンクを選択して、

「emphasize-link」を入力して「Add Class」をクリックして下さい。リンクが外れてテキストだけになってしまうので、再度リンクを貼ればOKです。

Markdown編集

Markdownでは、記事タイトルでリンクを貼るのは以下のように書きますね。

[https://www.notitle-weblog.com/entry/hatena-customize:title]

<p>タグで囲ってあげればOKです。

<p class="emphasize-link">[https://www.notitle-weblog.com/entry/hatena-customize:title]</p>

複数のリンクを囲む

必見！はてなブログのカスタマイズを一気に紹介する – SHIROMAG

<p><a href="https://www.notitle-weblog.com/entry/hatena-customize">必見！はてなブログのカスタマイズを一気に紹介する - SHIROMAG</a></p>
<p><a href="https://www.notitle-weblog.com/entry/hatena-customize">必見！はてなブログのカスタマイズを一気に紹介する - SHIROMAG</a></p>

このコードを<div>タグで囲ってあげればOK。

<div class="emphasize-link">
<p><a href="https://www.notitle-weblog.com/entry/hatena-customize">必見！はてなブログのカスタマイズを一気に紹介する - SHIROMAG</a></p>
<p><a href="https://www.notitle-weblog.com/entry/hatena-customize">必見！はてなブログのカスタマイズを一気に紹介する - SHIROMAG</a></p>
</div>