WordPressの日付を画像で表示してみる
最近はCSS3のWebfontとか出てきて英数字においてはフォントの自由度はかなり増えてきましたね。
日本語の環境でもブログの日付なら数字だけなので積極的に使っていけそうです。
しかし、ここではそんな時代の波に乗り遅れてWordpressの日付部分を画像で出力してみます。
- 投稿日
- 更新日
最近はCSS3のWebfontとか出てきて英数字においてはフォントの自由度はかなり増えてきましたね。
日本語の環境でもブログの日付なら数字だけなので積極的に使っていけそうです。
しかし、ここではそんな時代の波に乗り遅れてWordpressの日付部分を画像で出力してみます。
CakePHPではアクションごとにViewを作成しますが、headerやfooterはlayoutsで書くのですべて共通になっていると思うんですよ。
で、このアクションではこのcssを読み込ませたいなと考えたとこでちょっとだけつまずきました。
Twitterのトップページは人気のツイートが次々とスライドして表示されてますね。
この記事ではjQueryを使用して見た目のスライドするだけの部分を再現してみたいと思います。
MacPortsでなんとかPHPを動かしたり、MySQLをいれたりできたのですが、ここまできたら次はフレームワークですよねと。CakePHPですよねと。
Windows（XAMPP）だと特に問題なくできましたが、Macでやったらまたまたはまってしまったのでメモです。
以前「jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種」という記事を書きましたが、画像メニューでわりと横型に並べたナビゲーションが多かったので、今回はテキストタイプの縦型ナビゲーションオンリーで作成してみました。
基本的にやってることは画像タイプのものとあまり変わらなかったりしますが……。
MacPortsを使用すればターミナルからコマンドを打つだけで、PHPやMySQLなどのオープンソースをインストールしてくれるらしいです。
MacでPHPを開発するにあたりMAMPPとどちらにしようかと悩みましたが、MacPortsを使用した方が色々小回りがきくらしいのでこちらにしました。
MacPortsをインストールすることろからはじめ、PHP&MySQLがいちおう動いているよね。というところまでやってみます。
jQueryでリストで配置したメニューなどのテキストカラーやバックグラウンドカラーなどを１行ごとに変化させてグラデーションで表示させます。