ウィンドウサイズで読み込むJavascriptを切り替える方法
パララックスのページを作成しているときにパララックスのjsが邪魔してたので、読み込まないようにする方法をまとめました。 ウィンドウサイズで読み込みJSの切り替え レスポンシブサイトの制作時にPCで読み込んでいるjavascriptを変更したいときに使用するコード。 PCサイトでパララックスのページを制作していて、スマホ表示では真っ白になる現象が起きたので、調べるとでparallax.jsが悪さしてるみたい。そこでスマホ表示のとき、つまりブラウザのウィンドウサイズが649pxのときにはparallax.jsを読み込まないようにしました。 <script type="text/javascript"> jQuery(document).ready(function($) { //PC環境の場合 if (window.matchMedia( '(min-width: 649px)' ).matc
プラグインなしでWordPressサイトを高速化する方法【JS・CSS・キャッシュ設定】
2015/09/19 (更新日: 2018/07/18) プラグインなしでWordPressサイトを高速化する方法【JS・CSS・キャッシュ設定】 PROGRAMMING WordPress WordPressサイトを高速化することで、ユーザビリティの向上だけではなく、SEO最適化にも繋がります。今回はWordPressサイト高速化施策を４つご紹介します。 プラグインでも同様のことができますが、プラグインはバグの元。ということでWordPressプラグインなしでサイトを高速化する方法のみをご紹介します。 JavaScriptを非同期読み込みして、サイト表示を高速化する方法 JavaScriptを非同期で読み込む方法です。asyncをつけるだけで簡単です。方法は下記のとおり。 // 変更前 <script src="myscript.js"></script> // 変更後 <script
WordPress で jQuery を使う時の注意点
慣れていない方には解りにくいところがあるようですので、いまさらですが要点をまとめます。 特別な理由がない限り WordPress に含まれている jQuery を使う WordPress には外部スクリプトを読み込むための独自の仕組みがあります。また、WordPress インストールには初期状態で jQuery が含まれており jquery というスクリプトハンドルですぐに呼び出せる状態となっています。コンフリクトや依存関係の問題を引き起こさないように考えられていますので、特別な理由がない限りこれらを利用します。 コード例 テーマの functions.php に以下のように記述するとサイトの公開側に jQuery が読み込まれるようになります。 function my_scripts() { wp_enqueue_script( 'jquery' ); } add_action( 'wp
jQuery レスポンシブ・スライダー bxSlider | Web Design Leaves
jQuery レスポンシブ・スライダー bxSlider CATEGORY: jQuery | TAG: フォトギャラリー, プラグイン, レスポンシブ 2014年5月18日 レスポンシブ対応のスライダー「bxSlider」(v4.1.2) の使い方や設定に関するメモ。とても簡単に設置ができるが、指定するモードによっては、使用している CSS の関係でスライドの位置がずれてしまったりしたのでその対処法やオプションについて。 目次 bxSlider のダウンロードとインストール bxSlider のサイトの右上の「Download」からファイルをダウンロード。 ダウンロードしたファイルを展開すると以下のようになっている。 images：コントロール類やローディングの画像 plugins：オプションで使用する「jquery.easing.1.3.js（イージング）」と「jquery.fitvi
【まとめ】簡単にパララックスサイトが作れるjQueryプラグイン16選
だいぶイマサラ感はありますが、やっぱパララックスサイトはかっこ良いですしまだ需要もあるはずなので、簡単にイケてるパララックスサイトが作れるjQueryプラグインのまとめをさせてください。 イマサラですがまとめておきたいのです。 では早速いきます。 プログラミングやWordPressを習得するのに一番近道な方法とは？ おすすめパララックスjQueryプラグイン18選 ① Nikebetterworld Parallax Effect サイトURL http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/ デモページ http://ianlunn.co.uk/plugins/jquery-parallax/ 使い方参考ページ parallax.jsをいじってパララックスのデモ作ってみた。 | キリンブログ ナイキのパララッ
jQueryAutoHeight.js - 複数のカラムの高さを最大値にそろえるjQueryプラグイン | かたつむりくんのWWW
Movable Type, Craft CMS, Drupal, HTML, CSS, JavaScript, jQuery etc. jQueryAutoHeight.js とは jQueryAutoHeight.js とは、複数のボックスの高さを自動的にそろえるシンプルな jQueryプラグインです。高さのそろえ方は、次の２通りです。 セレクタで指定したすべての要素を、その中の最大値にそろえる セレクタで指定した要素を、オプションで渡した数ごとに、その中の最大値にそろえる（1行ごとにそろえられる） サンプル 複数のボックスの高さを最大値にそろえるjQueryプラグイン ダウンロード Releases · tinybeans/jQueryAutoHeight ※jQuery 1.9 以降で利用する場合は v0.04 以降をお使いください。 使い方 ファイルの読み込み ダウンロードしたファ
Lightbox
Getting started Download a zip of the latest release (or any previous one) from the Github Releases page. Or install using npm: npm install lightbox2 --save Open up the zip file and take a peek at the barebones, working example that is included in the /examples folder. Ready to set Lightbox up on your page? Start by including the Lightbox CSS and Javascript. You can grab both these files from the
[JS]ページのデザインに影響を与えないパーフェクトなスクロールバーの超軽量スクリプト -Perfect Scrollbar
Perfect Scrollbar Perfect Scrollbar -GitHub 何をもってパーフェクトなのか Perfect Scrollbarのデモ Perfect Scrollbarの使い方 何をもってパーフェクトなのか このスクロールバーにパーフェクトとつけた理由は、下記の4つだそうです。 ページ上のあらゆる要素にCSSで影響を与えないこと スクロールバーがオリジナルのデザインに影響を与えないこと スクロールバーのデザインは完全にカスタマイズ可能であること コンテンツの大きさが変化したら、スクロールバーの大きさと位置がそれに合わせて変化すること Perfect Scrollbarのデモ デモではあずにゃんの画像をホバーすると、スクロールバーが表示されます。 デモ：領域を拡大 バーの長さが変化していることに注目してください！ Perfect Scrollbarの使い方 Step
PMSの不快症状を和らげるためにセントジョーンズワートを飲んでいます。
PMSの不快症状を和らげるためにセントジョーンズワートを飲んでいます。 最近は、サプリメントという形での販売も多いようですが、 私は、ハーブティーで飲むことにしています。 もともとセントジョーンズワートは、薬草です。 ヨーロッパでは古くから煎じて飲まれていたと聞いているので、 出来るだけ、昔から続けられたきた方法で取り入れたいと考えました。 それと、これまでは毎朝紅茶を飲んでいたのですが、 カフェインの摂り過ぎがPMSには、よくないことを知りました。 そこで、これまで飲んでいた紅茶をやめて、 カフェインフリーのセントジョーンズワートを飲むようにしたのです。 あまりクセがないので単独でも普通に飲み易いハーブティーです。 でも、気分を変えたいと思ったときには、 ローズヒップや柑橘系のハーブティーを混ぜて飲むようにしています。 ハーブティーって、香りが良くて癒されますよね～。 PMSだけではなく
[JS]アナタのソーシャルコンテンツをまとめてPinterest風レイアウトで表示するスクリプト -Socialist
ブログのRSSをはじめ、Facebook, Twitter, Tumbler, Google+, Pinterest, Flickr, YouTubeなどのコンテンツを全てPinterest風のグリッドレイアウトで表示するjQueryのプラグインを紹介します。 幅800pxで表示 Socialistの使い方 Step 1: 外部ファイル head内に当スタイルシートと「jquery.js」と当スクリプトを記述します。 ※ダウンロードできるデモファイルにはjQueryの記述が無いのでご注意を。 <link href="../jquery.socialist.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <scri
jQueryアニメーションにイージング（easing）処理をつけるプラグイン【イージング動作サンプル一覧】｜BLACKFLAG
jQueryで要素にアニメーション動作をつけた際、単調な動きだけでなく、加速・減速など動きに強弱のついたエフェクト、イージング（easing）処理をつけることが出来ます。 jQueryのノーマル状態では、イージング処理は「linear」と「swing」の２つが用意されていますが、プラグインを使うことによってアニメーションに多種多様なイージング処理をつけることができるようになります。 そんなイージング処理を、様々なパターンで簡単につけることが出来るプラグインを２つ、イージング動作サンプルと併せて紹介してみます。 jQuery Easing Plugin［jquery.easing.js］ jQuery Easing Plugin［jquery.easing.js］ jQuery Easing – jQuery 日本語リファレンス もはやjQueryのイージング処理では定番のプラグイン。 プラ
コーディングが少し楽になる（かもしれない）meca.js - Webtech Walker
meca.jsはマークアップエンジニアのお仕事を補助しようという趣旨で作ったjavascriptのライブラリです。画像のロールオーバーやIE6の透過png対応などを実装しています。 meca.js yuga.jsやsisso.jsなど、この手のライブラリが数多く出回っている中、なぜ今更こんなものを作ったのかというと、まあ色々と作るに至った理由があるのですが、結局のところ自分で作ったのが一番使いやすし、好きにできるからというのが一番の理由です。 yuga.jsやsisso.jsと違うところは、機能の有効/無効や指定するセレクタなどの設定を外に出して簡単に変更できるようにしたところです。設定を簡単に変更できることで、ある程度柔軟に対応することが可能だと思います。 例えば、それぞれの機能で有効/無効にする設定があるので、ロールオーバーしか使わないのに他の機能も実行するのが無駄だよね、とかいう心配
EXCELをHTMLのTABLEに変換するjQueryプラグイン | ユージック
EXCELをHTMLのTABLEに変換するjQueryプラグイン 2008年12月26日 All Aboutで連載もしているJavaScriptで有名な高橋登史朗氏が作ったEXCELをHTMLのテーブルに変換するjQueryプラグインjquery.csv2table.jsが便利そうなのでご紹介しようと思います。 想定される使用例 テーブルを使用する更新頻度の高い以下のケースに特に有効だと思う。 料金表 対応表(価格や品番など) スペック表(材質や機能など) CMSなどではテーブルをシステム化するのが難しい CMSなどでサイト構築しているとほとんどのページが動的なモジュールで更新可能なのに対してテーブルというのはプログラムによってなかなかシステム化できないというケースが多いと思います。 クライアントはEXCELを利用してデータをまとめているケースが多い 仕事を通じて感じるのは商品の料金表やス
jQueryでページ内スムーズスクロール | 1：n – DETELU Blog
jQueryでページ内リンクをスムーズに移動（ページトップへ等）するものを作ろうと思いいろいろ調べていたら、いいページを見つけたので早速試してみました。 We Ain’t Seen Nothin’ Yet. : [Rails meets jQuery] jQueryで作るページ内目次とスムーススクロール 上記の記事では「Interface.js」を利用しているようなのですが、動作させるコードを読んでいるとInterface.jsをどこで使っているかわからなかったので、jQueryだけで動作確認すると、とりあへず動きました。jQueryの古いバージョンでは「scrollTop」がjQuery自体に含まれていなかったのかもしれませんが、最近jQueryをいじり始めたため詳しいことはわかりません…。 ということでコードはほぼそのまま利用させていただき、スクロール動作だけを変更しています。 使用フ
Facebox 1.2 - LightBox風に角丸で画像をポップアップ | JavaScript | かたつむりくんのWWW
Facebox 1.2を導入してみました。 これまで、画像のポップアップ表示には yuga.js で使われていた「ThickBox 3.1」を使用していました。ThickBox 3.1 は非常に軽い動作で良いのですが、ブラウザの表示領域より大きい画像を表示させると、自動的に縮小されてしまいます。この自動縮小は基本的には便利なんだけど、画像に書かれている文字も読ませたいときなどはちょっと不便になってしまう諸刃の剣でした。 この自動縮小機能を無効化する方法もあるようですが（fixture.jp/blog - thickbox.jsの画像リサイズ機能をオフにする）、それだとブラウザをスクロールしても、オーバーレイされた画像はスクロールできず、結局表示領域からはみ出した部分は見られないという、こちらも諸刃の剣でした。 そこで、今回、動作の軽さという点や、使用できるリンクの種類が ThickBox
jQueryの日本語の解説サイトと国産のプラグイン集
MopBox 複数パネル（デモには100以上のパネルも）の表示にも対応した、画像・Flash・動画などを表示できるドラッグ移動可能なボックス。
[JS]jQueryのプラグイン33+1選 -2010年9・10月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 bxSlider 多彩な表示方法に対応したコンテンツスライダー。 Sudo Slider 各パネルがブックマークできるコンテンツスラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.net-king.com/2010/10/06/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AB%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%99%E3%82%8B%E3%81%A8%E3%83%A1%E3%82%A4%E3%83%B3%E7%94%BB%E5%83%8F%E3%81%8C%E5%88%87/
https://bastion.milkyway1up.com/