「YouTube」表示の調整

You Tubeのお気に入りの映像や、自分で作った映像をブログなどに貼るばあい、コードを知らなくても、あるていどカスタマイズできる。

大きさについては、きのうのブログで書いたので、きょうは、その他のことがらについて書いてみます。

ブラウザーあるいはアプリでYouTubeを開く>該当する動画をクリック(タップ)する> 動画下の「共有」>「埋め込みコード」>「もっと見る」で、つぎのような表示がでます。

 

douga_check_koumoku

 

それぞれの項目に、順番にチェックを入れて、どうなるか試してみました。

 

 🔲 動画が終わったら関連動画を表示する

checkbox_nocheck douga_moto1
checkbox_check
douga_check1
YouTubeの「おすすめ映像」が表示される

 

🔲プレーヤーのコントロールを表示する

checkbox_nocheck douga_moto2
checkbox_check
douga_check2
コントロールバーが表示される

 

🔲動画のタイトルとプレイヤーの操作を表示する

checkbox_nocheck douga_moto2
checkbox_check
douga_check3
タイトル(左)、「お気に入り」「SNS共有」ボタンの表示(右)

 

「YouTube」の表示サイズ

ブログに貼るYouTubeの動画の表示サイズを変えてみます。

まず、任意の動画を開く。動画作成者のアイコン下の「追加」「共有」「その他」の中から「共有」を選択する。

douga_size1

 

 

 

 

画面が広がり、次のような表示がでます。「埋め込みコード」を選択して、そののち「もっと見る」をクリックします。

douga_size2

次のような画面がでます。動画サイズは「560✕315」ピクセルになっていました。では変えてみましょう。まず動画サイズ横の「▼」をクリックします。

douga_size3

クリックすると、 画像のサイズが選べるタブが表示されます。ここでは、このタブに用意されていないサイズ、「580✕315」の3分の2のサイズの表示に変えてみたいと思います。いちばん下の「カスタムサイズ」を選択します。

douga_size4

サイズが入力できるフォームが出てきます。3分の2のサイズになるよう「373」「210」と入力しました

douga_size5

じっさいにブログに貼ってみました。上が変更前の「560✕315」ピクセル、下が変更後の「373✕210」ピクセルです。

参考までに、それぞれの設定で付与されたコードは、このようになっています(あわい赤のアンダーライン部分の数値が変わっているのが確認できます)。

douga_size8

douga_size9

「YouTube」を貼る

ブログにYouTubeの映像を貼りつける場合、YouTubeのAPIを利用する。手順は、カンタン。あちらで用意されているコードをブログに貼るだけでよい。

①映像下の「共有」をクリック

②「共有」「埋め込みコード」「メール」の中から「埋め込みコード」を選択する。

③下に表示されているコードを、貼りたいブログにそのままコピペする。

eizou

 

<

ただし、スマホにも、ちゃんとサイズが収まるような表示にするばあいは、次のような「Class属性」を使う。

上記のコード(③)に、うすい赤でアウトラインした記述を加え、 

eizou_responsive

 

スタイルシートには、以下のように書きこみます。

eizou_responsive2

大好きなカレーライス

上野御徒町の、大好物のデリーカレー。レトルトパックを購入して、自分で調理してみました。盛り付けは「ほんとうにだいじなカレー皿」で。1枚1枚焼かれたカレー専用のお皿です。スプーンでよそう時の、音ざわりがいいんだなぁ。

アロンアルファで手帳を修復

使っている手帳のページがとれてしまった。昨年お世話になった手帳を引っ張り出し、ためしにアロンアルフアでつけてみた。意外にうまく ゆくんだなぁ。そのあと、現状の手帳も、無事にくっつけました。

映像の音も録る

Quick Time Playerを使えば、スクリーン上の動画を録画することができる。ただし録音はできない。Quick Time Playerの録画再生は、あくまで無音声なんだね。

音声まで付けたい場合は、それ用のアプリケーションが必要になってくる。僕のばあいはSound flowerbedを採用した。設定はちょっぴり、ややこしい。なので後日忘れないように、備忘録として、ここでまとめておきます。

どなたかの役に立てば、それはそれでいいなぁ(マックを使っているよ)。 

Sound flowerbedはMac App Storeではなく、該当するウェッブサイトからダウンロードする(Sound flowerbedで検索して探してください)。

ダウンロードするさいには、マックの「システム環境設定」>「セキュリティとプライバシー」>「一般」を、あらかじめ確認しておこう。

security

 

App Srore許可のアプリではないので、「ダウンロードしたアプリケーションの実行許可」の中の「すべてのアプリケーションを許可」にチェックが入っていなきゃ、うまくないんだ。

application_download

 

さて、ダウンロードを行ない、Lunch padを開くと、Sound flowerebedのアイコンを確認できる。

soundflower1

 

次に、このアイコンをクリックすると、スクリーン上部のメニューバーに「花のアイコン」が表示される。

soundflower2.

 

その「花のアイコン」をクリック。開いたウィンドウの中のSoundflower(2ch)の「Built-in Output」にチェックをいれる。この設定を忘れていると、うまく録音できないので、要注意だね。なお録音には2chを使うため、Soundflower(64ch)は任意(どれにチェックが入っていても、だいじょうぶ)だと思う。

soundflower_setting

 

 

次に、マックの環境設定へ。「システム環境設定」>「サウンド」をクリック。

sound

 

「サウンド」の「出力」から「Soundflower(2ch)」を選択する。一方の「入力」は、「内蔵マイク」でも「 Soundflower(2ch)」でも、どちらでもOK。

mac_sound1

 

 

めんどうだけれど、もうひとつあります。こんどはQuick Time Playerの設定なのだ。録画するさいの「新規画面収録」をクリックすると、

quicktime1

 

「画面収録」画面がでてきます。赤い真ん中の点の右横の「v」をクリックし、

quicktime2

 

そのなかの「 Soundflower(2ch)」を選択します。

quicktime3

 

これで終了。とにかく Soundflower(2ch)の文字をみたらチェックを入れるって思ってりゃぁ、わずらわしくないね。

 

ヘッダー画像のサイズ

WordPressには、いろいろな会社や人が作ったテーマが用意されている。ぼくは、テーマということばに触れて、「主題」を思い出してしまったけれど、WordPressのテーマは「デザインと機能」くらいに、とらえておけば良いと思う。

ところで、このウェッブで採用しているテーマのヘッダー画像の推奨サイズは950✕250ピクセルである。ヘッダー画像作成はこのように画像を切り取るので、サイズの基準は「幅」にしぼった方が分かりやすそうだ。

header_kirinuki

ここで「うーん」となってしまったんだね。ひいきにしているfotoria(フォトエージェンシー)のサイトからダウンロードできる画像のサイズが、選べてしまうのである。XL、S、M…どれを選択したらよいんだろう。テーマの推奨サイズ幅950pxより小さいサイズを選んだら良いのか、それとも大きいサイズを選ぶべきか。

fotolia_size

で、じっさいに、ためしてみましたっ。上の写真が幅409ピクセル(XS)、下の写真が1628(M)です。いっけん同じように見えるけれど、よーく見てみると、下の写真の方がクリアですねぇ。

cropped-hibiscus_XL.jpg

 

cropped-hibiscus_M.jpg

Fotolia(フォトリア)

 

このウェッブサイトは、WordPressを利用して作成している。

(ほかのツールでも同じ言い方をしているのかも知れないけれど)WordPressでは、サイトの顔とも言える画像を、ヘッダー画像と呼んでいるんだね。

header

 

ついさいきんまで、ヘッダー画像には、自分で撮りためていた写真を使っていた。お気にいりの写真は決まっているものだから、おのずと、決まった写真を順繰りで使用していた。でも、こういうふうにすると、いつしか自分でも飽きてくるわけで。

(気に入った写真をウェッブからダウンロードする)ウェッブ系フォトエージェンシーを利用するのは、必然といってもいいだろうねぇ。

で、ネットで検索してみると、この種のサービスは、いくつもありまして。どのサービスが好みの写真を扱っているか、チェックしてみたりしてみたけれど。そのうち、ぼんやりしてきまして。けっきょく、価格体系で、どのサービスを使うか決めてしまった。

fotolia(フォトリア)の価格体系は、次のようになっている。サイズに応じて、必要なクレジットが多くなっていく。

fotolia_price_per_size

 

1クレジットの価格は、購入するクレジットの数に応じて異なる(多く購入すれば、安くなる)。

fotolia_tanka

ちなみに、ぼくのばあい、10クレジットごと購入しているので、たとえば、M(1628 ✕ 1167 px)のサイズでダウンロードしたばあい、
@185 ✕ 6クレジット =1110円となるのであった。