スキップしてメイン コンテンツに移動

投稿

ラベル(埋め込み)が付いた投稿を表示しています

Bloggerのモバイルで記事に埋め込んだYouTube動画のサイズを変更する方法

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

Imgurで画像URLと埋め込みコードを取得する方法

イメージ
Imgurは自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにhtmlのimgタグで表示させられる。そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのhtmlに、そのまま、記載して表示させられもする。Imgurの画像URLを取得するウェブとアプリで方法が微妙に違う。ウェブでの方法:Direct Linkアカウントにログインして「Image」から画像を一枚だけ開くと左上にプルダウンのメニューがあるので、そこから「Direct Link」を選択すれば画像URLが右横に表示されて使うことができる。注意点としては画像URLがjpg(jpeg)のタイプしか出ないみたいだ。なのでpngファイルで画像をアップロードしてもそのままの画像URLは取得できなくてjpgのタイプに変換されてしまっている。アプリだとpngファイルの画像URLが出て来るので、どうし…

BloggerにYouTubeを埋め込む二つの方法はどちらを選ぶべきか

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

ブログにGoogle+のプロフィールバッジの埋め込みながら

イメージ
何を考えているかというとブログの利便性を高めるべきだ。
きっとリンク付きのプロフィールバッジを埋め込めば訪問者にGoogle+もやっていると気付いて貰い易いだろう。
Google DevelopersのGoogle+ Badgeで手軽に使えるんだ。因みにバッジだけではなくてアイコンも作れるようになっている。


ブログの上段にホームページのリンクを置いておいて下段にGoogle+のプロフィールへのリンクを置くなんてもうやり過ぎという気持ちもするし、目立つところのホームページへのリンクだけで十分かも知れない、僕のことを多めに知って貰うためには。
またはホームページへ行けばGoogle+のプロフィールへのリンクはトップページや子ページのプロフィールにも置いてあるわけなんだ。
ところが関連性が深い。Google+もなるべく文字数を増やして四百字以下で原稿用紙一枚程度はやるようになって来ているからブログに近付…

YouTubeの動画をレスポンシブ対応でサイトに埋め込む

イメージ
ホームページのMusicにYouTubeチャンネルの自作曲の動画を埋め込みコードで置いているけれどもiframeタグで載せるようになっていてサイズが固定されているんだ。そこで大きなものをスマホで観ると画面からはみ出してしまうからレスポンシブ対応でデバイスの画面にきっちり収めたいと思った。
ところがiframeタグをcssのwidthで100%に指定すると横幅は合う(metaタグのviewportの設定によってページそのものはレスポンシブ対応にしてある)のに縦幅が合わないんだ。縦幅をheightで指定しても駄目で、どうしても動画の画面比が崩れるので、スマホのために小さいものを載せるようにせざるを得なかった。
考えるとガラケーならばはみ出すような大きさだったり、パソコンやタブレットではダイナミックに載せられなかったりしてしまうので、やはり何とかしたくなって調べてみた。
見付け出したのがWordPr…

Wikimedia Commonsの埋め込みコードはブログでの様々な作品の引用や紹介に助かるよ

イメージ
ブログで他のサイトの作品を引用したり、紹介したりするのに埋め込みコードがあると載せ易い。
幾つかのサイトで取れてYouTubeやTumblrやFlickrなどが出しているけど、ところでWikimedia Commonsが取れると分かって非常に大きいと感心した。様々な絵や何かの画像が数多くあるんだ。埋め込みコードで簡単にブログに載せられる。パソコン版のサイトでしか出してないようで、スマホ/タブレットが主体の僕には気付くのが遅れてしまった。
Man Ray and Salvador Dali by Carl Van Vechten [Public domain], via Wikimedia Commons
Wikimedia Commonsでサンバドール・ダリとマン・レイの肖像(カール・ヴァン・ベクテン)にインパクトを感じたので、埋め込みコードで咄嗟に載せてみたくなった。

以前からサルバドール・ダ…