ホームページ運用

試しに YouTubeチャンネルにメンバーシップを設定してみた アカウント

試しに YouTubeチャンネルにメンバーシップを設定してみた

YouTubeチャンネルの登録者が 1000人を超えたところで、「収益化」ができるようになりました。その一つに「メンバーシップ」がありました。価格と内容を決めて申請すると、審査が完了するとできるようになります。試しに、月490円でコメントの優先返信、というほとんど特典の薄いプランを設定してみました。【メンバーに加入して応援する！】 @chiilabo 「ちいラボ友の会（¥490/月）」は、 ちいラボのスポンサーとして 活動を応援するメンバーシップです。 特典は、コメントへの優...
2023.07.08 2023.07.27
アカウントスマホ基礎ホームページ運用
[CSS] AdSense広告のCLSを改善した とりあえずのメモ

[CSS] AdSense広告のCLSを改善した

AdSense広告の読込み途中で画面ズレが生じるので、あらかじめ高さを設定するようにしました。/** 広告のCLS 改善 * */.ad-auto .ad-wrap, .ad-area .ad-wrap{ min-height:280px;}@media screen and (max-width: 480px){ .ad-auto .ad-wrap, .ad-area .ad-wrap{ min-height:calc(83vw); }}このCSSコードでは、ウェブサイト上...
2023.07.03 2024.06.22
とりあえずのメモホームページ運用
[Cocoon] カルーセル使用時のCLSを改善するために高さを計算した（calc, vw） とりあえずのメモ

[Cocoon] カルーセル使用時のCLSを改善するために高さを計算した（calc, vw）

PageSpeed Insightsで計測したときに、CLS（Cumulative Layout Shift）が「0.33（不良）」になるのが気になっていました。主な原因は、トップページで表示しているカルーセルです。CSSの calc() を使って、画面の幅からカルーセルの高さを計算することで、CLSを 0 に改善できました。カルーセルがCLSに悪影響しているCLS（画面ズレ）が起こるのは、トップページにある「カルーセル」が原因です。確かに、サイトの表示を見てみると、一度 広...
2023.07.03 2023.07.04
とりあえずのメモホームページ運用
とりあえずのメモ

[PSI] サイトロゴの画像サイズを最適化した 「画像要素で width と height が明示的に指定されていない」（片方だけでは暗黙）

PageSpeed Insights（PSI）の減点項目に「画像要素で width と height が明示的に指定されていない」としてヘッダーのサイトロゴがありました。これまで ヘッダーのロゴとモバイルヘッダーメニューのロゴは、高さだけを指定していました。高さだけでも表示サイズは計算できていましたが、PageSpeed Insightによると「ユーザー補助」の面で減点になるようです。ヘッダーロゴのサイズヘッダーロゴのサイズは、Cocoon設定の「ヘッダー」で修正しました。「...
2023.07.02 2023.07.09
とりあえずのメモホームページ運用追記予定の話
【検討中】 jquery-migrateを減らしてみたけど、戻した [WordPress] とりあえずのメモ

【検討中】 jquery-migrateを減らしてみたけど、戻した [WordPress]

PageSpeed Insightsで「レンダリングを妨げるリソースの除外」を見てみると、jqueryに関する2つのスクリプトが目につきました。（Google CDN）jquery.min.js?ver=3.6.1（Cloudflare CDN）jquery-migrate.min.js?ver=3.0.1これを除外できないか試みてみました。jQueryスクリプトを入れ替えjQueryのスクリプトを入れ替えてみます。（参考）jQuery CDNfunction refresh...
2023.07.02 2023.07.31
とりあえずのメモプログラミングホームページ運用追記予定の話
とりあえずのメモ

スクリプトとスタイルの遅延読込みのしかた[PSI]（WordPress）

CSSは、とりあえずCocoonの「CSS縮小化」で除外できました。jqueryは、wp_enqueue_script でフッター読込みに変更しました。レンダリングを妨げるリソース久々に PageSpeed Insights（PSI）のスコアを見て、サイト設定をメンテナンスしています。「レンダリングを妨げるスクリプト」がちょっと残っているのが気になりました。画像と同じようにスクリプト も 遅延読み込みすることができます。script deferJavaScriptはscrip...
2023.07.02 2023.07.17
とりあえずのメモプログラミングホームページ運用追記予定の話
[Cocoon]「pinit_main.js」を削除するには？（Pinterest） SNS

[Cocoon]「pinit_main.js」を削除するには？（Pinterest）

Lighthouse Treemapで読み込まれている JavaScriptを見ていると、「」というコードが目に留まりました。これは、Pinterestでシェアするため画像選択処理を記述したスクリプトです。CocoonのSNSシェアの Pinterestが有効だと、フッターに「」の読込みが挿入されていました。 <?php //Pinterestシェアボタン用のスクリプト if (is_singular() && (is_top_pinterest_share_button_v...
2023.07.02 2023.08.21
SNSとりあえずのメモホームページ運用追記予定の話
とりあえずのメモ

[PHP] jetpack.cssを無効化する

Jetpackプラグインを有効にすると、CSSとJavaScriptが読み込まれます。/wp-content/plugins/jetpack/css/jetpack.css?ver=3.8.0これを無効にします。/** Jetpackを有効にした際に読み込まれるCSSを無効化*/add_filter( 'jetpack_implode_frontend_css', '__return_false' );こちらもどうぞ。
2023.07.02 2023.07.17
とりあえずのメモホームページ運用追記予定の話
「カスタム検索（サイト内検索）」スクリプトを除外した（cse.google.com/cse.js） とりあえずのメモ

「カスタム検索（サイト内検索）」スクリプトを除外した（cse.google.com/cse.js）

カスタム検索のスクリプト（cse.google.com/cse.js）が重そうです。asyncによる遅延読込みを試しましたが、あまり効果がありませんでした。結局、カスタム検索ボックスをトップページに載せるのではなく、別ページに分けてリンクを設置することにしました。遅延読込みのdeferとasyncまずは、スクリプトの読込みを遅延させることを考えました。<div class="gcse-searchbox-only"></div><script defer src=""></s...
2023.07.02 2023.07.17
とりあえずのメモホームページ運用追記予定の話
[PHP] 不要なCSS/JavaScriptを無効化する（wp_dequeue_style, wp_dequeue_script） とりあえずのメモ

[PHP] 不要なCSS/JavaScriptを無効化する（wp_dequeue_style, wp_dequeue_script）

トップページで読み込まれているスタイル・スクリプトの中から、不要なものを削減しました。項目変更前CSS/JS減パフォーマンス7071使用していないJavaScriptの削減0.40s0.60s使用していないVSSの削減0.35s0.45sスクリプトサイズ0.77MB0.69MB不要なスタイル・スクリプトを見つける前回は、不要なプラグインを無効化しました。今回は不要なスタイル・スクリプトを削除していきます。前回はこちら。スタイル・スクリプトを一覧するショートコードは、過去に作っ...
2023.07.02 2023.07.31
とりあえずのメモホームページ運用追記予定の話
[WordPress] サイト高速化のために不要なプラグイン処理を減らした（Plugin Load Filter, Site Kit by Google） とりあえずのメモ

[WordPress] サイト高速化のために不要なプラグイン処理を減らした（Plugin Load Filter, Site Kit by Google）

ページ表示速度を改善するため、Plugin Load Filterプラグインでトップページの Site Kit などを無効化した。PageSpeed Insights のパフォーマンスが「54」から「70」に改善できた。（「使用していないJavaScriptの削減」が 2.4 s ➤ 0.4 s に）プラグインの取捨選択は、サイト高速化にとってもオススメだね。ページの読込みが遅い気がする【54】モバイル端末でのトップページの読込みがやや遅い気がします。（2023/07/02 ...
2023.07.02 2023.07.17
とりあえずのメモホームページ運用
[Cocoon] AdSense配信停止を避けるためログイン時に広告コードをなしにした とりあえずのメモ

[Cocoon] AdSense配信停止を避けるためログイン時に広告コードをなしにした

管理者が広告を表示するだけでも「厳密にはアドセンス規約違反になる可能性がある」ようです。なので、念のため ログイン時に AdSenseコードを出力しないようにします。Cocoonテーマで表示している「広告コード」を管理者に表示しないフックを functions.php に追加しました。Google Adsense配信停止への対策Google Adsenseは、サイトに規約違反があると広告配信が制限されることがあります。第三者がわざと広告をクリックする（いわゆる「アドセンス狩り...
2023.07.01 2024.02.17
とりあえずのメモホームページ運用追記予定の話
[WordPress] プラグインの更新をしたら「Briefly unavailable」 とりあえずのメモ

[WordPress] プラグインの更新をしたら「Briefly unavailable」

WordPressのプラグイン更新を実行したら、進捗状況の画面ではなく「一時的に利用できない」というエラーが表示されました。そのまま 1分ほどしてサイトを表示し直してみたら、問題なく表示できました。プラグインの更新もちゃんと1つ進んでいました。グレーの画面に焦ったけど、プラグインの更新に時間がかかっただけだね。プラグインの更新をしたらエラー画面WordPressのプラグインの更新を開始したら、 エラー画面が表示されました。Briefly unavailable for sch...
2023.06.30
とりあえずのメモトラブルと対処ホームページ運用
[WordPress] 遅延読込みのせいで印刷時に画像が消えていた（loading=”lazy”, decoding=”async”） とりあえずのメモ

[WordPress] 遅延読込みのせいで印刷時に画像が消えていた（loading=”lazy”, decoding=”async”）

ブログを冊子印刷にして配布しているのですが、一部の画像が印刷されていないことがあります。画像の遅延読込み で失敗しているようです。WordPress によって自動的に付加される「loading=”lazy”」「decoding=”async”」を消すよう、functions.php を編集しました。add_filter( 'wp_lazy_loading_enabled', '__return_false' );add_filter('wp_img_tag_add_decod...
2023.06.29 2023.06.30
とりあえずのメモプログラミングホームページ運用
[Cocoon] AMPとPWAをオフにした とりあえずのメモ

[Cocoon] AMPとPWAをオフにした

WordPressのテーマ、Cocoonのアップデートがあり、2.6.1になりました。興味深いのが、AMP・PWAが非推奨になったことです。Cocoon設定のAMPとPWA機能を非推奨化しました。AMP機能を有効化する（非推奨）PWAを有効化する（非推奨）これらは昨今のウェブ情勢を鑑みたところAMP・PWAを設定するメリットよりデメリットの方が上回ると考えられるからです。現時点で機能自体は利用できますが、後々に完全に廃止しようと思います。Cocoon 2.6.1公開。段落ブロ...
2023.06.14 2023.06.15
とりあえずのメモホームページ運用
[WordPress] Cookie通知を表示させるようにする【Cookie Notice & Compliance for GDPR / CCPA プラグイン】 とりあえずのメモ

[WordPress] Cookie通知を表示させるようにする【Cookie Notice & Compliance for GDPR / CCPA プラグイン】

サイト内の広告コードなどは、Cookieを利用して閲覧情報を収集しています。法律上、閲覧者に Cookieを利用していることを通知する必要があるようです。WordPressでは、プラグインによって Cookie通知を表示できます。今回は、「Cookie Notice & Compliance for GDPR / CCPA」を利用しました。プラグインをインストールして、プライバシーポリシーへのリンクをつければ完了です。表示メッセージは、ほかのメディアサイトを参考に簡潔なものを...
2023.06.12
とりあえずのメモプライバシーホームページ運用
[JavaScript] showOpenFilePickerがエラーになる（Uncaught (in promise) DOMException） とりあえずのメモ

[JavaScript] showOpenFilePickerがエラーになる（Uncaught (in promise) DOMException）

ファイル読み取りのため、以下のコードをそのまま実行したら動きませんでした。 const pickerOpts = { types: [{ description: 'Texts(.txt)', accept: {'text/*': ['.txt']} }], multiple: false, } let fileHandle; [fileHandle] = await window.showOpenFilePicker(pickerOpts); const file = aw...
2023.06.06
とりあえずのメモセキュリティプログラミングホームページ運用
[phina.js] JavaScript でユーザー端末のファイル入出力をするには とりあえずのメモ

[phina.js] JavaScript でユーザー端末のファイル入出力をするには

JavaScriptでは、ウェブ上のデータと違ってユーザー端末内のファイルには、直接アクセスできない仕組みになっています。これは、自分で作ったプログラムを検証する場合でもそうです。そのため、ローカル環境のファイルにアクセスするには、自前のウェブサーバでアクセス可能にするか、ブラウザから読み込み・保存する必要があります。今回は、ブラウザからのファイル入出力を見てみます。Blobオブジェクトのダウンロード文字列をテキストファイルとして保存するなら、仮想的なリンクを作って、リンクの...
2023.06.05 2023.06.06
とりあえずのメモプログラミングホームページ運用
[Mac] PC内で検証用ウェブサーバを動かす【php -S】 Mac

[Mac] PC内で検証用ウェブサーバを動かす【php -S】

phina.js のプログラムをローカルで検証するために、ウェブサーバを立ち上げることにしました。ブラウザでHTMLファイルを開いてもサイトと違うただのファイルとして html を開いた場合（たとえば「file:///Users/user/html/index.html」など）、JavaScriptから相対アドレスでほかのローカルファイルを読み込んだりはできません。JavaScriptのセキュリティ上の制限で、ローカルファイルにはアクセスできないからです。そのため、サイトデー...
2023.06.05 2023.06.07
Macとりあえずのメモプログラミングホームページ運用
[WordPress] 文章校正プラグイン Japanese Proofreading Preview を使いたい とりあえずのメモ

[WordPress] 文章校正プラグイン Japanese Proofreading Preview を使いたい

文章校正プラグイン「Japanese Proofreading Preview」を試してみました。（参考）Japanese Proofreading Preview – WordPress plugin | WordPress.orgこのプラグインは、Yahoo!の「校正支援API」をWordPressエディタから呼び出せるようにするものです。設定のため、Yahooの登録でAPIを利用できるようにしました。アプリケーションの管理：Yahoo!デベロッパーネットワークしかし、設...
2023.05.26
とりあえずのメモプログラミングホームページ運用追記予定の話
次のページ