些細な日常

サイトの表示速度を上げるために画面に入らなくてまだ表示される必要のない画像を画面に入って表示される段階で初めてブラウザに読み込ませるという画像の遅延読み込みの方法がある。 個人的に訪問者だけではなくて検索エンジンにも画像が把握できて検索結果へのサイト評価のSEO対策（検索できる最適化）にも有効と考えられるGooglも推奨するJavaScriptのIntersection Observerを使ったサイト作成を気に入ってブログに実装している。 Bloggerでのカスタマイズはどのように可能かを取り上げてみたいLots of packed blueberries by elizadean [CC0], via Pixabay 手順は二つあって特に2017年の公式テーマのContentsとSohoとEmporioとNotableのインデックスページのサムネイル画像――ページ毎に何枚も表示される…

Bloggerの公式テーマのテンプレートで記事の抜粋のスニペットがインデックスページやサイドバーに置かれる場合に画像なしの投稿については文章だけしか載らない。専用のサムネイル画像を予め用意しておいて画像ありの投稿と変わらずに表示するようにスニペットのデザインを変えるカスタマイズの方法を考えてみたい。 新テーマのContempoとSohoとEmporioは注目とブログと人気の投稿の三つのウィジェット、Notableは注目かブログと人気の投稿の二つのウィジェットのスニペットでサムネイル画像が別々の仕方で表示される。そしてテーマ毎にデザインも違うので、それぞれにカスタマイズためのソースコードを取り上げる。 旧テーマのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルと旅行は注目とブログの投稿と人気の投稿の三つのウィジェットのスニペットでサムネイル画…

Bloggerブログで記事にYouTube動画を載せるにはウェブの投稿の「動画」から取り込むのが便利だと思う。YouTubeの自分のチャンネルは直ぐに探せるし、他人のチャンネルは検索からキーワードやURLで埋め込みコードを簡単に取得できる。サイズが「320×266」で固定されているからタブレットやパソコンでは大きく表示したくなるけど、しかしスマホでもバランスが悪くて変えたくなって来たんだ。BloggerのデフォルトだとYouTube動画の様々な画面比にきっちり対応できるけれども昨今は16:9の画面比が大半を占めているから完全に合わせてしまった方が良いと思う。毎回、上下の余りの黒い部分が太過ぎるし、モバイルの記事では最初にサムネイル画像が上下の黒い余りなしに表示されていて実際の動画よりも、可成、大きく膨らんでいる。デザインとして画面比を16:9の「320×180」に設定するのが望ましい。モ…

Bloggerのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルと旅行の旧テーマのウェブバージョンでサイドバーの記事のリンクのYouTubeのサムネイルがはみ出していると気付いた。何もしてないはずなので、Bloggerでデザインの変更が入ってバグが起きているかも知れない。ちょっと前にモバイルのインデックスページで記事のリンクでの記事の本文の抜粋が消えるという現象が一時的に起きていたんだ。サーバーからデフォルトのデザインを動かされたみたいだった。タイトルとサムネイルしか出なくて本当に焦らされたし、Bloggerブログを使っていて初めてバグが出ると分かった。今回のサイドバーのサムネイルのはみ出しは僕のせいとは考え難い。メインのコンテンツではないからブログのウェブバージョンのサイドバーはサムネイルを消して表示しても良かったけれどもそのままで続けるの…

Bloggerはウェブの編集から動画挿入によってYouTubeを検索して動画を取り込むことができる。便利だと思ってマイケル・ジャクソンの記事で初めて使ってみたら記事ではサムネイルになって横幅320pxで表示されてしまう。スマホならば画面に収まって良いかも知れない。ちょっと両端が途切れるのは悲しいけれどもパソコンのウェブバージョンでもサムネイルのままになっている。小さ過ぎるのではないか。YouTubeの埋め込みコードを使うと微妙に異なっていてスマホではサムネイルだけれどもパソコンのウェブバージョンでは普通に表示されていた。BloggerでYouTubeを埋め込む方法は二つあってどちらが良いかと考えてしまうYouTubeの埋め込みコードは一般的にはそのままで使うとスマホの画面からはみ出すことが多くてレスポンシブに対応するcssを追加せずに済むのは有り難いと思う。画面幅に自動的に合わせるように…