長文の記事をアコーディオン表示にして折りたためるプラグイン「Collapse-O-Matic」 – 山田どうそんブログ
【 最新の更新日は 2019年12月28日 です】 山田どうそんです。 あまりに長い記事を書いた場合、「続きはこちら」みたいにして、折りたたんでおけると本当に興味のある人にだけ自分の記事を読んでもらうことができますよね。 導入するだけで、ショートコードで簡単にアコーディオン表示させることができるプラグインを紹介します。 プラグインの特徴 長文記事を折りたたんでおくことができる 導入するだけであとはショートコードを利用するだけなので簡単 プラグインのダウンロード プラグインのダウンロードは下記のリンク先からもできますしWordPress内で「Collapse-O-Matic」と検索してもダウンロードが可能です。現在のバージョンは「1.7.3」。 プラグインの使い方 管理画面の場所 「メインサイドメニュー」＞「設定」＞「Collapse-O-Matic」から設定ができます。 プラグインの設定
jqueryを使用してのカナ、かな欄の自動入力 - Qiita
氏名などの入力欄で「かな」欄がある場合に、漢字の方を入力するだけで「かな」欄も自動入力できるようにしたい。 jquery.autoKana.jsのインストール jqueryが使用できるプラグインで、使用方法も大変簡単なので導入してみる。 https://github.com/harisenbon/autokana からダウンロードできます。 ダウンロードした「jquery.autoKana.js」を任意の場所に置きます。 ここでは「/public/js/common/jquery.autoKana.js」に設置したと仮定します。 肝は $.fn.autoKana('入力元', '自動入力先', {katakana : false}); 第三引数のkatakanaはデフォルトfalseです。false=ひらがなで true=カタカナで自動入力してくれます。 使用方法 htmlに下記のように記
2015年総まとめ、jQueryのプラグインとスクリプト100選
毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。 今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやSVGのアニメーションでしょうか。あとレスポンシブ周りも単にサイズ変化に対応させるだけでなく、ユーザビリティを向上させるものが充実していました。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 ソーシャル関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェクト関連 テキスト関連 タブ・アコーディオン関連 テーブル・リスト・チャート関連 フォーム関連 パネル・ボックス関連 モーダル
背景に動画を使ったサイトが手軽に作れる Vide
「Vide」 はWebページの背景に動画を表示するjQuery プラグインです。最近よく見かける、動画上にオーバーレイでコンテンツを表示するプロモーションサイトが簡単に制作できます。 minify(圧縮版)が 3.6KBと軽量で、Google Chromeなどのモダンブラウザーと、Internet Explorer 9以降に対応しています。iOSとAndroidでは動画のインライン再生ができないので、動画の代わりに静止画を表示します。 MITライセンスですので、著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、Vide をGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。 Videは、パッケージマネージャーの「bower」でもインストールできます。b
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
jQueryの20個優れたカウントダウンスクリプトとプラグイン - オープンの力 - オープンソースの力
Circular Countdown jQuery Plugin - MORE INFO / DEMO Coconut – Jquery Countdown Plugin - MORE INFO / DEMO Dynamic Countdown with Counter – MORE INFO / DEMO JBMarket Circular Countdown - MORE INFO / DEMO LuxCountdown - MORE INFO / DEMO Easy Countdown – MORE INFO / DEMO jsCountdown - MORE INFO / DEMO Broadcast Countdown Widget - MORE INFO / DEMO JavaScript Animated Counter - MORE INFO / DEMO Fancy Co
[JS]異なる高さを単に揃えるだけでなく、グルーピングや列に応じて揃えることも可能な便利スクリプト -matchHeight
デモページ：幅1,200pxで表示 これは、ボーダー無しの状態。 jquery.matchHeight.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。 <head> ... <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.matchHeight.js"></script> </head> Step 2: HTML 適用するパネル全てに同じclassを付与します。 各パネルが横一列に配置された場合は、全て同じ高さに。複数の列に配置された場合は各列で一番高いも
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
RWDにも対応したjQuery.heightLine.js
今回紹介するプラグイン jquery.heightLine.js 「jquery.heightLine.js」は、複数のブロックレベル要素の高さを揃えるJavaScriptライブラリー「heightLine.js」のjQueryプラグイン版です。 以前から愛用者の多いheightLine.jsの新バージョンとして、2013年10月に公開されました。 jQuery本体と「 jquery.heightLine.js 」を、利用するWebページの body の閉じタグ直前で読み込みます。 //(中略) <script src="jquery.min.js"></script> <script src="jquery.heightLine.js"></script> </body> </html> step2 基本的な使い方 実際にプラグインの使い方を説明します。 jquery.heightLin
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
パララックスエフェクトの基本
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55％で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にする方法
jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にする方法を紹介します。 １．jQuery UI Tabsについて 基本情報として、jQuery UI Tabsでタブ切り替えを行う方法については「jQuery UI Tabsを使ってタブを実装する」を参照してください。 サンプル ２．hashchangeプラグインについて jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にするには、hashchangeプラグインを利用します。 hashchangeプラグインの基本的な設定方法については「jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」（実装解説つき）」を参照してください。 ３．jQuery UI Tabsでhashchangeプラグインを利用する ２項のリンク先の説明ではjQuery
jQueryの可能性は無限大！？プラグインまとめ番外編 - Webデザイン初心者向けのあれこれ
どうもこんばんは、僕です。 今まで何度かjQueryプラグインを紹介してきましたが、今日は番外編？と言った感じです。 一応今までのプラグインまとめ記事はこちらです。 ・ひと工夫でこんなことも！ユニークなjQueryプラグイン5つ集めてみました ・すっごい動くよ！テキストをアニメーションさせるjQueryプラグイン集めてみた ・今更ながらみんな大好き（？）「lightbox」プラグインを集めてみました ・jQueryを使ったスライド・ギャラリーのライブラリを7個集めてみた ・jquery-tubular http://code.google.com/p/jquery-tubular/ ページの背景にYouTubeの動画を指定することができます。 背景を考える幅が広がるのではないでしょうか。 ・jquery.snipe http://rayfranco.github.com/jquery.sn
[JS]jQueryのプラグイン33+1選 -2012年12月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 videoBG 動画をページの背景（あずきの水玉）でもdiv要素の背景（暗いトンネル）でも配置します。 Superslides フル
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
WebデザイナーのためのJavaScript、jQueryの勉強法 - DESIGNMAP
まったくのプログラミング初心者の方を対象にJavaScriptの独学方法をのべていきたい。今回とりあげるJavaScriptの勉強法はあくまでWebデザイナー向け（もしくはフロントエンドエンジニア向け）なので、Node.jsのようなサーバーサイドJavaScriptはとりあげていない。 JavaScriptとjQueryをどちらから勉強するべきか。今回はあえて邪道とわかっていながらもjQueryにふれるという順番をとった。本来は、JavaScriptの基礎をしっかりおさえてからjQueryにすすむのが正統である。今回はトップダウン方式で実践にふれてから、基礎に戻る学習法を提案したい。 jQueryはJavaScriptを楽に開発するためのライブラリで、jQuery自体はJavaScriptのコードでできている。最初にいきなりjQueryにふれて、HTMLを動的に操作する（これをDOM操作と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flatis
新着記事
Media Queries