Imgurに画像をアップロードしていたら最初は何事もなく、何枚かスムーズに完了したにも拘わらず、不意に一枚がおかしな状態になり、アップロードがいつまでも完了しなくなった。 タブレットでやっていたけれどもステータスバーに「Uploading to imgur／Imgur upload is working」（Imgurへアップロード／Imgurアップロードの作業中）と出て画像が表示されるので、大丈夫そうでも公開するはずが下に「HIDDEN」（隠す）と出ておかしいと感じた。暫く経つと「Upload error／Tap to retry／CANCEL」（アップロードエラー／タップしてやり直す／中止）と出て止まってしまう。タップしてやり直しても二つのメッセージの状態を繰り返すだけでどうにもならないので、中止するとアップロードエラーが確定してさらに用意した画像も後から「Empty Album」（空っ…
サイトに 画像を描画できるインラインSVG は小さくても乱れず、しかもサイト内にマークアップすればサーバーの呼び出しを行わず、迅速に表示できるからアイコンのデザインなどに良く使われる。 Honeycomb by Clker-Free-Vector-Images / CC0 インラインSVGには同じ画像を繰り返して表示するためのマークアップがある。 一つのsvgタグの内側にdefsタグを入れてそこにid付きのgタグかsymbolタグで描画内容を纏めておく。そして内側か、または外側の場合は他のもう一つのsvgタグにuseタグを入れてhref属性でgタグかsymbolタグのidを指定してリンクのように呼び出す。 目次 インラインSVGの二つの呼び出し方 一つのsvgタグの中で呼び出す場合 定義用と表示用のsvgタグを分ける場合 呼び出しのマークアップの長所と短所 SVGのgタグとsymbolタグの違い インラ…
サイトで画像や動画に文章を続けると隙間が多めに付いたり、囲うリンクが大き過ぎて画像や動画の下が余ったりしてデザインが崩れることがある。枠線や余白を消しても現れて悩まされるけれども対処法が分かったので、どうすれば余分な隙間を消し去って画像や動画のデザインを次の文章やリンクの大きさと整えられるかを纏める。 画像や動画が周りの要素とずれる原因 サイトの画像や動画が周りの要素とずれる原因はHTMLの画像を表示するimgタグや動画を表示するiframeタグの扱いが影響している。 imgとiframeは改行なしの要素で、縦位置がベースラインとなり、次の列の要素との間に僅かな空間が取られる。 日本語にはないけれども例えば英語では「g」と「j」と「p」と「q」と「y」の文字が本体よりも下に伸びるところがベースラインの下になる。 HTMLでそうしたベースラインの下が画像のimgタグや動画のiframeの下の隙間に相…
ブログの人気の投稿の表示で画像と文章をCSSのdisplay:flexで横並びにしようとしたら上手く行かなくて参った。行毎に画像の大きさが異様に変わったり、スペースに合わなくて無駄な隙間が増えるかスペースが広がり過ぎて慌てるばかりだった。画像が潰れるとしか呼べない。あるいは縮んだり、膨らんだりして大変だったけど、しかし何とか考え通りの表示を果たしたので、覚え書きというか、どうすれば上手く行ったかの対処法を纏めておきたい。 目次 フレックスボックスと画像を分けて捉える 画像を親ボックスに入れて文章と揃える方法 画像の親ボックスと文章の四対六の横並びの例 画像をそのままで文章と揃える方法 画像自体と文章の四対六の横並びの例 フレックスボックスと画像を分けて捉える 失敗の原因として気付いたのは画像を親ボックスに入れて画像の大きさだけを指定して文章と合わせようとした。するとフレックスボックスに対しては画像の親…
以前、 CSSのグリッドレイアウトによる画像の横並びの方法 を載せたけれどもBloggerの管理画面が2020年9月に刷新されて投稿画像の出方も少し変わったので、新しい方法を中心に載せ直したい。 目次 テンプレートによるコーディングの違い 2020年9月以降に投稿された画像の横並び 投稿画像の横並びのソースコードの書き方 二つの投稿画像の横並びのソースコードのサンプル サンプルで指定したグリッドレイアウトの説明 メインカラムに横並びの画像を収めるには 画像をメインカラムに収めるソースコードのサンプル 2020年9月以前に投稿された画像の横並び テンプレートによるコーディングの違い Bloggerの公式テーマを想定して投稿画像の横並びの方法を紹介するけれどもテンプレートのレイアウトヴァージョンによって変わるから注意しなくてはならない。 レイアウトヴァージョン３の公式テーマ Contempo／コンテンポ Soho／ソーホー …
サイトの画像はその他のコンテンツと比べて容量が多くてサイトの表示速度を大きく下げることがある。画像の表示速度を上げることはサイトの利便性を高めることに繋がり易い。 HTMLで簡単に取り入れられてしかも効果が大きいdecoding-asyncの使い方を考えてみたい。 decoding-asyncは画像の非同期処理を示唆する Two swallows by Capri23auto / CC0 decodingは画像のimg要素に使える属性で、画像のデコード（ファイルの諸々のデータ形式を画面表示に適したビットマップに変換する過程）の扱いを制御する。 decoding属性で指定できる三つの値 auto 同期と非同期の処理の仕方をブラウザに任せる（初期値） sync 同期処理を示唆する async 非同期処理を示唆する decoding属性は画像と画像以外のコンテンツをどのような順番で表示するかに影響を与える。 画像のデコ…
サイトの画像はその他のコンテンツと比べて容量が多くてサイトの表示速度を大きく下げることがある。画像の表示速度を上げることはサイトの利便性を高めることに繋がり易い。 HTMLで簡単に取り入れられてしかも効果が大きいloading-lazyの使い方を考えてみたい。 loading-lazyは画像の遅延読み込みを指定する Hoffman's Two-toed Sloth by gailhampshire / CC BY loadingは画像のimg要素、さらに別枠のiframe要素にも使える属性で、画像などの読み込みの開始位置を制御できる。 loading属性で指定できる二つの値 eager 画像などを記載位置で読み込む（初期値）。 lazy 画面内の画像などをレイアウト処理後に読み込み、画面外の画像などを読み込まない。 初期値のeagerは何もしないのと同じで、従来と変わらない。ただし不要というわけでは…
Bloggerの管理画面が2020年9月から刷新されて投稿画像の出方が幾らか変わったから改めて纏めておきたい。 目次 四種類の投稿の仕方とそれぞれの最大幅 Bloggerの投稿画像のサイズ毎の圧縮の目安 画像URLで投稿画像のサイズを変更する方法 Bloggerの投稿画像のサンプルのソースコード Bloggerのimgタグのサンプルのソースコード Bloggerの画像URLのサイズ指定のパターン 画像URLでWebPファイルに変更する方法 webpファイルとその他の振り分けの仕方 四種類の投稿の仕方とそれぞれの最大幅 投稿画像の選択 via Blogger パソコンからアップロード：デバイス（パソコン、スマホ、タブレットなど）から掲載する フォト：Googleフォトのギャラリーかアルバムから掲載する Blogger：Blogger（Bloggerに以前に取り込んだ画像）かGoogleアルバムアーカイブ（Blogg…
サイトに 自由に描画できるインラインSVG は便利で、しかも画質に優れるからサイト作成ではとても役立つと感じる。 インラインSVGをホームページやブログのデザインに取り入れる際には通常のHTMLとは扱いが異なる部分があるので、混乱しないように幾つか取り上げてどのようなマークアップが特徴的に可能かを覚えておきたい。 目次 インラインSVGの特徴的なマークアップ リンクの付け方について 題名の付け方について 説明文の付け方について ランドマークの付け方について ラベルの付け方について 視覚障害者のサイトの利便性のために インラインSVGの特徴的なマークアップ 狐 狐が地面に身を丸めて眠っている Fuchs by Schmidsi / CC0 リンクの付け方について <a href="リンク先">リンク名</a> 通常のimgタグの画像にリンクを付けるように外側のsvgタグをリ…
写真のソーシャルメディアの Flickr を使い始めたけれどもアカウント登録からアイコンとヘッダー（上段の背景）画像の設定方法に手間取ったので、改めて纏めておきたい。 Flickrはアカウント登録と同時にアイコンとヘッダー画像を設定できないのがソーシャルメディアとしてちょっと珍しいかも知れない。 二つの画像の共通設定 Image selection via Flickr Flickrのアイコンとヘッダー画像はアカウント登録が終了してからログイン（サインイン）した自分のページで設定しなくてはならない。 自分のページは一つではないけれども「About」（要約）や「Photostream」（写真連載）などのどのタイプからでも構わない。 最初のうちは慣れなくて迷い易いけれども自分のページへは当該のURLを使うか、またはFlickrの最上段のメニューのパソコンの「You」（貴方）かスマホ／タブレットのハ…
写真のソーシャルメディアの Flickr を無料プランで始めた。有料プランのFlickr Proの保存容量は無制限だけど、無料プランで現行は千件まで画像や動画をアップロードすることができる。どちらのプランも一回毎のアップロードの容量制限がないのが嬉しい。大きな写真でも、そのまま、保存しておけるので、クラウドストレージとしての利用価値も十分だと思う。 プロフィールの三つの項目 Flickrのアカウント登録の最初の設定で、プロフィールに関して特殊だと気にかかった三つの項目を纏めておきたい。 プロフィールの何れの設定も自分のページ（Flickrにログイン済み）の右上のアイコンの「Settings」（設定）の項目から編集することができる。 Account settings via Flickr Real Name／実名の設定 Display Name／表示名の設定 Web Address／ウェブアドレスの設…
YouTube 動画には 四つの場面と五つのサイズのサムネイル画像が生成されて サイトで表示できる。ただし大きいサイズの二つのサムネイル画像のsddefault（640×480）とmaxresdefault（最大解像度）のタイプは必ずしも生成されない。サムネイル画像のURLのパターンに記入してYouTubeの所定のサーバーから他と同じように取得しようとしてもエラーになってしまう。現今、何もなければグレー画像が表示される仕様なんだ。 グレー画像 via YouTube サイトでYouTube動画のサムネイル画像を表示する際に取得エラーを完全に回避するためには二つの大きいサイズよりも小さいサイズを選択するべきだけど、しかし画質を上げたりするためにも大きいサイズをどうしても使いたい場合はYouTube動画にサムネイル画像が生成されなくて取得できないエラーのときだけ小さいサイズを使うようにすれば大丈夫だ…
HTMLの iframe タグのコンテンツは画像比がデバイスの画面幅に レスポンシブ で統一できない。およそスマホで画面の横幅一杯に表示したりすると縦幅が変わらないためにコンテンツの画像比が変わってしまうのが厄介なんだ。 YouTube や ドライブ など、Webサービスの埋め込みコードにはiframeタグが良く使われるけれども画面の横幅一杯に広がらないように注意して記載しないとレスポンシブで画像比が崩れる。 以前、何とかならないかと悩んで YouTube動画をレスポンシブで正確に表示する方法 を見付けた。CSSの padding や position を使ってiframeタグのコンテンツの画像比を整えることができると分かって助かった。親ボックスに内側の余白を特定の高さとして確保しながら子の埋め込みを重ね合わせるように移動させると上手く行く。 しかし近年はもう一つの方法が可能で、CSS関数の calc() を使ってi…
サイトの表示速度を上げるために画面に入らなくてまだ表示される必要のない画像を画面に入って表示される段階で初めてブラウザに読み込ませるという画像の遅延読み込みの方法がある。 個人的に訪問者だけではなくて検索エンジンにも画像が把握できて検索結果へのサイト評価のSEO対策（検索できる最適化）にも有効と考えられるGooglも推奨する JavaScriptのIntersection Observerを使ったサイト作成 を気に入ってブログに実装している。 追記：サイトの画像の遅延読み込みは HTMLのloading属性で簡単に行える ようになった。JavaScriptのIntersection observerも同じように使えるけど、HTMLよりもコードを増やしてしまうので、むしろ画像以外のコンテンツの遅延読み込みやその他の 無限スクロール などの動作に使う方が向いているだろう。 Bloggerでのカスタマイズ…