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

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

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

【WordPress】アイキャッチ画像の設定方法。 WordPressの投稿記事では「アイキャッチ」と呼ばれるサムネイル画像を設定することができます。 テーマによってはあらかじめアイキャッチ機能が有効化されていて、何も設定しなくても使える状態になっています。 対応していない場合は手動での設定... 【WordPress】アイキャッチ画像の設定方法。続きを読む →

【WordPress】管理画面のフッター部分に表示される「WordPress のご利用ありがとうございます。」という表記を変更する方法。 WordPress の管理画面にログインすると、ページの最下部に「WordPress のご利用ありがとうございます。」という文章が表記され、WordPressの公式サイトへリンクが貼られています。 今日はこの余分なテキストを非表示、または変... 【WordPress】管理画面のフッター部分に表示される「WordPress のご利用ありがとうございます。」という表記を変更する方法。続きを読む →

【WordPress】「メディアを追加」で画像を選択したときに[caption]タグを挿入させない方法 WordPressで記事の投稿時に、画像を挿入するために「メディアを追加」から使いたい画像を選択します。 このとき同時に画像の情報を編集することができますが、「キャプション」の項目にテキストを記入すると、テキストエリアに[capt... 【WordPress】「メディアを追加」で画像を選択したときに[caption]タグを挿入させない方法続きを読む →

【ADS】フォルクスワーゲンの［Small but ferocious］キャンペーンが面白いです。 フォルクスワーゲンが南アフリカを中心に展開している広告デザインの事例を紹介します。 タイトルは［Small but ferocious］とのことで、「小さいけれど獰猛な……」フォルクスワーゲンのTSIエンジンを推すメッセージが仕組まれていま... 【ADS】フォルクスワーゲンの［Small but ferocious］キャンペーンが面白いです。続きを読む →

【HTML5】address 要素 address 要素は、直近の祖先にあたる article もしくは body 要素に対する連絡先情報を表します。それが body 要素なら、その連絡先情報は、ドキュメント全体に適用されるものとなります。 「address」という単語は日本... 【HTML5】address 要素続きを読む →

【SEO】スーマートフォン対応サイトのURLを指定する［Mobile Link Discovery］を記述する。 先月（2015年2月26日付）、Googleは「スマートフォン利用に最適化されたサイトがモバイルでの検索結果で優遇されやすくなるように変更する」と公式に発表しました。 検索結果をもっとモバイル フレンドリーに Google 今回のGoogl... 【SEO】スーマートフォン対応サイトのURLを指定する［Mobile Link Discovery］を記述する。続きを読む →

【WordPress】公式アイコンフォント［Dashicons］の使い方。 通常は管理画面でのみ使われていますが、種類も豊富でデザインも秀逸なので、テーマファイルに組み込んでデザインの一部として活用しましょう。 まずは Dashicons を利用可能な状態に準備する。 ［Dashicons］を使うためには、前提とし... 【WordPress】公式アイコンフォント［Dashicons］の使い方。続きを読む →

【Font】個性的な日本語フォント［やなぎたい］が無料でダウンロード可能です。 柳の葉をモチーフに作成された、毛筆ブラシで描いたようなフリーフォント［やなぎたい］を紹介します。 ご覧の通り、なかなか個性的なデザインですね。 製作者様によれば「このフォントはダウンロードフリーです。また、使用に関しては一切報告いりません。... 【Font】個性的な日本語フォント［やなぎたい］が無料でダウンロード可能です。続きを読む →

【ADS】建築物の屋根材を扱う［USG］の広告画像です。 建築物の屋根材を扱う［USG］の広告画像を紹介します。 デザイン制作の際のインスピレーションにどうぞ。 When the elements bring the heat, feel secure with USG securock®... 【ADS】建築物の屋根材を扱う［USG］の広告画像です。続きを読む →

【iOS】ウェブサイトのソースを閲覧できる［Srcfari］はウェブデザイナーの方にお勧めの神アプリです。 iPhoneやiPadでウェブサイトのソースを閲覧できる素晴らしいアプリ［Srcfari］が登場しました。 HTMLはもちろん、CSS、JacaScript、そしてJPG、PNG、GIFやSVG形式の画像まで。サイトのリソースをほぼすべて網... 【iOS】ウェブサイトのソースを閲覧できる［Srcfari］はウェブデザイナーの方にお勧めの神アプリです。続きを読む →

【CSS】レスポンシヴ対応のグリッド・システムを作ってみた。 今さら……という感じがしなくもないですが、レスポンシヴ対応のグリッド・システムを作ったのでシェアします。 巷に出回っているものは横幅をピクセル単位で指定しているものが多いのですが、今回はパーセント単位で、ウィンドウサイズに合わせてフレキシブ... 【CSS】レスポンシヴ対応のグリッド・システムを作ってみた。続きを読む →

【WordPress】自動で出力される［仮想robots.txt］をカスタマイズする方法 WordPressをルート直下（例：http://sample.com）にインストールすると、デフォルトで「仮想robots.txt」を出力してくれます。 この場合「robots.txt」のURLは http://sample.com/ro... 【WordPress】自動で出力される［仮想robots.txt］をカスタマイズする方法続きを読む →

【Design】シンプルなデザインのアイコンセット［subway］が無料でダウンロード可能です。 クセがなく、シンプルで使いやすいデザインのアイコンセット【subway】を紹介します。 データのフォーマットは、Illustrator用、Photoshop用、Sketch用の他に、iOS、Windows Phone、BlackBerryに... 【Design】シンプルなデザインのアイコンセット［subway］が無料でダウンロード可能です。続きを読む →

【ADS】物語はここで終わる……童話をモチーフに使った［Aduana Nacional］の広告。 グリム童話などのお伽噺をモチーフに使った面白い広告を見つけたのでシェアします。 まずは「不思議の国のアリス」です。 不思議なクスリを取り上げられていますね。 こちらは「ラプンツェル」の魔女でしょうか。 「白雪姫」に毒リンゴを食べさせようとし... 【ADS】物語はここで終わる……童話をモチーフに使った［Aduana Nacional］の広告。続きを読む →

【PHP】プログラムの処理に要した時間を計測する方法。 任意のプログラムを実行するのに要した時間を計測します。 利用するのはPHPの microtime 関数です。 この関数は現在のタイムスタンプをマイクロ秒単位で取得できるので、プログラムの前後でこの差を求めることで、処理に要した時間を調べられ... 【PHP】プログラムの処理に要した時間を計測する方法。続きを読む →

【CSS3】親要素の大きさに依存して画像の表示方法を変える［object-fit］プロパティの使い方。 CSS3から新たに使えるようになった「object-fit」プロパティについて解説します。 聞き馴れない名前のプロパティかと思いますが、主に画像のアスペクト比に作用して、表示領域に対しての画像の大きさを変更する場合に使います。 ……文章の説... 【CSS3】親要素の大きさに依存して画像の表示方法を変える［object-fit］プロパティの使い方。続きを読む →

様々なデバイスのモックアップ素材のセット［FLAT & REAL］が無料でダウンロード可能。 全18種類の様々なデバイスのモックアップ素材のセットが無料でダウンロードできる［FLAT & REAL］を紹介します。 ファイルは「AI」「PSD」「SVG」の３つの形式のデータで、それぞれ「REAL」ヴァージョンと「FLAT」ヴァ... 様々なデバイスのモックアップ素材のセット［FLAT & REAL］が無料でダウンロード可能。続きを読む →

【WordPress】ユーザーのプロフィールに項目を追加する方法。 WordPressにログインできるユーザーのプロフィール情報に項目を追加する方法を紹介します。 ユーザー項目の追加・削除 例えば、電話番号や住所、TwitterやFacebookのIDを入力するための項目を追加したい場合、以下のようなコード... 【WordPress】ユーザーのプロフィールに項目を追加する方法。続きを読む →

【WordPress】マルチサイトで親サイトと子サイトを条件分岐する方法。 WordPressのマルチサイト機能を有効化しているとき、現在表示されているページが「親サイト」か「子サイト」かによって、出力する内容を変更したいときがあります。 そんなとき、条件分岐するための関数が is_main_site(); です。... 【WordPress】マルチサイトで親サイトと子サイトを条件分岐する方法。続きを読む →

【ADS】野生動物に手助けを。WWFのユニークな広告です。 パンダのマークでお馴染みの［WWF］が、「Give a hand to wildlife.」というキャンペーンを行ったときのユニークな広告画像を紹介します。 「野生動物に手助けを」ということで、文字通り「手」を使った面白いアート作品でした。 【ADS】野生動物に手助けを。WWFのユニークな広告です。続きを読む →

【WordPress】プラグイン［Jetpack］の機能「タイルギャラリー」の横幅を指定する方法。 WordPressのプラグイン［Jetpack］を利用すると、「無限スクロール」や「一括検索」、「コンタクトフォーム」など様々な機能を簡単に導入することができます。 今日はその機能の中でも、特に初心者ユーザーに人気の「タイルギャラリー」につ... 【WordPress】プラグイン［Jetpack］の機能「タイルギャラリー」の横幅を指定する方法。続きを読む →

【Design】ブラジルのケチャップ［METTRE］のプロモーション画像が面白い。 ブラジルのケチャップメーカー［METTRE］が面白い画像を使って広告展開していたので紹介します。 女性の脚のように見えるものは実は２本のソーセージ。 古典的ですが、男性の視線を止めることができる最善の方法ですね。 Advertising A... 【Design】ブラジルのケチャップ［METTRE］のプロモーション画像が面白い。続きを読む →