スキップしてメイン コンテンツに移動

些細な日常

2月, 2023の投稿を表示しています すべて表示

サイトのCLSがJavaScriptで後から挿入するコンテンツによって上昇するのを防ぐにはどうするか

イメージ

サイトのHTMLに最初から記載されてないコンテンツを後からJavaScriptで挿入するとそのときにページが新しいスペースを取られて動いてしまう。初回画面だと既存のコンテンツが押し下げられるのが、一瞬、見えたりもするけど、これがサイトのCLS(Cumulative Layout Shift/累積的な配置の変動)を上げて使い難くなる。 指標|PageSpeed Insights| Google Developers 良くあるのが押そうとしたボタンがサイトの読み込み中に動いて押せなくなってしまうことだ。 訪問者に良い印象を与えないのはもちろんだけど、さらにGoogleのサイトの検索状況のSearch Consoleや性能計測のPageSpeed Insightsでも警告が出されるので、 検索エンジンからアクセスアップを望む 上でもCLSの上昇に注意しなくてはならない。 普通の回避策としては新しいコンテンツ…

position:fixedのコンテンツの横幅を指定する方法

イメージ

テンプレートの Imaginary theme にポップアップの表示を付けようとしてCSSのposition:fixedを使おうとしたら横幅が画面から突き抜けてしまって困った。 調べるとposition:fixedのコンテンツの位置指定の基準が普通とは異なることに起因している。 固定位置指定は絶対位置指定に似ていますが、要素の包含ブロックがビューポートによって定義される初期包含ブロックであるという点が異なり、祖先の一つに transform, perspective, filter の何れかのプロパティが none 以外 (CSS Transforms Spec を参照) に設定されている場合は例外で、その場合は祖先が包含ブロックとしてふるまいます。 position| MDN |Mozilla 通常、position:fixedのコンテンツは固定位置指定として親要素ではなくてビューポートと呼ばれる大外…

Search Consoleのモバイルユーザビリティのエラーを引き起こす画像について

イメージ

Googleが モバイルファーストインデックス を導入してスマホでのサイト評価を最優先するようになって久しい。サイトがモバイルに対応しているかどうかはGoogleが提供している モバイルフレンドリーテスト で分かるけれどもSearch Consoleではサイト解析からエラーのページがあれば自動的に表示される。 現在の SEO対策(検索エンジン最適化) で、下地となるのがモバイルユーザビリティだから是非とも注意しておきたいにも拘わらず、ブログでエラーが出てしまって改善しなくてはならなくなった。 画像がモバイルユーザビリティのエラーを引き起こす原因 モバイルユーザビリティ|Search Console| Google 僕はSearch Consoleでモバイルユーザビリティの二つの項目を指摘された。 テキストが小さすぎて読めません クリック可能な要素同士が近すぎます ブログのスマホでの表示は大丈夫で、何の支障もないから…

越智静香のジェニーはご機嫌ななめと人生の突破口への無謀な賭け

イメージ

日本のロックバンドの ジューシィ・フルーツが気に入って 代表曲の ジェニーはご機嫌ななめ をYouTubeで検索していると他の人のカヴァーも出て来る。その中に俳優の 越智静香 の カヴァー を見かけた。歌手ではないのに昔は違ったのか、アイドル時代もあったと初めて知ったけれどもどんな感じか、どうせ可愛らしく歌っているだけなんだろうから聴かなくても良いと思った。しかし ジェニーはご機嫌ななめ を検索すると目立つカヴァーの一つで、あるとき、ダンスのサムネイルのものが出て来てブレたところに動きの激しさを感じた。何だろうとついに観てみたらかつて見たことのない奇怪な振り付けのダンスを猛烈に行っている越智静香に度肝を抜かれた。 越智静香の ジェニーはご機嫌ななめ のまさかのダンスの猛烈さ 越智静香 /MOGITATE!バナナ大使| TBS 衝撃も衝撃の飛んでもなさ過ぎる余りの世界を目の当たりにした。以前、俳優として知っていた越智静香…

アドセンスの自動広告のズレを微調整するマークアップ

イメージ

アドセンスの自動広告は最初の頃と比べると出方が良くなってサイトのデザインを崩すことが少なくなって来た。それでも 偶に突き抜けたりして修正できるにしても 使い辛い面がないわけではない。しかしながら最も多いのはコンテンツとの隙間がおかしくなる。近過ぎたり、遠過ぎたりする。気にするかしないかの微妙なズレではあるだけれども個人的に止めて欲しいと思うし、そのせいで、アドセンスの自動広告を最初の頃は使わないでいた。 目次 自動広告の微妙なズレが悩ましい CSSで微調整を行うことができる 自動広告の微調整に役立つ二つのCSS要素 自動広告の微調整のためのCSSの指定先 自動広告の微妙なズレが悩ましい 今は相当に改善されているけれどもブログで又出たのが一つ見付かった。 ページャーに寄ってこれでは誤クリックを誘発し兼ねないほどの不味い位置にある。 自動広告にとってデザインのバランスが取り難い場所があるのか、他は大丈夫なのにズレ…

ジューシィ・フルーツの素晴らしく楽しいテクノロック

イメージ

YouTubeのホームに出て来た動画の歌う女性に「何だ、この妖艶な魅力は」と心を動かされて観てみたら聴き覚えのある曲だった。ずっと昔、幼い頃に聴いて「一体、誰が歌っているんだろう」と気になった記憶が微かに残っていた。初めて知ってとても嬉しかったんだけれども歌っていたのは ジューシィ・フルーツ というバンドのヴォーカルの イリア (奥野敦子)で、曲は ジェニーはご機嫌ななめ だったんだ。今聴いても全く古さを感じさせないほどに引き付けられ捲るし、他の曲にも幾つか聴き覚えがあって本当に気に入りの音楽を見付けたと感じる。 ジューシィ・フルーツのテクノロックが何よりも好きだ ジューシィ・フルーツのイリア|ステレオ音楽館| 東京12チャンネル 今まで、散々、色んな音楽を聴いて来た中で、好きなのに良い曲を見付けることが難しくて、思う存分、聴けないものとしてテクノロックが個人的に挙げられる。 ジューシィ・フルーツの ジェニーは…