ページ内リンクをスマートにするsmoothScroll.js[to-R]
ページ内リンクをスマートにするsmoothScroll.js ページ内リンクをスムーズに行うjsライブラリ、smoothScroll.jsを作成したので公開します。 どういったものかはサンプルで確認してください。 <a href="#header">ページの先頭に戻る</a> などのページ内リンクをスムーズな移動に変更します。 これにより、エンドユーザーがページが遷移したという錯覚におちいることはありません。 設置方法は簡単です。 smoothScroll.jsをダウンロードして、設置したいページで取りこみます。 <script type="text/javascript" src="./smoothScroll.js"></script> 特定のリンクはスムーズさせない smoothScroll.jsは#（ハッシュ）付きのリンクを全てスムーズスクリプトに変換します。他のライブラリなどで#
![ページ内リンクをスマートにするsmoothScroll.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
alphafilter.jsが透過pngのロールオーバーに対応
alphafilter.jsが透過pngのロールオーバーに対応 IE6用の透過pngライブラリ「alphafilter.js」が透過pngのロールオーバーに対応しました。 透過機能はIE6で画像の拡張子がpngの場合のみですが、ロールオーバーはすべてのブラウザ、jpg、gif、png形式の画像で利用いただけます。 img要素の場合class属性に「btn」と付ければロールオーバーの処理を行います。 <img src="./sample.png" class="btn" alt="" /> sample.pngの場合はsample_on.pngのように拡張子の前に「_on」が付いた画像をロールオーバー時に表示します。 透過機能と合わせて利用する場合は、以下のように指定します。 <img src="./sample.png" class="alphafilter btn" alt="" />
Google Analyticsのカスタムレポートでもっとアクセス解析
Google Analyticsのカスタムレポートでもっとアクセス解析 Google Analyticsにはカスタムレポートという設定があり色々とカスタマイズした分析結果を表示することが出来ます。 ためしにサイトのブラウザシェアを表示してみましょう。 通常ですと、ユーザー > PC環境 > ブラウザ からブラウザシェアを見ることが出来ます。 これで、「このサイトFirefoxのシェアが44%もあるよ」とか「IEが28%ね」、「Chromeの勢いがすごい」、「たまにはOperaのことも思い出してあげてください」などが分析できます。 さらにブラウザ名をクリックすると詳細を見ることが出来ます。 これでIEのバージョンのシェアを見ることが出来ます。「IE8が60%もあるのか」とか「IE7がIE6を超えてるね」とか「IEのシェアが28%でIE6が18%ということはIE6のブラウザ全体でのシェアは4.
jQuery基礎文法最速マスター[to-R]
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
アルファ画像を扱うalphafilter.jsライブラリ[to-R]
アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a
MTのコメントスパムをなくす.htaccess
MTのコメントスパムをなくす.htaccess 運営しているサイトのひとつでコメントスパムが急増したので.htaccessによるスパム対策を行いました。 .htaccessに次のような記述を書くとコメントスパムがほとんどなくなります。 「http://blog.webcreativepark.net」を運営しているサイトのドメインに変更してください。 <Files mt-comments.cgi> SetEnvIf Referer "^http://blog.webcreativepark.net" ref order deny,allow deny from all allow from env=ref </Files> リファラーを確認してリファラーがサイトのドメインと異なる場合mt-comments.cgiへのアクセスを弾く仕組みになっています。 .htaccessはmt-comme
Fireworksでfaviconを作成
Fireworksでfaviconを作成 CSS Nite in Omotesando, Vol.1 「Fireworksビギナーのための120分徹底トレーニング」でFireworksでは拡張機能を利用すればfavicon(ファビコン)を作成できると紹介されていたので早速試してみました。 拡張機能のダウンロードとインストール Favicon - Adobe Fireworks Extensionsより拡張機能（ExportAsFavicon-100.mxp）をダウンロードします。 mxpはAdobe Extension Managerで利用できる拡張子で実行することでAdobe製品に拡張機能をインストールすることができます。 実行後、Adobe Extension Managerが立ち上がり拡張機能インストールの免責が表示されますので承認してインストールを行います。 (注意:Windows
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
