WEBフォントのWEBサービス「Fonts.com 」の使い方

(1)「Fonts.com 」のWEBフォントのページ行く
(2)アカウントを作る。
※この時無料のプランは月間25000PV以内のWEBサイトで3000フォント使えるというようなプランを選べば無料でWEBフォントが使える。
(3)プロジェクト名を決める、プロジェクト毎に複数のサイトでWEBフォントを設定できる。

 (4)名前を決めたらプロジェクトで使う「フォント」「WEBフォントを使用するドメイン」「WEBフォントを使用するフォントを囲むタグやid,class名」を指定する。

※Add & Edit CSS Selectorsは例えばWEBサイト全体に効かせたいのであれば
htmlやbodyタグを指定する。任意の場所のみに効かせたい場合はそのフォントを囲むhtmlのidやclass名を指定すれば良い。

(5) プロジェクトの設定画面右のメニュー「Publish Options」を選択する。
JSのリンクが出てくるのでそのリンクをhtmlの<head>の中に記述する。

 

(6)JSリンクの下にWEBフォントを指定するCSSが記述されているので
それをCSSに書き込む。

(7)htmlとCSSをプロジェクトで登録したドメインのサーバー上にあげれば完成。

(8)ちなみに無料版は右端にバナーが入るらしいがdiplay、noneとかで
消えるので気になる場合はCSSで消せる。

「jQuery.flickable」スマホでもPCでドラッグとフリック操作でスクロール

http://lagoscript.org/jquery/flickable/demo

<元サイト>
http://lagoscript.org/jquery/flickable/demo

backgorudで指定したボタンがマウスオーバーで消えるのをCSSのみで解決する。

最近まで知らなかったのだが
backgorudで指定したボタンがマウスオーバーで消えるのを
CSSのみで解決する方法があったのでメモ。

<html>
<ul> <li class="nav1"><a href=""><img src="nav1_off.gif" alt="menu1" /></a></li> <li class="nav2"><a href=""><img src="nav2_off.gif" alt="menu2" /></a></li> </ul>

＜CSS＞
 ul li { float:left;} /*横にならべる時ね*/ ul li a { display:block; width:140px; height:30px;} /*ナビゲーションの大きさ*/ ul li.nav1,　/*ここ重要*/ ul li.nav1 a:hover { background:url(nav1_on.gif);} ul li.nav2,　/*ここも重要*/ ul li.nav2 a:hover { background:url(nav2_on.gif);} ul li a:hover img { visibility:hidden;}

<参考サイト>
http://www.komacchi.com/blogs/2010/07/css.php

(wordpress)最新の記事のみ違う表示やCSSを効かす。

(wordpress)最新の記事のみ違う表示やCSSを効かす。


<?php $first = true; if(have_posts()){ while(have_posts()){ the_post(); echo '<dl>'; if($first){ $first = false; echo '<dt id="firstNews">' . get_the_date('Y.m.d') . '</dt>' . '<dd id="firstNews">' . get_the_content() . '</dd>'; }else{ echo '<dt>' . get_the_date('Y.m.d') . '</dt>' . '<dd>' . get_the_content() . '</dd>'; } echo '</dl>'; } } ?>

＜参考URL＞
http://ja.forums.wordpress.org/topic/3562

simpleWeather - 天気を表示するためのjQueryプラグイン

<参考URL>
http://blog.creamu.com/mt/2012/08/simpleweather_-_jquery.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+creamu%2FhLkA+%28CREAMU%29&utm_content=Google+Reader

« グラフィカルな&(and, ampersand)のフォント | トップ | Redactor - 美しいWYSIWYGエディタ » BIGVIDEO.JS - フルスクリーンの背景に動画を埋め込むためのjQueryプラグイン

<参考URL>
http://blog.creamu.com/mt/2012/08/bigvideojs_-_jquery.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+creamu%2FhLkA+%28CREAMU%29&utm_content=Google+Reader

illustratorでかすれさせる表現方法

「illustratorでかすれさせる表現方法」

(1)「透明」ウィンドウの左上にある▼から「オプション」を選ぶ。

(2)不透明マスクを設定を押す。

(3)フォトショのマスクのようなものが「透明」ウィンドウに表示されるので
それを選択する。

(4)線の色を黒色にして「ブラシ」ウィンドウから荒いブラシなど選んで
なぞるとそこが透明になる。(完了)

 <参考サイト>
http://forty-n-five.boy.jp/blog/2011/05/illustrator_12.php