スキップしてメイン コンテンツに移動

エッセイ風の日記ブログ

ラベル(CSS)が付いた投稿を表示しています

BloggerブログでIntersection Observerの画像の遅延読み込みをかけるカスタマイズ

イメージ

サイトの表示速度を上げるために画面に入らなくてまだ表示される必要のない画像を画面に入って表示される段階で初めてブラウザに読み込ませるという画像の遅延読み込みの方法がある。 個人的に訪問者だけではなくて検索エンジンにも画像が把握できて検索結果へのサイト評価のSEO対策(検索...

cssのscroll-behaviorのsmoothでページ内のスクロールイベントにゆっくり遅らせるアニメーションを付ける

イメージ

今までブログに 目次のジャンプリンク や フローティングの戻るボタン を設置して来た。htmlのリンクタグのaを使ってページ内のidを持たせた場所へ移動するように作成しているけど、ところが何もしないままのデザインだと一瞬で、目的地に着いてしまって周りが文字だらけならばそれこそ雰...

cssのpositionのstickyでコンテンツをサイトの一定の範囲内にフローティングする

イメージ

ブログの記事/追加ページの本文の右下に フローティングの戻るボタン を付けた。 当初、方法は分かったけれども画面のスクロールからアドセンスのサイト広告に重なるとポリシー違反の恐れがあるので、用心してやらなかったんだ。 ところが記事/追加ページの本文のところだけとかア...

Bloggerブログのテンプレートのhead内のカスタマイズのために独自タグのall-head-contentを分解する

イメージ

Bloggerは利便性を高めるためにブログのテンプレートの様々なソースコードを独自タグで自動化している。しかし独自タグが幅広い記述に対応して多くのソースコードが一辺に出力されるとテンプレートのカスタマイズが反対に難しくなってしまう。直接、手を加えられないので、どうすれば良いのかと...

cssで画像に文字を重ねる:グリッドデザインでアイテムのスペースを合わせて表示する

イメージ

サイト作成で画像に文字を重ねる場合にそれぞれの位置取りが難しい。加えて レスポンシブ でデバイスの画面幅によってデザインが伸縮されると画像と文字のバランスが崩れ易い。二つの悩みを同時に解決するために最も相応しい方法は グリッドデザイン :displayのgridで、画像と文字のス...