【CSS3】JavaScriptを使用せずに『慣性スクロール付きカルーセル』を実装するテクニック
モバイルサイトでよく見かける、横にスライドするカルーセル・スライダー。 最近では単にスライドするだけでなく、フリックしたときに慣性スクロールで動くものが流行っています。 今日はこの『慣性スクロール付きカルーセル』を JavaScript 無しで実装する方法を紹介します。 HTML ここでは仮に、下記のようなHTMLを用意します。 <ul class="carousel"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> キモとなるスタイルシートの記述です。 .carousel { width:100%; padding:12px 0; overflow-x:scroll; -webkit-overflow-scrolling:touch; over
【WordPress】スクリプトを読み込むときに自動で挿入される［type属性］を削除する方法。
WordPressでスクリプトを読み込むとき、通常は「wp_enqueue_script」が使われ、<script>タグには自動で「type」属性 type="text/vavascript" が挿入されます。 HTML5の仕様では「type属性」は省略可能なので、どうにかしてこの文字列 type="text/javascript" を削除したいところです。 実はWordPressのヴァージョン「4.1」以降から、新たに「script_loader_tag」というフィルターフックが追加され、この機能を使うことで出力される<script>タグをカスタマイズすることが可能になりました。 フィルターフック「script_loader_tag」について 以下のコードをテーマファイルの中の［functions.php］に記述しましょう。 function remove_script_type($ta
【JavaScript】リストやテーブルにフィルタリングや検索機能を追加できる［List.js］が超絶便利です。
【JavaScript】リストやテーブルにフィルタリングや検索機能を追加できる［List.js］が超絶便利です。 先月、3月2日にリリースされた JavaScript プラグイン［List.js］を試用しました。 クオリティも高く、凄く便利ですね。 使いドコロの多いJavaScriptだと思うので、今日は本プラグインの具体的な導入方法を紹介していきます。 ［List.js］をダウンロードする まずは必要なファイルをダウンロードします。 下記公式サイトより『Download』をクリックした先のページから入手可能です。 List.js : http://www.listjs.com/ 手に入れたJavaScriptファイルはHTMLの任意の箇所で読み込みます。 <script src="list.min.js"></script> 実はCDNでも同スクリプトが配信されています。 わざわざダウン
【jQuery】スマートフォンやタブレット端末でのスクロールを無効にする方法。
各種スマートフォンやタブレット端末でのウェブ観覧時に、スワイプやフリック等のタッチコントロールによるウィンドウのスクロールを禁止する方法を紹介します。 パソコンの場合、CSSで「overflow:hidden;」を効かせれば、スクロールさせなくすることが可能です。 これを各種タッチデバイスにも実装させるには jQuery を使う方法が便利です。 $(window).on('touchmove.noScroll', function(e) { e.preventDefault(); }); これでスクロールが無効化されます。 もしスクロールを有効化させたい場合は、以下のコードを使います。 $(window).off('.noScroll'); 上記、２つのコードを、スクロールを無効化させたいときと有効化したいとき、それぞれのタイミングで読むこむように記述すれば、スクロールの ON / OFF
HTML の 〜 内に書くタグの順番にも気を遣ってみた。
今アナタがご覧になっている、このオンズのウェブサイトでは読み込み速度のスピードアップや各種マークアップのクオリティ維持のために随時徹底した改善作業を行っています。 これまでも本ブログにて様々なテクニックを紹介してきましたが、今日は<head>〜</head>タグ内のコードにフォーカスして、弊社が実際に行っているHTMLマークアップの考え方を紹介していきます。 ブラウザで「要素を検証」して実際にコードを見てもらうのが手っ取り早いのですが、参考までに以下にコードをコピーして記載します。 今日（2016年1月20日）現在のオンズのウェブサイトの<head>〜</head>タグは次のように記載されています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="author" content="//on
【2016年版】オンズのウェブサイトで実際に使っているWordPressプラグイン × 11個
はじめに 「他のウェブサイトではどんなプラグインを使っているのか？」 WordPressで構築したサイトを運営していると、他のブログでどんなプラグインが使われているのか気になりますよね。 そこで今日は、今アナタがご覧になっているこのブログ、オンズのウェブサイトで実際に使っているプラグインをすべて紹介します。 タイトルそのまま「【2016年度版】オンズのウェブサイトで実際に使っているWordPressプラグイン」です。 特に目新しいプラグインはありませんが、私たちのウェブサイト運営に関する哲学の一端を垣間見れると思います。 以下、まずはプラグインの利用に関する私たちの基本的な考え方から紹介します。 オンズのWordPress運営の方針 私たちは、ウェブサイトを運営する際に、自分たちで取り決めたいくつかのガイドラインに従っています。 そのうちの１つが「プラグインはなるべく使わない」という方針。
［Coda］×［WordPress］で開発をスピードアップする拡張機能
ウェブサイトを構築するとき、まず最初に考えるのが「WordPressを使うか否か？」という選択肢。 クライアント様の要求を満たす手段としてWordPressは最も優れたCMSであると言えます。 WordPress › 日本語 そしてサイトのデザインが決まった後、次はコーディング作業に移りますが、ここでイチオシのアプリが［Coda］です。 単なるエディタという枠組みを超えて、ファイルマネージャーとしての機能も強力で、なおかつFTPも使えます。 ウェブサイトを構築するために必要な機能が網羅されており、価格も比較的安価（9,800円）なので、まだ使ったことがないウェブサイト制作者の方は導入を検討するべきでしょう。 パニック – Coda 2 そしてそして。 既に両者を愛用しているならば、ぜひインストールしておくべきなのが［Coda］の拡張機能「WordPress Syntax Mode for
WordPress4.4以降からhead内に挿入されるようになった不要なタグ「Embed」を削除。 - ONZE
先日WordPressがアップデートされて「Version 4.4」がリリースされました。 いくつかの新しい機能が追加されましたが、今回から採用された「Embed」は比較的新しいシステムなのでご存じない方が多いと思います。 この機能は、他のウェブサイトで「oEmbed」に対応している記事を、自分のブログに埋め込み可能になるもので、WordPress4.4 以降からは記事のURLを貼るだけで簡単に引用表示できます。 なお「Embed」機能で引用表示される情報は以下のとおり。 アイキャッチ画像 タイトル 抜粋テキスト サイトロゴ サイトタイトル コメント数 共有ダイアログ また「Embed」対応のために、WordPress4.4にアップデートすると<?php wp_head(); ?>のときに下記のコードが自動で挿入されるようになります。 <link rel='https://api.w.or
【jQuery】超簡単にカウントダウン・タイマーを設置できる［Simple.Timer］の使い方
必要なファイルを読み込んでおいて、簡単なjQueryとHTMLを記述するだけで、ウェブページにカウントダウン・タイマーを設置できるスクリプトを紹介します。 実装したサンプルは以下URLからご覧になれます。 実装サンプル：https://on-ze.com/demo/jquery-simple-timer/ カウントダウンはサイトにアクセスした時点から始まります。 またカウントが終わったときに指定した要素にCSSのクラスを追加できるので、カウント中とカウント終了後でデザインを変えることも可能。 シンプルで使い勝手のいいjQueryプラグインです。 設置方法は以下より。 超カンタン［Simple.Timer］の設置方法 まずは公式サイトから必要なファイルをダウンロードしてきましょう。 ダウンロード：http://csouza.me/jQuery-Simple-Timer/ 圧縮されているzip
【inview】オンズ » 【jQuery】ウィンドウ内に要素が表示されたときに処理を行う［ jquery.inview］プラグイン。
【jQuery】ウィンドウ内に要素が表示されたときに処理を行う［jquery.inview］プラグイン。 特定の要素がブラウザの表示領域に現れたときに処理を実行するjQueryプラグイン。それが［jquery.inview］です。 このプラグインを利用すると、ウィンドウに指定した要素が現れたタイミングで様々なイベントを施すことができます。 今回、以下のリンク先にて用意したサンプルでは、要素が画面内に現れるタイミングでフェードインしながら表示させ、逆に画面から外れるとスタイルシートでopacity:0;を効かせて透明化する、という処理を行っています。 ［jquery.inview］：実装サンプル 使い方、実装方法は以下のとおり。 ［jquery.inview］の実装方法 まずはGithubに用意されている公式の配布サイトからプラグインのファイルをダウンロードしてきましょう。 Github :
【jQuery】画像や動画をズームして表示できる［Magnific Popup］を紹介します。
レスポンシヴ対応で、画像や動画をズームして表示できるjQueryプラグイン［Magnific Popup］を紹介します。 基本的な動作は所謂「Lightbox」と同じですが、オプションの設定により、画像がスムーズにズームして表示されるようになります。 まずはサンプルをご覧ください。 Magnific Popup：オンズによる実装サンプル ファイルのダウンロードは以下の公式サイトまたはGitHubからどうぞ。 Magnific PopupGitHub［Magnific Popup］の実装方法ダウンロードしたファイルのうち、スタイルシートの「magnific-popup.css」とスクリプトの「jquery.magnific-popup.js」をHTMLの<head>〜</head>内に設置します。 またこのとき、jQueryの本体ファイルも同時に読み込んでおきます。 <link rel="s
【CSS3】壮大な宇宙にトリップできる［DarkForce.css］を紹介します。
投稿日：2015年5月9日 更新日：2015年5月9日 CSS, Design 4072文字：約7分 ONZE 株式会社 オンズ ONZE https://on-ze.com/archives/2589 今日はオンズのオリジナルのスタイルシート［DarkForce.css］を紹介します。 まるでスターウォーズに登場する宇宙船に乗っているような感じで、壮大な宇宙の彼方にトリップしていけるCSSのテクニック。 まずはサンプルをご覧ください。 ONZE – CSS3［DarkForce.css］ 以下、［DarkForce.css］のキモの部分を解説します。 HTMLの記述まずはHTMLの記述ですが、body要素の直下に以下のコードを記述します。 <div id="d1"> <div id="d2"> <div id="d3"> </div> </div> </div> body要素との組み合わ
【jQuery】レスポンシヴ対応の高機能・高品質スライダー［slick］の使い方。Ver.1.8.1対応
【jQuery】レスポンシヴ対応の高機能・高品質スライダー［slick］の使い方。Ver.1.8.1対応 高機能・高品質なjQueryスライダー［slick］の使い方を紹介します。 このjQueryスライダーは「FlexSlider」「BxSlider」「flickity」「Swiper」など、他の優良jQueryプラグインと並んで紹介されることも多く、公式サイトでは「the last carousel you’ll ever need.（訳：あなたが必要とする最後のカルーセル）」と謳われており、実際、オプションの豊富さや安定した挙動が評価され、多くの制作者様がオススメし、また実際のウェブサイトでもよく使われています。 公式サイトは以下。 公式サイト：slick 「get it now」というリンクを押した後、「Download Now」をクリックすると配布されているファイル一式をダウンロ
【jQuery】フィルターやソート機能にも対応したMasonry風jQueryプラグイン［Isotope］の使い方。
グリッドに沿って各要素をタイル状にレイアウトするプラグインで、有名なものでは［jQuery Masonry］が挙げられます。 この分野のjQueryプラグインでは最も知名度が高く、初心者の方でも比較的簡単に導入できるので、使っている方も多いでしょう。 ある程度の知識があればカスタマイズも容易にできるので、個人的にもお勧めできるプラグインです。 唯一の難点といえば、デフォルトでは要素のフィルタリングやソート機能に対応していないこと。 今日紹介する［Isotope］は、超高機能なフィルター機能、ソート機能を兼ね備えた「Masonry風」のプラグインです。 実装サンプル まずはサンプルをご覧ください。 サンプル・デモ：Masonry風プラグイン［jQuery Isotope］の使い方 実はこのプラグイン、弊社オンズのウェブサイトのトップページでも利用しているので、「見覚えのある動きだ」と感じた方
【jQuery】超万能スライダー FlexSlider の使い方をマスターする。 - ONZE
今日紹介するのは jQuery プラグインの［FlexSlider］です。 これ、かなり便利です。 レスポンシヴ対応、タッチコントロールのフリックスライドにも反応、カルーセルもＯＫ、画像にリンクを貼ることはもちろん、キャプションも表示可能、動画もスライドできる、コントロールボタンやナヴィゲーションも細かく設定できる…。まさに“超万能”のスライダー。 とにかく「なんでもできる」印象で、スマートフォン対応サイトなどでは特に真価を発揮するのではないでしょうか。 まずはサンプルをご覧ください。 【FlexSlider】→サンプルデモ 高機能ですが、その導入方法は比較的簡単です。 ［FlexSlider］の導入方法 まずは以下のサイトから［FlexSlider］のプラグイン本体をダウンロードします。 http://flexslider.woothemes.com 続いて <head>〜</head>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
