はてなブックマークのアイコンを、アプリのアイコンのようにグラデーションにするCSS

はてなブログでは独自のアイコンフォントが読み込まれており、CSSで設定すればそれらが使えるというのは有名な話です。

その中でもよく使われるものは「はてなブックマーク」のアイコンでしょう。

そのアイコンはこれなのですが *1

はてなブックマークアイコンの画像

このように文字をくり抜いたようなアイコンなので、若干扱いにくいのが正直なところです。

まあ、システムのアイコンで使うためであって、私達が使うためにインストールされている訳ではないですから、当然なんですけどね。

なので、うまく使うために、あれやこれやとCSSで調整していたのですが、今回の記事はその集大成とも言える話です。

というのも、はてなブックマークにはアプリがあります。

b.hatena.ne.jp

そのアプリのiPhone版にはアイコンは綺麗なグラデーションになっています。ちょうどこちらの記事にあるアイコンがそれです。

リンク：はてなのニュースアプリ「Presso」のデザインができるまで - Hatena Design Group

このようにグラデーションがかかったアイコンを先ほどのアイコンで出来ないものかと思い、いろいろ試していたのです。

それがある程度結果が出たので、そのご報告をかねた記事です。

はてなブックマークアイコンを使ってデザインするときの、CSSのコツ

その前に、標準でインストールされているはてなブックマークアイコンをCSSで使いやすく調整するコツなどを書いてみます。

このアイコンは本来、記事編集の右側にあるサイドバーなどで使われています。

サイドバーで使われているブックマークアイコンの画像

このアイコンに直接、背景色（background）と枠（border）を指定すれば、次のようになります。

ブックマークアイコンにbackgroundとborderを指定した画像

このアイコンをこのまま使うのならば、デフォルトで使われているクラスlgを付けるなり何なりして調整すればいいのですが、中の文字（B!）だけ色を変えたり、文字だけにしたりするのには工夫が要ります。

といっても難しいことではありません。基本的にはCSSでどうにかなります。

その1、背景色などを調整する

方法は複数ありますが、一例として言えば背景色にグラデーションなどを指定して文字の部分だけ背景色を変えるという方法があります。

背景色を調整した場合の画像

<i class="blogicon-bookmark sample1-1"></i>
<i class="blogicon-bookmark lg sample1-2"></i>

/* sample1-1 */
.blogicon-bookmark.sample1-1 {
    background: #008fde;
    border-radius: 20%;
    color: #008fde;
    font-size: 100px;
    height: 1em;
    line-height: 0.8;
    overflow: hidden;
    text-align: center;
    vertical-align: bottom;
    width: 1em;
}
.blogicon-bookmark.sample1-1:before {
    background: linear-gradient(90deg, #008fde 10%, transparent 10%, transparent 90%, #008fde 90%),linear-gradient(#008fde 40%, #ffffff 40%, #ffffff 80%, #008fde 80%);
}

/* sample1-2 */
.blogicon-bookmark.sample1-2 {
    color: #ffffff;
    font-size: 120px;
}
.blogicon-bookmark.sample1-2:before {
    background: linear-gradient(90deg, #ffffff 10%, transparent 10%, transparent 90%, #ffffff 90%),linear-gradient( transparent 40%, #000000 40%, #000000 80%, transparent 80%);
}

この方法では、背景色が文字の色となります。従来では文字の色となる文字色のほうを背景色とすることで、アイコンの文字（B!）の色だけを表示させるというものです。

表示確認用のサンプルページもご用意しています

リンク：サンプルページ

その2、表示範囲を狭める

また、疑似要素の親となる要素の大きさを、アイコンより小さくするという方法もあります。つまり表示範囲を狭めて、アイコンだけの表示にする方法です。

この方法の最大の特徴は、グラデーションなどのごちゃこちゃした指定が不要になる点です。

表示範囲が狭まるので、アイコンの表示自体は狭まりますが、ブックマークアイコンの場合、通常 a要素とセットです。うまく組み合わせれば先ほどのsample1-1のような表示も簡単にできます。

これも表示せせる方法は複数あります。一例としては次のようなものです。

表示範囲を狭めた場合の画像

<i class="blogicon-bookmark sample2-1"></i>
<i class="blogicon-bookmark sample2-2"></i>

/* sample2-1 */
.blogicon-bookmark.sample2-1 {
    border-radius: 20%;
    color: #008fde;
    font-size: 100px;

    height: 1em;
    line-height:0.5;
    overflow: hidden;
    text-indent: -0.035em;
    vertical-align: bottom;
    width: 1em;
}
.blogicon-bookmark.sample2-1:before {
  font-size: 142%;
}

/* sample2-2 */
.blogicon-bookmark.sample2-2 {
    background: #000000;
    color: #ffffff;
    font-size: 100px;
    height: 1em;
    line-height: 0.19;
    overflow: hidden;
    text-indent: -0.32em;
    vertical-align: bottom;
    width: 1.19em;
}
.blogicon-bookmark.sample2-2:before {
    font-size: 240%;
}

sample2-1はアイコンの上下ギリギリに指定います。

ただ上下ギリギリだとアイコン自体の角丸から背景色が見えますので、角丸（border-radius）を使ってそれを隠しています。

sample2-2は「B!」の文字ギリギリまで狭めたものです。

高さを調整しやすいようにフォントサイズで変化するemで指定します。ちなみに今回のスタイルは全部、大きさを調整しやすいようにフォントサイズに合わせて変わるように指定してます。

こちらも表示確認用のページをご用意しています。

リンク：サンプルページ

よろしければ、上記のサンプルページもご確認ください。

アプリのようにグラデーションがかかったアイコンにするCSS

では本題のiPhoneアプリのような、グラデーションがかかったブックマークアイコンを作ってみます。

これで問題になるのはアイコンのグラデーションです。文字色を背景色と同じにしなくてはいけないのですが、原段階で文字色にグラデーションは指定できません。

そこで使うのは試験的に導入されている-webkit-background-clipです。これは文字に背景色を指定できます。

ただしこのプロパティはIEでは使えません。なので何らかの対策が必要です。

そこで使うのが＠規則の@supportsです。このことはWebデザインなどで超有名なWebクリエイターボックスさんで詳しく紹介されています。

参考リンク：CSSの@supportsを使ってCSSのみでスタイルの条件分岐をする方法 | Webクリエイターボックス

これらを活用してできあがったものが、こちらです。

CSSでグラデーションを施した、はてブアイコンの画像

<a class="icon-gradient"><i class="blogicon-bookmark" ></i></a>

.icon-gradient {
    background: #00a5de;
    border-radius: 20%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 100px;
    height: 1em;
    width: 1em;
}
.icon-gradient .blogicon-bookmark {
    background: #ffffff;
    font-size: 46%;
    height: 1em;
    line-height: 0.19;
    overflow: hidden;
    text-indent: -0.32em;
    width: 1.19em;
}
.icon-gradient .blogicon-bookmark:before {
    color: #00a5de;
    font-size: 240%;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .icon-gradient {
    background: linear-gradient( #00e0de, #0068de);
  }
  .icon-gradient .blogicon-bookmark:before {
    background-image: linear-gradient( #00e0de 23%, #0068de 98%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}