FontAwesome

[WordPress] ウィジェットエリアを転用して左サイドバーにした（CSS）

[WordPress] ウィジェットエリアを転用して左サイドバーにした（CSS）

WordPressサイトで、ワイド画面の左側の空きスペースを活用し、目次を左サイドバーとして表示するカスタマイズを行いました。このカスタマイズは、使っていないウィジェットエリアを、CSSで転用して実現しています。画面幅に応じて表示を切り替える仕組みも導入し、小さな画面では従来の記事内目次を表示するようにしました。すぐに見出しに飛びたいパソコンで記事を読んでいるときに、スムーズに見出しに移動できるように、左サイドに目次を追加しました。従来の目次は、導入文の後（１つ目の見出しの前...

2024.08.29 2024.08.30

とりあえずのメモプログラミングホームページ運用

ブログカード抜粋の先頭に「関連」を付けた

ブログカード抜粋の先頭に「関連」を付けた

Cocoonテーマの「ブログカード」のカスタムCSSクラス「simple」の先頭に「【関連】」という文字を自動的に追加するようにしました。コードを整理して、よりスッキリとしたデザインに改善しました。「関連」という文字を先頭に追加したCocoonテーマのブログカードにCSSクラス「simple」を追加すると、文字リンクにするようにしています。このまえに「【関連】」という文字を自動的に追加するようにしました。.wp-block-cocoon-blocks-blogcard.sim...

プログラミングホームページ運用

サイト高速化のため FontAwesome 5 を 4 に戻した [WordPress, Cocoon]

サイト高速化のため FontAwesome 5 を 4 に戻した [WordPress, Cocoon]

サイト表示の負荷を減らすために、FontAwesome 5 から 4 に変更しました。CSSで一部で FontAwesome 5のアイコンフォントを利用していたので、FontAwesome 4 に変えました。Largest Contentful Paint を速めるのに、ちょっと効果がありました。項目FontAwesome 5FontAwesome 4パフォーマンス9294First Contentful Paint1.9 秒1.8 秒Largest Contentful P...

2023.07.15 2023.07.16

とりあえずのメモホームページ運用

「最大コンテンツの描画」のRender Delayを減らす（Largest Contentful Paint）

LCP（Largest Contentful Paint）の数値を改善できないか、「Render Delay」に注目してみました。使っていないアイコンフォントを軽量化したら、少し改善しました。項目前後Largest Contentful Paint2,900 ms1,760 msRender Delay2,250 ms1,020 msLargest Contentful Paint の Render Delay が大きい気がする「Largest Contentful Pain...

2023.07.15 2023.08.22

とりあえずのメモホームページ運用追記予定の話