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

2015年総集編！オンズも掲載されている国内のウェブデザインのギャラリーサイト × 11選。 ウェブデザインの制作で頭を悩ませているとき、優れたサイトを眺めているだけでインスピレーションの源になります。 レイアウトやカラーパレット、導線や特殊な動きなどなど、学ぶことが多く自分の引き出しも増えていきますからね。 ウェブデザイナーの方な... 2015年総集編！オンズも掲載されている国内のウェブデザインのギャラリーサイト × 11選。続きを読む →

【jQuery】プログラムの実行のタイミングを遅らせる［setTimeout］の使い方 なんらかのJavaScriptの関数をタイミングを遅らせて実行したいとき。 そんなときに使えるjQueryメソッド［setTimeout］を紹介します。 ［setTimeout］メソッドで処理を遅延実行 基本的な使い方は以下のとおり。 $(... 【jQuery】プログラムの実行のタイミングを遅らせる［setTimeout］の使い方続きを読む →

【JavaScript】カード型レイアウトを簡単に実装できる［Minigrid］の使い方 今日紹介する［Minigrid］はカード型のレイアウトを簡単に実装できる超軽量JavaScriptライブラリです。 Minigrid : http://minigrid.js.org ほぼ同機能のjQueryプラグインでは［Masonry］... 【JavaScript】カード型レイアウトを簡単に実装できる［Minigrid］の使い方続きを読む →

【WordPress Plugins】インストールするだけで高速化してくれる「WP Hyper Response」プラグイン。 ワードプレスで構築されているウェブサイトの表示速度をスピードアップするプラグイン［WP Hyper Response］を紹介します。 Plugin Directory : WP Hyper Response いくつか注意点もありますが、イン... 【WordPress Plugins】インストールするだけで高速化してくれる「WP Hyper Response」プラグイン。続きを読む →

レスポンシブ対応のjQueryスライダー系ライブラリ × 11選 レスポンシブ・デザインに対応したスライダーやスライドショー系のライブラリをまとめました。ほとんどがjQueryプラグインになりますが、中には単体で動くものもあります。オプション設定で多数のエフェクトの中から好みの動作のものを選択できたり、自... レスポンシブ対応のjQueryスライダー系ライブラリ × 11選続きを読む →

【jQuery】ダイナミックな動作がカッコいいスライドショー［Tilted Content Slideshow］の使い方 カッコいい動作のスライドショー［Tilted Content Slideshow］を見つけてきました！ アニメーション部分にCSS3のTransformsとAnimationsを使用した高機能スライダーです。 画像をCSS3の「transf... 【jQuery】ダイナミックな動作がカッコいいスライドショー［Tilted Content Slideshow］の使い方続きを読む →

［Coda］×［WordPress］で開発をスピードアップする拡張機能 ウェブサイトを構築するとき、まず最初に考えるのが「WordPressを使うか否か？」という選択肢。 クライアント様の要求を満たす手段としてWordPressは最も優れたCMSであると言えます。 WordPress › 日本語 そ... ［Coda］×［WordPress］で開発をスピードアップする拡張機能続きを読む →

WordPress4.4以降からhead内に挿入されるようになった不要なタグ「Embed」を削除。 先日WordPressがアップデートされて「Version 4.4」がリリースされました。 いくつかの新しい機能が追加されましたが、今回から採用された「Embed」は比較的新しいシステムなのでご存じない方が多いと思います。 この機能は、他の... WordPress4.4以降からhead内に挿入されるようになった不要なタグ「Embed」を削除。続きを読む →

【jQuery】レスポンシブ画像でクリッカブルマップに対応する［jQuery RWD Image Maps］の使い方 レスポンシブ対応のウェブサイトでは、各デバイス毎のウィンドウの大きさに合わせて画像の横幅が変わるため、クリッカブルマップの座標がズレるという不具合が発生してしまします。 このとき、各クリッカブルマップの座標を再計算してレスポンシブに対応させ... 【jQuery】レスポンシブ画像でクリッカブルマップに対応する［jQuery RWD Image Maps］の使い方続きを読む →

【Font】超個性的な理系フォント［数式フォント］を紹介します。 角度や距離など、数学で使う記号を取り入れた暗号のようなフォント［数式フォント］が面白いですね。 早速ダウンロードしてみました。 数式フォント : http://sapphire.hacca.jp もの凄く個性的ですが、タイトルやロゴマークな... 【Font】超個性的な理系フォント［数式フォント］を紹介します。続きを読む →

【WordPress】画像の遅延読込でウェブサイトの表示速度を改善する［Unveil Lazy Load］プラグイン 今日はオススメのWordPressプラグインを紹介します。 オンズのウェブサイトでも導入している［Unveil Lazy Load］です。 その名のとおり「Lazy Load」系のプラグインで、ウェブサイトにアクセスしたときに画像を遅延して... 【WordPress】画像の遅延読込でウェブサイトの表示速度を改善する［Unveil Lazy Load］プラグイン続きを読む →

【WordPress】タイトルを自動生成する［add_theme_support ('title-tag');］が便利です。 今さらですが、ワードプレスのバージョン4.1以降から、より簡単にタイトルタグを出力できるようになっています。 これまで <title>〜</title> の出力には<?php wp_title(); ?>... 【WordPress】タイトルを自動生成する［add_theme_support ('title-tag');］が便利です。続きを読む →

【Font】読めるかどうか微妙な魔法陣文様フォント［猫の目覚め］が話題になっています。 以前に紹介した魔法陣文様フォント［Magic Ring］の続編です。 読めるかどうか微妙な［猫の目覚め］が話題になっています。 ご覧のとおり、猫を召喚できそうな魔法陣を描けるこのフォント。 製作者様曰く「前作がSFっぽいと言われてしまったの... 【Font】読めるかどうか微妙な魔法陣文様フォント［猫の目覚め］が話題になっています。続きを読む →

【jQuery + PHP】クロスドメイン対応版：Google Feed API の代替案を紹介します。 昨日 Google Feed API が停止した事件があり、ウェブ制作者の方々はその対応に追われ、各地で阿鼻叫喚と大混乱が起きていました。 一夜明けて、現時点で Google Feed API が復旧しているようですね。 しかしまたいつ廃止... 【jQuery + PHP】クロスドメイン対応版：Google Feed API の代替案を紹介します。続きを読む →

【jQuery】緊急案件：Google Feed API が廃止になっているので代替案を紹介します。 昨日、2015年12月2日未明より Google Feed API が403エラーを返すようになり、特にニュースサイトを中心とした各方面で混乱が発生しています。けっこう大変な事態のようですね。 未だ公式サイトでもアナウンスが無く、廃止になっ... 【jQuery】緊急案件：Google Feed API が廃止になっているので代替案を紹介します。続きを読む →

【jQuery】超軽量レスポンシブ・スライダー［Juicy Slider］の使い方 今日は軽快に動作するレスポンシブ対応スライダー［Juicy Slider］を紹介します。 この［Juicy Slider］では、ブラウザの CSS3 のサポートに依存している他のjQueryスライダーとは異なり、画像のアスペクト比を Jav... 【jQuery】超軽量レスポンシブ・スライダー［Juicy Slider］の使い方続きを読む →

【WordPress】プラグイン Advanced Custom Fields の全フィールドの出力方法 ワードプレスで構築したウェブサイトで、ちょっと変わった機能を実装したいとき。非常に多くのケースで［Advanced Custom Fields］（以下「ACF」）が役に立ちます。 今日は［ACF］での全フィールドタイプの出力方法を紹介します... 【WordPress】プラグイン Advanced Custom Fields の全フィールドの出力方法続きを読む →

【ADS】インドネシアの［Tiket.com］の妄想を掻き立てる広告キャンペーン インドネシアの［Tiket.com］が楽しい広告キャンペーンを展開していました。 タイトルは『Book anytime, go anywhere』と名付けられています。 訳すと『いつでも、どこでも、旅行の予約』といったニュアンスでしょうか。... 【ADS】インドネシアの［Tiket.com］の妄想を掻き立てる広告キャンペーン続きを読む →

【ADS】イギリスの老舗百貨店［John Lewis］の素敵なプリント広告。 イギリスの老舗百貨店チェーン［John Lewis］がオシャレなプリント広告を展開していました。 イギリス南部の都市サウサンプトンの店舗に新たなコーナーが新設されることを紹介しています。 A new beauty department ha... 【ADS】イギリスの老舗百貨店［John Lewis］の素敵なプリント広告。続きを読む →

プラグイン［Jetpack］の機能『Photon』はWordPress外からでも使えます。 これ、ちょっとした裏ワザです。 ワードプレスのプラグイン［Jetpack by WordPress.com］で提供されている『Photon』を、WordPressを経由せずに利用する方法を紹介します。 Photon の仕組み Photonは... プラグイン［Jetpack］の機能『Photon』はWordPress外からでも使えます。続きを読む →

【最新バージョン7.3対応】jQuery無しで動く神スライダー［Swiper］が便利すぎて。 今日紹介する［Swiper］は、レスポンシブ対応サイトなどで真価を発揮するJavaScriptベースの「コンテンツ・スライダー」です。 初見の感想は「反応速度が早く軽量でサクサク動く」という印象。 レスポンシブにも対応済み。マウスのドラッグ... 【最新バージョン7.3対応】jQuery無しで動く神スライダー［Swiper］が便利すぎて。続きを読む →

【Icon】計1001種類のデザインが揃った［Linearicons］が素敵！ このアイコン使いたい！ 合計1,001種類のデザインが揃ったアイコンフォント［Linearicons］が可愛くて素敵です。 基本は有料になりますが、このうち170種類のアイコンをピックアップした無料版［Linearicons Free v1... 【Icon】計1001種類のデザインが揃った［Linearicons］が素敵！続きを読む →

【jQuery】ページのスクロール量に連動してプログレスバーを実装する［Scrollgress］の使い方 ウェブページをスクロールさせると、その動きにシンクロしてプログレスバーが表示される［Scrollgress］の使い方を紹介します。 実際に導入してみましたので、まずはサンプルをご覧ください。 ［Scrollgress］：実装サンプル ウィン... 【jQuery】ページのスクロール量に連動してプログレスバーを実装する［Scrollgress］の使い方続きを読む →

わりと本気でウェブサイトの高速化に取り組んだ結果。 この連休中に弊社ウェブサイトの表示スピード高速化に取り組みました。 もともと不満が無いほどのスピードを誇っていましたが、さらに完璧を目指して様々なアップグレードを試みたので、その結果と共に、皆様にも参考になるであろう読み込み速度UPのための... わりと本気でウェブサイトの高速化に取り組んだ結果。続きを読む →