BloggerブログでIntersection Observerの画像の遅延読み込みをかけるカスタマイズ サイトの表示速度を上げるために画面に入らなくてまだ表示される必要のない画像を画面に入って表示される段階で初めてブラウザに読み込ませるという画像の遅延読み込みの方法がある。 個人的に訪問者だけではなくて検索エンジンにも画像が把握できて検索結果へのサイト評価のSEO対策（検索...
cssのscroll-behaviorのsmoothでページ内のスクロールイベントにゆっくり遅らせるアニメーションを付ける 今までブログに 目次のジャンプリンク や フローティングの戻るボタン を設置して来た。htmlのリンクタグのaを使ってページ内のidを持たせた場所へ移動するように作成しているけど、ところが何もしないままのデザインだと一瞬で、目的地に着いてしまって周りが文字だらけならばそれこそ雰...
BloggerのContempoとSohoとEmporioのテンプレートで記事／追加ページにハンバーガーメニューを出す Bloggerの 2017年の公式テーマ はブログの最上段にフローティングバー（固定／スティッキーのメニューバー）が付いている。 ところがNotableを除いてContempoとSohoとEmporioはデザインが一般的ではない。トップやアーカイブなどのインデックスページ...
BloggerのContempoテーマで記事タイトルの右横の共有ボタンを消す Bloggerの Contempoテーマ の記事タイトルの右横の共有ボタンはユニークなデザインで気に入っていたけど、ところが殆ど誰も使わないようだし、ソースコードは、結構、長くて 表示速度を下げてしまう恐れ も否定できないので、消すべきではないかと感じ始めた。 記事タイト...
cssのpositionのstickyでコンテンツをサイトの一定の範囲内にフローティングする ブログの記事／追加ページの本文の右下に フローティングの戻るボタン を付けた。 当初、方法は分かったけれども画面のスクロールからアドセンスのサイト広告に重なるとポリシー違反の恐れがあるので、用心してやらなかったんだ。 ところが記事／追加ページの本文のところだけとかア...
Bloggerブログで記事の更新日を表示する方法 公式テーマの新旧で、Bloggerブログで記事の更新日を表示する方法は異なっている。 Bloggerの新テーマ ウィジェットバージョン2／レイアウトバージョン3 Contempo Soho Emporio Notable Bloggerの旧テーマ ウィジェットバ...
Bloggerブログのテンプレートのhead内のカスタマイズのために独自タグのall-head-contentを分解する Bloggerは利便性を高めるためにブログのテンプレートの様々なソースコードを独自タグで自動化している。しかし独自タグが幅広い記述に対応して多くのソースコードが一辺に出力されるとテンプレートのカスタマイズが反対に難しくなってしまう。直接、手を加えられないので、どうすれば良いのかと...
normalize.cssを最新バージョンで使おう Bloggerの 2017年の公式テーマ のContempoとSohoとEmporioとNotableのソースコードの冒頭付近に normalize.css が付いている。 normalize.cssはcssの標準化を意味していてブラウザ毎のサイトのhtmlのデフォルトの...
cssで画像に文字を重ねる：グリッドデザインでアイテムのスペースを合わせて表示する サイト作成で画像に文字を重ねる場合にそれぞれの位置取りが難しい。加えて レスポンシブ でデバイスの画面幅によってデザインが伸縮されると画像と文字のバランスが崩れ易い。二つの悩みを同時に解決するために最も相応しい方法は グリッドデザイン ：displayのgridで、画像と文字のス...
Bloggerブログでページリスト（先頭）と人気の投稿の見出しタグを変更する 2017年の公式テーマ のContempoとSohoとEmporioとNotableのカスタマイズで、 記事／追加ページの固有タイトルの見出しタグをh3からh1に 、そして ブログ名の見出しタグをh1からh2に 変更した。何れも html構文 と SEO対策 のためだけれどもさら...
