タグ

ブックマーク / on-ze.com (5)

  • 【inview】オンズ » 【jQuery】ウィンドウ内に要素が表示されたときに処理を行う[ jquery.inview]プラグイン。

    【jQuery】ウィンドウ内に要素が表示されたときに処理を行う[jquery.inview]プラグイン。 特定の要素がブラウザの表示領域に現れたときに処理を実行するjQueryプラグイン。それが[jquery.inview]です。 このプラグインを利用すると、ウィンドウに指定した要素が現れたタイミングで様々なイベントを施すことができます。 今回、以下のリンク先にて用意したサンプルでは、要素が画面内に現れるタイミングでフェードインしながら表示させ、逆に画面から外れるとスタイルシートでopacity:0;を効かせて透明化する、という処理を行っています。 [jquery.inview]:実装サンプル 使い方、実装方法は以下のとおり。 [jquery.inview]の実装方法 まずはGithubに用意されている公式の配布サイトからプラグインのファイルをダウンロードしてきましょう。 Github :

    【inview】オンズ » 【jQuery】ウィンドウ内に要素が表示されたときに処理を行う[ jquery.inview]プラグイン。
    kuraruk
    kuraruk 2017/04/21
  • 【WordPress】サブディレクトリにインストールしたWordPressをドメイン直下に表示する方法。

    WordPress】サブディレクトリにインストールしたWordPressをドメイン直下に表示する方法。 例えばWordPress体を「http://sample.com/wordpress/」にインストールしたときに、ドメイン直下のURL「http://sample.com」でWordPressのトップページを表示させたいときの設定方法を紹介します。 大きく分けて3つのプロセスを経ることになり、まずは「ダッシュボード」でサイトのURLを指定し、その次にサーバー側で[index.php]を書き換え、最後に[.htaccess]を設定する作業が必要になります。 「ダッシュボード」でサイトのURLを指定 サーバー側で[index.php]を書き換える [.htaccess]を設定する ワードプレスのダッシュボードでの設定 ワードプレスの管理画面にログインして、「設定」→「一般」と進みます。

    【WordPress】サブディレクトリにインストールしたWordPressをドメイン直下に表示する方法。
    kuraruk
    kuraruk 2016/09/12
  • 【jQuery】超万能スライダー FlexSlider の使い方をマスターする。 - ONZE

    今日紹介するのは jQuery プラグインの[FlexSlider]です。 これ、かなり便利です。 レスポンシヴ対応、タッチコントロールのフリックスライドにも反応、カルーセルもOK、画像にリンクを貼ることはもちろん、キャプションも表示可能、動画もスライドできる、コントロールボタンやナヴィゲーションも細かく設定できる…。まさに“超万能”のスライダー。 とにかく「なんでもできる」印象で、スマートフォン対応サイトなどでは特に真価を発揮するのではないでしょうか。 まずはサンプルをご覧ください。 【FlexSlider】→サンプルデモ 高機能ですが、その導入方法は比較的簡単です。 [FlexSlider]の導入方法 まずは以下のサイトから[FlexSlider]のプラグイン体をダウンロードします。 http://flexslider.woothemes.com 続いて <head>〜</head>

    【jQuery】超万能スライダー FlexSlider の使い方をマスターする。 - ONZE
    kuraruk
    kuraruk 2016/05/18
  • 【Font】Google Web Fonts で日本語フォントの[Noto Sans Japanese]を使う。

    【Font】Google Web Fonts で日フォントの[Noto Sans Japanese]を使う。 これ、いつから使えるようになっていたのでしょうか? 今さらなのかもしれませんが Google Web Fonts で日フォントの[Noto Sans Japanese]が利用できるようになっていたので、その導入方法を紹介します。 「Noto Sans Japanese」って何? そもそも[Noto]とは Google と Adobe が共同開発したフォントで、昨年(2014年)の7月16日にリリースされました。 世界中のあらゆる言語がサポートされていて、文字の太さ(font-weight)は7種類も用意されています。 当然、日語にも対応しており、国内のデザイナーの方々が歓喜して導入・利用をはじめたのはまだ記憶に新しいですね。 リリース当時、弊社のブログでも大々的に取り上げ

    【Font】Google Web Fonts で日本語フォントの[Noto Sans Japanese]を使う。
    kuraruk
    kuraruk 2016/03/23
  • 【jQuery】今こそマスターしたい高機能スライダー[Slider Pro]の使い方

    数あるjQueryスライダーの中から目的の用途に合ったものを探すのはちょっとした手間ですが、今日紹介する[Slider Pro]は完成度も高く機能も豊富なので、一度試してみることをオススメします。 名前に「Pro」と付きますがMITライセンスで基的に個人でも商用でも無料で利用できるのでご心配なく。 特筆すべき機能としては以下のようなものがあります。 レスポンシヴ対応 ブレイクポイント設定可能 スワイプ操作、タッチ操作に対応 サムネイル設定 縦・横、両方のカルーセルに対応 フルスクリーン・モードが可能 Retinaディスプレイ用の画像の切り替えが可能 MITライセンス ……などなど。 文字通り「痒い所に手が届く」素晴らしいjQueryプラグインです。 実際に使ってみるとスグにその便利さを感じることができるはず。 試しに実装したサンプルは以下のURLからどうぞ。 [Slider Pro]:実

    【jQuery】今こそマスターしたい高機能スライダー[Slider Pro]の使い方
    kuraruk
    kuraruk 2015/09/07
  • 1