「WPAlchemy MetaBox PHP Class」を用いたカスタムフィールドの実装（1）
WPAlchemyMetaBoxPHPClassとはWordPressでカスタムフィールドを利用するときは、デフォルトのままだと使いづらいので、「CustomFieldTemplate」や「CustomFieldGUIUtility」を利用する方も多いと思います。大抵のことはこれらのプラグインで思い通りに作成することが出来ると思うのですが、カスタムフィールドの入力フォームのデザインに手を加えようと...続きを読む
CSSで三角形を作る＆使用例（スマホ編）
皆さんは、CSSだけで三角形のような図形を表現出来ることを知っていますか？調べてみると、三角形の作り方を解説している記事が沢山あります。普通の三角形を作る方法は多くありますが、実際どのような場面で使うのかを解説しているものは、少ないような気がしました。そのため、私が個人的にこんな場面で使えるのでは？といったものをまとめてみましたので、ご紹介したいと思います。～この記事の対象ブラウザ～iOS5、iO...続きを読む
今さら人に聞けない！WordPressで使われているmod_rewriteの説明書
WordPressのmod_rewriteコードを参考にmod_rewriteについてまとめてみました。mod_rewriteとは？mod_rewriteとは、何かご存知でしょうか？これは、Apacheというhttpサーバで利用されいてるモジュールと言われるもので、URLの書き換え・リダイレクト処理を行なってくれるものです。主に「.htaccess」というファイルに任意の処理を記述して使用します。...続きを読む
新人コーダーに知っておいて欲しいリダイレクトの基本
サイトを運営していると、サイト内のページの移動や削除、またはサイト自体の移転をすることがあります。その場合、リダイレクトという処理を用いて新たなページに転送を行いますが、正しい知識と手順を以って対応しなければ、検索順位の下降、ページランクやドメインエイジの喪失といったSEO的なペナルティを招いてしまいます。そこで、そのようなペナルティを受けないために、ページ移動・サイト移転時の正しいリダイレクトの...続きを読む
画像を使わない擬似フォームUIの作り方 第03回 「タップ時のレスポンス向上」
第2回まで「擬似フォームUI」の作り方を解説してきましたが、第3回となる今回はちょっと方向性を変えて、チェックボックスやラジオボタンをタップしたときに、瞬時にレスポンスを返す方法を解説していきます。皆さんは、スマートフォンでフォームのチェックボックスをタップしたときに、一瞬遅れてチェックが入るといった経験をしたことはないでしょうか？次のサンプルを操作するとお分かりいただけると思います。サンプル※i...続きを読む
画像を使わない擬似フォームUIの作り方 第02回 「jQueryを使った擬似フォームUIの操作」
前回はCSSを使って擬似フォームUIのデザインを整えるところまでを紹介してきましたが、今回からは擬似フォームUIの肝となる、jQueryを使ったフォーム操作の方法を紹介していきます。前回の記事はこちらSTEP05jQueryでチェックボックスのチェック状態を操作するこの時点でのサンプルを表示する擬似フォームUIでは、実際のチェックボックスは隠れた状態になるため、jQueryでチェック/未チェックの...続きを読む
画像を使わない擬似フォームUIの作り方 第01回 「CSS3を使った装飾」
■完成イメージブラウザ標準のフォームUI（チェックボックスやセレクトボックス）のデザインは、標準ゆえに「フォーム」だと分かりやすいデザインですが、どうしてもサイトカラーに合わずに野暮ったい印象になるときがあります。そういった場合にデザインを自由に変更できるといいのですが、フォームUIへのスタイル適用は制限があり、自由に変更できません。そういったときに、実際のフォームUIを隠し独自のフォームUIを表...続きを読む
CSS3で簡単にボタン風バナーを作る
CSS3から背景にグラデーションをつけたり、ボーダーを曲線にすることができるようになりました。それを用いて、画像を使わず簡単にボタン風のバナーを作成するテクニックです。使うプロパティは下記の通りborder-radius（ボーダーに曲線をつける）backgroundのgradientプロパティ（背景にグラデーションをかける）CSSviewsourceprint?01.sampleBtn{02&nb...続きを読む
[CSS]CSSスプライトで容量を節約しつつロールオーバーを実現する
画像のロールオーバーに関するまとめ記事を更新しました。下記リンクよりご覧ください。【比較】覚えておきたいロールオーバー画像切替え5つの手法（CSS？JS？onmouseover？）ロールオーバーの指定の仕方はこれまで何度かご紹介しましたが、今回はそのロールオーバーの指定の中でも、CSSスプライトと呼ばれる方法をご紹介したいと思います。CSSスプライトとは？CSSスプライトとは、複数の画像をひとつに...続きを読む
ソースを見やすくするためのスタイルシート・コードフォーマット
スタイルシートを作成するときに、ただスタイルを羅列していくだけでは、後から見てどこに何が書いてあるのかわからず、メンテナンス性が非常に悪くなってしまいます。そこで、今回はスタイルシートを書くときに気を付けたいことをご紹介します。半角スペースを使うスタイル名とスタイルプロパティの後ろに一つ入れます。×viewsourceprint?1.text{2 te...続きを読む
