参考リンク横にCSSでバッジをつける

2023/05/15 投稿

2024/04/20 更新

ブログ記事を書く中で参考にさせていただいたブログ/記事へリンクを張ることがあると思いますが、みなさんはどのように紹介していますか。

ブログカードで紹介？テキストリンクで紹介？

好みや考え方の違いもあるかと思いますが、私は外部参考サイトへは基本テキストリンクです。（海外サイトへのリンクを除く・内部関連記事へのリンクはブログカード）

が、普通に1行テキストリンクというのも味気ない…と思い、ちょっと手を加えて「バッジ」をつけてみることにしました。

p class="sankou"

通常は1行での紹介が多いので、こちらが基本形。 p に class="sankou" を設定して、毎回「参考」と書かなくても良いように・ちょっとだけ目立たせて・メインではないので文字の大きさはちょっとだけ小さく、カスタマイズしてみました。

※表示サンプルはリンク設定をしていません。

参考サイト/記事へのリンク

参考サイト/記事へのリンク。タイトルが長い時・モバイル時など横幅が狭いデバイスの時はどうなるのかの改行表示テスト。

<p class="sankou">参考サイト/記事へのリンク</p>

/* 参考リンク */
.sankou {
    font-size: .9rem; 
    line-height: 1.5em;
    text-indent: -3rem;  /* 字下げ */
    padding-left: 3rem;  /* 字下げ */
}

.sankou::before {
    content: "参考";
    margin-right: 1em;
    padding: .2em .5em;
    background: #044162;
    color: #ffffff;
    border-radius: 10px;
    font-size:.75rem;
}

div class="sankou2"

参考リンクが2件以上ある場合用には、div class="sankou2" で。

2行以上の時は、モバイル時でも近接しすぎないように参考リンクの行間余白を調整しています。ただし、1番最後の参考リンクの下だけは通常 p と同じマージンを入れています。

DIVで囲む参考2サイト/記事へのリンク

DIVで囲む参考2サイト/記事へのリンク。タイトルが長い時・モバイル時など、横幅が狭いデバイスの時はどうなるのかの改行表示テスト。

<div class="sankou2">
  <p>DIVで囲む参考2サイト/記事へのリンク</p>
  <p>DIVで囲む参考2サイト/記事へのリンク</p>
  <p>DIVで囲む参考2サイト/記事へのリンク。タイトルが長い時・モバイル時など、横幅が狭いデバイスの時はどうなるのかの改行表示テスト。</p>
</div>

/* 参考複数 */
.sankou2 p {
    font-size: .9rem;
    line-height: 1.5rem;
    margin-bottom: .7em!important;
    text-indent: -3rem;  /* 字下げ */
    padding-left: 3rem;  /* 字下げ 調整*/
}
.sankou2 p::before {
    content: "参考";
    margin-right: 1em;
    padding: .2em .5em;
    background: #044162;
    color: #ffffff;
    border-radius: 10px;
    font-size:.75rem;
}
.sankou2 p:last-child {
    margin-bottom: 2em;  /* 通常pタグ下マージン */
}

字下げ（イデント）の設定

text-indent: -4em; と padding-left: 4rem; /* 字下げ */ の部分で、2行目以降がバッジの前に出ないように、1行目のテキスト先頭に合わせて空白（字下げ＝イデント）の設定をしています。

本来は2つの数字はあわせますが、今回の場合は前に来るバッジの大きさなどで、数値は調整が必要です。

2行目が微妙にずれる原因

文頭にくる文字・記号（全角/半角）・バッジの中の padding の数値によって、微妙に2行目が揃わない場合はあります。

1番簡単な解決策は「margin や padding数値での微調整」両サイドが0.5emなら、足して1em分：端数が出ないのできれいにそろいます。

バッジの中の padding を0.75emにしたい場合は、端数 0.5の調整を /*字下げ*/ 部分で調整します。text-indent: -4.5em; padding-left: 4em; これで0.5em分の差が解消されます。

文章の2行目以降をCSSで字下げ(インデント)する方法

「HTMLの書式を設定」には要注意かも

ここまでやってもまだずれてる！という場合、Bloggerの投稿エディタ（HTMLビューモード）で、上部ボタンメニューの HTMLの書式を設定（くずれてるハンバーガーメニューみたいなの）を使った後だったりしませんか？

私はこれを使った後に、微妙なズレが出ました。

これは原因がよく分からないのですが、変な場所で勝手に改行されてる/空白が入れられてる下に様な感じの ～ を

<p class="sankou">
  参考サイト/記事へのリンク
</p>
<p class="sankou">
  参考サイト/記事へのリンク。タイトルが長い時・モバイル時など横幅が狭いデバイスの時はどうなるのかの改行表示テスト。
</p>

1行にきれいにまとめてあげる（折り返し表示以外の空白・改行削除）と直りました。

<p class="sankou">参考サイト/記事へのリンク</p>
<p class="sankou">参考サイト/記事へのリンク。タイトルが長い時・モバイル時など横幅が狭いデバイスの時はどうなるのかの改行表示テスト。</p>

その他応用

バッジの位置は前後CSSで変更できますし、アレンジでいろいろ使えると思います。2行以上になるなら、イデント設定を加えてください。

注目してほしい1行

/* 前バッジ：ポイント */
.point::before {
    content: "\2605ポイント";
    margin-right: 1em;
    padding: 0.3em .5em;
    background: #ff69b4;
    color: #ffffff;
    font-size: .9em;
    border-radius: 10px;
}

新しい情報

/* 後ろバッジ：New */
.new::after {
   content: "New";
   margin-left: .5em;
   padding: 0.3em .5em;
   background: #ff4c4c;
   border-radius: 10px;
   color: #ffffff;
   font-size: .7em;
   vertical-align: text-top;
}

この他、バッジの中のテキスト… とCSSを設定しているパターンもありました。この場合は都度バッジ内のテキストを入力する必要がありますが、こちらのほうがアレンジ版に必要なCSS追記が少なくて済みます。

シンプルな角丸CSSバッジデザイン

バッジつながりでこちらの記事もおすすめ。