Foundation 4を使ってテーマを作ってみた

Twitter BootstrapやHTML KickStart、Blueprint等、CSS Frameworkの一つのFoundation 4を使ってWordPressのテーマを変えてみました。 本当はYUIのPureを使ってみようかと思っていたんですが、フォントの指定によって段落ちすることがある、という不具合が起きてしまったのでFoundation 4を使ってみました。 特徴 レスポンシブウェブデザイン対応のための仕組みが多数組み込まれており、基本的な事はFoundation 4の仕様で実装することが出来ます。 例えば、特定の幅より小さいウィンドウサイズの時の表示・非表示、グリッドのサイズ変更、メニューの格納・タップで表示等、便利な機能が多数含まれています。 使い方 Foundation 4は、「normalize....

次世代Zen-coding「Emmet」をSublime Text 2で試してみた

HTML/CSSのコーディングを効率化する「Zen-Coding」が次期バージョンで大幅に仕様を変更し「Emmet」と名称を変更するようなので、現在公開中のベータバージョンを試してみました。 Sublime Text 2にインストール Sublime Text 2(以下ST2)向けのEmmetはGitHunにて公開されていますので、レポジトリを追加してインストールすることが出来ます。 具体的な手順は下記の通り。 コマンドパレット(Win:Ctrl+Shift+p、Mac:Command+Shift+p)...

CSSの拡張メタ言語「LESS」についてちょっと調べてみた

前々から「LESS」という名前や、何となくどんなことが出来るのかについてはある程度知っていたのですが、環境を構築するのが面倒で触っていませんでした。 そんな中ちょっと、LESSのビルド環境を構築することがあったので、ついでに調べて使ってみる事にしました。 LESSについて LESSとは、CSSの拡張メタ言語で、簡単に説明するとCSSでこんなことがしたい…!という機能を加えた独自の言語です。 こういった拡張メタ言語については、同じCSSには「SCSS(Sass)」や、HTMLの「Haml」という言語が存在します。 また、LESSのコンパイル?はJavaScriptで実行するので、Node.jsを使ってサーバサイドで行うだけではなく、...

WordPressのRSSの見た目をCSSで変更してみる

折角ブログの見た目を変更したので、RSSもいじってみようと思い、CSSでのデザイン変更を行ってみました。 CSSを書いて、読み込ませるだけ・・・ではあったのですが、RSS用のテンプレートの適用方法が若干特殊だったので残しておきます。 RSSのテンプレートを変更する WordPressにはRSS用のテンプレートは用意されていないため、ソースファイルを触るしかないのかな?なんて思っていましたが、アップデートする度に元に戻ってしまうのがイヤなので、調べてみるとこんな方法で各種フィード用のテンプレートを実現できるようです。 上記記事は”functions.php”を書き換える方法ですが、プラグインも作成されているようなので、そちらを使ってみても良いかもしれません。 RSSにCSSを読み込ませる RSSのテンプレートが作成できるようになったら、CSSを読み込ませるように書き換えます。 HTMLとは少しだけ記述が違い、こんな感じになります。 <?xml-stylesheet...