サイト作成はメインサイトで使用中のブログサービスのBloggerについて主に行います。HTML(XML)とCSSとJavaScriptとBloggerウィジェットタグ(独自タグ)を扱います。Blogger用テンプレートのImaginaryを開発して無料提供していますが、カスタマイズに使えるマークアップやプログラムのソースコードを取り上げます。 Follow
![@nagahitoyukiのマイページ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/9462977d5028ad7d08a7471fdbb7db99686ec3c3/height=288;version=1;width=512/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fqiita-ogp-3b6fcfdd74755a85107071ffc3155898.png)
Bloggerの投稿画像の遅延読み込みの自動化にIntersection Observer APIを使ったJavaScriptプログラムと説明JavaScriptblogger画像遅延読み込みIntersectionObserver // 記事の本文の要素(psbd)と記事の本文の中身に付けたnoscript要素(blct)と記事の本文の要素の複製(npsbd)と新しいdiv要素(nl)の取得 const psbd = Blog1.querySelector("div.post-body"), blct = psbd.querySelector("noscript.blog-content"), npsbd = psbd.cloneNode(false), nl = document.createElement("div"); // 新しいdiv要素の高さを画面の縦幅と同じにする nl.s
Bloggerの記事/追加ページの投稿画像にWebPへ軽量化するrwのパラメーターを自動的に付けるJavaScriptプログラムの内容を説明する。 // 記事の本文の要素(psbd)と記事の本文の中身に付けたnoscript要素(blct)と記事の本文の要素の複製(npsbd)と新しいdiv要素(nl)の取得 const psbd = Blog1.querySelector("div.post-body"), blct = psbd.querySelector("noscript.blog-content"), npsbd = psbd.cloneNode(false), nl = document.createElement("div"); // 新しいdiv要素の高さを画面の縦幅と同じにする nl.style.height = "100vh"; // 新しいdiv要素をnoscript
Bloggerの記事/追加ページの投稿画像や動画に遅延読み込みのHTML属性のloading-lazyを自動的に付けるJavaScriptプログラムの内容を説明する。 // 記事の本文の要素(psbd)と記事の本文の中身に付けたnoscript要素(blct)と記事の本文の要素の複製(npsbd)と新しいdiv要素(nl)の取得 const psbd = Blog1.querySelector("div.post-body"), blct = psbd.querySelector("noscript.blog-content"), npsbd = psbd.cloneNode(false), nl = document.createElement("div"); // 新しいdiv要素の高さを画面の縦幅と同じにする nl.style.height = "100vh"; // 新しいdiv要
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く