KUSONEKOの見る世界

ブログカード作成ブックマークレットをBlogger用に改造してみた

ブログ内から別記事へリンクとして、テキストのリンクを使用していましたが、記事によっては画像付きのリンクの方がインパクトがあり、閲覧して貰い易いのでは無いかと思いました。 ただ、毎回画像付きHTMLタグを作るのは骨が折れるので、いい方法が無いか調べてみました。 すると、素晴らしいことに、ブログカードのHTMLタグを吐き出せるブックマークレットを作られた方がいらっしゃいました。 ブログカード化したい記事にアクセスした状態で、そのブックマークレットを使用すれば、簡単に画像付きリンクを作ることができます。 今回、Blogger用に改造してみましたので、紹介致します。

Blogger で画像の遅延読み込みをやってみた

Googleの PageSpeed Insights で、オフスクリーン画像の遅延読み込みというのを指摘されることがあります。 これは、ページを開いた時の画面で見えない画像はダウンロードせず、スクロールした時に適宜ダウンロードして表示させるというものです。 当ブログでも画像を使うことが多いため、よく指摘を受けてしまいます。 今回、 lozad.js という物を使い、画像の遅延読み込みに対応できましたのメモを残しておきます。 また、オフスクリーン画像の遅延読み込みに対応すると、以下の指摘も出なくなりましたので、やる意味は大いにあります。 適切なサイズの画像 効率的な画像フォーマット

Blogger で WebP を使用してみた

時々、ブログの表示速度を計るため、Googleの PageSpeed Insights を利用しています。 その結果で指摘を受けるのが、次世代フォーマットでの画像の配信 という項目で、ページ内の画像フォーマットを軽い物に変えろというものです。 JPEG 2000、JPEG XR、WebPのどれかを使用する必要があるのですが、 デバイス・OS・ブラウザなどでそれぞれ対応しているフォーマットが違うため、簡単には対応できません。 一応、一番多く対応しているのが、WebPという形式でこれを使えば良さそうです。 しかしmacOSやiPhoneでは対応していないのが痛いところです。 ※macOS Big Sur、iOS 14以降にWebPに対応しました その状況で取った対策を記載しておきます。

Blogger テンプレート カスタマイズ まとめ

先日、Bloggerのテンプレートを見直し、更新致しました。 以前から、無駄なHTMLタグやCSSが多くあり、それがサイトを重くする要因となっていることが気になっていたためです。 Vaster2という軽量テンプレートを元に修正やカスタマイズを行い現在に至っています。 Bloggerをお使いの方が、スムーズにカスタマイズできるようまとめておきたいと思います。

スクリプトを追加したら他のスクリプトが動かなくなった時に確認すること

先日、ブログにスクリプトを追加してした所、関連したページを表示するMilliardが動かなくなってしまいました。 ネットで調べても同じ事象の人は見つからなかったのでメモをしておきます。 原因は、jquery のバージョンの競合の様でした。 このような問題が起こったら、とりあえずそれぞれのバージョンを合わせてみるのが良いで様です。 というのは、どういう理屈でなったのかまでは分からなかったからです。