株式会社オンズのブログ記事一覧

【JavaScript】デバイスの傾きでページをスクロールさせる［Interdimensional］の使い方。 主にモバイル端末に対応した、デバイスの傾きでページをスクロールさせるJavaScriptのライブラリ［Interdimensional］を紹介します。 以下のリンク先より実装サンプルをテストできます。 iPhoneやiPad等、加速度センサ... 【JavaScript】デバイスの傾きでページをスクロールさせる［Interdimensional］の使い方。続きを読む →

【CSS3】壮大な宇宙にトリップできる［DarkForce.css］を紹介します。 今日はオンズのオリジナルのスタイルシート［DarkForce.css］を紹介します。 まるでスターウォーズに登場する宇宙船に乗っているような感じで、壮大な宇宙の彼方にトリップしていけるCSSのテクニック。 まずはサンプルをご覧ください。 O... 【CSS3】壮大な宇宙にトリップできる［DarkForce.css］を紹介します。続きを読む →

【ネット依存症の診断】５つ以上「はい」があるとネット依存症の可能性があります。 精神科医の『ゆうきゆう』さんがTwitterでツイートした［ネット依存症の診断］が話題になっていたので紹介します。 以下、10個の質問のうち、5つ以上が当てはまった場合は「ネット依存症」の可能性が高いと診断されるようです。 気がつくと、思っ... 【ネット依存症の診断】５つ以上「はい」があるとネット依存症の可能性があります。続きを読む →

【jQuery】ウェブページの背景全面で動画を再生する［Vide］の使い方 ここで紹介する［Vide］は、ウェブページの背景全面で動画を再生するjQueryプラグインです。 まずはサンプルをご覧ください。 ［Vide］：サンプル・サイト 使用するプラグインのダウンロードは以下、公式サイトからどうぞ。 ［Vide］：... 【jQuery】ウェブページの背景全面で動画を再生する［Vide］の使い方続きを読む →

【jQuery】画像のドミナントカラーを抽出する［Adaptive Backgrounds］の使い方 今日紹介する［Adaptive Backgrounds］は、画像のドミナントカラーを抽出して、親要素のボックスの背景色として再設定できるjQueryプラグインです。 言葉の説明だけでは難しいので、まずはサンプルをご覧ください。 ［Adapt... 【jQuery】画像のドミナントカラーを抽出する［Adaptive Backgrounds］の使い方続きを読む →

【jQuery】レスポンシヴ対応の高機能・高品質スライダー［slick］の使い方。Ver.1.8.1対応 高機能・高品質なjQueryスライダー［slick］の使い方を紹介します。 このjQueryスライダーは「FlexSlider」「BxSlider」「flickity」「Swiper」など、他の優良jQueryプラグインと並んで紹介されるこ... 【jQuery】レスポンシヴ対応の高機能・高品質スライダー［slick］の使い方。Ver.1.8.1対応続きを読む →

【jQuery】画像、動画、ボックス要素をポップアップで表示させる［Lity］の使い方。 画像や動画をポップアップで表示させるJavaScriptのプラグインで、特に有名なものでは［LightBox］が挙げられます。 ここで紹介する［Lity］は［LightBox］と同じように使えるjQueryプラグインで、レスポンシブにも対応... 【jQuery】画像、動画、ボックス要素をポップアップで表示させる［Lity］の使い方。続きを読む →

【CSS】スタイルシートの基本：セレクタを一覧にしてまとめました。 CSS2 セレクタ 一覧 セレクタ名 パターン 簡単な説明 ユニバーサルセレクタ * 全ての要素に適用 タイプセレクタ E E要素に適用 子孫セレクタ E F E要素の子孫にあたるF要素に適用 クラスセレクタ E.warning warni... 【CSS】スタイルシートの基本：セレクタを一覧にしてまとめました。続きを読む →

47都道府県の地域コード 日本全国47の各都道府県には、「01」から「47」までの［地域コード］が割り当てられています。 以下、使いやすいようにPHPの配列に格納したものを紹介します。 $prefs = array( 1 => '北海道', 2 => '... 47都道府県の地域コード続きを読む →

【WordPress】投稿記事を自動保存するリビジョン機能を停止する方法 WordPressで投稿記事や固定ページを編集する際、自動でバックアップが保存されていきます。 この機能は「リビジョン」と呼ばれており、ネットワークが途切れたり、ブラウザが落ちたときなど、編集した内容が消えてしまうリスクを防いでくれています... 【WordPress】投稿記事を自動保存するリビジョン機能を停止する方法続きを読む →

【ADS】どこにでも届く［Aquafresh］のプロモーション広告 歯ブラシや歯磨き粉を扱う［Aquafresh］が南米チリで展開している広告が目を引きました。 以前に紹介した［Mitsubishi Strakar L200］のプロモーションと似た雰囲気で、想像力を刺激するタイプの画像は個人的にとても好みで... 【ADS】どこにでも届く［Aquafresh］のプロモーション広告続きを読む →

【WordPress】日付を表示する［the_date();］と［the_time();］の挙動の違いについて。 WordPressで構築したサイトで投稿記事や固定ページの公開日時を表示させる際、通常は the_date() または the_time() を使います。 よく似ている関数ですが、それぞれ挙動が異なります。 the_date() の挙動 &... 【WordPress】日付を表示する［the_date();］と［the_time();］の挙動の違いについて。続きを読む →

【CSS3】ローディング中のテキストをアニメーションで表示する［Animated Type Loader］の実装方法。 テキストベースで、ローディング中のアニメーションを表示する［Animated Type Loader］の実装方法を紹介します。 まずはサンプルをご覧ください。 CSS3 Animated Type Loader：サンプル・デモ JavaSc... 【CSS3】ローディング中のテキストをアニメーションで表示する［Animated Type Loader］の実装方法。続きを読む →

【ADS】ジーンズのダメージ加工の作り方を［ARTURO CALLE］が紹介しています。 ジーンズのダメージ加工って、こうしてできているんですね……。 以下の画像は［ARTURO CALLE］の広告より。 広告制作やデザインの参考にどうぞ。 所謂ダメージ加工は虎と戦ってできるようです。 汚れ加工は鹿との格闘の際の名残のようです。... 【ADS】ジーンズのダメージ加工の作り方を［ARTURO CALLE］が紹介しています。続きを読む →

【WordPress】スクリプトを読み込むときに自動で挿入される［type属性］を削除する方法。 WordPressでスクリプトを読み込むとき、通常は「wp_enqueue_script」が使われ、<script>タグには自動で「type」属性 type="text/vavascript" が挿入されます。 HTML5の仕様... 【WordPress】スクリプトを読み込むときに自動で挿入される［type属性］を削除する方法。続きを読む →

【.htaccess】404エラーや503エラーなどが発生したときに任意のURLにリダイレクトさせる方法 サイト内で何らかのエラーが発生していて、ページが正常に閲覧できないとき、［.htaccess］を使って任意のページにリダイレクトさせる方法を紹介します。 まずは基礎知識になりますが、サイトが閲覧できないときに発生する「404エラー」や「50... 【.htaccess】404エラーや503エラーなどが発生したときに任意のURLにリダイレクトさせる方法続きを読む →

【jQuery】タイル状レイアウトと無限スクロールの組み合わせ［Masonry］×［Infinite Scroll］の実装方法 昨日に引き続き、今日は「無限スクロールの極限カスタマイズ」の完成形として、石畳風のレイアウトを実装する［Masonry］と［Infinite Scroll］の併用方法を紹介します。 まずはサンプルをご覧ください。 ［Masonry］×［In... 【jQuery】タイル状レイアウトと無限スクロールの組み合わせ［Masonry］×［Infinite Scroll］の実装方法続きを読む →

【jQuery】無限スクロール［Infinite Scroll］を極限までカスタマイズ。 無限スクロールを実装する jQueryプラグインの［Infinite Scroll］を紹介します。 スクロールしてページの最下部まで移動すると、次のページの情報を自動で読み込み、ページの遷移無しで次々とコンテンツを表示してくれます。 ご存知... 【jQuery】無限スクロール［Infinite Scroll］を極限までカスタマイズ。続きを読む →

【PHP】現在の設定内容を確認する［phpinfo()］関数の使い方。 使用しているサーバーでのPHPの設定状況を調べたいときは、あらかじめ定義されている［phpinfo()］関数を使います。 ここでは仮に「phpinfo.php」という名前のファイルを用意して、以下のコードを記述します。 <?php p... 【PHP】現在の設定内容を確認する［phpinfo()］関数の使い方。続きを読む →

【PHP】ファイル名を変数に代入するには？ PHPで現在のファイル名を変数に代入したい場合のコードを紹介します。 <?php $filename = basename ($_SERVER["PHP_SELF"]); echo $filename; ?> 以上。簡単ですね〜... 【PHP】ファイル名を変数に代入するには？続きを読む →

「もっと強くキミを守りたい」情報処理推進機構IPAの啓蒙広告がブッ飛んでる件。 4月3日からJR原宿駅の大型看板で展開されている独立行政法人・情報処理推進機構（IPA）による若年層向けのパスワード強化の啓蒙広告がぶっ飛んでいます。 IPAのサイトの方でも公開されていたので以下に転載します。 「こんなお手軽パスワードじゃ... 「もっと強くキミを守りたい」情報処理推進機構IPAの啓蒙広告がブッ飛んでる件。続きを読む →

究極のアイコン・フォント［Font Awesome］は膨大な量のアイコンがセットになっています。 アナタはもう知っていますか？ 今日ご紹介する【Font Awesome】は、全519種類（※Version.4.3現在）のアイコンがセットになっている究極のアイコンフォント。 アイコンフォントはこの【Font Awesome】さえあれば、他... 究極のアイコン・フォント［Font Awesome］は膨大な量のアイコンがセットになっています。続きを読む →

【jQuery】日付と時間を直感的に選択できる［DateTimePicker］が便利です。 ユーザーに日付や時間を指定してもらう際に、直感的な操作で簡単に日時を指定できる［DateTimePicker］を紹介します。 まずはサンプルをご覧ください。 ［DateTimePicker］：サンプル お試しいただいたように、大変優れたユー... 【jQuery】日付と時間を直感的に選択できる［DateTimePicker］が便利です。続きを読む →

【JavaScript】jQuery不要で動く［wow.js］でスクロール連動型アニメーションを実装。 最近はjQuery不要でも動くスクリプトが流行りのように感じていますが、気のせいでしょうか？ 今日紹介する［wow.js］も、jQuery要らずで実装可能な優良スクリプト。 容量も8KBと軽量で、別途配布されている「Animate.css」... 【JavaScript】jQuery不要で動く［wow.js］でスクロール連動型アニメーションを実装。続きを読む →