スマホ／タブレットのChromeなどのブラウザでサイトの文字サイズが大きくなるのを防ぐにはどうするか
以前からブログの文字サイズが大きくなってからCSSの指定通りのものになるという奇妙なことが良く起きていた。ブラウザはAndroidのChromeで、はっきり覚えてないけれども他のブラウザではなかったかも知れず、あるいはAndroidのChromeで他のサイトではなかったかも知れない。僕が 使用している自作のBlogge…
dir属性で文書方向を入れ替えたSVGのtext要素を適切に表示する方法｜HTML
僕が提供する Blogger用テンプレートのImaginary の特徴の一つに文書方向の左右対応がある。日本語や英語などの右から左へ書いて行く言語がある一方で、アラビア語やヘブライ語などの右から左へ書いて行く言語もある。Imginaryはどちらでもブログが適切に表示されるように設計されているんだ。 サイトの文書の方向はHT…
inputタグのtype-textとtype-buttonの高さを異なるフォントでも揃えたい｜CSS
inputタグのtype-textとtype-buttonを横並びにして表示しようとしたら高さが揃わなくて参った。ブラウザかデバイスが変われば大丈夫そうに見えたり、一般的に纏めるのは難しいのかも知れない。調べると入力フォントで高さが変わるという珍しいことが起きている。そこまでしっかり合わせるにはどうすれば良いか。CS…
scrollbar-widthでスクロールバーを消す｜CSS
ブログのフッターに 年度別の一件 という画像付きの スクロールボックス のリンクを作成した。 スクロールボックスを作ると片端にスクロールの方向のスクロールバーが表示されていつもは隠された領域があることが分かるから便利だと思ってそののままにしていた。しかしながら今回のスクロールボックスはボタンを付けて隠された領域があることが分か…
ブラウザの広告ブロックを検出してサイトのコンテンツをブロックするJavaScriptプログラム
今年の二月からアドセンスの収益化の方式がサイト広告のクリック課金からインプレッション課金に変更された。これにより、広告ブロックのブラウザが多くのサイトで、直接、減益を齎すようになっている。つまり サイト広告を表示しないことはアドセンスを始めとしたインプレッション課金の収益化を妨害していることに他ならない。 理想的にいえ…
HTMLのpopover属性の基本的な使い方とデザイン
HTMLのpopover属性を使うとサイトにポップアップをボタンで出すことができる。当該のコンテンツはポップオーバー要素と呼ばれるけれどもサイトの他の全てのコンテンツに重ねて優先的に表示されることになる。 ポップオーバー要素は、呼び出し／制御要素（すなわち <button> または <input ty…
親要素を起点として子要素を固定表示するCSS
HTMLの要素を固定して表示するCSSというと position:fixed を使うのが便利だけれども配置するための起点が画面全体（ビューポート）になってしまって親要素を起点として子要素を固定することができないんだ。 例えば スクロールボックス 内にボタンを固定して表示したい場合にどうするか。 考えると二つの方法がCSSで可能で…
サイトの動画の縦横比を切り替えるスイッチのJavaScriptプログラム
ブログにYouTube動画を載せることがある。通常動画は横長の16:9の縦横比で表示するけれども数年前からショート動画が出て来て、丁度、反対の縦長の9:16で作られているからどうするかを考える。動画のサイトへの埋め込みの縦横比は何でも構わないから通常動画と同じように横長で表示することはできる。しかしながら魅力が半減し…
Bloggerブログに目次の自動生成のJavaScriptプログラムを実装する
一般サイト向けの目次の自動生成のJavaScriptプログラムを公開してBloggerブログでも使えるので、どうすれば実装できるかを説明する。 JavaScriptでコンテンツの目次を自動生成して表示するプログラム どのような目次なのかやデザインや機能のカスタマイズについては一般サイト向けの記事を参考にして欲しい。 僕が…
JavaScriptでコンテンツの目次を自動生成して表示するプログラム
Imaginaryに ブログの目次を表示するカスタマイズ を紹介したけど、使用したJavaScriptのコンテンツの目次の自動生成のプログラムはBloggerの他のテーマを含めて他の全てのサイトで使うことができるので、もはや著者名を付けるだけで誰でも無料で使えるように提供しようと思った。 目次の自動生成のプログラムの特徴 コ…
サイトのCLSがJavaScriptで後から挿入するコンテンツによって上昇するのを防ぐにはどうするか
サイトのHTMLに最初から記載されてないコンテンツを後からJavaScriptで挿入するとそのときにページが新しいスペースを取られて動いてしまう。初回画面だと既存のコンテンツが押し下げられるのが、一瞬、見えたりもするけど、これがサイトのCLS（Cumulative Layout Shift／累積的な配置の変動）を上げ…
position:fixedのコンテンツの横幅を指定する方法
テンプレートの Imaginary theme にポップアップの表示を付けようとしてCSSのposition:fixedを使おうとしたら横幅が画面から突き抜けてしまって困った。 調べるとposition:fixedのコンテンツの位置指定の基準が普通とは異なることに起因している。 固定位置指定は絶対位置指定に似ていますが、要素…
アドセンスの自動広告のズレを微調整するマークアップ
アドセンスの自動広告は最初の頃と比べると出方が良くなってサイトのデザインを崩すことが少なくなって来た。それでも 偶に突き抜けたりして修正できるにしても 使い辛い面がないわけではない。しかしながら最も多いのはコンテンツとの隙間がおかしくなる。近過ぎたり、遠過ぎたりする。気にするかしないかの微妙なズレではあるだけれども個人的…
JavaScriptのクイズの選択ボタンのプログラム
ブログの知識と教養と雑学の記事（ 前半 ・ 後半 ）で使用したクイズ形式の選択ボタンのJavaScriptによるプログラムを提供する。HTML編集が可能で、scriptタグが反映するサイトならば同じような選択ボタンのコンテンツを作成して使用できる。 選択ボタンの基本的なプログラム サンプルのソースコード 日本の首都はどこか。 北海道 …
