LighthouseでSEO診断！target=”_blank”での外部リンクにはnoopenerかnoreferrerを付けよう
google ChromeのSEOチェック拡張機能「Lighthouse」で検出された問題点を確認して解決していきます 今回はBest Practicesカテゴリにあるリンクがcross-originに対応していない場合に減点される項目です ...
LighthouseでSEO診断！タップターゲットのサイズを調節しよう
google ChromeのSEOチェック拡張機能「Lighthouse」で問題を確認して解決していきます 今回はSEOカテゴリにあるリンクテキストやボタンのタップサイズが足りない場合に問題ありと診断される項目 Tap targets ar ...
LighthouseでSEO診断！十分なコントラスト比を持たせよう
google ChromeのSEOチェック拡張機能「Lighthouse」で問題を確認して解決していきます ひとつ前の記事「【WordPress 5.2】記事ブロックにRSSウィジェットが追加される | WordPressメモ | ONE ...
WordPress5.2から記事編集ブロックにRSSウィジェットが追加される
WordPress5.2から記事ブロックに使えるRSSなどのいくつかのウィジェットが追加されます。 中でもRSSは気になったのでWordPress5.2ベータ版でチェックしてみました。 ウィジェットブロックにRSSほか、カレンダー・タグクラ ...
【WordPress】テーマ「Luxeritas」でのマルチサイト、luxe-manifest.json404エラーと対策
WordPressの無料テーマ「Luxeritas」はPWAに対応しており、SSL化さえしてあれば簡単にWordPressサイト・ブログをPWAに対応させる事が可能です マルチサイトではluxe-manifest.jsonが見つからずエラー ...
【WordPress】AMP・PWAに対応しているWordPress無料テーマ「Luxeritas」
WordPressテーマ「Luxeritas」を利用しています Luxeritas Theme | SEO最適化、レスポンシブ、高カスタマイズ性、とにかく速い、無料の WordPress テーマ 「Luxeritas」は無料ながらAMP対応 ...
【WordPress】記事を複製できるプラグイン「Duplicate Post」の使い方
WordPressで新規記事を書く時に似た構造の記事があれば複製して、それをベースに新記事を書きたいケースもあります 「Duplicate Post」は記事・固定ページを複製して新規下書きを作成してくれるプラグインです 特にエディタが「Gu ...
ウィジェット設定をインポートできるWordPressプラグイン「Widget Importer & Exporter」の使い方
WordPressサイト・ブログのウィジェット設定をエクスポート・インポートできる「Widget Importer & Exporter」の紹介記事になります。 ウィジェットの内容は同じものを一から作成するのは大変な作業なので「Wi ...
【WordPress】Gutenbergで使えるキーボードショートカット一覧
一般的なテキスト編集で使うキーボードショートカットと、便利なGutenberg独自のキーボードショートカット一覧まとめ エディタ操作 Ctrl+S下書き・変更の保存Ctrl+Z変更の取り消し（undo）Ctrl+Shift+Z変更の取り消し ...
【WordPress】マルチサイト別のidを取得する方法
マルチサイト化したWordPressサイトの活用でマルチサイト毎のサイトIDが必要になるケースがあります マルチサイト別のidはマルチサイト化しているとWordPressのグローバル変数に定義されていて、$blog_idで取得可能です gl ...
【WordPress】マルチサイト化でも使えるプラグインまとめ
マルチサイト化したWordPressサイトで使えたプラグインのメモです 使えなかった未対応プラグインも見つかれば掲載します キャッシュ系プラグインは全く使わないので情報ないのでご了承 マルチサイトで使えたプラグイン一覧 WordPress ...
JavaScriptで使える正規表現判別サンプル集
JavaScriptで使う正規表現の判別サンプル集になります。 javaScriptでの正規表現フラグ | JavaScriptメモ 正規表現での判別サンプル集 指定の文字が含まれているか if( str.match(/o/) ){ //含 ...
javaScriptの正規表現フラグ
「i」大文字小文字を区別しない 「i」をフラグに指定すると検索対象を大文字と小文字の区別をさせずに処理が可能になります if(`Hello World`.match(/hello/i)){ console.log('true'); } 「m ...
【jQuery】文字列の前方一致や後方一致を判別する方法
文字列の前方一致や後方一致を判別する方法です 判別にはJavaScriptのstartsWith()を使って前方一致、後方一致にはendsWith()を利用しています startsWith()とendsWith()はECMAScript 2 ...
【jQuery】要素にマウスホバーイベントを実装する方法
jQueryでdivやpタグなどの要素やテキストにマウスホバーイベントを実装する方法です hover()関数でマウスホバーイベントを実装 jQueryのhover()関数はマウスホバーオン時、マウスホバーアウト時の2つの動作を定義する事が可 ...
【CSS】文字色や背景色、枠線などの色を変化させるCSSアニメーション
要素や文字の色が変化するCSSアニメーションパターンです テキストの色を変化させるCSSアニメーション テキストの色を変化させるのに@keyframesでcolorプロパティを変更しています See the Pen CSS Backgrou ...
【CSS】色々なパターンの点滅するCSSアニメーション
HTML（共通） <div class="box"></div> 通常点滅パターン シンプルなフラッシュパターンです See the Pen CSS Flash animation 1 by yochans (@yochans) ...
小刻みに震えるCSSアニメーションサンプル
文字や画像の要素が小さく小刻みに震えるCSSアニメーションのサンプルコードです。 このサンプルコードはanimationプロパティ、@keyframesを利用しています。 小刻みに震えるdiv要素のCSSアニメーション div要素を@key ...
要素を回転させるCSSアニメーションサンプル
CSSアニメーションで要素を回転させるサンプルコードです。X軸回転・Y軸回転での回転アニメーションを紹介しています。 CSSアニメーションを使って要素を回転 要素を回転させるCSSアニメーションのサンプルです。 See the Pen CS ...
@keyframesを使ったCSSアニメーションの基本的な使い方
CSSアニメーションで利用する@keyframes（キーフレーム）を使う方法と簡単なサンプルです。 See the Pen Flowing Text CSS Animation by yochans (@yochans) on CodePe ...
【Phaser】スプライトシートからAtlasesデータを生成できる無料ツール「Leshy SpriteSheet Tool」
phaser3でも使える無料のAtlasesデータ生成ツールのメモ phaser3にはTexture Packerが対応していますが、無料版でも高機能にみえてまずスプライトシートが読み込めないというね 結局、Texture Packerの無 ...
【Phaser】Tweenを使ったフェードアウトとフェードインの実装
Phaser 3のTweenを使ったフェードアウトとフェードインを実装する方法です Tweenを使ったフェードアウトの実装サンプル See the Pen Phaser 3 Tween FadeOut by yochans (@yochan ...
【Phaser】複数のシーンの作成する方法とコンフィグ設定
Phaser 3でシーンを作成する方法とコンフィグ設定にシーンを追加する方法です 利用するシーンをコンフィグに設定する scene:とする事でコンフィグに利用するシーンを設定できます（ひとつの場合は配列じゃなくてもOK） 複数のシーンを設定 ...
【Phaser】シーンを切り替える方法
Phaser 3でシーンを切り替える（移動・移行）する方法です See the Pen Phaser 3 Chenge Scenes by yochans (@yochans) on CodePen. シーンの切り替えにはシーンを移動するイ ...
【jQuery】CSSファイルを読み込んでheadに追加する方法
jQueryで動的にCSSファイルを読み込んでheadに追加する方法です 他にも色々と方法はありますが、ぱっと見わかりやすいコードでひとつ HTML（<head>内） <style type="text/css" id=" ...