Webの記事一覧

iPhone SafariでSVGが表示されない場合の対処方法

iPhoneでSVGが表示されない場合の対処方法です。正確にはiOS/MacのSafariでdisplay:flexの中にsvgタグを入れると表示されないということ。ChromeやEdgeでは表示されるので、Safar...

WordPressで自作のSNSのシェアボタンを設置する方法です。当サイトではこれまで「AddToAny」というSNSシェアボタンを自動で設置してくれるプラグインを使っていました。特に不便もなく使っていたのですが、パ...

PageSpeed Insightsのパフォーマンス改善のためにやったことのまとめです。サイトの表示速度は検索順位に影響する。高速化することでSEO対策として有効となるのは、Webサイトを運営しているユーザーなら知って...

PageSpeed Insightsで「リンクに識別可能な名前が指定されていません」のエラーが出た時の改善方法です。この問題を解決すると、PageSpeed Insightsのパフォーマンス診断で、ユーザー補助のスコ...

PageSpeed Insightsで「フォームの要素にラベルが関連付けられていません」のエラーが出た時の改善方法です。この問題を解決すると、PageSpeed Insightsのパフォーマンス診断で、ユーザー補助のス...

CLSを改善するのにやったことです。 CLS（Cumulative Layout Shift/累積レイアウトシフト数）とは、Webページを表示した際に生じる、レイアウト崩れを示す指標のこと。「PageSpeed Ins...

レイアウト・シフトをデバッグする方法です。事の発端は「PageSpeed Insights」で、「Cumulative Layout Shift (CLS)」に不良が確認されたから。「Google Search Con...

SyntaxHighlighter EvolvedからHighlight.jsへ切り替える方法です。これまで「SyntaxHighlighter Evolved」を使ってソースコードを表示してきたんだけど、レイアウトシ...

highlight.jsを使ってソースコードをきれいに表示させる方法です。「highlight.js」を採用しようと思った理由は、シンタックスハイライト機能として定評があり、継続的に新バージョンが提供されていることがあ...

Font Awesomeをローカルに配置して使用する方法です。「Font Awesome」をCDNで読み込んでいただけど、これが結構重くて「PageSpeed Insights」のパフォーマンスに影響してた。そんなわけ...