些細な日常
TwitterとInstagramとYouTubeには他のサイトにコンテンツを埋め込んで表示する機能があってとても便利だけれども他のサイトからすると外部ファイルやサイトを読み込まなくてはならないから表示するのに普通よりも時間がかかってしまう。 通常ではさほど気にならないかも知れないにせよ、サイトによってファイルの読み込みやコンテンツの表示の仕方からで非常に遅れることもないわけではない。 サイトで外部ファイルを優先的に読み込む方法として HTMLのリソースヒントの一つとしてpreload（先読み）のソースコードがある ので、TwitterとInstagramとYouTubeの埋め込みを少しでも表示したい場合に使える。 目次 Twitterの埋め込みコードを先読みする Twitterの埋め込みコードの外部ファイル Twitter用の二種類の先読みのソースコード Instagramの埋め込みコードを先読みする I…
YouTube 動画の埋め込みコードにはHTMLのiframeタグが使われていてデバイスの画面毎にレスポンシブ対応でデザインを揃えるのが難しい。特にモバイルのスマホやタブレットで画面の横幅一杯に表示する場合に埋め込み動画の縦幅を一定の割合で維持できず、画像比が崩れる。写真などに使われるimgタグのようにコンテンツの画像比がiframeタグでは固定されないんだ。 デザインのCSS のコーディングで解決できて僕としては CSS関数のcalc()を使って iframeタグの画像比を計算して表示するのがスムーズだとブログの些細な日常でも取り入れている。 追記：CSSで iframeの縦横比を一発でレスポンシブに指定できるaspect-ratio が多くのブラウザで対応して来てたので、calc()のコーディングに置き換えて新しく使うようになった。 Bloggerブログでどうやるか、何よりもデバイスの画面毎のデザイン…
HTMLの iframe タグのコンテンツは画像比がデバイスの画面幅に レスポンシブ で統一できない。およそスマホで画面の横幅一杯に表示したりすると縦幅が変わらないためにコンテンツの画像比が変わってしまうのが厄介なんだ。YouTubeやドライブなど、Webサービスの埋め込みコードにはiframeタグが良く使われるけれども画面の横幅一杯に広がらないように注意して記載しないとレスポンシブで画像比が崩れる。 以前、何とかならないかと悩んで YouTube動画をレスポンシブで正確に表示する方法 を見付けた。CSSのpaddingやpositionを使ってiframeタグのコンテンツの画像比を整えることができると分かって助かった。親ボックスに内側の余白を特定の高さとして確保しながら子の埋め込みを重ね合わせるように移動させると上手く行く。 しかし近年はもう一つの方法が可能で、CSS関数の calc() を使ってifra…
Bloggerブログで記事にYouTube動画を載せるにはウェブの投稿の「動画」から取り込むのが便利だと思う。 YouTubeの自分のチャンネルは直ぐに探せるし、他人のチャンネルは検索からキーワードやURLで埋め込みコードを簡単に取得できる。 サイズが「320×266」で固定されているから タブレットやパソコンでは大きく表示したくなる けど、しかしスマホでもバランスが悪くて変えたくなって来たんだ。 BloggerのデフォルトだとYouTube動画の様々な画面比にきっちり対応できるけれども昨今は16:9の画面比が大半を占めているから完全に合わせてしまった方が良いと思う。 毎回、上下の余りの黒い部分が太過ぎるし、モバイルの記事では最初にサムネイル画像が上下の黒い余りなしに表示されていて実際の動画よりも、可成、大きく膨らんでいる。 デザインとして画面比を16:9の「320×180」に設定するのが望ましい。 モ…
Bloggerはウェブの編集から動画挿入によって YouTube を検索して動画を取り込むことができる。 便利だと思って マイケル・ジャクソンの記事 で初めて使ってみたら記事ではサムネイルになって横幅320pxで表示されてしまう。スマホならば画面に収まって良いかも知れない。ちょっと両端が途切れるのは悲しいけれどもパソコンのウェブバージョンでもサムネイルのままになっている。小さ過ぎるのではないか。 YouTubeの埋め込みコードを使うと微妙に異なっていてスマホではサムネイルだけれどもパソコンのウェブバージョンでは普通に表示されていた。 BloggerでYouTubeを埋め込む方法は二つあってどちらが良いかと考えてしまう YouTubeの埋め込みコードは一般的にはそのままで使うとスマホの画面からはみ出すことが多くて レスポンシブに対応するCSS を追加せずに済むのは有り難いと思う。 画面幅に自動的に合わせるように…
何を考えているかというとブログの利便性を高めるべきだ。 きっとリンク付きのプロフィールバッジを埋め込めば訪問者にGoogle+（サービス終了）もやっていると気付いて貰い易いだろう。 Google DevelopersのGoogle+ Badgeで手軽に使えるんだ。因みにバッジだけではなくてアイコンも作れるようになっている。 なぜGoogle+のプロフィールバッジをブログに使うか フッター｜ Super Leak ブログの上段にホームページのリンクを置いておいて下段にGoogle+のプロフィールへのリンクを置くなんてもうやり過ぎという気持ちもするし、目立つところのホームページへのリンクだけで十分かも知れない、僕のことを多めに知って貰うためには。 またはホームページへ行けばGoogle+のプロフィールへのリンクはトップページや子ページのプロフィールにも置いてあるわけなんだ。 ところが関連性が深い。Googl…
ホームページ（ ブログへ移転 ）のMusicに YouTubeチャンネル の自作曲の動画を埋め込みコードで置いているけれどもiframeタグで載せるようになっていてサイズが固定されているんだ。そこで大きなものをスマホで観ると画面からはみ出してしまうからレスポンシブ対応でデバイスの画面にきっちり収めたいと思った。 ところがiframeタグをCSSのwidthで100%に指定すると横幅は合う（ metaタグのviewportの設定 によってページそのものはレスポンシブ対応にしてある）のに縦幅が合わないんだ。縦幅をheightで指定しても駄目で、どうしても動画の画面比が崩れるので、スマホのために小さいものを載せるようにせざるを得なかった。 考えるとガラケーならばはみ出すような大きさだったり、パソコンやタブレットではダイナミックに載せられなかったりしてしまうので、やはり何とかしたくなって調べてみた。 YouTub…
ブログで他のサイトの作品を引用したり、紹介したりするのに埋め込みコードがあると載せ易い。 幾つかのサイトで取れて YouTube や Tumblr や Flickr などが出しているけど、ところで Wikimedia Commons が取れると分かって非常に大きいと感心した。様々な絵や何かの画像が数多くあるんだ。埋め込みコードで簡単にブログに載せられる。パソコン版のサイトでしか出してないようで、スマホ／タブレットが主体の僕には気付くのが遅れてしまった。 Wikimedia Commonsは様々な無料素材を埋め込みコードでサイトに掲載できる Man Ray and Salvador Dali by Carl Van Vechten / Public domain Wikimedia Commonsで サンバドール・ダリとマン・レイの肖像 （ カール・ヴァン・ベクテン ）にインパクトを感じたので、埋め込みコードで咄嗟に載せ…