些細な日常

以前からブログの文字サイズが大きくなってからCSSの指定通りのものになるという奇妙なことが良く起きていた。ブラウザはAndroidのChromeで、はっきり覚えてないけれども他のブラウザではなかったかも知れず、あるいはAndroidのChromeで他のサイトではなかったかも知れない。僕が 使用している自作のBlogger用テンプレートのImaginary では全て必ず文字サイズが時間差で正しく表示されることになっていて不快だった。 AndroidのChromeのバグなのかと思ってアップデートで直ることを期待しながらもはや、数年以上、経った。問題が全く起きなくなった時期もあったと思うけど、しかし最近は本当に酷くなって文字サイズが大きくなったまま、CSSの指定通りのものに変わらないことまで起こるようになって来たので、何とかしなくては行けないとついに対処法を考えることにした。 ブラウザの文字サイズ自動…

僕が提供する Blogger用テンプレートのImaginary の特徴の一つに文書方向の左右対応がある。日本語や英語などの右から左へ書いて行く言語がある一方で、アラビア語やヘブライ語などの右から左へ書いて行く言語もある。Imginaryはどちらでもブログが適切に表示されるように設計されているんだ。 サイトの文書の方向はHTMLのdir属性のltrかrtで決められてアイコンなどの向きを左右に反転させたいものがあればCSSのtransform要素のscaleX(-1)を使うとデザインを合わせられる。 この二つで全て上手く行くと思ったら大間違いともいうべき苦しみを味わわされることになったので、なぜかの原因と修正できた対処法を載せておきたい。 SVGのtext要素は反対方向の文書で適切に表示されない テンプレートに新しく翻訳ウィジェットを搭載してボタンで起動するために翻訳アイコンを追加したら元から入れ替えた…

inputタグのtype-textとtype-buttonを横並びにして表示しようとしたら高さが揃わなくて参った。ブラウザかデバイスが変われば大丈夫そうに見えたり、一般的に纏めるのは難しいのかも知れない。調べると入力フォントで高さが変わるという珍しいことが起きている。そこまでしっかり合わせるにはどうすれば良いか。CSSの二つの方法を見付けて望み通りのデザインを付けられるようになったので、紹介する。 目次 inputタグのtype-textは入力フォントで高さがコロコロ変わる inputタグのtype-textとtype-buttonの英語と日本語の高さの比較 フォームとボタンの高さを揃えるCSSの二つのマークアップ vertical-align:middleをフォームとボタンの両方にかけると良い display:flexをフォームとボタンの親ボックスにかけると良い inputタグのtype-textは…

ブログのフッターに 年度別の一件 という画像付きの スクロールボックス のリンクを作成した。 スクロールボックスを作ると片端にスクロールの方向のスクロールバーが表示されていつもは隠された領域があることが分かるから便利だと思ってそののままにしていた。しかしながら今回のスクロールボックスはボタンを付けて隠された領域があることが分かるからスクロールバーはデザインの邪魔にしかならないと消したくなった。 スクロールボックスのスクロールバーを消す スクロールボックスのスクロールバーは サイトのデザインのCSSのマークアップ で簡単に消すことができてスクロールバーの太さを指定できるscrollbar-widthを使うと良い。 scrollbar-widthのサンプルのソースコード HTML <div class="scroll-box”> スクロールボックスのコンテンツ </div> CSS .…

今年の二月からアドセンスの収益化の方式がサイト広告のクリック課金からインプレッション課金に変更された。これにより、広告ブロックのブラウザが多くのサイトで、直接、減益を齎すようになっている。つまり サイト広告を表示しないことはアドセンスを始めとしたインプレッション課金の収益化を妨害していることに他ならない。 理想的にいえば社会は ベーシックインカム へ移行するべきだ し、そうやって皆の生活費が保障されればサイト広告も本当に必要ではなくなるけれども政治が非常に遅れている。日本は不労生活の実験すらもせず、一体、何をやっているのだろう。いつかサイト広告を付けたい人と消したい人がどちらも何の不利益もなく、共存できる ビーバーの湿地帯 のような素晴らしい社会が実現されるまではサイトの収益化に纏わる問題を面倒でも避けることはできない。 昨今、僕のブログの減収は酷いもので、最大の原因は Googleの個人サイト潰し によ…

HTMLのpopover属性を使うとサイトにポップアップをボタンで出すことができる。当該のコンテンツはポップオーバー要素と呼ばれるけれどもサイトの他の全てのコンテンツに重ねて優先的に表示されることになる。 ポップオーバー要素は、呼び出し／制御要素（すなわち <button> または <input type="button"> に popovertarget 属性が付いたもの）、または HTMLElement.showPopover() の呼び出しによって開かれるまで、display: none で非表示になっています。 開かれると、ポップオーバー要素は、最上位レイヤー内の他のすべての要素の上に現れ、親要素の position や overflow のスタイル付けの影響を受けません。 popover｜ MDN Web Docs ｜Mozilla ボタンとコン…

HTMLの要素を固定して表示するCSSというと position:fixed を使うのが便利だけれども配置するための起点が画面全体（ビューポート）になってしまって親要素を起点として子要素を固定することができないんだ。 例えば スクロールボックス 内にボタンを固定して表示したい場合にどうするか。 考えると二つの方法がCSSで可能で、 親要素と子要素の一組をさらに別の要素に入れてボックス化した場合 とそうではなくて 親要素と子要素の一組だけの場合 が可能なので、それぞれのマークアップを紹介する。 親要素と子要素をボックス化した場合のCSS 親要素と子要素の一組をさらにdiv要素などで囲ってボックス化して親要素と一体化したボックスの祖先要素（親の親）を起点として子要素を固定表示すると。画面上、親要素の中に固定表示するのと同じ結果になる。 position:relativeとabsoluteの固定表示のマークアップ サンプ…

一般サイト向けの目次の自動生成のJavaScriptプログラムを公開してBloggerブログでも使えるので、どうすれば実装できるかを説明する。 JavaScriptでコンテンツの目次を自動生成して表示するプログラム どのような目次なのかやデザインや機能のカスタマイズについては一般サイト向けの記事を参考にして欲しい。 僕が提供するBlogger用のImaginaryテーマは サンプルブログの自動生成の目次のカスタマイズの記事 に専用のソースコードと実装方法を紹介している。 目次の自動生成のプログラムのソースコード ブログのテンプレートか投稿にscriptで、プログラムのソースコードを記載して使う。 /* Copyright: Nagahito Yuki 2023 | https://www.nagahitoyuki.com/2023/03/implement-a-javascript-program-t…

Imaginaryに ブログの目次を表示するカスタマイズ を紹介したけど、使用したJavaScriptのコンテンツの目次の自動生成のプログラムはBloggerの他のテーマを含めて他の全てのサイトで使うことができるので、もはや著者名を付けるだけで誰でも無料で使えるように提供しようと思った。 目次の自動生成のプログラムの特徴 コンテンツのHTMLの見出しタグの良く使われるh2からh4までを取り込んで順序付きリストタグのolとliに見出しへのジャンプリンクを入れて階層的に仕立てた目次を最初の見出しタグの直前に挿入する。 目次のジャンプリンクを得るために見出しのidを新しく付けているので、もしも既存のidを、そのまま、使いたい場合は ソースコードのカスタマイズ を行うと上書きを避けることができる。 目次の見出しのリストは開閉メニューのdetailsで、表題と開閉ボタンを付けてさらにサイトのナビゲーションを示すn…

サイトの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のコンテンツは固定位置指定として親要素ではなくてビューポートと呼ばれる大外…

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

ブログの知識と教養と雑学の記事（ 前半 ・ 後半 ）で使用したクイズ形式の選択ボタンのJavaScriptによるプログラムを提供する。HTML編集が可能で、scriptタグが反映するサイトならば同じような選択ボタンのコンテンツを作成して使用できる。 選択ボタンの基本的なプログラム サンプルのソースコード 日本の首都はどこか。 北海道 東京都 福岡県 リセット ※どれかを押すと正解が緑に、誤解が赤に変わって表示される。 HTML <p>日本の首都はどこか。</p> <ol class="selection"> <li>北海道</li> <li class="correct">東京都</li> <li>福岡県</li> </ol> JavaScript /* Co…