HTML / CSS / JavaScript（jQuery）でビンゴゲームを作成
ビンゴゲームデモページ まずは何はともあれ完成品を見てみましょう。ルーレットを回す際に音が出ますのでご注意を。 >> JavaScriptでビンゴゲーム ソースコードは、記事最後にGitHubのUR […]
Search Results for: jQuery
video要素のload()をjQuery3系用に書き換える方法
JavaScriptでHTMLのvideo要素を操作 今まで、video要素のloadメソッドを以下のように書いていました。（jQueryを使用しています） $(function(){ $(“#video要素のID”). […]
D3.jsで円グラフを作成する（jQueryでプラグイン化）
HTMLを準備 D3.jsを使用して円グラフを作成します（v4：バージョン4）。jQueryでプラグイン化することを前提に作成したいので、jQueryもCDNで読み込みます。まずは基本のHTMLコードを以下のように書きま […]
jQueryで数字のカウントが上がるアニメーションを作成する方法
ルーレットのようにカウントが上がるアニメーション 最近、コーポレートサイトやプロダクトサイトで見かけるカウントアップのアニメーション。サイトの構築実績数やダウンロード数など、「この数字見て！」感出しまくりのドラムロール的 […]
jQueryでページのトップに戻るボタンを作成する方法
ページの右下に固定で要素を配置 まずは、HTMLを以下のように準備。このサイトの右下に出てくるボタンの要素で、WordPressで作っているので、footer.phpファイル内に記述してます。 <div id=”m […]
jQueryでドロップダウンメニューを作成する方法
ドロップダウンメニューのHTML構成 ベースになるHTMLの構成は以下の通り。id=’menu’が設定されているh1要素をクリックしたら次の要素のul要素がドロップダウン表示されるという動きを作りたい。CSSでの調整は割 […]
jQueryプラグインの作り方
jQueryのプラグインを作る（基本編） jQueryの基本的なプラグインの作り方を公式サイトのマニュアルを元に自分なりの解釈を交えてまとめておきます。 jQuery: How to Create a Basic Plu […]
WordPress内のPHPファイルにAjax通信を行う方法と注意点
JavaScriptでWordPress内のPHPファイルにAjax通信を試みる 実装する機会があったので、改めて調べてみました。WordPressのCodexに書いてあるwp_ajax(action)の説明を参考にして […]
JavaScriptで数値をゼロパディング（ゼロ埋め）の文字列に変換する方法
ゼロパディング（ゼロ埋め）をJavaScriptで実装するには？ かなり今更感があるのですが、ちょっと目からウロコだったのでメモ。今まで、ゼロパディングといえば、以下のような処理方法で実装していました。例は、日付の前にゼ […]
WordPressのテーマ情報を取得する方法
WP_Themeオブジェクト 今まで知らなかったのが不思議なくらい基本的な内容。テーマの情報をちゃんとWordPressはオブジェクトとして保持してくれている。何がやりたかったかというと、JavaScriptやCSSをw […]
WordPress制作マニュアル
WordPressのテーマやプラグインの制作を行う上で実行すべき事項や規約、便利なプラグインなど自分の中で定めているルールをまとめておこうと思います。随時更新。 コーディング規約 WordPress.org で定めてある […]
iOS（iPhone Safari）でclickイベントが発生しない場合の対処方法
ハンバーガーメニューの反応が悪い iPhoneユーザーから「ハンバーガーメニューの反応が悪い」と言われ、ちょっと調査した内容をメモ。最初にjQueryで以下のように設定していました。 $(“#button”).on(“c […]
D3.jsで円グラフを作成する（アニメーション追加）
アニメーションに必要なメソッドの追加 前回、前々回の続き。最後にアニメーションを追加します。path要素に設定を行います。 // Path Setting pieElement.append(“path”) .style […]
D3.jsで円グラフを作成する（テキストの追加）
合計値を円グラフ中央に表示 前回作った円グラフをもう少し改良。まずは円グラフの中央にグラフの合計値を表示させたい。 円グラフの中央をあける まずは円グラフの中央をあけます。前回デフォルト値で設定していたinnerRadi […]
WordCamp Kyoto 2017 参加レポート
WordCamp Kyoto 2017 に参加 アイキャッチは「参加します！」ですが「参加してきました！」です。先日、京都大学の構内で行われた WordCamp Kyoto 2017 に参加してきました。6/24（土）の […]
Googleタグマネージャーでクリックイベントを計測する方法
クリックイベントのイベントトラッキング おなじみGoogleAnalyticsで計測していたクリックイベント。a要素やimg要素のクリックイベントにインラインで実装する方法をよく見かけると思います。 <a href […]
WordPressのカレンダーウィジェットにカラーピッカーを実装
カレンダーウィジェットのカスタマイズ WordPress Default Widget Extensionプラグインのカレンダーウィジェットに拡張機能を追加しようと思い、色々考えた結果「土曜日・日曜日の背景色や文字色を変 […]
メディアライブラリの表示方法（Ajaxウインドウ編）
WordPressのメディアライブラリ（Ajaxタイプ） 前回のメディアライブラリ（リロードウインドウ編）に続いてAjax版のメディアライブラリの実装方法をまとめます。基本的にはリロード版と同じ構成で作っていこうと思いま […]
メディアライブラリの表示方法（リロードウインドウ編）
WordPressのメディアライブラリ WordPressにはメディアライブラリという画像や動画などのメディアファイルを管理する機能があります。WordPressのバージョンが上がる度に益々使いやすくなっており、画像のト […]
最近のコメント