些細な日常
今年の二月からアドセンスの収益化の方式がサイト広告のクリック課金からインプレッション課金に変更された。これにより、広告ブロックのブラウザが多くのサイトで、直接、減益を齎すようになっている。つまり サイト広告を表示しないことはアドセンスを始めとしたインプレッション課金の収益化を妨害していることに他ならない。 理想的にいえば社会は ベーシックインカム へ移行するべきだ し、そうやって皆の生活費が保障されればサイト広告も本当に必要ではなくなるけれども政治が非常に遅れている。日本は不労生活の実験すらもせず、一体、何をやっているのだろう。いつかサイト広告を付けたい人と消したい人がどちらも何の不利益もなく、共存できる ビーバーの湿地帯 のような素晴らしい社会が実現されるまではサイトの収益化に纏わる問題を面倒でも避けることはできない。 昨今、僕のブログの減収は酷いもので、最大の原因は Googleの個人サイト潰し によ…
今月五日にGoogleの検索アルゴリズムを根本的に改変するコアアップデートが開始された。普段ならば二週間で終わるものが一ヵ月くらいかかると発表されて大掛かりだと驚かされた。 Googleが複数のシステムで役立つコンテンツを評価する 私たちは信頼できる情報を特定するために複数のシステムを用いるのと同様に革新的なシグナルとアプローチを様々に用いながらより役立つ結果を表示するためにコアランキングシステムを強化しました。これを行うために一つのシグナルやシステムが用いられるのではもはやありませんし、私たちはこの変化を説明するために新しいよくある質問のページも追加しました。 これは複合的なシステムですので、展開に一ヵ月を要するかも知れません。異なるシステムが十分に更新されて互いに強化されますので、通常のコアアップデートのときよりも順位の変動が大きくなりそうです。アップデートが完了したとき、私たちはGoog…
先月の9月14日から28日にかけて行なわれたGoogleのヘルプフルコンテンツアップデートで、ブログのアクセスが、三割以上、落ちてしまった。 ブログのGoogle検索によるアクセスダウンの状況 悲しいブロガー by 結城永人 Search Consoleで調べるとGoogleの検索結果でのブログの表示回数が、三割、落ちいてそのためにクリック数が、二割、落ちていた。その影響で、Yahoo!からも同じくらい落ちて（日本のYahoo検索はGoogle検索を使用しているため）全体として三割のアクセスダウンを食らってしまった。 本当に悲惨としかいいようがない。やる気がなくなってどうしようもない。ブログのアクセスが上がらないだけで、絶望的な気持ちになる。大きく下がるというのは正しくうんざりだ。 Googleのヘルプフルコンテンツアップデートは 人間のために作成した独自性のある有用なコンテンツが検索結果に表示され…
ブログのアクセスがゴールデンウィークに入ったら三割くらい落ちて 死に損ないブロガー に逆戻りと ヴィヨンの 首吊り人のバラード が聞こえて来るような感じがして本当に参った。 日によってサイトのアクセスが増減することがある 参考書を持ってほほえむ女子高生 by まんだむ Google検索からのアクセスが普段よりも多く落ちていることが直接の原因で、何の報せもなく、検索アルゴリズムを変更されて SEO対策 に支障を来したのかとも思ったけれども数年前から平日よりも土日祝日が幾らか不調という傾向が増していたので、ゴールデンウィークでそうした影響を強く受けた可能性もあった。 なので「どっちなんだい」（ なかやまきんに君 ）と 笑いが止まらない一橋アナウンサー とは正反対の気持ちながら問われる状況だったんだ。 心配の余り、Twitterで調べるとサイトのアクセスが下がった人という人も下がったという人もいた。しかしGoogle検索から…
サイトのHTMLに最初から記載されてないコンテンツを後からJavaScriptで挿入するとそのときにページが新しいスペースを取られて動いてしまう。初回画面だと既存のコンテンツが押し下げられるのが、一瞬、見えたりもするけど、これがサイトのCLS（Cumulative Layout Shift／累積的な配置の変動）を上げて使い難くなる。 指標｜PageSpeed Insights｜ Google Developers 良くあるのが押そうとしたボタンがサイトの読み込み中に動いて押せなくなってしまうことだ。 訪問者に良い印象を与えないのはもちろんだけど、さらにGoogleのサイトの検索状況のSearch Consoleや性能計測のPageSpeed Insightsでも警告が出されるので、 検索エンジンからアクセスアップを望む 上でもCLSの上昇に注意しなくてはならない。 普通の回避策としては新しいコンテンツ…
テンプレートの Imaginary theme にポップアップの表示を付けようとしてCSSのposition:fixedを使おうとしたら横幅が画面から突き抜けてしまって困った。 調べるとposition:fixedのコンテンツの位置指定の基準が普通とは異なることに起因している。 固定位置指定は絶対位置指定に似ていますが、要素の包含ブロックがビューポートによって定義される初期包含ブロックであるという点が異なり、祖先の一つに transform, perspective, filter の何れかのプロパティが none 以外 (CSS Transforms Spec を参照) に設定されている場合は例外で、その場合は祖先が包含ブロックとしてふるまいます。 position｜ MDN ｜Mozilla 通常、position:fixedのコンテンツは固定位置指定として親要素ではなくてビューポートと呼ばれる大外…
サイト作成でHTMLのemとstrongはHTML5／Living Standardで強調と重要性の違いがあるもののどちらも使い方が似ていて分かり辛い。そして初期のデザインが斜体と太字なのがそれぞれにiとbと同じなので、見た目からどちらを使っても良いのかと混乱してしまう。 em／強調タグとは何か strong／重要性タグとは何か i／斜体タグとは何か b／太字タグとは何か 紛らわしい四つのタグの意味をしっかり捉えて的確に使い分けができるようにしたい。 em／強調タグとは何か HTMLのemタグのemはemphasis／強調の冒頭の二文字で、コンテンツの強調を表すために使われる。 em要素は、要素のコンテンツの強調を表す。 コンテンツの特定部分が持つ強調のレベルは、祖先のem要素の数によって与えられる。 強調の設置は、文の意味を変更する。このように要素は、コンテンツの不可欠な部位を形成する。強調が使用される正…
サイトで他のページを表示するiframeタグはYouTubeの埋め込み動画などで良く使われるけれども画像のimgタグと異なり、コンテンツの縦横比をレスポンシブで維持することができない。なのでデバイスの画面幅に一杯で表示するようにすると訪問者の異なるデバイスの画面幅によってコンテンツの縦横比が変わってしまうのが厄介だった。 以前からCSSのaspect-ratio要素がiframeの縦横比を一発で指定する方法として出ていて理想的だったけれども対応するブラウザが少なかった。しかし最近になって漸く主要なブラウザの多くが対応するようになった（ Can I Use ）からついに自分のブログでも取り入れることに決めた。 aspect-ratioのマークアップ 10 modern layouts in 1 line of CSS｜Google Chrome Developers 縦横比を指定したいタグにaspec…
サイトがGoogle検索に表示されない原因は大きく分けて二つある。 一つはインデックスされず、Googleにサイト内容が把握されてない。もう一つはランキングが低く、インデックスされたページがあってもサイト評価が低くて検索結果の順位を落とされるか消されている。 ランキングの向上に関しては余りはっきりしたことはいい難いし、Google検索のサイト評価がどのように行われるかはGoogleの関係者も分からないくらい複雑怪奇な面がある。個人的に 公式の検索エンジン最適化（SEO）スターターガイドが最も信頼できる と思う。ランキングの方向性（何が良くて何が悪いか）がGoogle検索の視点から示されているからたとえランキングが更新されても付いて行けるようなサイト運営が可能になるに違いない。 本稿ではインデックスの向上を考える。ランキングと違って決められたことをやれば大丈夫だから遥かに簡単なんだけれども偶に落とし…
サイトの無限スクロールのプログラムのアイデアは大きく二つの部分に分けられる。一つは要素判定で、今のページが画面のどこまで来たら次のページを表示するように動作するかを決める。もう一つは生成処理で、次のページをAjax通信でサーバーから読み込んで今のページに実際に追加する。JavaScriptのプログラムで前者に正しく画面と要素の交差を監視できて最適な Intersection Observer API 、後者にAjax通信の時間差の難点も克服できて便利な Fetch API を使って無限スクロールを作成する方法を取り上げる。 無限スクロールのプログラムの基本的な流れ Brown grasses under white clouds at daytime by Glenn Carstens-Peters / Unsplash 通常、同じデザインのページがページネーションのリンクで幾つも続いて行くのを無限ス…
HTMLのiframeタグのコンテンツは画像比がデバイスの画面幅に レスポンシブ で統一できない。およそスマホで画面の横幅一杯に表示したりすると縦幅が変わらないためにコンテンツの画像比が変わってしまうのが厄介なんだ。YouTubeやドライブなど、Webサービスの埋め込みコードにはiframeタグが良く使われるけれども画面の横幅一杯に広がらないように注意して記載しないとレスポンシブで画像比が崩れる。 以前、何とかならないかと悩んで YouTube動画をレスポンシブで正確に表示する方法 を見付けた。CSSのpaddingやpositionを使ってiframeタグのコンテンツの画像比を整えることができると分かって助かった。親ボックスに内側の余白を特定の高さとして確保しながら子の埋め込みを重ね合わせるように移動させると上手く行く。 しかし近年はもう一つの方法が可能で、CSS関数のcalc()を使ってifra…
ボタンで複数の画像を切り替える方法 をやってみたら二枚目以降の画像の読み込みが遅くて参った。何とかならないかと調べてみたらHTMLの「rel="preload"」を使うと助かると分かった。ファイル毎のブラウザの先読みを可能にするからJavaScriptで後から必要な画像などが直ぐに表示できるようになるんだ。 二枚目へ進む 二枚目の画像にpreloadを指定していて非表示でもサイトの閲覧と同時にブラウザに読み込まれるためにJavaScriptの切り替えボタンから待ち時間なしに表示される。 preloadに対応する十二のファイル audio：音楽 video：動画 track：字幕 script：JavaScript stylesheet：CSS font：フォント image：画像 fetch crossorigin：XHR／fetch worker：Worker／SharedWorker emb…
サイトのボタンはHTMLのinputやbuttonとJavaScriptのonclickを組み合わせて実装できる。後者のプログラムが前者を押して発動するようになる。JavaScriptのonclickはイベントハンドラと呼ばれてHTMLのinputやbuttonの開始タグに他の属性と同じように記載すれば機能する。 onclick自体はHTMLの様々な要素に使えるから例えば画像のimgに組み込んだり、inputやbutton以外のデザインのボタンもspanなどにCSSを付けて作成できるだろう。 HTMLとJavaScriptでボタンを作成する 押すと画像が二枚目に切り替わる。 サンプルのソースコード HTML <img id="change-images" src="一枚目の画像URL" data-second-image="二枚目の画像URL&…
