サイトの表示速度を上げるために画面に入らなくてまだ表示される必要のない画像を画面に入って表示される段階で初めてブラウザに読み込ませるという画像の遅延読み込みの方法がある。 個人的に訪問者だけではなくて検索エンジンにも画像が把握できて検索結果へのサイト評価のSEO対策（検索できる最適化）にも有効と考えられるGooglも推奨する JavaScriptのIntersection Observerを使ったサイト作成 を気に入ってブログに実装している。 追記：サイトの画像の遅延読み込みは HTMLのloading属性で簡単に行える ようになった。JavaScriptのIntersection observerも同じように使えるけど、HTMLよりもコードを増やしてしまうので、むしろ画像以外のコンテンツの遅延読み込みやその他の 無限スクロール などの動作に使う方が向いているだろう。 Bloggerでのカスタマイズ…
サイトのデザインでCSSのfloat（浮遊）を使うと複数のコンテンツを両側に配置して一列に表示できる。 しかし上手く行かない場合も多くて難しい。陥りがちな失敗を二つ挙げると背景や枠線が付かないのと画像や背景がはみ出すのとで、デザインを崩してしまうんだ。 何とかならないかと考えながら対処法が見付かったので、纏めておきたい。 floatで背景や枠線が付かなければoverflowのhiddenも使おう 一文目 二文目 三文目 四文目 サンプルのソースコード HTML <div class="fbox"> <p>一文目<br>二文目<br>三文目<br>四文目</p> <img src="画像URL"> </div> CSS .fbox {border:2px #00008b soli…
サイトの表示速度を考えると画像が最も容量が大きくて支障を来し兼ねない。一枚で他の全てを平気で上回ったりもする。影響が非常に大きいので、載せるならば予め軽量化しておくには越さない。 大きさを小さくリサイズしたり、データを高く圧縮したりする方法があってそうしたアプリやWebサービスを使うと良いと思う。 ただし難しいのは画質だ。写真でも何でも画像は小さくリサイズしたり、高く圧縮したりすればするほどに画質を落とし易くてサイトのデザインが崩れて来てしまう。嘆かざるを得なくなるんだ。 目次 画像を最大限に軽量化するためにリサイズと圧縮の二つの方法の組み合わせる 一回目の編集：アプリのPhotoshop Expressでリサイズする 二回目の編集：WebサービスのTinyJPGで圧縮する ホームページやブログで画像を載せる際には画質と容量の鬩ぎ合いが避けられなくて絶えず、最高のバランスを模索するように画像を望み通り…
インターネットでジャンプリンク付きの目次を設けたサイトをブログの記事などで良く見かけていた。 僕もブログに長文の記事を載せる際に見出しで細かく区切られているとそれぞれへ向けてジャンプリンク付きの目次を冒頭に設けておくのが素早く移動できて便利だし、訪問者にも好まれそうだとやってみたら気に入ってしまった。 コンテンツが上下に長いほどにジャンプリンク付きの目次がサイトに必要になって来る。 目次 ジャンプリンクのHTML 枠線のデザインのCSS 枠線のCSSのサンプルコード 角丸のCSSのサンプルコード 背景色のデザインのCSS 背景色のCSSのサンプルコード 透過のCSSのサンプルコード 目次の完成版のデザイン ジャンプリンクのHTML 一つのページ内で移動するのも他のページへのリンクと同じで、リンクのaタグを使う。 リンク元のサンプルコード <a href="#heading1">ジャンプ…