ヨウスケのなるほどブログ。

WordPressの特定のカテゴリにだけ表示するPHPサンプルコードのメモです in_category()カテゴリで分岐を設定できます <?php if(in_category(array('カテゴリ名1', 'カテゴリ名2', 'カ ...

「ANIME.JS」で複数の連続したアニメーションを実装する方法です delayで開始時間をずらして繋いだり、Keyframes、タイムラインでの実装など様々な方法が用意されています delayのみで連続メーション この方法は簡単に利用でき ...

「ANIME.JS」で複数の要素をターゲットにしてアニメーションを指定する方法です カンマ区切りやスペース区切りでそれぞれ違った複数指定が可能です カンマ区切りでor指定 targets: '#aaa , #bbb' 繋げて記述してand指 ...

軽量で使いやすいアニメーションに特化した人気のJavaScript拡張ライブラリ「ANIME.JS」 「ANIME.JS」はCSSアニメーションの操作だけでなくSVGやDOMアニメーションの操作も可能です アニメーション関係のJavaScr ...

軽量で使いやすいアニメーションに特化した人気のJavaScript拡張ライブラリ「ANIME.JS」 「ANIME.JS」はCSSアニメーションの操作だけでなくSVGやDOMアニメーションの操作も可能です アニメーション関係のJavaScr ...

記事毎にCSSを追加するにあたりプラグインの「WP Add Custom CSS」を利用してきましたが、プラグインを外した場合に過去の記事を修正する必要が出てきます 「WP Add Custom CSS」も、誤って外してしまい個別に記述して ...

「addEventListener」だけに限らないですが「getElementByClassId」のid指定だと動くけど「getElementsByClassName」のclass指定だと動作しない場合 const target = doc ...

ドラッグ＆ドロップをトリガーにしたJavaScriptイベントの実装サンプルです drag&drop系イベント一覧（JavaScript） ドラッグ&ドロップする要素に適用するイベント名 dragstart ドラッグが開始さ ...

スクロールをトリガーにしたJavaScriptイベントの実装 JavaScript：スクロールをトリガーにしたイベントの動作サンプル サンプルではwindowのaddEventListenerにトリガーイベントscrollを定義して実行して ...

要素上でのマウスオーバー（ホバー）をトリガーとしたイベントサンプルです CSSで言うところの:hoverですが、マウスカーソルが要素上に入った時・入っている時・動いている時・離れた時など、様々なトリガーが存在します JavaScript・j ...

ダブルクリックをトリガーにしたJavaScriptイベントの実装サンプルです JavaScript・jQueryそれぞれ、functionとアロー関数版 JavaScript：ダブルクリックイベント動作サンプル サンプルではダブルクリック検 ...

要素上での右クリックをトリガーにしたJavaScriptイベントの実装 ブラウザのコンテキストメニュー以外の動作を指定したい場合に有効なトリガーイベントです JavaScript・jQueryそれぞれ、functionとアロー関数版のサンプ ...

要素クリックをトリガーにしたJavaScriptイベントの実装 JavaScript・jQueryそれぞれ、functionとアロー関数版のサンプルコードです 動作サンプル 動作サンプルではクリック数を表示しています See the Pen ...

「Animation Events」はCSSのアニメーションの状態を取得してトリガーイベントを実装できます 「Animation Events」で取得できるイベントは「animationsyart（開始時）」「animationiterat ...

「Animate.css」のアニメーションを利用してスクロール量に応じて要素を表示していくサンプルです 色々な方法が考えられますが実装が簡単なものをまず 動作サンプル See the Pen Animate.css Scroll IN（jQ ...

「Animate.css」のアニメーションをマウスホバー（マウスオーバー）で開始させるサンプルコードです 動作サンプル See the Pen Mouse Hover Ivent（CSS Only） by yochans (@yochans ...

「Animate.css」のアニメーションをクリックまたはタップ動作で開始させる方法です 色々な方法が考えられますが クリックでclassを付与してアニメーション開始 アニメーション終了でclassを解除 が、一番お手頃かな思います Jav ...

PCブラウザは現在「Chrome」「FireFox」「edge」を利用していますが、メインブラウザは長年「Chrome」を使っています 「FireFox」は過去に使ったきりでしたが昨年「Firefox Quantum」の登場を受け最利用 「 ...

AMP自動広告を設置して成果レポートを確認する方法です AMP自動広告の成果レポートを確認する方法 「パフォーマンスレポート」にてレポートタイプ「広告の動作」を選択 これでリストにてAMP自動広告のレポートが確認できます

手軽にCSSアニメーションが実装可能なクロスブラウザなCSSライブラリ「Animate.css」で利用できる各アニメーションのサンプルコード集です 読み込み方法やカスタマイズの記事もあります バウンド キーフレームで弾む感じを演出するのもひ ...

手軽にCSSアニメーションが実装可能なクロスブラウザなCSSライブラリ「Animate.css」 CSSアニメーションは記述を理解していてもスムーズな動きを作るのは結構大変なので、こういったライブラリは利用する手もありですね ひとつのアニメ ...

Googleアドセンスの一日の更新時間は17時頃に実行される場合、タイムゾーンがデフォルトのロサンゼルスタイムに設定されていると思います これは、タイムゾーンを日本の東京時間に変更する事で、0時に更新される様にする事が可能です Google ...

AMP自動広告を導入して数日ですが、元々設置していたAMPアドセンス広告と増加した分のAMP自動広告の比率を調べてみました AMP自動広告で追加された広告枠数 スマホでAMPページを確認してもどこにAMP自動広告が差し込まれてるのかイマイチ ...

PCでは正常に動いててもスマートフォンだとクリックが反応しなかったり画像描画が削除しても消えなかったりした場合の解決策です PCで正常に機能しているのにモバイル端末だと不安定な場合は、ソースコードの記述ミスではなくスペック差による処理落ちの ...

「CreateJS」でTickerを利用してコンテンツを更新するサンプルコードです 最低限必要なコード createjs.Ticker.addEventListener("tick", 実行関数名); 指定した関数を初期値のFPSで実行しま ...

「CreateJS」で丸いボタンを作成してクリックイベントを作成するサンプルコードです 背景のみにクリック可能にすると文字部分はクリック出来ません 背景と文字をContainerを利用してグループ化する事で全体をクリック可能になります Se ...

『新規サーバー契約で１ドメインプレゼント』というキャンペーン中の「エックスサーバー」 X10 X20 X30どれでも対象なのは嬉しいですね X20 X30だと常時プレゼントドメインというのをやっていて、追加でもうひとつって感じですね 最大で ...

「CreateJS」でText()を使って表示する文字列や数値をアウトライン描画するサンプルコードです 対象.outline = 1; outlineは描画するテキストを枠文字にするプロパティです 指定する数値は、枠線のサイズになります S ...

以前記事にした時に試してみましたが、お試しでWordPressを試してみる程度（無料期間だけ使う）には良いとの結論でした 【WordPress】ムームードメイン for WPホスティングを使ってみました | なるほど。 やたら重かったり月額 ...

「CreateJS」でText()を使って文字列や数値を表示するサンプルコードです 基本的な記述 createjs.Text(表示するテキスト,フォントスタイル,フォントカラー) 例 createjs.Text("Hello World", ...