WordPressで作られたWebサイトを無限スクロール出来るようにする
WordPressで作ったWebサイトを、 スクロールすると、次ページが 自動でロードされる無限スクロー ルが出来るようにする、という 方法です。今更感満載ですけど。
チュートリアル
単純なパララックス効果を少しのjQueryコードで作る
シンプルなパララックス効果 を少しのjQueryコードで作る というTips。プラグイン化さ れていますのでレイヤーの追加 も簡単です。
CSS専門のスニペット共有サイト・CSSPop
コードスニペットを共有できる Webサービスは沢山ありますが、 CSSPopはCSSを専門としたコード 共有サイトです。なかなか珍しい し、結構便利な小技も見かけま した。
WordPressのwp_enqueue_scriptで呼びだすJavaScriptファイルをフッター(wp_footer()内)に呼びだす方法
ご質問頂いたのと、ググっても あんまり情報を見かけなかった ので以外と知らない方もいるか もしれない、と思ったので書いて みます。JSファイルをフッターに 呼びだす方法。
WordPressで記事内に書かれたTwitterアカウント名を、@Anywhereを使わずに自動リンク化する
@Anywhereを使わずにWordPress で書かれた記事内のTwitterの アカウントを自動リンク化する、 という方法。正規表現で置換 します。無駄なjsも読み込まな いのでこちらの方が良いですね。
WordPressをCMSとして利用する際、固定ページの親ページと子ページに共通のナビゲーションを作るTips
WordPressは基本的にブログエンジンですが、カスタマイズ等でCMS化も可能になります。その際、固定ページのカスタマイズは多くの場合必須となります。その一環として親ページと子ページのナビゲーションの作り方をご紹介。
WordPressの自作ウィジェットの個人的な覚書
昨日ちょっと嵌ったのでメモ。 WordPressの自作ウィジェット で分からなくて調べたことを 備忘録として残しておきます。 面倒だけど覚えると便利ですね。
テキストでも画像でもルーペのように拡大できるjQueryのコード
よくある拡大鏡を実装するスクリプト です。マークアップも楽で、コード も少量で済むので参考にしました。 そんなに多用するUIではありませんが、 便利は便利なので覚えておきたいです。
ページ遷移不要の、シンプルなWebサイトを作るための軽量jQueryプラグイン・Pagify
よく見かける、ページ遷移のない Webサイトを作る為のjQueryプラ グイン。ですが、高機能な物では なく、極めてシンプルで、ライブ ラリも軽量です。サクッと作りた い時のテンプレにもいいかも。
WordPressのアイキャッチ画像に任意のデフォルト画像を登録する方法
WordPressのアイキャッチ画像は とても便利ですけど、全ての方 が毎回登録するとは限りません。 クライアントさんの中でもやはり 毎回登録するのは面倒だ、という 方もいます。
グローバルメニューとかでマウスホバーしているリンク以外にCSSだけでブラー効果を与える
JavaScriptでよく見かける、ホバー 状態のアイテム以外にエフェクトを かける、みたいなのをCSSで実装する という内容です。目新しい手法では 無いです。
GithubにあるHTMLをレンダリングしてその場で表示出来るChromeエクステンション・Githtml
個人的に嬉しいエクステンション だったのでご紹介。Githubにある リポジトリのHTMLをその場でレンダ リングし、デモとして表示させる 事が出来るChromeエクステンション、 Githtmlです。
チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか
フォームで利用するjQueryのスニペット コードをいくつか。どれも既出だと思う のでおさらいという事で。とはいえ、所詮 はスニペットですので実際に導入する際 は動作をしっかりと検証する事を強く 推奨します。
ol要素で利用出来るHTML5のreversed属性をjQueryでクロスブラウザ対応にする
HTML5でol要素でリストに振る番号 を逆にするreversed属性が追加され ました。と言ってもまだChromeしか サポートしていません。便利っちゃ 便利なのでjQueryで他ブラウザに 対応します。
ChromeのデベロッパーツールでCSSの未使用セレクタを調べる方法
Google Chromeのデベロッパーツール で現在閲覧中のページでロードされて いるCSSファイルから未使用のセレクタ を調べる、という方法です。こんなの Web制作者にとって常識だろ、みたい な内容だったらごめんなさい。
iPhone4のRetinaディスプレイで閲覧したらjQueryでRetina向け画像(@2xのやつ)に自動で切り替える
iPhone4のRetinaディスプレイで閲覧 された際に自動で高解像度の画像に 自動で切り替えるjQueryのコード。 @2xが付くアレです。ちょっと今更 な話題なので誰も見て無さそうな 日曜日に書いて置こうと思います。
Dribbbleの投稿をjQueryで自分のサイトに表示させる
ちょっと調べ物をしたので備忘録です。 デザイナー専門のコミュニティサイト、 Dribbbleの投稿を自分のサイトに表示 させる方法。APIとjQueryを使って表示 させて見ます。日本ではDribbbleの利 用者は少なそうですけ...
WordPressでユーザー名でもメールアドレスでもログイン出来るようにするスニペットコード
以前、同じ機能のプラグインをご紹介 したんですけど、もっと簡単なコード で実装できるみたいなので改めて備忘 録。ログイン名を忘れてしまう方も 少なくないのでメールアドレスでも ログイン出来ると親切ですね。
JavaScriptも使わず元画像も変更せずに画像をグレースケール表示させる
ちょっと調べ物をしたのでメモ。 画像1枚だけで、グレースケール、 マウスホバーでカラー画像に、 みたいなのを実装したい、出来れ ばJavaScriptも使用せず、みたい な内容です。
WordPressのウィジェット単位で条件分岐出来る様にするプラグイン・Widget Logic
昔からあるWPのプラグインみたい ですが、先日知ったばかりで、と ても助かったので感謝も込めて ご紹介。WordPressのウィジェット 単位で簡単に条件分岐する事が 出来ます。
Webベースのダイナミックでクールなプレゼンテーションを実装する為のJavaScriptフレームワーク・Mosho
Web上でプレゼンする為のJavaScript フレームワーク、Moshoのご紹介です。 impress.jsライクなダイナミックな 動きのプレゼンテーションをHTMLで 実装する事が可能です。シンプルで 良かったのでお勧め。
シンプルで見やすいガントチャートを描けるjQueryプラグイン・jQuery.Gantt
シンプルで見やすいガントチャート を描画できるjQueryのプラグイン。 以前見かけてから放置していたので 少し触って見ました。使う機会は 個人的には多くありませんけど、 覚えて置いて損はしないかと。