https://ys-notebook.com 技術情報メインの雑記帳 ja https://ys-notebook.com/hq-smooth-animation https://ys-notebook.com/hq-smooth-animation 静止画（主に写真を想定）がゆっくりと移動する落ち着いたアニメーションプログラム（html カスタム要素）を作ってみました。静止画（写真）を利用して、手軽にアニメーションできます。高品質な静止画（写真）を高品質なまま、『カクカクしないで滑らかに』アニメーションします。 2024-09-15T08:01:40Z yoichiro https://ys-notebook.com/perfect-mobile-performance-score https://ys-notebook.com/perfect-mobile-performance-score 実験として PageSpeed Insights の携帯（スマホ）パフォーマンスを満点 (100) になるまでチューニングしたので、その作業内容について記事にしてみました。主に LCP と TBT について改善しています。少しでもパフォーマンスチューニングの参考になれば幸いです。 2024-07-07T07:26:52Z yoichiro https://ys-notebook.com/wordpress-tailwind https://ys-notebook.com/wordpress-tailwind WordPress で Tailwind CSS を使う方法 3種類を具体的に説明しています。「Tailwind CDN を使う方法」「プラグインを使う方法」「Tailwind CLI を使う方法」の 3種類です。 2024-05-25T14:43:30Z yoichiro https://ys-notebook.com/tailwind-darkmode https://ys-notebook.com/tailwind-darkmode 筆者の Blog サイトでダークモードを実装した紹介です。Next.js と SvelteKit での実装について説明しています。SvelteKit については、日本語の情報量が少ないようだったので筆者の実装についてざっと説明しています。 2024-05-08T04:39:56Z yoichiro https://ys-notebook.com/svelte-fontawesome https://ys-notebook.com/svelte-fontawesome Svelte/SvelteKit で Font Awesome を利用する方法を紹介します。svelte-fa パッケージを利用して実装してみました。結構簡単に実装できると思うのでお勧めです。 2024-04-19T09:10:49Z yoichiro https://ys-notebook.com/note-deepl https://ys-notebook.com/note-deepl 「SNS にアカウントを作成＆記事を書いて筆者サイトを紹介すると、見に来てくれるものなのか？」と思い、実際に note に記事を投稿してみました。投稿した記事は、機械翻訳 DeepL を使ってみた感想、筆者の利用方法の紹介です。 2024-03-31T11:01:39Z yoichiro https://ys-notebook.com/settings-vercel-log-axiom https://ys-notebook.com/settings-vercel-log-axiom Vercel ホスティングサービスで稼働する Next.js アプリのログを Axiom に送る設定方法・手順を紹介しています。初めて設定する人や、英語ドキュメントが苦手な人の参考になればと記事にしました。 2024-03-04T03:40:23Z yoichiro https://ys-notebook.com/freeplan-vercel-cloudflare https://ys-notebook.com/freeplan-vercel-cloudflare 無料プラン前提の内容となりますが、Vercel と Cloudflare を実際に使ってみて、主に CDNキャッシュについて思ったことを記事にしています。キャッシュ Eviction（立ち退き）について簡単に説明しています。 2024-02-20T09:40:29Z yoichiro https://ys-notebook.com/timeless-masterpiece https://ys-notebook.com/timeless-masterpiece 名曲は色褪せません。筆者の好みと合わせて、多くの人に愛されている名曲をとりあえず3曲だけピックアップしました。吉田拓郎「全部だきしめて」。松原みき「真夜中のドア」。バリー・ホワイト「あふれる愛を」 2024-02-08T09:50:22Z yoichiro https://ys-notebook.com/try-cloudflare https://ys-notebook.com/try-cloudflare 無料枠の GCE に Next.js 14 と WordPress を詰め込んでみました。パフォーマンス改善のため、CDN に Cloudflare を利用して高速化してみた感想などを記事にしています。 2024-02-01T18:20:17Z yoichiro https://ys-notebook.com/rebuild-with-next https://ys-notebook.com/rebuild-with-next WordPress をヘッドレスCMS にして Next.js でサイトを再構築しました。表示が速くなり、とても快適になりました。システム構成、GraphQL についての簡単な説明、メタディスクリプションの扱いなどにも触れています。 2024-01-19T15:50:18Z yoichiro https://ys-notebook.com/next-local-fonts https://ys-notebook.com/next-local-fonts Next.js で作成したフロントアプリに、Local Fonts を適用することで携帯のパフォーマンス問題を解決した経緯を記事にしています。PageSpeed Insights で スコア 70台から 100 になりました。 2024-01-06T17:27:59Z yoichiro https://ys-notebook.com/doaxvv https://ys-notebook.com/doaxvv 筆者サイトのアイキャッチ画像で使用している、コーエーテクモさんの DOAXVV（ヴィーナス バケーション）の紹介です。ポートレート撮影が好きな方にお勧めのゲームです。ゲームキャラクターの著作権は「コーエーテクモゲームス」さんです。 2023-12-28T12:40:14Z yoichiro https://ys-notebook.com/use-litespeed-cache https://ys-notebook.com/use-litespeed-cache WordPress に LiteSpeed Cache プラグインを導入して、サイトの高速化を実現しました。その手順などをまとめた記事です。
PageSpeed Insights のパフォーマンススコアは満点に近いものになりました。 2023-12-15T17:11:49Z yoichiro https://ys-notebook.com/customize-wordpress-contact https://ys-notebook.com/customize-wordpress-contact 自分の WordPress サイトに、Google Forms を利用して「お問い合わせ」フォームを作成した時の覚え書きです。
良く使われている Contact Form 7 も試してみましたが、好みで Google Forms にしました。 2023-12-06T13:41:04Z yoichiro https://ys-notebook.com/customize-wordpress-email https://ys-notebook.com/customize-wordpress-email WordPress のプラグイン WP MAIL SMTP を利用したメール設定の手順の覚え書きです。
設定時の、不達メール対処なども書いています。 2023-12-02T15:23:59Z yoichiro https://ys-notebook.com/mobaxterm-excellent https://ys-notebook.com/mobaxterm-excellent 開発・検証環境で ssh 接続するために、久しぶりに Tera Term と PuTTY 最新版を DL して使ってみましたが、その流れで MobaXterm を使ってみました。
結論、MobaXterm は素晴らしい！ 2023-11-29T17:46:51Z yoichiro https://ys-notebook.com/customize-wordpress-basic https://ys-notebook.com/customize-wordpress-basic WordPress を構築したので、Cocoon テーマをインストールしました。
自分の好みに合わせて、ヘッダーなどの位置調整、背景画像の設定などを紹介しています。
その時のトラブルシューティングも解説しています。 2023-11-28T10:30:16Z yoichiro https://ys-notebook.com/until-get-owndomain https://ys-notebook.com/until-get-owndomain 少し悩んで独自ドメイン名を決め、実際に取得した時の覚え書き。執筆時点での「お名前.com」と「Xserver」のドメイン取得料金も比較。 2023-11-22T20:56:02Z yoichiro https://ys-notebook.com/free-wordpress-setup-by-gce https://ys-notebook.com/free-wordpress-setup-by-gce Google Cloud 無料枠の GCE を利用して WordPress を費用をかけずに構築する方法・手順を紹介します。
無料枠で GCE を作成し、docker compose を使用してサクッと WordPress をインストールします。
さらに、Let’s Encrypt で TLS 化します 2023-11-09T15:50:57Z yoichiro