マークダウンからHTMLへの変換装置｜JavaScript
マークダウンを使う機会が増えた。HTMLを簡略化したマークアップ言語で、覚えるのはさほど難しくない。慣れると非常に便利だ。 僕が 初めて知ったのはTumblr の投稿だったけれども今は 対話型AIのChatGTPとGemini の文章の回答をクリップボードにコピーするとマークダウンになっているので――必ずしも決まっているわけで…
ブラウザの広告ブロックを検出してサイトのコンテンツをブロックするJavaScriptプログラム
今年の二月からアドセンスの収益化の方式がサイト広告のクリック課金からインプレッション課金に変更された。これにより、広告ブロックのブラウザが多くのサイトで、直接、減益を齎すようになっている。つまり サイト広告を表示しないことはアドセンスを始めとしたインプレッション課金の収益化を妨害していることに他ならない。 理想的にいえ…
HTML要素の全ての属性の有無と名前と値を調べる｜JavaScript
Bloggerの投稿画像の WebP と 遅延読み込み のJavaScriptプログラムにscriptタグを新しく作って入れ直すという部分があって元の属性としてsrcとasyncという良くあるものを付けてやっていたけれどもどんな属性でも対応できるように変えた。 そのとき、元のscriptタグに属性があるかないか、又、あるならば…
addEventListenerを解除する｜JavaScript
addEventListener()メソッドを設定して後から外したい、すなわち無駄なものを残しておくのは良くないから解除したい場合、一回だけ使うならば第三引数のoptionに {once:true} を追加すると自動的にやれるから簡単だ。 それ以外はremoveEventListener()メソッドを使わなくてはならないけ…
addEventListenerで引数を渡す｜JavaScript
サイトのボタンの設置などで良く使う非常に便利なJavaScriptのaddEventListener()メソッドは普通に第二引数のコールバック関数に値を入れても引数として正しく渡すことができない。 addEventListnerでコールバック関数に引数を渡せない理由 イベントリスナーには、コールバック関数または hand…
サイトのテキストをクリップボードへコピーするJavaScriptプログラム
サイトのテキストを指定してデバイスのクリップボードにコピーして他の場所へペーストして使えるようにするJavaScriptプログラムを考える。 Clipboard APIによるグローバル変数からコピー クリップボードの書き込み by 結城永人 JavaScriptのクリップボードへのコピーはClipboard APIで行える…
Bloggerブログの投稿のサムネイル画像を変更する方法
Bloggerブログの投稿に画像かYouTube動画があると先頭のものを対象としてサムネイル画像を自動的に生成することができる。これはブログトップページなどのインデックスページや人気の投稿のなどのガジェットのスニペット、またはFacebookやXといったソーシャルメディアへの投稿の共有で使われることになる。画像かYo…
サイトのコンテンツの位置を変更するJavaScriptプログラム
サイトのコンテンツの配置を決めた後に上から下へ、あるいは下から上へ移動して元々の位置を変更するための方法としてJavaScriptプログラムを紹介する。 コンテンツの位置変更のソースコード プログラムの内容について 元の場所にあるコンテンツをHTMLのhidden属性で、非表示にしておいてブラウザが全て読み込んた後に当のコ…
サイトの動画の縦横比を切り替えるスイッチのJavaScriptプログラム
ブログにYouTube動画を載せることがある。通常動画は横長の16:9の縦横比で表示するけれども数年前からショート動画が出て来て、丁度、反対の縦長の9:16で作られているからどうするかを考える。動画のサイトへの埋め込みの縦横比は何でも構わないから通常動画と同じように横長で表示することはできる。しかしながら魅力が半減し…
JavaScriptでブラウザとOSを判別してソースコードの振り分けに使う
僕が提供する Blogger用テンプレートのImaginary への質問で、デザインが壊れて何とかして欲しいというのがあって原因の一つにブラウザがある。サイト作成のHTMLやCSSやJavaScriptのコードの一部に未対応だったり、場合によってアップデートでバグが起きて急に反映しなくなったりもする。 ブラウザの問題はいつ…
Bloggerブログに目次の自動生成のJavaScriptプログラムを実装する
一般サイト向けの目次の自動生成のJavaScriptプログラムを公開してBloggerブログでも使えるので、どうすれば実装できるかを説明する。 JavaScriptでコンテンツの目次を自動生成して表示するプログラム どのような目次なのかやデザインや機能のカスタマイズについては一般サイト向けの記事を参考にして欲しい。 僕が…
JavaScriptでコンテンツの目次を自動生成して表示するプログラム
Imaginaryに ブログの目次を表示するカスタマイズ を紹介したけど、使用したJavaScriptのコンテンツの目次の自動生成のプログラムはBloggerの他のテーマを含めて他の全てのサイトで使うことができるので、もはや著者名を付けるだけで誰でも無料で使えるように提供しようと思った。 目次の自動生成のプログラムの特徴 コ…
サイトのCLSがJavaScriptで後から挿入するコンテンツによって上昇するのを防ぐにはどうするか
サイトのHTMLに最初から記載されてないコンテンツを後からJavaScriptで挿入するとそのときにページが新しいスペースを取られて動いてしまう。初回画面だと既存のコンテンツが押し下げられるのが、一瞬、見えたりもするけど、これがサイトのCLS（Cumulative Layout Shift／累積的な配置の変動）を上げ…
Search Consoleのモバイルユーザビリティのエラーを引き起こす画像について
Googleが モバイルファーストインデックス を導入してスマホでのサイト評価を最優先するようになって久しい。サイトがモバイルに対応しているかどうかはGoogleが提供している モバイルフレンドリーテスト で分かるけれどもSearch Consoleではサイト解析からエラーのページがあれば自動的に表示される。 現在の SEO対策…
