些細な日常

TwitterとInstagramとYouTubeには他のサイトにコンテンツを埋め込んで表示する機能があってとても便利だけれども他のサイトからすると外部ファイルやサイトを読み込まなくてはならないから表示するのに普通よりも時間がかかってしまう。 通常ではさほど気にならないかも知れないにせよ、サイトによってファイルの読み込みやコンテンツの表示の仕方からで非常に遅れることもないわけではない。 サイトで外部ファイルを優先的に読み込む方法として HTMLのリソースヒントの一つとしてpreload（先読み）のソースコードがある ので、TwitterとInstagramとYouTubeの埋め込みを少しでも表示したい場合に使える。 目次 Twitterの埋め込みコードを先読みする Twitterの埋め込みコードの外部ファイル Twitter用の二種類の先読みのソースコード Inst…

Bloggerで取得した画像URLに 画像パラメーターのrwを追加する と画像データを軽量化したWebP画像に変換することができる。特にjpg／jpeg画像の場合に効果が大きいようだけれどもブログの画像の表示速度を高めることに繋がる。 記事／追加ページの投稿画像に画像パラメーターのrwを自動的に付けるプログラムを開発したので、無料で提供する。 JavaScriptで記事の本文の全ての表示を止めてから投稿画像に画像パラメーターを自動的に付けて出すことになる。便利だけど、その分、投稿画像を含めた記事の本文の全ての表示速度は遅れる、ほんの僅かだとしても投稿時に画像パラメーターを手動で付けておくよりも決して速くならないことに注意して欲しい。 そしてHTMLだけで記事の本文の全てを表示しないことはGoogle検索などの読み込みを劣らせるかも知れないので、 SEO（検索エ…

以前、取り上げた 画像の遅延読み込みのloading-lazy をBloggerの記事／追加ページの投稿画像に自動的に付けるJavaScriptプログラムを開発したので、無料で提供する。 画像のある記事／追加ページの本文を全てJavaScriptで止めてから書き出すことになるので、その分だけ表示速度が遅れる。そしてHTMLだけの場合と比べてGoogle検索などの読み取りが全く劣らないとはかぎらない。年々、向上して今では殆ど差がないといわれるから大丈夫かも知れないけれども念のために注意しておきたい。デザインは変わらず、表示速度が速くなる分は有利（画面外の画像が多いほどに遅延読み込みの効果が大きい）だとしてもGoogle検索などからサイト評価が上がって訪問者が増えるかどうかは分からないので、ブログのアクセスアップに SEO（検索エンジン最適化）対策を考える場合 …

サイトの複数の要素にJavaScriptで共通の処理を行うとき、forEach()メソッドがとても便利で、良く使っている。 const atpss = document.querySelectorAll("article.post"); atpss.forEach(atps => { // 全てのarticle.postへの共通の処理 }); forEach()メソッドは反復処理のfor文のように数を気にせず、いつでもそれだけで配列を扱えるから簡単だし、サイトの要素を取り込むquerySelectorAll()メソッドによるノードリスト（配列と似たもの）にも対応しているから使い易い。 しかしasync／await、またはPromiseの非同期処理を組み込むことができない。 いい換えると複数の要素に対する複数の処理を前のものが終わっ…

サイトの文章の位置取りはデザインのCSSのtext-alignでleftとcenterとright（左寄せと中寄せと右寄せ）が可能だけれども文章の外側と内側、または全体と部分が同じように整列されてしまう。そこでどうすれば一つの文章て外側（レイアウト）が中寄せで内側（コンテンツ）が左寄せなどの別々の位置取りが可能かを取り上げる。 二つの親要素で文章を別々に整列する 文章の外側と内側に別々の親要素を設置してそれぞれに整列することができる。 外側が中寄せで内側が左寄せの例 あいうえお かきくけこさしすせそ たちつてとなにぬねのはひふへほ はひふへほまみむめもやゆよ らりゆれろわをん HTML <div class="outer"> <div class="inner"> <p>あいうえお</p…

イギリスの作家、小説家で詩人の ラドヤード・キップリング の童話集 その通り物語 （1902）の収録作品の 最初の手紙はどのように書かれたか の日本語訳を行った。 ラドヤード・キップリングの 最初の手紙はどのように書かれたか の英語の出典 How the First Letter was Written by Rudyard Kipling／ラドヤード・キップリングの 最初の手紙はどのように書かれたか 原文： Wikisource （ 作品集 ） 朗読： LibriVox （ カラ・シャレンバーグ ） 両方とも パブリックドメイン （著作権なし）だから無料で自由に使って構わない。 ラドヤード・キップリングの 最初の手紙はどのように書かれたか の日本語の訳文 Illustration to How the First Letter was Written from Garden City, N.Y. : …

アドセンスの自動広告はサイト広告の表示位置を機械的に決定するから使い方を誤るとサイトの出て欲しくないところに勝手に出てしまう場合がある。 サイトのデザインを崩してアクセスダウンに繋がる恐れを避けるためにサイト広告を的確に表示する方法を覚えておくべきだ。 アドセンスの自動広告でサイト広告をどのように表示するかはアドセンスの管理画面で全て調節することになる。 自動広告をどう表示するかの五つの項目 サイトにアドセンスの広告コードを配置して広告設定の自動広告がオンになっている上で、広告フォーマットの次の五つの項目の何れかがオンになっているとそれぞれのタイプの自動広告が表示される。 ページ内広告 ページのコンテンツのメイン部分に表示される広告です 関連コンテンツ 関連コンテンツを宣伝するツールで、収益の拡大とユーザー エンゲージメントの促進を図ることができます（2025年…

アメリカの英語の小説、 Ｌ・フランク・ボームの 笑う河馬 を日本語に翻訳 しながら分からない単語や熟語を調べたので、英語の学習用に原文に沿って段落毎に掲載する。 取り上げる言葉の語彙力としてはおよそ日本の高校を卒業した水準以上、すなわち英検二級かTOEIC730点くらいを越えるものを想定することにする。 なので高校生、中学生、小学生にとっては取り上げられずに分からない単語や熟語も増えるかも知れない。 Ｌ・フランク・ボームの 笑う河馬 で学習される英語の難易度 総合的に捉えて五点評価を行うならば一点（★☆☆☆☆）と非常に易しく感じる。 感情豊かな生きた表現 笑いが縷められた作風 原文で読むのは日本人の多くには造作なくて英語の初心者向けといえそうだ。 Ｌ・フランク・ボームの 笑う河馬 の英語の原文と注解の和訳 American Fairy Tales from George M. Hi…

南アフリカの英語の小説、 オリーヴ・シュライナーの 夢の生活と現実の生活；小さなアフリカの物語 を日本語に翻訳 しながら分からない単語や熟語を調べたので、英語の学習用に原文に沿って段落毎に掲載する。 取り上げる言葉の語彙力としてはおよそ日本の高校を卒業した水準以上、すなわち英検二級かTOEIC730点くらいを越えるものを想定することにする。 なので高校生、中学生、小学生にとっては取り上げられずに分からない単語や熟語も増えるかも知れない。 オリーヴ・シュライナーの 夢の生活と現実の生活；小さなアフリカの物語 で学習される英語の難易度 総合的に捉えて五点評価を行うならば三点（★★★☆☆）と中くらいに感じる。 躍動的で現実味のある文章 叙情的で人間味のある文章 原文で読むのは日本人の多くには普通だろうから英語のあるゆる学習者に適する。 オリーヴ・シュライナーの 夢の生活と現実の生活；…