HTML・CSSはてなブログでは独自のアイコンフォントが読み込まれており、CSSで設定すればそれらが使えるというのは有名な話です。その中でもよく使われるものは「はてなブックマーク」のアイコンでしょう。*1このように文字をくり抜いたようなアイコンなので、若干扱いにくいのが正直なところです。システムのアイコンで使うためであって、私達が使うためにインストールされている訳ではないですから、当然なんですけどね。うまく使うために、あれやこれやとCSSで調整していたのですが、今回の記事はその集大成とも言える話です。いうのも、はてなブックマークにはアプリがあります。b.hatena.ne.jpそのアプリのiPhone版にはアイコンは綺麗なグラデーションになっています。こちらの記事にあるアイコンがそれです。Groupこのようにグラデーションがかかったアイコンを先ほどのアイコンで出来ないものかと思い、いろいろ試していたのです。それがある程度結果が出たので、そのご報告をかねた記事です。スポンサーリンクはてなブックマークアイコンを使ってデザインするときの、CSSのコツその前に、標準でインストールされているはてなブックマークアイコンをCSSで使いやすく調整するコツなどを書いてみます。このアイコンは本来、記事編集の右側にあるサイドバーなどで使われています。このアイコンに直接、背景色(background)と枠(border)を指定すれば、次のようになります。このアイコンをこのまま使うのならば、デフォルトで使われているクラスlgを付けるなり何なりして調整すればいいのですが、中の文字(B!)だけ色を変えたり、文字だけにしたりするのには工夫が要ります。いっても難しいことではありません。基本的にはCSSでどうにかなります。その1、背景色などを調整する方法は複数ありますが、一例として言えば背景色にグラデーションなどを指定して文字の部分だけ背景色を変えるという方法があります。80%);}この方法では、背景色が文字の色となります。従来では文字の色となる文字色のほうを背景色とすることで、アイコンの文字(B!)の色だけを表示させるというものです。表示確認用のサンプルページもご用意していますリンク:サンプルページその2、表示範囲を狭めるまた、疑似要素の親となる要素の大きさを、アイコンより小さくするという方法もあります。表示範囲を狭めて、アイコンだけの表示にする方法です。この方法の最大の特徴は、グラデーションなどのごちゃこちゃした指定が不要になる点です。うまく組み合わせれば先ほどのsample1-1のような表示も簡単にできます。これも表示せせる方法は複数あります。一例としては次のようなものです。240%;}sample2-1はアイコンの上下ギリギリに指定います。上下ギリギリだとアイコン自体の角丸から背景色が見えますので、角丸(border-radius)を使ってそれを隠しています。sample2-2は「B!」の文字ギリギリまで狭めたものです。高さを調整しやすいようにフォントサイズで変化するemで指定します。ちなみに今回のスタイルは全部、大きさを調整しやすいようにフォントサイズに合わせて変わるように指定してます。こちらも表示確認用のページをご用意しています。リンク:サンプルページよろしければ、上記のサンプルページもご確認ください。アプリのようにグラデーションがかかったアイコンにするCSSでは本題のiPhoneアプリのような、グラデーションがかかったブックマークアイコンを作ってみます。これで問題になるのはアイコンのグラデーションです。文字色を背景色と同じにしなくてはいけないのですが、原段階で文字色にグラデーションは指定できません。そこで使うのは試験的に導入されている-webkit-background-clipです。これは文字に背景色を指定できます。このプロパティはIEでは使えません。何らかの対策が必要です。そこで使うのが@規則の@supportsです。このことはWebデザインなどで超有名なWebクリエイターボックスさんで詳しく紹介されています。Webクリエイターボックスこれらを活用してできあがったものが、こちらです。}}また、表示確認用のサンプルページもご用意しています。リンク:サンプルページ最初に-webkit-background-clip:textが表示できない環境(IE)向けのCSSを指定しています。色は違和感があまりないように、グラデーションの真ん中あたりの色(#00a5de)にしています。その後、@規則でグラデーションを指定したスタイルを記述しています。後々background-clip:textが正式採用なる可能性も考えて、ベンダープレフィックスがないものも記述しているのは、参考元の記事に習っています。a要素)のグラデーションに合うように調整しています。することでグラデーションが繋がます。この指定の場合、中のアイコンの大きさを変えると、外側とのグラデーションが合わなくなります。デザインを微調整するにも、その都度中のグラデーションを調整しなくてはいけないので、面倒くさいところがあります。素材を使うこのようにアイコンにグラデーションを描写するとなると、面倒くさいところがあり、またCSSも長くなります。実はこんな複雑なCSSを使わなくてもグラデーションを付けたアイコンを作ることができます。はてなでは素材としてブックマークアイコンをダウンロードできます。株式会社はてな配布されているのはSVG形式のものと、Photoshopなどで使われるEPS形式のものです。SVGは、HTML5になって直接ソースに書き込んでも描写できるようになっています。これらを使えば先ほどのようなややこしいCSSは必要なくなります。編集自体は難しくはありません(簡単でもないですが...)例えば次のようなグラデーションを付けることもできます。Attribution-NonCommercial-ShareAlikeです。ダウンロードできるページには使用上の注意や利用例が書かれていますので、使用する際にはお読みください。はてなブックマークへのリンクを、オリジナルで設定する方も多いと思います。そんなとき、少しでも参考になるかなと思い記事にしました。ブックマークアイコンをデザインするときに、何かの参考になれば嬉しいです。vertic...2017-08-06リストのマーカーをCSSでカスタマイズする方法まとめHTMLでリストを作ると、自動でマーカーが付きます。非常に便利...2017-07-16jQueryを使わず、CSSとJavaScriptで実装するトップに戻るボタン「トップに戻るボタン」というものがあります。はてなブログPro冬眠しないタヌキ。プロフィールはこちら。わたしと納豆ごはんスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。