APIで自由なテキストデザインをDesignTwitterFacebookはてブPocketLINEコピー2012.08.28スポンサーリンクお気づきの方もいらっしゃるかもしれませんが、当ブログの意匠をうっすら変えてみました。いっても全体構造は全くいじらず主に配色関係なのですが。ついでにサイトロゴもなんがかイマイチ気に入らないので変更することにしたんですけど、またそのまま画像使うのも面白くないのでウェブフォントなどを使ってみることにしました。APIというとなんだか難しそうで構えてしまいますが、サイト上で発効されるタグコピペするだけなので導入はめっさ簡単です!スポンサーリンク使えるフォントは500種以上ということで導入方法書いておきます。Fontsここから好きなフォントを自由に選んで使うことが出来ます。残念ながら日本語フォントはありませんが...それでもサイトタイトルや見出しなんかに使うには十分すぎるでしょう。使い方ですがサイト上のフォント一覧から好きなフォントを選択します。styles:書体の多い順Trending:トレンド順Trending:人気順などから選択できます。Text】という項目の後のテキストボックスに入力した文字列がそのままプレビューに使用されます。語句が決まってるときはこれを利用すると超便利です。フォントサイズも【Size】欄でピクセル単位で指定でき、プレビューに反映されます。利用したいフォントが決まったら使いたいフォントファミリーのリスト右側にある【Quick-use】をクリックします。するとこのようなページ遷移します。指定したフォントファミリーに書体が複数ある場合はまず利用したい書体を選択しチェックボックスにチェックを入れます。書体が多くなるとデータ呼び出し量も増えて結果的にページロード時間に影響しますので、必要最小限にしておきましょう。次にキャラクターセットの指定をします。Extended】(ラテン拡張)にチェックを入れるとキリル文字その他特殊記号が使えるようになりますが、不必要ならこれもデータ量圧縮のため不使用とします。一般的な英数字なら拡張無しでも問題なく使えるはずです。以上設定してページ下方へスクロールするとHTMLタグとCSSコードが発行されますので、これをそのままコピペすればすぐに利用することができます。HTMLはlinkタグがデフォルトで表示されますが、タブ切り替えで@importやjavascriptでも発効できます。通常はlinkタグで問題ないでしょう。これをHTMLソースのheadタグ内にコピペします。cssコードは単純なfont-familyプロパティですので、これを適用したい要素にコピペすればokです。試験的に当ブログのタイトルに利用したところ、体感的なロード時間には特に影響無さそうです。この辺気にしてウェブフォント利用に二の足を踏む人もいるかもしれませんが、あまり神経質にならなくてもよいのではないかなー、と思います。なによりhtmlではどうしても環境依存となってしまうフォントですが、ウェブフォント利用で環境依存せず表示したいものをそのまま表示できるというメリットは大きいのではないかな、と思います。当ブログのタイトル部では単にウェブフォント適用しただけですが、CSS3プロパティでtext-shadowかけてみたり、divで囲んで諸々のプロパティで装飾ボタン化したりなど、見出しやアイコン的な用途でも画像無しでいろんな応用ができるのではないかな、と思います。2012年9月版WEBデザイン時の参考にするのにサイトデザインのキャプチャをまとめたギャラリーサイト。その界隈の方が定期的にまとめ記事書いてますが2012年9月版ということでリンク切れチェック等兼ねて改めてまとめてみました。PC向け...Designいつも私の脳天を直撃するあのツイートみなさん一度くらいは聞いたことがあるであろうウェブサービス「twilog(ツイログ)」。ツイッターのツイートをブログ形式でログを残すサービスです。忘年会の幹事でビンゴの準備に忙しいごろどくですどうも。景品の一部に(たぶん)1等の当たる年末ジャンボ宝くじ仕込んどきました。(たぶん)必ず当たります。WCAN忘年会のビンゴ大会で景品がとても残念だった件。記事で角丸について語ってたので私も書いておくよ。朝刊は忙しいので1面と地方版だけざっと目を通すゴロドクです、どうも。新聞の広告なんてまず見ないんですが、この広告にはつい釣られてしまいました。人の目を一瞬でとらえるという意味では素晴らしいデザインの広告、かな。朝からTLが文化庁の違法ダウンロードの件で盛り上がっている。何がしか製作や創作をすることに携わっている人間としては、こういう話題はやっぱり触れておかねばならんよね。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。(1)スポンサーリンクタイトルとURLをコピーしました。