CoffeeScriptでjQuery使うときのメモ
Posted: 2012.11.19 / Category: javascript / Tag: jQuery CoffeeScriptでjQuery使おうと思ったらいろいろと戸惑ってしまったのでメモです。 とりあえずCoffeeScriptでjQuery使えるようにする JSでjQueryのコードを書き始めるとき「$(document).ready」を省略した形で下記のように書くことが多いと思います。 JavaScript $(function() { // jQueryスクリプト }); これをCoffeeScriptにするとこうなります。 CoffeeScript $ -> # jQueryスクリプト これでjQueryがいつものように使用できますので、あとはさくさく書けると思います。 試しに「p」のテキストカラーを赤にしてみます。 CoffeeScript $ -> $('p').
WindowsにCompassをインストールしてSASS/SCSS環境を構築する
SASSはRubyのgem（プログラム）なります。 Macには最初からRubyが入っているのですが、Windowsだと入っていないのでインストールしましょう。 インストーラーを使用すると簡単です。下記URLからダンロードしてください。 ここでは現時点で最新版の「Ruby 2.0.0-p0」をダウンロードしてみます。 RubyInstaller インストールするときに、環境変数のPATHをチェックしておきます。 スタートアップメニューの「アクセサリ」から「コマンド プロンプト」を起動します。 ruby -v と入力して ruby 2.0.0p0 と表示されたらインストール完了です。 Compassのインストール 「コマンド プロンプト」から下記のコマンドを順に実行します。 gem update --system gem install compass 下記コマンドでインストールされたか確認し
SASSもCoffeeScriptもGuardでまとめて自動コンパイル
「gem install」で必要なライブラリをインストールします。 $ gem install guard $ gem install guard-compass $ gem install wdm 「gem list」でちゃんとにインストールされたか確認してみましょう。 CompassでSASS（SCSS）をコンパイル 「cd」で作業ディレクトリ（works）に移動して、 $ cd /c/works/ 下記コマンドを実行すると「Guardfile」ファイルが作成されます。 $ guard init compass ファイル構成はこんな感じです。 works ├Guardfile └assets ├config.rb ├css └sass 「assets」ディレクトリの中は基本的にCompassの設定になります。特に「config.rb」の設定に関しては先ほどの記事を参考にしてください。
WordPressのサイト内検索の検索条件をカスタマイズする
※WordPress3.3.2を使用しています。 2012.06.01 「投稿記事だけ検索したい」に抜けている部分があったので修正しました。 検索フォームの設置 一つのテキストフォームだけで検索する場合は以下のコードを表示させたい位置に配置するだけですね。 wp template <div id="search-box"> <form method="get" action="<?php bloginfo( 'url' ); ?>"> <input name="s" id="s" type="text" /> <input id="submit" type="submit" value="検索" /> </form> </div> あとは「search.php」を作成して適当にループさせれば検索結果が表示されます。 投稿記事だけ検索したい 標準のサイト内検索は固定ページも検索範囲に含まれて
WordPressのユーザーページ(author.php)テンプレートをカスタマイズする
Posted: 2010.08.28 / Category: WordPress / Tag: テンプレートカスタマイズ, 管理画面 Wordpressを複数人で管理する場合ユーザーページ（authorテンプレート）を利用すれば、ユーザーごとの自己紹介ページを簡単に作成できます。 この記事では管理画面の「ユーザー編集」で入力した情報をユーザーページ（authorテンプレート）に表示させることから始め、「ユーザー編集」での不要な項目の削除や、最終的にはオリジナルのフィールドを追加するということをやったりしてみます。 ユーザーページを確認してみる。 まずユーザーページを確認してみましょう。 ブログURLのあとに「/author/[ユーザー名]」でユーザーごとのページが表示されます。 http://www.example.com/author/[ユーザー名] 何も設定していないとアーカイブページ
WordPressのプラグインを開発しよう（初級編）
プラグインってなんだろう。 WordPressのテンプレートをカスタマイズしてるとfunctions.phpにコードを書くことがあると思います。 基本的にこのコードをプラグインフォルダに入れるだけでプラグインになります。 そのテンプレートに依存したものはfunctions.phpに記述したままでもいいと思いますが、ある程度使い回せるものでしたらプラグイン化すると良いと思います。 簡単なプラグイン 簡単な例を見てみましょう。 functions.php に次のようなコードがあるとします。 functions.php function show_text() { echo 'おはようございます。'; } これはテンプレートファイルに「<?php show_text(); ?>」と書くと「おはようございます。」と表示するだけのコードです。 これをプラグイン化してみます。 プラグインは「wp-co
jQueryでスクロールすると表示する系いろいろ
Posted: 2012.03.08 / Category: javascript / Tag: jQuery, アニメーション 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
