WEB

HTML

HTML5 – videoタグの動画がautoplay属性なのに自動再生されない時にチェックすること

私は主に Google Chrome をブラウザとして使用していますが、videoタグの動画が、autoplay属性を付けているのに自動再生されない時があり、ググってみました。ブラウザを更新したり、他ページから遷移してくると再生されますが、...
CSS

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

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

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

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

WordPress – エディタのビジュアル/テキスト切替時のコード消滅を防ぐ!

WordPressの本文入力エディタにはビジュアルエディタとテキストエディタの2種類があります。前者は実際の表示がプレビューされているような感じで、テキスト入力後、アイコンのクリック操作で見出しにしたり書式を変更したり、簡易的に操作できます...
WordPress

WordPress – 超便利!bodyクラスにページスラッグ(最上親も)とカテゴリスラッグを追加

例えば、Webサイトにおいて、ページごとにヘッダー画像や背景を変えたいことは良くあります。そういった場合、css で class指定して任意のプロパティの値を変えることが多いですが、ページ数が多くなったりすると、そのclass指定が面倒だっ...
WordPress

WordPress – Contact Form 7のフォールバック機能。HTML5未対応ブラウザのために

WordPressのプラグイン「Contact Form 7」はHTML5の入力タイプに対応したフォームタグをサポートしています( email , tel , url , number , range , date )。 date や n...
WordPress

WordPress – Contact Form 7にメールアドレス確認欄を追加

WordPressのプラグイン「Contact Form 7」にはメールアドレスの再入力チェックする項目がデフォルトで用意されていません。 しかし、問い合わせフォームなどの制作のほとんどの場合、メールアドレスを再入力で確認する項目を求めら...
WordPress

WordPress – ウィジェットでショートコードを使うための簡単なフック

WordPressのウィジェットでショートコードが使えると便利な時は多々あります。例えば、別記事のホームURLショートコードなどは、テストサイトから本サイトに移行する際にもURLの手直しが不要になるので便利です。プラグイン独自のショートコー...
jQuery

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

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

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

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