Ajax, CSSなどWeb作り技術情報アーカイブ

ブログの細かなナビゲーションを改善&アップグレード!【Movable Typeカスタマイズ】

  • このエントリーをはてなブックマークに追加

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

 

ブログの横幅を広げた

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

 

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

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

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

indexarchive.jpg

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

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

  • このエントリーをはてなブックマークに追加

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


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

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

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

Movable Typeで高機能ケータイブログを作る

  • このエントリーをはてなブックマークに追加

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

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

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

起用理由は以下の3つだ

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

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

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

CSSメニュー自動作成をしてくれるサイトを利用して速攻メニュー作成

  • このエントリーをはてなブックマークに追加

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

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

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

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

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


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

FLASH Video Playerを簡単に使いたい!!

  • このエントリーをはてなブックマークに追加

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

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

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

CMS作っている方には便利ですよSPAW2 テキスト入力エリア

  • このエントリーをはてなブックマークに追加

CMS(Contents Manegment System)を作っている人いますか?

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

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

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

Yahoo User Interface(YUI)ベースのスライドショーを実装

  • このエントリーをはてなブックマークに追加

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

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

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

lightbox.jsでかっこいいギャラリー

  • このエントリーをはてなブックマークに追加

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

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

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

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

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

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

画像の反射エフェクトをJavaScriptで簡単に実現

  • このエントリーをはてなブックマークに追加

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

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

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

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


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

そのWebサイトがここ

reflect2.jpg

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

適用したページは以下の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人暮らしっぷりを見れますよ。

yoshimoto1.gif

Yahoo!が提供するレイアウト用CSSライブラリYahoo User Interface(YUI)をZEN DISTROに適用

  • このエントリーをはてなブックマークに追加

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

■Yahoo User Interface(YUI)って何?