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

【ADS】挑戦と勝利。最強と戦場。 Twitter界隈で話題になっていた面白い広告を見つけたので紹介します。 本日、1月24日〜1月29日に開催される『GI全日本王者決定戦』のポスター広告。 こちらは「挑戦」という文字が中央に大きく描かれていますが、上下を逆にして見てみると…... 【ADS】挑戦と勝利。最強と戦場。続きを読む →

エックスサーバーでWordPressを「http」から「https」にSSL化する手順 既にご存知の方も多いかと思いますが、エックスサーバーでは独自SSLを無料かつ無制限で利用できるようになっています。 嬉しいサービスですよね。 XSERVER : https://www.xserver.ne.jp 今日はそのエックスサーバー... エックスサーバーでWordPressを「http」から「https」にSSL化する手順続きを読む →

映画『マトリックス』の背景エフェクトを canvas で実装してみた。 映画『マトリックス』のオープニングで使われている、コンピューターの画面上を緑の文字が流れる映像。通称「マトリックス・コード」を、ウェブページの背景エフェクトとして canvas で実装したサンプルを紹介します。 もとはネットサーフィン中に見... 映画『マトリックス』の背景エフェクトを canvas で実装してみた。続きを読む →

Mac に Windows の標準フォント「メイリオ」をインストールしてみた。 今回は Windows にインストールされている標準フォント「メイリオ」を Mac で使う方法を説明していきます。 メイリオは Windows では最初から使えるフォントで、Webサイトはもちろん、WordファイルやPowerPointファ... Mac に Windows の標準フォント「メイリオ」をインストールしてみた。続きを読む →

【jQuery】シンプルなパララックス効果を実装できる［parlx.js］の使い方 今日ご紹介する［parlx.js］はパララックス効果を手軽に導入できるjQueryプラグインです。 サンプルは以下に用意してあります。 DEMO : https://on-ze.com/demo/jquery-parlx.js/ データファ... 【jQuery】シンプルなパララックス効果を実装できる［parlx.js］の使い方続きを読む →

【JavaScript】指定した要素がビューポートに表示されたことを［Emergence.js］で検出する。 指定した要素がブラウザの可視領域に入ったことを検出するJavaScriptのライブラリ［Emergence.js］を紹介します。 ブラウザをスクロールして、指定した要素が特定の範囲に入ったときにアニメーションを実行させることができる便利なプ... 【JavaScript】指定した要素がビューポートに表示されたことを［Emergence.js］で検出する。続きを読む →

【JavaScript】親要素の大きさにテキストをフィットさせる［Fitty］の使い方 今回は親要素の大きさに合わせてテキストをフィットさせるJavaScriptライブラリ［Fitty］の使い方を紹介します。 レスポンシブにも対応して、親要素とテキストのサイズを自動で計算して大きさを調整してくれます。 百聞は一見に如かず。 ま... 【JavaScript】親要素の大きさにテキストをフィットさせる［Fitty］の使い方続きを読む →

【jQuery】リアルな波紋模様を再現する［jQuery Ripples］を使ってみる。 マウスの動きに合わせて波紋を描くjQueryプラグイン［jQuery Ripples］の使い方を紹介します。 まずは実際にウェブページに組み込んだサンプルを用意しましたのでご覧ください。 ONZE DEMO : https://on-ze.... 【jQuery】リアルな波紋模様を再現する［jQuery Ripples］を使ってみる。続きを読む →

【jQuery】モーダルウィンドウ実装する超秀逸［Modaal］プラグインの使い方 このjQueryプラグイン、モーダルウィンドウを手軽に実装したい方に超絶オススメです！ まずは実際の挙動を確認してみましょう。 DEMO : http://humaan.com/modaal/ 「VIEW EXAMPLE」をクリックすると、... 【jQuery】モーダルウィンドウ実装する超秀逸［Modaal］プラグインの使い方続きを読む →

【CSS3】斜めのストライプ状の背景をCSSだけで実装する方法 スタイルシートだけでウェブページの背景にストライプ状の模様を施すテクニック［CSS3 Background Stripes］を紹介します。 まずは実際のサンプルをご覧ください。 CSS3 Background Stripes : https... 【CSS3】斜めのストライプ状の背景をCSSだけで実装する方法続きを読む →

WordPressプラグイン［Attendance Manager］を使っていたときに起きた不具合を解決。 登録ユーザーが200名を超える大規模なサイトで、WordPress プラグイン［Attendance Manager］を設置するという案件に携わりました。 最初は問題なく運営できていたのですが、数週間後に先方からエラーの報告がありました。 ... WordPressプラグイン［Attendance Manager］を使っていたときに起きた不具合を解決。続きを読む →

【jQuery】シンプルなLightbox系プラグイン［Darkbox jQuery Gallery］の使い方 今日ご紹介する［Darkbox jQuery Gallery］は、有名な［Lighbox］系のミニマルなjQueryプラグインです。 サンプル : https://on-ze.com/demo/jquery-darkbox-gallery/... 【jQuery】シンプルなLightbox系プラグイン［Darkbox jQuery Gallery］の使い方続きを読む →

【iOS 11】iPhoneのコントロールセンターからナイトシフトを有効化する方法 iPhoneには、ディスプレイの色味を暖色系にして暗所での利用時に最適な『Night Shift』という機能があります。 iOS 10 まではコントロールセンターからスグに有効化できましたが、最新の iOS 11 からはその項目が無くなって... 【iOS 11】iPhoneのコントロールセンターからナイトシフトを有効化する方法続きを読む →

【JavaScript】超便利「Masonry」の簡易版［MiniMasonry.js］の使い方 ［MiniMasonry.js］は有名なMasonryの機能を制限した簡易版のライブラリです。 データ容量も軽く、jQueryなどに依存せず単体で動くので便利です。 使い方は以下より。 Sample : https://projects.s... 【JavaScript】超便利「Masonry」の簡易版［MiniMasonry.js］の使い方続きを読む →

【WordPress】ユーザーのアバターのURLを取得する方法 WordPressで任意の記事の投稿者アバターのURLを取り出す方法。備忘録です。 ループ内で以下のコードを記述すればOKです。 簡単でしたね。 <?php $author = get_the_author_meta('id'); $... 【WordPress】ユーザーのアバターのURLを取得する方法続きを読む →

お手軽にインスタグラム風の写真を再現できる［Instagram.css］フィルターを実装 いま若者を中心に流行中のインスタグラムですが、投稿する写真を美しく際立たせるフィルター機能は、人気の秘訣でもあり大きな特徴の１つになっています。 今日ご紹介する［Instagram.css］は、ウェブサイトで使用している画像にインスタグラム... お手軽にインスタグラム風の写真を再現できる［Instagram.css］フィルターを実装続きを読む →

【JavaScript】美しい泡が漂う［Beautiful bubbly backgrounds］の使い方 ウェブページの背景に動きのある美しい泡を表現できるJavaScriptライブラリ［Beautiful bubbly backgrounds］を紹介します。 ↓サンプルはこちら。 サンプル : https://on-ze.com/demo/j... 【JavaScript】美しい泡が漂う［Beautiful bubbly backgrounds］の使い方続きを読む →

失われし「marquee」タグを再現する［hMarquee］でテキストの横スクロールを実装！ 新参のウェブデザイナーの方々には馴染みがないかもしれませんが、過去、HTMLの「marquee」タグが流行した時代がありました。 既に廃止されたこのタグは、テキストを横スクロールさせるために用いられていました。 いま、これと同じ挙動を実現す... 失われし「marquee」タグを再現する［hMarquee］でテキストの横スクロールを実装！続きを読む →

コーディングガイドライン 要素の分類 コンポーネント コンポーネントとは 機能的に独立した再利用可能なUIのパーツです。コンポーネントは入れ子にすることができます。（例：.menu-listの中に.menu-item） コンポーネントのクラ... 続きを読む →

Joe Harrison氏が提案する［Responsive Logos］が面白い！ デザイナーの Joe Harrison 氏が提案している［Responsive Logos］（レスポンシブ・ロゴ）のアイディアが面白いので紹介します。 Responsive Logos 現在サイトで紹介されているのは以下の16企業。 Coc... Joe Harrison氏が提案する［Responsive Logos］が面白い！続きを読む →

【JavaScript】超簡単にパララックス効果を実装できる［simpleParallax.js］の使い方 今日はウェブサイトにお手軽にパララックス効果の画像を設置できるJavaScriptプラグイン［simpleParallax.js］の使い方を紹介します。 本体を読み込んで画像に任意のクラス名を指定すればスグに実装できます。 ［simpleP... 【JavaScript】超簡単にパララックス効果を実装できる［simpleParallax.js］の使い方続きを読む →

2017年度に買って良かったモノ × 11選 2017年。今年の買い物で、特に重宝している、または買ってヨカッタな〜と思っているモノを厳選して11個、紹介します！ ダイソン 掃除機 コードレス V8 まずはコレ！ …「今さらかよ！」と思われそうですが、やっとウチの事務所に掃除機が。 こ... 2017年度に買って良かったモノ × 11選続きを読む →

【CSS】ボックス要素をCSSだけでクリッピングできるのか？ Ｑ 質問：ボックス要素をCSSだけでクリッピングできるのか？ Ａ 回答：できます！ ……というワケで、スタイルシートの記述だけでボックス要素をクリッピング（切り抜き表示）する方法を紹介します。 使用するのは「clip-path」プロパティ。... 【CSS】ボックス要素をCSSだけでクリッピングできるのか？続きを読む →

【JavaScript】簡単にMasonry風グリッドレイアウトを実装できる［Macy.js］の使い方 Masonry風のグリッドレイアウト採用時に、ぜひ導入したいJavaScriptのライブラリ［Macy.js］を紹介します。 まずは動作サンプルをご覧ください。 Macy.js : 動作サンプル ウィンドウサイズの変えると、その横幅に応じて... 【JavaScript】簡単にMasonry風グリッドレイアウトを実装できる［Macy.js］の使い方続きを読む →