bloggerの見出しに背景画像を付ける

見出しのhタグにbackground-image で画像のURLを指定してやれば何となく簡単に出来そうです。この背景に使う画像のある場所が自分のレンタルサーバーなどなら話は簡単。でもこれがgoogleフォトにある画像を使おうとすると、はてどうすればいいのか？

その画像をが表示されたhtmlへのリンクなら簡単に取得できますが、はて、一枚の画像そのもののURLを取得するにはどうすれば良いのか？

googleフォトにある画像へのリンクを取得する

YOUTUBEの動画などはブログやホームページにその動画を埋め込む為のコードが取得できます。しかし、googleフォトにある一枚の画像へのリンクは？？？？？

方法としたら、例えばh3タグの背景に画像を入れようとした場合、以下のようにすれば良いわけですが、問題はこのxxxxxxの画像のurlをどうして取得すればいいのか？と言う事になります。

<h3 style="background-image:url(https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.jpg); color: white; margin-top: 0px; padding: 0.5em; text-align: left;">h3タグの背景に画像を入れる</h3>

少し見にくいですが、ご勘弁を！
このxxxxxに入るリンクを取得出来さえすれば、あとは訳もなく出来ます。

レンタルWebサーバーなどに画像データをアップしておいて、この画像ファイルへリンクするのなら簡単にできます。厄介なのはgoogleフォトにある一枚の画像だからなのです。

そこでチョット考えてみたら、自分のgoogleフォトにある画像をブログに貼り付ければ、そこにその画像のURLが書き出されている筈です。このURLをコピーして貼り付けてやればいいのでは？
試しに画像を貼り付けてやってみました。

htmlに切り替えてで表示してみると、画像表示の部分は以下のようなコードになっています。少し違う部分もあるかもしれませんが、肝心なのは赤字で示した https://から.jpg までの部分です。

<div class="separator" style="clear: both; text-align: left;"><a
href="https://xxxxxxxxxxxxxxxxxxxxxxx.jpg"imageanchor="1" style="margin-left: 1em;
margin-right: 1em;"><img border="0" data-original-height="512"
data-original-width="1200" src="https://xxxxxxxxxxxxxxxxxxxxxxxxx.jpg"
width="320" /></a></div>

随分と長ったらしいコードになっていますが、xxxxxxの部分は文字を伏せた部分なので、実際にはもっと長い文字列が入っています。

この「https://からxxxxx.jpg」までがgoogleフォトに保存されている、このトマトの画像のURLと言う事になりますから、この部分を選択してコピーしておきます。

見た目のバランス調節をして完成！

画像のURLが分かれば 前述のh3タグのstyle=の中にこのURLを貼り付け てやればメデタク見出しの背景にこの画像が配置されることになります。
やってみたらこれが大正解でした。

後は、画像と文字が旨くバランスのとれるように、文字サイズやこの文字の上下に余白を入れて画像が見やすくなるくらいに縦幅を広げてやれば出来上がり。

h3の上下のpaddingを0.5em に広げてやって見え方を調節したものが、最終的な下の見出しになりました。

全て完了したら、URLを取得するために、仮配置した画像は削除して全て完了です。

もっと簡単な方法もあるのかもしれませんが、今の自分にレベルで出来るのはこれくらいまでかな。

完成！
 

h3タグの背景に画像を入れる。縦幅を欲しいので、2行になるくらいに見出しの文を調節した方がいいです。 

この後でもっと簡単な方法でgoogleフォトの画像のURLを取得する方法を知りました。

それはGoogleフォトで使う画像を表示しておいて、右クリックで現れるメニューから「画像アドレスをコピー」をクリックすればアドレスがクリップボードにコピーされるという方法でした。

手順もこの方が手短に済みそうです。

試しにやってみたところ確かに同じような結果になりました。でも書き出されたURLは自分がやった方法とはかなり違っていましたが、URLは少し短くなっています。

ただ、気になる情報もあり、それによれば、この方法ではリンクは永続的なものではなく数日で切れてしまうといった話でした。この書き込みは2017年の日付でしたので、少し古い情報ではありますが、気になります。

そう言えば、以前はGoogleフォトの写真のURLはもっと簡単に知ることが出来るようになっていたと記憶しています。これで取得したURLで何かの地図へ画像を貼り付けたら、その後、その殆どは写真は表示されなくなっていた事がありました。
もしかしたら、このリンク切れを起こしていたのかもしれません。

実際、2つのURL取得方法で得られるアドレスは、片や最後は画像ファイル名になっていて、いかにも画像のアドレスを表しているようですが、新しい方法で取得したURLはアドレスというようなものでは無さそうでした。

リンク切れ試験

試しに両方表示させておけばそのうちにその結果も分かるのかもしれません。
新しく知った方法で同じ画像を貼り付けておいて見ます。永続的に画像のリンクが生きているのかどうかの試験です。

解決！モバイルに反映されないCSSの問題

ナント、テーマのxmlファイルをアップロードする事で全てが解決！ 

今朝から奮闘してきた件名の件がようやく解決しました。
オンラインでテーマのhtmlで追加したCSSはPC画面では反映されるのですが、モバイル画面では何をどうしても変化してくれないという訳の分からない障害でしたが、これがようやく解決です。

テーマを弄る時にバックアップはとっておきましたが、ダウンロードされたxmlファイルの中のCSSをパソコンのエディタで書き換えてまずは保存します。

ここからバックアップファイルをリストア。

そして「テーマ」→「カスタマイズ」→「元にもどす」でこのファイルを選択してアップロードしてやると、ナント、何事もなかったようにモバイルにもCSSが反映されていました。

ただ、これはそれまでにも何回かやってみた事で、これまでは駄目だったのですが、突然この方法で旨くいったので訳が分かりません．．．．．。（もしかしたらバックアップのファイル名を変えたような記憶も．．．．．．）

もしかして、これって常識？ これが仕様？

考えてみれば、オンラインで書き換えない限り、パソコン上にあるxmlファイルは常に最新と言う事になりますから、単純にこれを書き換えてアップすればいいと言うことで、特別面倒なものでも無さそうです。

しかし、それならば、カスタマイズからのあのhtml編集には何の意味があるんだろうか？

以前からのhtmlファイルのバックアップをそのままリストアしても駄目だったものが、ファイル名を変更した事により何かの辻褄が合った？そう考えるしか無さそうです。それにそれ以後はオンラインでも問題は起きていないのですから、解決したものの気持ちの悪い話です。

何はともあれ、手立てが見つかっただけでもヨカッタヨカッタ

---

話は全く変わりますが、見出しにgoogleフォトの画像を背景画像にしてみようと始めたところ、これが予想に反して意外に簡単に出来てしまいました。見出しのバリエーションが増えました。

blogger モバイルにCSSが効かない

何ともおかしな挙動をする新しいblogger

blogger の表示がパソコン表示なら問題ないのですが、モバイルではCSSが全く反映されていません。以前のbloggerでは何も問題は無かったのですが、新しいblogger になって、初めてhtmlの中のCSSを弄った途端の症状です。

勿論、モバイルの表示設定では「カスタム」を選択しているのですが、全く駄目な状態です。

ヘルプに何か書かれていないか？と探してみましたが、こちらは未だに以前のblogger でのヘルプで全く役に立ちません。だいたい、大きな変更をするのなら、その前にヘルプ情報くらいしっかり新しいものに書き換えてから初めて欲しいものです。

その後、テーマのhtml の中で .mobile を付けてモバイル用のCSSで何とかしようと思ってやってみても全く反映されない状態です。

症状をよく見てみると

■テーマのhtml内に書かれているCSSはPC表示では問題なくこれまでと同じように反映されているが、モバイル表示では全く反映されていない。
■記事の中に書かれたstyleの指定はMobileでも反映される。

こうした状況を踏まえてこれからの記事はどうすればいいのか？
答えは冗談になりそうな嘘みたいな話だけど、記事の中で全てstyleを指定していく。PC でもモバイルでも同じように、指定したスタイルを反映する方法は今の所はこの一つしか無さそうです。でも、いちいちそんな事していられないし、そんな事していたら、投稿記事全体の統一感を保つのも難しそうです。

bloggerさん、どうなっているんじゃい！
でも、何故か解決しちゃいました。

解決！モバイルに反映されないCSSの問題

bloggerのCSSがモバイルに反映されない問題が何となく解決したようです。でも原因が分からないので気持ち悪いです。

uranari-hitori.blogspot.com

EOS 5D MarkⅢの動画撮影で外部マイク Video Micro

今の時代、動画も一眼デジタル

最近EOS 5D MarkⅢで動画を撮り始めたらこれが結構楽しいです。何事も最初の覚える頃が一番夢中になれて楽しい時なのかもしれません。

これまではビデオ撮影にはあまり興味もなく、ビデオカメラは以前グライダーの訓練をしていた時、コックピットに固定して自分のフライトを撮影するために買ったキャノンの小さなビデオカメラ一台だけでした。

そのうちにテープで撮影する時代でもなくなり、その後はコンデジの動画撮影機能で、たまーーに、撮る程度でした。

そんなわけで、EOS 5D MarkⅢは本来の目的である静止画専用機になっていました。

ところが、最近YouTubeなどで動画の撮影How-to物を見ると、殆どがデジタル一眼を使っての動画撮影です。
もっとも、デジタル一眼と言っても今その殆どはミラーレス機です。しかし自分のEOSでも撮れないことはないでしょう。

MarkⅢの前のMark2はその動画機能で、世界の動画撮影に革命を起こした程のカメラだったのですから、その遺伝子を引き継いだMark3なら今でもそこそこの動画は撮れるはずです。

しかし、取説を見て動画撮影の設定を始めようにも、Mark3の前に使っていたEOS 5D に比べるとカメラの持つ機能が凄く、そのために取説の厚さも半端ではありません。最終ページは優に400ページを越えています。
この取説で動画撮影について調べてみても、どうも良くわかりません。

EOS 5D MarkⅢでのテスト撮影

EOS 簡略設定画面

そこで、ネットで調べた情報なども参考にして、自分の動画撮影設定は以下のようにしました。

・動画のサイズは720Pと言われる 1280px x 720px
・フレームレートは秒間60枚の60fps
・圧縮は動画編集向きのALL-I。
・シャッタースピードはフレームレートの倍が鉄則と言うので1/120sec になりますがこのスピードは無いので1/125sec。
・絞りは撮影の状況により変えますが、基本的にはf8。
・全体の絞りはisoをAuto にしておけば良いのか？

これまでに何回かオートでの動画撮影経験はありますが、何も分からずに撮ったので、撮影された動画を見ても、これが良いのか、悪いのか？比べるものもなく、こんなものなのだろうと思っていました。

取り敢えずは今回は以上のような設定で撮ってみました。

結果は？

んーーー、またまた、これで良いのか、それとも悪いのか？設定を変えればもっと綺麗に撮れるのか？

試しにYouTubeにアップして、他の皆さんの動画と比べてみたところ、ん、良いんじゃない？
以前撮ったコンデジの動画や、一緒に寺詣りに行く友人がビデオカメラで撮ったものに比べてもかなり高品質な動画に見えます。

ただ、植木の葉などの、特に細かいものが連続するような場面では輪郭が甘くなっているように見えます。以前、デジタルカメラはこうした細かな物の連続は苦手、といった話を聞いたことがあり、これもそのような理由による輪郭線の甘さだったのかもしれません。

試しにフルハイビジョンの1080P（1920x1080）でも撮ってみました。

本当なら綺麗に写るはずなのです。しかし選択できるフレームレートが30fpsだけということで、これ以上には上げられず、少しでもカメラの移動が早いと画面が流れてしまいます。

小さな画面ならまだ良いとしてもこれを大画面で見ていると酔ってしまいそうです。1080Pでも60fpsで撮影できれば720Pの映像を遥かに凌ぐ動画になるはずです。でも、やはりそこは8年前のカメラです。

カメラの動きに注意すれば問題ないレベルになると思います。でも編集時のパソコンへの負荷がかなり大きくなる事を考えると今暫くは720Pでいった方が良さそうです。

気になる風の音

しかし、撮影した動画をFinal Cut Proで見た時に気になったのが動画と一緒に記録されている風音でした。少しの風でもゴーー、という風切り音が入っています。どうやらカメラ内臓のマイクを使っての高音質録音は難しそうです。

外部マイクを購入

そこでEOSで使える外部マイクを探して見ました。各社からいろいろなマイクが出ていて、その中でも口コミ評価が高かったのがRODE MICROPHONESの「Video Micro」というモノラルの小型マイクでした。
コンデンサーマイクでも電源となるものは必要ないようですから、カメラに取り付けて外部マイク端子に接続すればそれでＯＫ。購入した方の評価もそこそこ高く、これなら良いだろう、と即注文しました。

MacbookProでも使える？

説明を読むと当然ながら、パソコンでも使えるようです。
実は先日もFinal Cut Proで動画編集の時にアフレコで音声を載せたところ、この暑い季節では少しでも負荷が掛かるとファンが回りだします。外部マイクは無いのでMacbookProの内蔵マイクを使っていた為、このファンの音がかなりの音量レベルで入ってしまい、この処理に一苦労したばかりでした。

このRODEのマイクがMacbookProで使えるのなら、内蔵マイクとは違い使い勝手も良くなりそうです。

え、極数変換？　何それ？

しかし、もう少し調べてみると、どうやらマイク端子には4極と3極の2タイプがあり、Appleのパソコンの場合は4極で無いと使えないことが分かりました。このVideo Micro をMacbookProで使うには３極ー４極の変換アダプタが必要なようです。

しかし、まてよ、３極だろうが４極だろうが、MacbookProには音声入力端子は無いではないか！
それなら４極に変換したところで3mmプラグの状態ではMacbookProには繋がりません。

結局ＵＳＢに変換で解決！

そ

ここでもう少し調べてみました。
そこで見つけたのは3極3mmプラグからUSBに変換する変換アダプタでした。これならMacbookProでも繋げることが出来そうです。しかし、USBコネクタはタイプAなので、MacbookProに繋ぐにはこれをタイプCに変換しなければなりません。これは手持ちにType A→Type Cの変換アダプタがあるのでこれが使えそうです。

MacbookProで Video Micro マイクテスト

という事で、カメラでのテストの前にパソコンでのテストが先になり、早速Final Cut Pro でアフレコのテストをしてみました。
マイクとの距離は50cm程で録音してみたところ、感度自体はかなり良いらしく冷却ファンの音も拾ってしまっています。
このマイクは指向性タイプのマイクなので、マイクの後ろ側では正面の50%くらいの集音率になるようです。そこで、マイクのセット位置を変えて、マイクがパソコンの前になるようにセットしてみました。
これならマイクの後ろにパソコンがあるため、ファンの音はそれほど気にならないレベルになりました。

この程度のホワイトノイズはしかたないの？

でも音量を上げてみると、ファンの音とは別に全体にホワイトノイズが入っています。どうも、電池式では無いのでよけいにホワイトノイズは出やすいらしいのです。でもこのレベルならFinul Cut Proのオーディオエフェクトでほぼ完璧に消す事が出来るレベルのノイズです。

やはり、この価格帯（8,580円）のマイクではこれくらい限度なのでしょうか。
試しにマイクを繋がずにアフレコやってみましたが、これでもホワイトノイズは少し入っていましたから、マイクのノイズと言うばかりではなく、パソコン内部でのノイズと考える事も出来そうです。
まぁ、フィルターで消せるレベルなのでこれはこれで良しとします。

EOSでのマイクテストは結局次回に！

結局EOS 5D Mark3にマイクを繋げての結果は次回になってしまいました。なかなか動画撮影をする被写体が無いのです。

景色ばかりでは音声は必要ないですからねぇー。

とうとう「以前のbloggerに戻す」が消えた！

新しいbloggerへの完全移行で以前のbloggerに戻れなくなってしまった！ 

これまでも新しいbloggerに移ったり、また以前のbloggrに戻ったり、とあっちへ行ったりこっちへ来たりを繰り返して来ましたが、とうとう、新しいblogger に固定されてしまったようです。

自分ではこれまでのインターフェースの方が使い勝手は良かったのですが、戻れないと言う以上、新しいインターフェースに慣れるしかありません。一番の問題は「上級者向け」のカスタマイズメニューが消えてしまった事で、これによりCSSの追加も簡単には出来なくなってしまいました。

カスタマイズの詳細設定といってもこの程度

たったこれだけ！

新しく変わったbloggerではCSSを追加するにはテーマのHTMLに直接書き加えるしか方法は無いようです。

このテーマのhtmlに直接書き込むというのはチョット怖いものがあります。おかしな所を変更したりしたらメチャクチャになってしまう危険を孕んでいるので、htmlを触る時にはまずバックアップを摸ってから、が原則でしょうね。

テーマのカスタマイズから「HTMLを編集」を選択するとテーマの編集画面が出ますが、自分の場合は、これまでのbloggrertの時に追加してきたCSSはこのhtmlの550行辺りから記述されていました。

これまではCSSの追加画面ではリアルタイムで変化するプレビュー画面を見ながら細かな調節が出来ましたが、新しいBloggerではこれが出来ず、書き換えては保存し結果を見る、といった事を繰り返していくしか無さそうです。

この先、以前のようなもう少し簡単にCSSを書き加えられるようなインターフェースに変わっていってくれれば良いのですが、今のままでは何とも使いにくいbloggerになってしまったと思うしかありません。

実際には自分のこのブログも大凡のカスタマイズは済んでいるので、これから先CSSを弄る事は今までのようには無いのかもしれません。

自分がこれまでbloggerを使ってきたのも、CMが入らない事とカスタマイズ出来る範囲が広いという事が大きな理由でした。wordpressに比べると遥かに少ない情報の中で少しづつカスタマイズしてきましたが、その作業が結構楽しいものだったのです。

今回の変更でそうした楽しみも減ってしまったように感じますが、現在のテーマのテンプレートには変更する必要は無いという自信の表れなのでしょうか。

しかし、以前のような詳細設定を加えてほしいです！

NXWineが配布中止 Macにカシミール３D がインストール出来ない！

NXwine が配布されていない！

MacでWineを使ってWindowsソフトを動かす事を可能にするNXWineが配布を止めたようです。
似たようなソフトであったEasyWineも現在では配布されていないようです。

Wineを手軽に利用できるようにしてくれるこの2つのソフトが配布されなくなったという事により、自分のようなWineの知識の無い者にとってはMacでWindowsソフトを使う手段が一つ消えてしまった事になり、非常に残念な状況です。

ハードディスクからカシミール3Dが消えてしまった！

Linuxで動いているカシミール３D

これまでMacで、NXwineを利用してカシミール3Dを使って来ましたが、先日、このMacBook Pro が起動しなくなりmacOS Mojaveを再インストールする羽目になってしまいました。

Time Machineでバックアップは取ってあったので、問題なく元の状態に戻る筈でした。
ところが、このバックアップからのリストアでも起動できず、結局Appleへ修理に出す事になりました。

完璧を期しアプリも手作業で新規インストール

Appleから戻ってきたMacBookへ、もしかしたら壊れているのかもしれない TimeMachineのバックアップファイルをリストアする気にもなれず、今回は堅実に一つ一つのアプリを手作業でインストールする事にしました。

こうした作業は結構苦痛です。結局この作業に20時間ほど没頭し、ようやくほぼ元の状態に戻すことが出来ました。

しかし、こうなると困るのはAppleのAppストア以外からダウンロードしてインストールしたアプリです。

NXWine が配布されていればこれをダウンロードしてそこからカシミールのインストールまでは一気に行けるのですが、現状でNxwine が配布されていないのなら、ここは潔く諦めるしか無さそうです。

もっとも、カシミール3Dは、サポートの終了した頂き物のWindows機（VAIO）をLinuxマシンに変身させ、このLinux機に、Macと同じようにWineを使ってインストール出来ています。

と、言うわけで、以前とは状況が変わり、Linux VAIOの登場により、MacBook Proからカシミールが消えても特別困る状況ではなくなっています。

長ーーい付き合いだったけど Good bye Wine !!

それに、カシミール3D以外には、特別Macで動かしたいと思うようなソフトもありませんから、踏ん切りをつけるには丁度いい機会になったのかもしれません。

一番良いのは、Mac版のカシミール3Dが開発される事なのですが．．．．．．

2020年アリ撲滅作戦は９割方成功か？

作戦開始1週間でほぼ居なくなった イエヒメアリ

最終兵器「アリメツ」を仕掛けてから約1週間。家の中に中でアリを見ることは殆ど無くなりました。
途中でアリメツには見向きもしなくなりましたが、アリの一番の好物は「ツナ」との情報を得て、ツナ缶の中身を少ーしだけ置いたところ、直ぐに寄ってました。
これに一滴だけアリメツを垂らしておきましたが、これが効果あったようです。
それ以後は、たまーーに、キッチンでイエヒメアリを一、二匹見かける程度で済んでいます。

これは効果があったようです。

イエヒメアリはジプシー生活

しかし、このイエヒメアリは固定した巣を作る訳ではなく、コロニーがその都度移動していく、いわばジプシー生活みたいなものなのだそうです。

こうした習性から考えると、完全駆除できたと考え難く、アリ達は危機感を感じてコロニーを移動したということなのかもしれません。

本物のありはこんなにかわいい顔してません。

群れが大きくならないうちの早めの対応が重要

また、そのうちに出てくるのでしょうが、その都度なんらかの手を打たなければ、この先増える一方だったのかもしれません。
今回のように、余り大きな群れにならないうちに早めの対応をしていく事を繰り返すしか無さそうです。
しかし、駆除のまず一番は、餌になるようなものを置かない、と言うことに尽きるようです。