わたしと納豆ごはん

納豆、Web、雑記など

はてなブックマークのアイコンを、アプリのアイコンのようにグラデーションにする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;
  }
}

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

リンク:サンプルページ

最初に-webkit-background-clip:textが表示できない環境(IE)向けのCSSを指定しています。色は違和感があまりないように、グラデーションの真ん中あたりの色(#00a5de)にしています。

その後、@規則でグラデーションを指定したスタイルを記述しています。後々background-clip:textが正式採用なる可能性も考えて、ベンダープレフィックスがないものも記述しているのは、参考元の記事に習っています。

アイコンに適応されるグラデーションは、親要素( a要素)のグラデーションに合うように調整しています。こうすることでグラデーションが繋がます。

ただしこの指定の場合、中のアイコンの大きさを変えると、外側とのグラデーションが合わなくなります。なので、デザインを微調整するにも、その都度中のグラデーションを調整しなくてはいけないので、面倒くさいところがあります。

素材を使う

このようにアイコンにグラデーションを描写するとなると、面倒くさいところがあり、またCSSも長くなります。

実はこんな複雑なCSSを使わなくてもグラデーションを付けたアイコンを作ることができます。

それは素材です。はてなでは素材としてブックマークアイコンをダウンロードできます。

リンク:素材集 - 株式会社はてな

配布されているのはSVG形式のものと、Photoshopなどで使われるEPS形式のものです。

特にSVGは、HTML5になって直接ソースに書き込んでも描写できるようになっています。これらを使えば先ほどのようなややこしいCSSは必要なくなります。

編集自体は難しくはありません(簡単でもないですが…)例えば次のようなグラデーションを付けることもできます。

グラデーションを施したSVGはてなブックマークアイコン

ちなみにこれら素材はCC(クリエイティブ・コモンズ)ライセンスAttribution-NonCommercial-ShareAlikeです。

またダウンロードできるページには使用上の注意や利用例が書かれていますので、使用する際にはお読みください。


このような感じです。

はてなブックマークへのリンクを、オリジナルで設定する方も多いと思います。そんなとき、少しでも参考になるかなと思い記事にしました。

ブックマークアイコンをデザインするときに、何かの参考になれば嬉しいです。

スポンサーリンク

*1:文字色は「#008fde」