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

【jQuery】幾何学的でオシャレな背景を描画する［Particleground］の実装方法。 ウェブサイトのちょっとした演出のために、幾何学的でオシャレな背景を描画する jQuery プラグインを紹介します。 まずはサンプルをご覧ください。 ［Particleground］：実装サンプル ご覧いただいたように、ウィンドウいっぱいに散... 【jQuery】幾何学的でオシャレな背景を描画する［Particleground］の実装方法。続きを読む →

【JavaScript】超高機能なグリッドレイアウトを実装する［Packery］はドラッグによる並べ替えにも対応！ グリッドレイアウト採用時に、ぜひ導入したいJavaScriptのライブラリ［Packery］を紹介します。 百聞は一見に如かず。まずは動作サンプルをご覧ください。 Packery：動作サンプル ご覧いただいたように、任意のボタンをクリックす... 【JavaScript】超高機能なグリッドレイアウトを実装する［Packery］はドラッグによる並べ替えにも対応！続きを読む →

細いラインのアイコンセット［Linea］が素敵です。 今日紹介するのはアウトラインタイプのアイコンセット［Linea］です。 「Linea」の発音は「リネア」または「リニア」でしょうか？ 全7カテゴリー（Basic、Music、Ecommerce、Software、Basic Elaborat... 細いラインのアイコンセット［Linea］が素敵です。続きを読む →

文字コードに関する警告への対処方法。 ウェブサイトの表示速度を計測して、改善点を調査してくれる「GTmetrix」というウェブサービスがあります。 リンク：GTmetrix この「GTmetrix」自体は、今さら紹介する必要もないほど有名なサイトですし、おそらく勉強熱心な本ブロ... 文字コードに関する警告への対処方法。続きを読む →

【.htaccess】SVGまたはSVGZ画像が表示されない時に確認すべき設定。 その便利さゆえに、近ごろ爆発的に普及しつつある「SVG画像」または「SVGZ画像」ですが、サーバー環境によってはブラウザーでうまく表示されないケースがあります。 今日紹介するのは、この「SVG画像」または「SVGZ画像」が表示されない時の解... 【.htaccess】SVGまたはSVGZ画像が表示されない時に確認すべき設定。続きを読む →

【一覧表】1分～100年までそれぞれ何秒か？ よく使うので一覧にしました。 ※1ヶ月は30日で計算。閏年は計算に入れていません。 時間 秒 1分 60秒 1時間 3600秒 12時間 43200秒 24時間 86400秒 1週間 604800秒 2週間 1209600秒 3週間 181... 【一覧表】1分～100年までそれぞれ何秒か？続きを読む →

舞台［NARUTO-ナルト-］の出演キャラクターのビジュアルが超絶クオリティでカッコイイ件。 来月（2015年3月21日）から東京公演がスタートする舞台【ライブ・スペクタクル［NARUTO-ナルト-］】に登場する出演キャラクターのビジュアルが、公式サイトにて公開されました。 原作の漫画の描写に忠実な再現度と、その圧倒的なクオリティの... 舞台［NARUTO-ナルト-］の出演キャラクターのビジュアルが超絶クオリティでカッコイイ件。続きを読む →

【WordPress】投稿日時を相対的な経過時間で表示する［human_time_diff］関数を使う方法。 ブログで記事の投稿日時を表示させる際、通常は「x年y月z日」というように絶対日時で出力することがほとんどです。 これを、Twitter や Facebook で見かけるような「x日前」や「y時間前」「z分前」のような相対日時で表記させる方法... 【WordPress】投稿日時を相対的な経過時間で表示する［human_time_diff］関数を使う方法。続きを読む →

【WordPress】記事のタイトルを出力する「the_title();」と「the_title_attribute();」を使い分けていますか？ WordPressのテーマファイル内、主に［single.php］や［index.php］［archive.php］［page.php］などで、投稿記事または固定ページのタイトルを出力する際、通常は <?php the_title()... 【WordPress】記事のタイトルを出力する「the_title();」と「the_title_attribute();」を使い分けていますか？続きを読む →

HTML5の独自データ属性にCSSを効かせる方法。 HTML5から「独自データ属性」または「カスタムデータ属性」と呼ばれる新しい仕様が追加されました。 この機能により、任意のhtmlの要素に接頭語「data-」で始まる属性値を付与することで、プライベートな値を設定できるようになりました。 一... HTML5の独自データ属性にCSSを効かせる方法。続きを読む →

【jQuery】レスポンシヴ対応のスライダー［flickity］は今後の定番になるでしょう。 高機能なスライドショーを実装するためのjQueryベースのプラグインと言えば、「FlexSlider」「CarouFredSel」「bxSlider」などが有名ですが、今後これらのプラグインに代わって定番になるであろう、秀逸なスクリプトが公... 【jQuery】レスポンシヴ対応のスライダー［flickity］は今後の定番になるでしょう。続きを読む →

完全保存版Ping送信先リスト 随時更新していきます。 コピペしてご利用ください。 http://api.my.yahoo.co.jp/RPC2 http://blogsearch.google.co.jp/ping/RPC2 http://rpc.reader.live... 完全保存版Ping送信先リスト続きを読む →

「Google Chart API」→「QR Code Generator API」を使ってQRコードを生成する方法。 URL短縮サービスと並行して普及してきたQRコードですが、Googleが提供している「Google Chart API」というプログラムを使って、誰でも簡単にQRコードを生成してしまう方法を紹介します。 追記： 2024年3月ごろから、本記... 「Google Chart API」→「QR Code Generator API」を使ってQRコードを生成する方法。続きを読む →

【WordPress】プラグイン［Jetpack］使用時にサイトの下部に表示されるスマイルマークを非表示にする方法。 WordPressで構築されたサイトの下部に、小さなスマイルマークが表示されることがあります。 実際に表示されるサイズは横幅が6ピクセル、縦幅が5ピクセルの小さな画像なのですが、ちょっと目障りなんですよね。 ネットサーフィンをしていると、し... 【WordPress】プラグイン［Jetpack］使用時にサイトの下部に表示されるスマイルマークを非表示にする方法。続きを読む →

【Design】干草の山の中から1本の針を捜す。ブラジルの［Roberto Haddad］の広告のアイディアが秀逸です。 ブラジル、リオ・デ・ジャネイロで、骨董品や芸術作品などのオークションを行っている［Roberto Haddad］のプロモーション広告のアイディアが秀逸だったので紹介します。 このプロモーション広告は「Finding needles in h... 【Design】干草の山の中から1本の針を捜す。ブラジルの［Roberto Haddad］の広告のアイディアが秀逸です。続きを読む →

【WordPress】必ず導入を検討すべきオススメのワードプレスのプラグイン × 11選。 星の数ほどあるWordPressのプラグインの中から、ほんとうに使うべきものを探すのはなかなか骨が折れる作業です。 大抵の情報が英語なので、翻訳する必要もあるでしょうし、実際に有効化して挙動を検証し、取捨選択していくのはかなり手間がかかりま... 【WordPress】必ず導入を検討すべきオススメのワードプレスのプラグイン × 11選。続きを読む →

【jQuery】ホワイトスペースを有効活用して遊び場に変える［Cube.js］が素敵です。 ウェブサイトのホワイトスペースを有効活用して、ちょっと楽しい雰囲気にしてしまう jQuery プラグイン「Cube.js」を紹介します。 製作者は日本国内のクリエイター「nejimaki act」様。プラグインのライセンスはフリーだそうで「... 【jQuery】ホワイトスペースを有効活用して遊び場に変える［Cube.js］が素敵です。続きを読む →

【ADS】オーストリアのマクドナルドの自虐的なプロモーション広告……？ 最近、異物混入などの不祥事が続いているマクドナルドですが、オーストリアのマクドナルドでは「自虐的」とも言える奇妙なプロモーションを展開していたのでこのブログでも紹介しようと思います。 以下、３点の画像がオーストリアの［McDonald's］... 【ADS】オーストリアのマクドナルドの自虐的なプロモーション広告……？続きを読む →

【ADS】エクアドルの航空会社［tame］のプロモーションが素敵です。 エクアドルの航空会社［tame］のプロモーション画像を紹介します。 それぞれの地方の特産物や銘品、観光名所などを翼に変えて羽ばたくイメージ。 どれも皆、想像力をかき立てる素晴らしい広告に仕上がっていますね。 【ADS】エクアドルの航空会社［tame］のプロモーションが素敵です。続きを読む →

【CSS3】最新のスタイルシートのテクニック「flexbox」を使ったアコーディオン風のウェブデザイン。 ウェブブラウザの最新版のヴァージョンや獲得シェアのパーセンテージがわかる「Outdated Browser」というサイトがあります。 「Google Chrome」、「Firefox」、「Internet Explorer」、「Safari... 【CSS3】最新のスタイルシートのテクニック「flexbox」を使ったアコーディオン風のウェブデザイン。続きを読む →

【CSS3】マウスホバー時の様々なエフェクトを実装できる［Hover.css］が便利です。 マウスホバー時のエフェクトが数多くまとめられた［Hover.css］を紹介します。 導入方法は非常に簡単で、配布されているCSSのファイルを読み込み、エフェクト処理を施したい箇所に任意のclassを指定するだけです。 公式版のデモサイトも公... 【CSS3】マウスホバー時の様々なエフェクトを実装できる［Hover.css］が便利です。続きを読む →

世界各国の主要都市の緯度経度のリストです。 世界各国の主要都市の緯度経度を調べていたところ、リストにしてまとめていたサイトを見つけたので紹介します。 世界中の天気を配信している OpenWeatheMmap というサイトで公開されていました。 リストにまとめられたテキストファイルは以... 世界各国の主要都市の緯度経度のリストです。続きを読む →

【WEB DESGIN】2014年総集編！参考になった優れたデザインの採用サイト × 11選。 2014年ウェブデザイン総集編「Part.3」は、所謂「採用サイト」に焦点を当て、特に参考になった優れたデザインの 11 のウェブサイトを紹介します。 株式会社グローバル・リンク・マネジメント RECRUITING 2015 まずは［株式会... 【WEB DESGIN】2014年総集編！参考になった優れたデザインの採用サイト × 11選。続きを読む →

【WEB DESGIN】2014年総集編！参考になったレスポンシブ・デザイン採用の独創的なウェブサイト × 11選。 2014年ウェブデザイン総集編「Part.2」は、レスポンシブ・デザインを採用したハイクオリティなサイトの中から、特に独創的なデザインで目を引いた 11 のウェブサイトを紹介します。 スペースシャワー列伝 ［スペースシャワー列伝］のウェブサ... 【WEB DESGIN】2014年総集編！参考になったレスポンシブ・デザイン採用の独創的なウェブサイト × 11選。続きを読む →