2012年05月27日

【フリーフォント】中国語のフォントを無料でダウンロード!

中国語を含むデザインを行う場合、必須となるのが『中国独特の漢字のフォント』。デフォルトフォントで中国語対応できているフォントもありますが、やはりデザイン時には種類がほしいもの。そんな時に便利なサイトがこちらです。

http://font.knowsky.com/

このサイトではかなり多くのフリーフォントを多数公開していて、ほしい書体を見つけるのが大変なほど。ゴシック、明朝のほか、手書き風、ヘタ字、カワイイ文字など、種類もさまざま。利用の手順は下記の通りです。
※私自身、いくつかダウンロードしてウィルスチェックも行い、インストールまで問題無かったので記事として書いておりますが、実行は自己責任にてお願いします

1.「●●書体」というリンクをクリックしてみると、サンプル付きでフォントの一覧が表示されます。

2.ダウンロードしたいフォント名のリンクをクリックします。

3.『字体下载镜像(1)』の『点击下载』、もしくは『字体下载镜像(2)』の『点击下载』(ミラーです)をクリックします。

4.数字を入力して『点击下载』をクリックし、ダウンロードします。(このページは文字化けしている場合がありますが、DLは問題なし)
pic.jpg

rar形式でダウンロードされますので、WinRAR等の解凍ソフト等を使用して解凍します。中にフォントファイルが入っていますので、あとは通常とおりフォントをインストールします。中国語ウェブサイト、中国語を必要とするデザインが必要な際はオススメなサイトでした。
posted by ino at 12:26 | Comment(0) | TrackBack(0) | サイト制作 | このブログの読者になる | 更新情報をチェックする

2012年05月12日

PHPで指定した月の日数を取得

PHPで自作カレンダーを作ってみたところ、指定した年月の日数や、指定した日の曜日が取れずに困った時のメモ。

echo date("t");

これで現在の月の日数が表示されるわけですが、あくまで現在の月です。そこで、年月を指定したい時は下記のように記述します。

echo date("t", mktime(0, 0, 0, $month, 1, $year));

同様に、特定の日の曜日は下記のように取得。

echo date("w", mktime(0, 0, 0, $month, $day, $year));

※$month, $day, $year は、それぞれ 月,日,年 を記述


基本がわかってないからこそつまづいたdate()でございました。
posted by ino at 00:08 | Comment(0) | TrackBack(0) | PHP | このブログの読者になる | 更新情報をチェックする

2012年03月10日

SEO対策がスパム認定されるととても困る事を身をもって体感した件

SEOとスパム。アクセスを上げたいがために行ったSEO対策が、気付かないうちにスパムと認識されてしまう、という話が現実になってしまった体験談。

事の発端はyahoo!APIの「関連ワード検索」という機能と、PHPによるリファラー取得を掛け合わせ、「検索ワードに関連するページを自動的に作成」し、尚且つ「リファラーにキーワードに紐づく情報を他のAPIで表示」という、全自動運営サイトを作成してみたわけです。最初の1ヶ月は驚くほど順調にアクセスがのび、「これは安泰や〜」と思い量産してやろうかと思っていたところ。。。

一日数千ユニークにまで伸びていたアクセス数が、いきなり一桁に!!

運営開始後すぐにアクセス数が急増するのは良くない!という話も聞いた事があるので、「気長に待ってみよう」と考え、待ってみる事にしました。

そして待つこと半年。下がったアクセスはそのまま。インデックス数はトップのみの1ページ。これは怪しいと思い、その後一度、サイトのデータを消去し、インデックス削除依頼をgoogleに出し、更に待つこと1ヶ月。その後、再度データを戻し、公開して待つこと1ヶ月。そこまでしても、アクセスが戻る気配がありません。

じつはその間、打開策の一つとして、ニュース記事を収集してDBに格納、という事をおこなっていたのですが、「APIを一切使用せず、そのニュースコンテンツだけ別ドメインで運営したらどうなるだろう?」と思い、別ドメインを取得して公開してみました。

すると。。。

なんとなんと、みるみるアクセスが伸び、3ヶ月ほど運営している現在、アクセスの急増は無いものの、順調に伸びています。この検証から、下記のような傾向があると感じましたので、悩める方々の参考になればとおもいます。

・API(XML)使用で取得した情報を中心としたサイトの構築は良くない
・ただ、API等で取得した情報を一旦DBに格納し、DBに入れた情報を元にコメントやランキング等の独自要素を持たせれば、「情報の多いサイト」として認識される可能性が高い
・一度スパムとして評価されてしまったドメインは、なかなか(全然?)元に戻らない

以前から何となく感じてはいましたが、APIで取得した情報は、外部の情報を参照していることが明らかなので、評価が低くなりがちです。それが一旦DBに格納することで解消し、尚且つ独自要素を持たせることで、よりコンテンツとしての評価が上がる傾向があります。

全てに当てはまる訳ではなく個人的見解ですが、一つの事例でございました。
タグ:スパム
posted by ino at 23:13 | Comment(0) | TrackBack(0) | ネット情報 | このブログの読者になる | 更新情報をチェックする

2012年03月06日

【CSS3】スマホサイト制作 - 縦横表示切り替えに対応するためのCSS記述方法

便利な便利なスマホですが、サイトの作り手としては便利な分、気を使わなくてはいけないポイントも多く、疲れる対象になるコトもあります。そんな疲れるポイントの一つが「縦向きと横向きで表示サイズが異なる」事。全てをパーセント指定すれば難なく表示されるだろうが、そうはいかないのが困ったものです。

JSか?PHPか?何かしらプログラムで振り分けを検討していたところ。なんとCSSの記述で縦向きと横向きそれぞれの記述が可能なのですね。しかもその書き方はとてもシンプル。


例)
@media only screen and (orientation : landscape) { /*横向きの際に適用*/
#main{ width: 480px;}
}

@media only screen and (orientation : portrait) { /*縦向きの際に適用*/
#main{ width: 320px;}
}


見てすぐに分かるとおり、横向きの際に適用したい内容は『orientation : landscape』、縦向きの際に適用したい内容は『orientation : portrait』に、それぞれ書くだけでOK。簡単。素晴らしい機能ですね。

先日書いた『【CSS3】縦横の表示を切り替えた際にフォントサイズを同じにする記述』と合わせると、縦でも横でも同じイメージでの作成が容易に可能。分かれば便利なスマホ向けCSS3の記述でした。
posted by ino at 00:55 | Comment(0) | TrackBack(0) | サイト制作 | このブログの読者になる | 更新情報をチェックする

2012年02月18日

animateで移動させながら回転、拡大、縮小できるプラグイン『Animate CSS Rotation and Scale』

jQueryの便利なアニメーション機能「animate」。文字通りアニメーションを行うための関数ですが、移動は出来ても回転や拡大はできません。写真をクルクル回転させてアニメーションさせたい!そんな時に使える便利なプラグインが『Animate CSS Rotation and Scale』です。

Animate CSS Rotation and Scale
http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

まずは上記ページ中段ほどにある『Download』から『jquery-css-transform.js』と『jquery-animate-css-rotate-scale.js』をダウンロードします。また、jQueryも最新版をダウンロードしておきます。

続いて<head>内に下記のように記述。jQueryは先に記述してください。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-css-transform.js"></script>
<script type="text/javascript" src="jquery-animate-css-rotate-scale.js"></script>

続いてアニメーションさせたいオブジェクトに任意のIDをつけます。

例)画像の場合
<img src="画像ファイルパス" alt="" id="anime" />

そして下記のように記述します。

例)<a href="javascript:click();">ボタン</a>をクリックした場合
<script type="text/javascript">
function click(){
$('#anime').animate({"left": "-=100px", "top": "-=100px", rotate: '-=45deg', scale: '1.50'}, 500);
}
</script>

仕様は下記の通り。

$('任意のID').animate({"left": "左右の移動", "top": "上下の移動", rotate: '回転', scale: '拡大/縮小'}, ミリ秒もしくはfast,normal,slowによる早さ);

これによりアニメーションの幅が広がります。スマホ系の開発でとても役立ちますね。
タグ:jquery
posted by ino at 13:53 | Comment(0) | TrackBack(0) | サイト制作 | このブログの読者になる | 更新情報をチェックする