ウェブサービスのカラーに関するガイドラインとCSS
各webサービスのカラーをa要素の背景色に指定
各webサービスのカラーをa要素の背景色に当てたものです。
a要素のhref属性に各サービスの名称が入っていたら…という条件で判別しています。URLに該当サービス名を含む文字列が入っていたらっていう感じです。
E[foo*=”bar”] (属性選択子)については以前セレクタまとめを書いたので、良かったらそちらを参考にしてください。
>>RedLine Magazine : CSS セレクタ総復習 （2010年5月版）
a[href*="twitter"]{ background: #00aced; }
a[href*="facebook"]{ background: #3b5998; }
a[href*="github"]{ background: #171515; }
a[href*="wordpress"]{ background: #21759b; }
a[href*="google"]{ background: #cc3732; }
a[href*="youtube"]{ background: #cd201f; }
a[href*="tumblr"]{ background: #44546b; }
a[href*="instagram"]{ background: #3f729b; }
a[href*="dropbox"]{ background: #1087dd; }
各webサービスのカラーをa要素の文字色に指定
上記の背景色の場合と同様に今度は文字色に指定したバージョンです。
a[href*="twitter"]{ color: #00aced; }
a[href*="facebook"]{ color: #3b5998; }
a[href*="github"]{ color: #171515; }
a[href*="wordpress"]{ color: #21759b; }
a[href*="google"]{ color: #cc3732; }
a[href*="youtube"]{ color: #cd201f; }
a[href*="tumblr"]{ color: #44546b; }
a[href*="instagram"]{ color: #3f729b; }
a[href*="dropbox"]{ color: #1087dd; }
各webサービスのカラーをgenericonのアイコンに指定
前回チラっと書いたのですが、アイコンフォントGenericonsには各種webサービスのアイコンが含まれています。これもwebフォントとしても使えるし、ローカルPC内でも素晴らしい使い勝手を発揮してくれるアイコンフォントです。そちらのアイコンに色を付けるためのcss。
Genericons 配布元・ダウンロード
>>Genericons – a free, GPL, flexible icon font for blogs!
ダウンロードしてからwebフォントとして使う場合、ローカルPCで使う場合の手順みたいなのは前回の記事とほぼ同様なので割愛。
冒頭に書いたFind Guidelinesに掲載されていなかったサービスのアイコンの色は抜いています。
genericon.cssの72行目辺りに各ソーシャルアイコンに関する指定があります。その辺りを元にサンプルページではページ内で上書きしているので本来はcontent部分は不要です。（分かりやすいように一応サンプルソースには残しています）
/* Social icons */
.genericon-github:before { content: '\f200'; color: #171515; }
.genericon-dribbble:before { content: '\f201'; color: #ea4c89; }
.genericon-twitter:before { content: '\f202'; color: #00aced; }
.genericon-facebook:before { content: '\f203'; color: #3b5998; }
.genericon-facebook-alt:before { content: '\f204'; color: #3b5998; }
.genericon-wordpress:before { content: '\f205'; color: #21759b; }
.genericon-googleplus:before { content: '\f206'; color: #cc3732; }
.genericon-linkedin:before { content: '\f207'; color: #0977b5; }
.genericon-linkedin-alt:before { content: '\f208'; color: #0977b5; }
.genericon-pinterest:before { content: '\f209'; color: #cc2127; }
.genericon-pinterest-alt:before { content: '\f210'; color: #cc2127; }
.genericon-flickr:before { content: '\f211'; }
.genericon-vimeo:before { content: '\f212'; color: #1ab7ea; }
.genericon-youtube:before { content: '\f213'; color: #cd201f; }
.genericon-tumblr:before { content: '\f214'; color: #44546b; }
.genericon-instagram:before { content: '\f215'; color: #3f729b;}
.genericon-codepen:before { content: '\f216'; color: #000000; }
.genericon-polldaddy:before { content: '\f217'; }
.genericon-googleplus-alt:before { content: '\f218'; color: #cc3732; }
.genericon-path:before { content: '\f219'; }
.genericon-skype:before { content: '\f220'; }
.genericon-digg:before { content: '\f221'; }
.genericon-reddit:before { content: '\f222'; }
.genericon-stumbleupon:before { content: '\f223'; }
.genericon-pocket:before { content: '\f224'; }
.genericon-dropbox:before { content: '\f225'; color: #1087dd; }
汎用的なclass
いちいち任意の要素にclassを振らなきゃならないのですが、小回り利く汎用的なものも一応置いておきます。
//テキストカラー用
.twitter{ color: #00aced; }
.facebook{ color: #3b5998; }
.github{ color: #171515; }
.wordpress{ color: #21759b; }
.google{ color: #cc3732; }
.youtube{ color: #cd201f; }
.tumblr{ color: #44546b; }
.instagram{ color: #3f729b; }
.dropbox{ color: #1087dd; }
//背景用
.twitter{ background: #00aced; }
.facebook{ background: #3b5998; }
.github{ background: #171515; }
.wordpress{ background: #21759b; }
.google{ background: #cc3732; }
.youtube{ background: #cd201f; }
.tumblr{ background: #44546b; }
.instagram{ background: #3f729b; }
.dropbox{ background: #1087dd; }