投稿

注目の投稿

冠山トンネル周辺のライブカメラ

イメージ
冠山峠トンネル周辺のライブカメラ 国道303号 新城山橋 北のライブカメラ LINK 国道303号 大蔵谷橋 南のライブカメラ LINK 国道303号 道場山隧道 北のライブカメラ LINK 国道417号 藤橋根尾交差点福井方面のライブカメラ LINK 国道476号 白粟のライブカメラ LINK 福井県道2号武生美山線 清水谷のライブカメラ LINK 福井県道2号武生美山線 相木のライブカメラ >LINK> 国道476号 河原橋のライブカメラ 福井県道229号福井鯖江線 花堂のライブカメラ >LINK> 国道417号 南坂下町のライブカメラ LINK 福井県道229号福井鯖江線 赤十字病院入口のライブカメラ LINK> ...

一枚だけ高さの違うimageを何とかしてslideshowのレイアウトが崩れないようにする

イメージ
一枚だけ高さの違うimageを何とかしてslideshowのレイアウトが崩れないようにする Slideshow Gallery 1 / 6 2 / 6 3 / 6 4 / 6 5 / 6 6 / 6 ❮ ❯ 上のslide show 3/6 花 が1,024px × 640px 他は1,024px × 576px 一枚だけheight が高い。 style="width: 100%" を解除し、object-fit: cover; を指定すると縮小表示され枠内に収まる。しかし、拡大時やスマホ表示で大きさそのままとなってしまうから戻す。 aspect ratio を常に16:9 に保つには、まずwidthを指定 30vw とする。これにheight はcalc()を使う。16:9 なら height: calc(30vw * 0.5625), 4:3なら height: calc(30vw * 0.75) 検索してたくさん出てきた <div> に入れて padding-top: 56.25% とするやり方では正しく要素を配置しないとレイアウトが崩れてしまったため、要素・Elementを追加せずに、CSSで指定する方法にたどり着いた。 slideshow に使っているjavaScript の img tag から 文字を取得する。</div> background-image:url(); では、img tag ではないから attribute alt="花" を取得できずに caption が undefined になってしまう。 slid...

スタートアップフォルダとAmatsukazeのエンコード設定

イメージ
スタートアップフォルダとAmatsukazeのエンコード設定 windows + R を押して shell:startup 打ち込めばスタートアップフォルダが出てくる。 今回はネットで調べず、もしかしたらwindows のヘルプも使えるんじゃないかなと思って使ってみたらバッチリだった。 対話型botのヘルプ ショートカットを作成する場合は、エクスプローラのアドレスバーを右クリックしてアドレスをコピーすればOK。 C:\Users\ user name \AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup windws help が意外と使えた。フォルダの名前が前もってわかっているのと、ここにショートカットをコピーすればいいのは知っていたからだが。 AmatsukazeServer のショートカットをここに置きたかった。EDCB で録画後のbatでエンコードする際にウィンドウのフォーカスが奪われてしまうのを防ぐため。 AmatsukazeServer を起動すると通常のAmatsukazeは起動しててもエラーが出るのでAmatsukazeClientを使う。 Amatsukaze のエンコード設定がGUIが独特でビットレート指定を弄っても、aviUtlでエンコードしたときのようにならず苦戦したので、参考に設定を載せておく。 お手軽エンコード設定。1080P TVで離れて見ても違いはわからない程度がNVEnc 2100Kbps くらいだと思う。PCの画面で近くで見るとちょっと劣化してるなぁとは感じる。特にこだわりは無く、h.264 3000Kbps でエンコードしたものと同等くらいの画質だと思う。1800~1500まで落とすとブロックノイズは無くても何か汚いなぁと感じると思う。 30分番組をCMカットして22分程度で380MBくらいのファイルが出来上がる。 TV の画質向上エンジンってすごいなぁと感じる部分でもあります。 -c hevc --profile main10 --vbrhq 2100 --vbr-quality 15 --maxbitrate 15500 --qp-init 15 --gop-len 90 git...

FontAwesome 5 導入。text-decoration:underline がchromeで表示されていなかったのを解決した。

イメージ
FontAwesome 5 導入で気づいたこと。text-decoration がchromeで表示されていなかったのを解決した。 特に機能はないbutton。 test FontAwesome 5の導入についてはCDN を使った方法を載せているところがたくさんあるが、公式にはCDNの提供をやめるみたいだし、FontAwesome 5 だけ使いたいという場合はアカウントを作って自分用のリンクを発行してもらうのが直ぐにできて簡単だと思う。 FontAwesome start mail addreesを入力して,パスワードを作るだけ。 専用リンクが発行される コピーしたリンクを<head> tag のどこでもいいので、貼り付け・ペーストすればすぐに使えるようになる。 free アカウントで使えるicon を選んで icon を選んでコピペ 赤枠がHTML tag内で使う用 ターコイズブルーの枠内はCSSのpseudo element content などで使うunicode Free アカウントで使える iconは <i class="fas " ></i> 大体 fasとなっている 赤枠がHTML tag内で使う用 ターコイズブルーの枠内はCSSのpseudo element content などで使うunicode default size icon の大きさを変える <i class="fab fa-twitter fa-xs "></i> <i class="fab fa-youtube fa-sm "></i> <i class="fab fa-reddit-a...