JavaScript

WordPress

jQuery – モバイルメニューのサブメニューを折りたたみにする簡単な方法

WordPressテーマ【Cocoon】をカスタマイズしたWebサイトのモバイルメニューのサブメニューを、アコーディオン(折りたたみ式)にして欲しいという案件がありました。そのためには、サブメニューの親要素(サブメニューを持つ親メニュー)の...
WordPress

jQuery – フォームの入力内容をブラウザを閉じても保持するGarlic.js

測定日や測定値などを複数メモる日常点検のような業務で、手帳にメモるのが面倒なのでスマートフォンからフォームに入力してメール送信したいということがありました。 しかし広範囲をチェックして回るので、その間にブラウザが閉じてしまったり更新してし...
WordPress

WordPress – flamingoに保存されたContact Form 7のデータをHighchartsでグラフ化する(デモあり)

WordPressのプラグイン flamingo は、メールフォームプラグイン Contact Form 7 の送信データをデータベース上に保存するプラグインです。 このデータをグラフ化する案件があったので覚書です。とある装置の日々の測定...
スポンサーリンク
jQuery

CSS3 – 炭酸飲料のような泡を量産するアニメーション

飲料販売サイトのバナーにサイダーの泡のようなアニメーションが欲しいと思い、CSS3とjQueryを使って作成しました。 概要 CSSで泡単体のデザインと基本的なアニメーションパターンを作り、そのスピードや配置や大きさを少しずつ変えてパターン...
WordPress

WordPress – Contact Form 7にURLパラメータを渡して参照元を特定したりアクセス解析する方法

以前、業務システム支援関連のWEBサイトを制作させていただいたクライアントより、「他サイトからのアクセスが見積依頼につながった時にどのサイトから来たのか知りたい」という相談がありました。具体的には、リファラーに応じてIDを取得したいというこ...
jQuery

HTMLエンティティツール

HTMLエンティティツールは、ブラウザがHTMLを表示する際に特別な意味を持つ記号("&'<>^~など)を特別な処理をせずに通常のテキストとしてそのまま出力させ、コード掲載などに使えます。エンコード・デコードの相互変換が可能です。
jQuery

CSS3 – テキストを波のようにゆらゆらと上下に動かすアニメーション

CSS3を使った、テキストを波のようになめらかに動かすアニメーションです。 概要 Webページで h タグなどの見出しにも使えるよう、通常のテキストを1文字ずつ span タグで囲った文字に変換し、それらをインラインブロック要素としてそれぞ...
jQuery

jQuery – スクロール時にグローバルナビゲーションメニューをページトップに固定

Webページのスクロール時に、ヘッダーナビゲーションメニューをページトップに固定するJavaScriptのご紹介です。UIデザインの好みやバランスにもよるかと思いますが、私の場合は、ヘッダーメニューはスクロールでページトップ固定もしくは最初...
jQuery

jQuery – PCとモバイルの表示を変える(ユーザーエージェントを判別してbodyタグにクラス付加)

以前、PCではスプライトアニメーションを表示し、モバイルでは静止画にしたい時がありました。下記コードはユーザーエージェントを判別して iPhone か Android なら bodyタグに mobile-viewクラスを追加します。 jQ...
jQuery

jQuery – 半角英数字と全角英数字を相互に変換する

これは特殊な例だと思いますが、以前、Webサイトの制作で、トップページのみナビゲーションメニューの各テキストを大きく表示させてレイアウトするデザインをしました。 その際に、どうしてもテキストを全角文字にして日本語も英数字も等幅にしたかった...
スポンサーリンク
タイトルとURLをコピーしました