読者です 読者をやめる 読者になる 読者になる

flandlescarlet's diary【情報工学生の備忘録】

元機械工学科所属だった情報工学生です。JavaScriptで適当に何かを作ったり、絵を描いていたりします。

有料のボタンが無料で公開されたと聞いて

Sampleのボタンを移動する時は相対パスも書き換える

 

Tip with Flattr Follow me on Tumblr Subscribe to my Posterous Check in with Gowalla Check in with foursquare Write a review on Yelp
Follow me on Soundcloud Read on Smashing Magazine Sign in with WordPress Sign in with IntenseDebate Sign in with OpenID Sign in with Gmail
Sign in with Eventbrite Sign in with Eventasaurus Sign in with Meetup.com Follow me on Plancast Subscribe on YouTube Available on the Mac App Store
View Creative Commons Licence Subscribe to RSS Follow me on Weibo Follow me on Plurk Follow me on Grooveshark


とりあえず提供元のサイトはこちらです。

http://gigazine.net/news/20120130-zocial-css3-buttons/

まずSampleをダウンロードしますが、フォルダの中は

  • CSS
  • Type
  • README
  • Sample.html

の4つが同梱されています。

CSSのファイルをそのままアップしてリンクさせて反映させたいところですが、うまくいきません。

理由としては、Typeフォルダの中にある4つのファイルを呼び出す時にその4つのファイルが全て相対パスで記されてしまっているため、見本のような綺麗なアイコンではなくて、文字が並んだ(代替えテキスト)ものだけが表示されてしまいます。

変更箇所はこれです。

ピンクの部分が相対パスになっていますので、4つのファイルを個人でアップして

それぞれ適応する部分を絶対パスに書き換えればOKです。

 /*Vector Icons*/
@font-face {
	font-family: 'zocial';
	src: url('..type/zocial-regular-webfont.eot');
	src: url('..type/zocial-regular-webfont.eot?#iefix') format('embedded-opentype'),
	url('../type/zocial-regular-webfont.woff') format('woff'),
	url('..type/zocial-regular-webfont.ttf') format('truetype'),
	url('..type/zocial-regular-webfont.svg#ZocialRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}
 

ちなみに、CSSの適応方法ですが

 @import "url";

@import宣言、これは使えません

何故かはてなブログでは呼び出せないようです。

 <link rel="stylesheet" href="">

使うならこれになります。

少し邪道ですがサイドバー編集部の所にこれを記入してcssファイルの直リンクを当てます。

実質<body>内に書かれることになりますが、反映させるためにはやむをえません。

これらのボタンを使ってデザインを考えていくのも良いかもしれません。

※P.S.Chrome以外の場合は文字列になるようです