ホームページのデザインを崩さず、ほぼコピー&ペーストでカラフルなSNSアイコンを設置することができるデザインCSS。
アイコンは横に文字を並べてワンポイントにしたり、アイコン自体をリンクにしたりしてお使いいただけます。
アイコン・ロゴについて
アイコンはIcoMoonと、espaceオリジナルアイコンを利用して作成しています。
アイコンのライセンスはGPL / CC BY 4.0に基づきます。
| アイコン制作 | アイコン |
|---|---|
| IcoMoon | link, clip |
| espaceオリジナルアイコン | web, earth, heart, star, text, mail, comment, home, file, pencil, book, image, human, clap |
ブランドロゴはブランドサイト、またはIcoMoonからお借りしています。
ブランドロゴの権利はブランドに属します。
それぞれのブランドを示す目的以外の用途では使用しないでください。
また、以下のサービスロゴについては、各ガイドラインを確認したうえでespaceにて追加したものです。
| サービス名 | ガイドライン |
|---|---|
| マシュマロ | ロゴ画像の利用について |
| pixiv | ガイドライン |
| Privatter | 直接ご連絡し、ロゴ画像をご提供いただきました |
| Misskey | アセット集 |
アイコン一覧
汎用アイコン
ブランドロゴ
設置方法
<head>~</head>の間で「icon-sns.css」を読み込みんでください
(href内のパスは環境に合わせて変更してください 不安な場合は、http://から始まる絶対パスで指定してください)
<link rel="stylesheet" href="icon-sns/icon-sns.css">
- ドキュメント(2ページ目にあります)に沿って、HTMLファイル内に記述してください
- サーバーにアップロードする場合は、不要なファイルを削除してください
軽量版について
ダウンロードファイル内に含まれる「icon-sns-lite.css」は軽量版ファイルです。
| 通常版 | 軽量版 | |
|---|---|---|
| 画像タイプ | svg | png(透過) |
icon-sns.cssの代わりにicon-sns-lite.cssを使用すると、png画像を使用した軽量版を適応します。
軽量版のデータを使用する場合、同梱の「icon.png」が必要です。
icon-sns-lite.cssとicon.pngを異なるディレクトリに配置する場合は、icon-sns-lite.css内のicon.pngのパスを変更してください。
サイトのデザインに合わせて設定する
このデザインでは以下のカスタムプロパティを変更することでデザインの変更が可能です。
| カスタムプロパティ | 概要 | 初期値 |
|---|---|---|
--eic-animation | アニメーションの時間 | 0.3s |
--eic-basic-color | 汎用アイコンの色 | |
--eic-text-color | テキストの色 | #333 |
--eic-shadow-color | デフォルトの影色 | rgba(0, 0, 0, 0.2) |
更新履歴
- 2020.09.10公開・配布開始
- 2020.10.23アイコン追加
web
- 2020.11.16以下4件の修正
- すべてのアイコンの余白とサイズを変更
youtubeアイコンを削除instagramアイコン色変更facebookアイコン変更
- 2020.11.17アイコン追加
pixiv
- 2022.04.15アイコン追加
privatter
- 2022.10.17仕様変更と追加
- CSSファイルのみで実装可能なように仕様変更
- 汎用アイコン5種(
earth,link,clip,heart,star)追加 - 追加テキストレイアウト追加
- アイコン無しのレイアウト追加
- アイコン設置エリア追加
- 2022.11.30仕様変更と追加
- 汎用アイコン9種(
text,mail,comment,home,file,pencil,book,image,human)追加 - 軽量版追加
- 汎用アイコン9種(
- 2022.12.07アイコンの追加と変更
- 汎用アイコン1種(
clap)追加 - 汎用アイコン2種(
home,file)をオリジナルアイコンに変更
- 汎用アイコン1種(
- 2023.01.13仕様変更
- カスタムプロパティの追加
- 色設定がしやすい仕様に変更
- 2023.02.08アイコン追加
mastodon
- 2023.05.19アイコン追加
misskey
ドキュメント
次のページにドキュメントをご用意しています。

