Ajax, CSSなどWeb作り技術情報 Archive

このブログをちょっと使いやすく、見やすくしようと細かなところをいくつか変更してみました。
スタイルシートを軽くいじったり、Movable Typeのプラグインを入れて頑張ってカスタマイズをしてみましたよ。
Movable Typeのカスタマイズについては、小粋空間を見ながらカスタマイズをしていきました。
４つのカスタマイズ内容を下に書いてみますね

ブログの横幅を広げた

このブログの横幅は今まで９６０ピクセルだったが
今回は横幅１０００ピクセルまで広げちゃいました。
これで、エントリーに貼付ける写真を４０ピクセル幅広く掲載できちゃう！
この変更方法はスタイルシートの中に記述されている、サイト全体の幅とエントリー部分の幅の数字を変更しただけです

トップページの下から過去のエントリーにどんどんアクセス

今まで、このブログのトップページは１０個のエントリーを表示し、
１１個目以降の記事へのアクセスができなくなっていた。

それを改善し今はトップページには最新のエントリー５つを表示し、それから過去のエントリーにもアクセスできるようにした。
下の画像のように、前後のページのリンクが表示されるようになりました。

カスタマイズのためにMovable Type のページ分割によるナビゲーションの前後ページ表示を絞り込む（改）を参照しました。
ここに書いてあることをそのまま実行したら無事実装できましたが、
いろんなファイルを変更するため、丁寧に焦らず時間をかけながら作業をしました。

続きを読む

しばらくPHPでのコーディングから離れているが、大学からC言語でプログラムを書いているせいかコーディングが好きである
Smashing MagazineにPHPでのプログラムを向上させる10個のコツが書いてあったので、ざっくり要約してみようと思う、これを機会に自分のPHPの知識をちょっとブラシアップできるかな
また、読者の方が参考にしていただけたら嬉しいです

PHPでのプログラムを向上させる10個のコツ

1. SQLインジェクションのチートシートを使う

SQLインジェクションはよろしくないものだ。SQLインジェクションによってハッカーが自分のデータベースに潜り込んでしまうためだ。PHPを使う人の多くはMySQLを使うため、MySQLを使うことを前提にして
よりセキュリティーの高いコードを書くためにチートシートを使って抜け漏れの少ないコードを書くことができるだろう
英語だけど、ここにSQLインジェクション　チートシートがありますよ

続きを読む

Movable Typeでケータイサイトを作りたいときに

いくつかの方法があるが、

僕はケータイキットを使ってケータイ対応ブログを作った

起用理由は以下の３つだ

・各キャリア（Docomo,au,Softbank）と機種対応ができる

・サーバーへの負担が少ないもの
　ビルドを行うときにケータイサイトも一緒にビルドしてくれる

・自分で作るより早くできて、高品質なサイトが作れる

続きを読む

最近、素敵な友人ができた

Geekなぺーじというサイト＆ブログを運営しているあきみちさんだ

Geekなぺーじはプログラミングなどの技術的なことも書いてあるが

運営者が深く考えてこと、ネタなども書いてあり

ITにすっごく詳しくなくても十分に楽しめる内容だと僕は思う

そんなあきみちさんのアドバイスもあり、このブログの上にメニューを付けてみた

続きを読む

インターネットって、もう動画が満載だよね

動画の配信フォーマットでFLASH Videoのユザービリティーが高かったりする

僕みたいにFLASHを全然使えないけど、FLASH　Videoのインターフェースは使いたいんだよと言う人いませんか？

続きを読む

CMS（Contents Manegment System）を作っている人いますか？

テキスト入力はTextareaを使ってますか？

Textareaに入力したテキスト、改行、リンクなどは自動的にHTMLに変換したりしてますか？

僕してましたが、いいものを発見して今はやってないんだよね

続きを読む

以前、自分が作ったZEN　DISTROのサイトにYahooが提供している

ライブラリーYahoo User Interface（YUI）を適用したという記事を書いた

そのYUIをベースに画像のスライドショーをするというまた、素敵な機能を作った人がいるので

続きを読む

使いやすくて、かっこいい！！ギャラリーが作れるぜ！

僕が今回適用してみたサイトのページは、これまたZEN DISTROのライダー写真ページです。

僕の写真もたくさんあるので、見てみてください。

で、これは写真のサムネール画像をクリックするとモワッて感じで写真が出てくるんだ。

別窓が開くわけでもなく、開いているブラウザ上で画像が展開するので、見ているユーザーは使いやすくて楽チン。

大元のサイトは英語で書いてあるんだけど
インストール方法をざっくり紹介しますね。

続きを読む

流行のAjax関連サイトを徘徊していたら、こんなのを発見！

例えば、新しいMacだと、画像が水に反射したように表示しているよね？

こんな感じで
画像の下にその画像の反射が見えるよね。まるで湖面に浮いているような感じ↓

で、自分のWebサイト、企画書でも簡単にこれが実現できたらいいな、と頭の端っこで思っていたんだ。

こんなリフレクション（反射）効果をJavaScriptで簡単に実現してしまうものを発見して感動した。

そのWebサイトがここだ

さらに、インストールがとても簡単で最高に嬉しい！

適用したページは以下の３つだ
ZEN　DISTRO写真ページ
ZEN　DISTROビデオページ
ZEN　DISTROチームライダーページ

インストール手順は以下だよん。

１．自分のサイトのサーバーにReflection.jsとPrototype.jsをアップロードする

２．自分のサイトに上の２つのJavaScriptを読み込ませる。
　　　　こんな感じ↓
　　　　<script type="text/javascript" src="js/reflection.js"></script>
　　　　<script type="text/javascript" src="js/prototype.js"></script>

３．反射効果をしたい画像に　class='reflect'　と書き込めばOK!
こんな感じ↓
　　　<img src='image.jpg' border='0' class='reflect'/>

しかも、反射効果の長さ、透明度も指定できるんだ。

例えば、反射効果がデフォルトでは画像の高さの５０％なんだが、

画像の高さの２０％にしたいときは以下のように書けばOK!

class='reflect rheight20'

簡単そうでしょ？簡単なんだよね。

やりたい人はやってみよう！！

ここから探したんだここ

次長課長のショートムービーが見れる！！

ロバートのショートムービーが見れるし。
藤森慎吾君の1人暮らしっぷりを見れますよ。

アメリカYahoo!がYahoo! User Interface Library：ヤフー　ユーザー　インターフェース（YUI）ライブラリーってのを公開した。

■Yahoo User Interface(YUI）って何？

続きを読む