サイトに画像の遅延読み込みをGoogle推奨のIntersection Observerで実装しよう ブログの表示速度を PageSpeed Insights で調査すると改善できる項目として「オフスクリーン画像の遅延読み込み」が出て来て取り入れると0.1秒くらい短縮できると分かる。 オフスクリーンの非表示の画像は、クリティカルなリソースをすべて読み込んだ後に遅れて読み込...
Bloggerブログのテーマのhtml編集／テンプレートのソースコードの基本構造と使用可能な独自タグについて Bloggerは無料のブログサービスとして何よりも サーバーの強制広告が付かないのとGoogleフォトから軽量で高画質の写真を載せられるのが何よりも素晴らしいと感じる けれどももう一つ面白いと心惹かれるのは豊富な独自タグを使った特有のサイト作成なんだ。 サイト作成のコーデ...
Bloggerの画像なしの投稿のスニペットに専用のサムネイル画像を表示する方法 Bloggerの公式テーマのテンプレートで記事の抜粋のスニペットがインデックスページやサイドバーに置かれる場合に画像なしの投稿については文章だけしか載らない。専用のサムネイル画像を予め用意しておいて画像ありの投稿と変わらずに表示するようにスニペットのデザインを変えるカスタマイズ...
cssのscroll-behaviorのsmoothでページ内のスクロールイベントにゆっくり遅らせるアニメーションを付ける 今までブログに 目次のジャンプリンク や フローティングの戻るボタン を設置して来た。htmlのリンクタグのaを使ってページ内のidを持たせた場所へ移動するように作成しているけど、ところが何もしないままのデザインだと一瞬で、目的地に着いてしまって周りが文字だらけならばそれこそ雰...
BloggerのContempoとSohoとEmporioのテンプレートで記事／追加ページにハンバーガーメニューを出す Bloggerの 2017年の公式テーマ はブログの最上段にフローティングバー（固定／スティッキーのメニューバー）が付いている。 ところがNotableを除いてContempoとSohoとEmporioはデザインが一般的ではない。トップやアーカイブなどのインデックスページ...
Bloggerブログでスマホのインデックスページへ記事下のアドセンスのサイズを小さくして振り分けて載せる Bloggerブログのスマホのインデックスページの記事下のアドセンスはサイズが大き過ぎるので、html編集のカスタマイズでページを振り分けてサイズを小さくしてモバイルバナーの320×100で表示するように変更したんだ。 Contempoなどの新テーマ は記事下のアドセンス...
Bloggerのdefaultmarkupタグの最初は便利で最後は不要な使い方 Contempoなどの2017年の公式テーマ からソースコードに追加されていたBloggerの独自タグの一つ、defaultmarkupとは何かを考える。 Contempoテーマ via Blogger head内に幾つも記載されていて中身はincludableタグば...
インラインsvgのstroke-linecapとstroke-linejoinとstroke-miterlimitのデザイン サイトに インラインsvg で描画する場合に線の両端や頂点のデザインを付ける三つの属性が使える。svg画像が実際にどんな形状で表示されるかとそれぞれの使い方のデザインについて考えてみたい。 stroke-linecapは線の両端の形状を指定する 三つの値を持っている...
インラインsvgのpathタグで描いた線の両端を繋ぎ合わせるにはZコマンドを使う pathは座標からどんな線でも数多く描ける インラインsvg で最も自由度の高いタグだ。 しかし使ってみると一本の線の開始点と終了点の両端がスムーズに繋がらない場合があって参った。 <svg xmlns="http://www.w3.or...
