サイトに画像の遅延読み込みをGoogle推奨のIntersection Observerで実装しよう ブログの表示速度を PageSpeed Insights で調査すると改善できる項目として「オフスクリーン画像の遅延読み込み」が出て来て取り入れると0.1秒くらい短縮できると分かる。 オフスクリーンの非表示の画像は、クリティカルなリソースをすべて読み込んだ後に遅れて読み込...
CSSのscroll-behaviorのsmoothでページ内のスクロールイベントにゆっくり遅らせるアニメーションを付ける 今までブログに 目次のジャンプリンク や フローティングの戻るボタン を設置して来た。HTMLのリンクタグのaを使ってページ内のidを持たせた場所へ移動するように作成しているけど、ところが何もしないままのデザインだと一瞬で、目的地に着いてしまって周りが文字だらけならばそれこそ雰...
JavaScriptの画像などの読み込みが遅い場合に使いたいpreloadのソースコード ボタンで複数の画像を切り替える方法 をやってみたら二枚目以降の画像の読み込みが遅くて参った。何とかならないかと調べてみたらHTMLの「rel="preload"」を使うと助かると分かった。ファイル毎のブラウザの先読みを可能にするからJavaScriptで後か...
JavaScriptでHTMLを書き換えるinnerHTML HTMLのマークアップをJavaScriptのプログラミングで書き換える、またはサイトのソースコードを置き換えるには innerHTML が良く使われる。 Element.innerHTML プロパティは、要素の子孫を記述する HTML 構文を設定または取得します。 ...
JavaScriptで日付や時刻を取得して曜日を数値から文字列へと変換する方法 Dateクラスのコンストラクタ関数を使うとDateインスタンスを素早く生成できる。 An Owl on a tree branch by Lepale [ CC0 ], via Pixabay 四つの構文と使用可能なオブジェクト Dateオブジェクトは UTC...
サイトの表示速度をlinkタグの「rel="preconnect"」で上げる／WebPagetestで事前接続を調べる HTMLの リソースヒント （ 日本語訳 ）に載っているlinkタグの「rel="preconnect"」がサイトの表示速度を上げるのに役立つと知ってブログに取り入れたんだ。 速くなるのは確かながらほんの僅かで、体感上、殆ど変わらないようだけど、しかしブラ...
normalize.cssを最新バージョンで使おう Bloggerの 2017年の公式テーマ のContempoとSohoとEmporioとNotableのソースコードの冒頭付近に normalize.css が付いている。 normalize.cssはcssの標準化を意味していてブラウザ毎のサイトのhtmlのデフォルトの...
Bloggerで独自ドメイン／カスタムドメインをhttps接続に設定して使用する方法 無料ブログのBloggerは独自ドメインを設定してレンタルサーバーとして無料で使うことができる。独自ドメインで有料ブログを運営する際にはレンタルサーバーの料金もかかるのが一般的だから安くても年間数千円が差し引かれるのは非常に嬉しい。 機能も殆ど変わらない。個人的に Googl...
サイトのファビコンとウェブクリップアイコンの汎用的な設定とBloggerでの導入手順 サイトでファビコンやウェブクリップアイコンを設定すると訪問者の利便性が上がるから良いと思う。前者はブラウザのタブでサイト名の先頭に付けられる。後者はスマホ／タブレット向けのショートカットアイコンで、ブラウザのブックマークでサイト名の先頭に付けられたり、ホーム画面に追加するとデバイ...
detailsタグでサイトに開閉メニューを作る HTML5 のサイトはdetailsタグで開閉メニュー／アコーディオンを簡単に作れると分かった。バージョン5.1から新たに加わった要素らしくて発表されないまま、かつて jQueryを使って難儀に臨むしかなかった 気持ちが嘘みたいに晴れ上がっている。本当にhtmlのマークアップだけ...
CSSはどう使えば良いのか｜タグ自体とidとclassの指定先とstyleタグとインラインstyleの記述法 サイト作成でコンテンツのマークアップを行ったhtmlにデザインを付けるのがCSS（Cascading Style Sheets／カスケーディングスタイルシート）だ。記述がhtmlのようにタグで囲むだけではないからちょっと難しい。 僕は基礎を覚えるのに十年くらいかかった。デザイ...
ChromeでGoogleのエラーが止まらなくて基本設定の検索エンジンをYahoo!に変えた タブレットの Chrome ブラウザで検索エンジンが使えなくなった。初めてではなくて偶に起きる。エラーが出るのはなぜなのかが分からなくて混乱するし、ブラウザのChromeのせいだと真っ先に思う。 Google を使っていて「このサイトにアクセスできまん／ウェブページは一時的に...
Bloggerブログのフォントを日本語向けで表示するカスタマイズ Bloggerはウェブの編集のテーマのカスタマイズの上級者向けの項目からブログに使用するフォントを素早く変更できる。 ページのテキスト ブログタイトル タブのテキスト 投稿 投稿タイトルのフォント 投稿タイトルのストリームのフォント 投稿のテキストのフォント 引...
Google FontsのEarly accessはcssのfont-faceで軽量化して使える ホームページ で Google Fonts の Early access から 日本語フォントのNoto Sans Japanese を無料で使っている。とても気に入っていて Androidのスマホでマシュマロから搭載されている のも嬉しいかぎりだ。 しかしWebフォントとし...
GoogleがiPhoneでもAndroidと同様にスマホの検索エンジンの利用者を増やすのはきっと勉強好きに適している Appleのパソコンやタブレットやスマホが動作している大元のシステムアプリのiOSのデフォルトのブラウザは Safari という。インターネットのサイトを閲覧・操作できる。Safariには幾つかの検索エンジンを使い分ける機能が付いているけれども何もしないと Google 検索をデ...
