このブログをちょっと使いやすく、見やすくしようと細かなところをいくつか変更してみました。
スタイルシートを軽くいじったり、Movable Typeのプラグインを入れて頑張ってカスタマイズをしてみましたよ。
Movable Typeのカスタマイズについては、小粋空間を見ながらカスタマイズをしていきました。
4つのカスタマイズ内容を下に書いてみますね
ブログの横幅を広げた
このブログの横幅は今まで960ピクセルだったが
今回は横幅1000ピクセルまで広げちゃいました。
これで、エントリーに貼付ける写真を40ピクセル幅広く掲載できちゃう!
この変更方法はスタイルシートの中に記述されている、サイト全体の幅とエントリー部分の幅の数字を変更しただけです
トップページの下から過去のエントリーにどんどんアクセス
今まで、このブログのトップページは10個のエントリーを表示し、
11個目以降の記事へのアクセスができなくなっていた。
それを改善し今はトップページには最新のエントリー5つを表示し、それから過去のエントリーにもアクセスできるようにした。
下の画像のように、前後のページのリンクが表示されるようになりました。
カスタマイズのためにMovable Type のページ分割によるナビゲーションの前後ページ表示を絞り込む(改)を参照しました。
ここに書いてあることをそのまま実行したら無事実装できましたが、
いろんなファイルを変更するため、丁寧に焦らず時間をかけながら作業をしました。
しばらくPHPでのコーディングから離れているが、大学からC言語でプログラムを書いているせいかコーディングが好きである
Smashing MagazineにPHPでのプログラムを向上させる10個のコツが書いてあったので、ざっくり要約してみようと思う、これを機会に自分のPHPの知識をちょっとブラシアップできるかな
また、読者の方が参考にしていただけたら嬉しいです
PHPでのプログラムを向上させる10個のコツ
1. SQLインジェクションのチートシートを使う
SQLインジェクションはよろしくないものだ。SQLインジェクションによってハッカーが自分のデータベースに潜り込んでしまうためだ。PHPを使う人の多くはMySQLを使うため、MySQLを使うことを前提にして
よりセキュリティーの高いコードを書くためにチートシートを使って抜け漏れの少ないコードを書くことができるだろう
英語だけど、ここにSQLインジェクション チートシートがありますよ
Movable Typeでケータイサイトを作りたいときに
いくつかの方法があるが、
僕はケータイキットを使ってケータイ対応ブログを作った
起用理由は以下の3つだ
・各キャリア(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サイトがここだ
さらに、インストールがとても簡単で最高に嬉しい!
適用したページは以下の3つだ
ZEN DISTRO写真ページ
ZEN DISTROビデオページ
ZEN DISTROチームライダーページ
インストール手順は以下だよん。
1.自分のサイトのサーバーにReflection.jsとPrototype.jsをアップロードする
2.自分のサイトに上の2つのJavaScriptを読み込ませる。
こんな感じ↓
<script type="text/javascript" src="js/reflection.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
3.反射効果をしたい画像に class='reflect' と書き込めばOK!
こんな感じ↓
<img src='image.jpg' border='0' class='reflect'/>
しかも、反射効果の長さ、透明度も指定できるんだ。
例えば、反射効果がデフォルトでは画像の高さの50%なんだが、
画像の高さの20%にしたいときは以下のように書けばOK!
class='reflect rheight20'
簡単そうでしょ?簡単なんだよね。
やりたい人はやってみよう!!
ここから探したんだここ
次長課長のショートムービーが見れる!!
ロバートのショートムービーが見れるし。
藤森慎吾君の1人暮らしっぷりを見れますよ。