CSSでブログ画像に海外ドラマ風字幕を付ける方法
広告
方法だけサクッと知りたい人は、下のセクションに跳んで下さい。
動機
このブログでは海外ドラマの中で出てくる英語表現を紹介してますが、セリフだけでは意味が掴みづらい場合はその場面の画像をキャプチャして一緒に載せることがあります。本当は全部の紹介シーンでやればいいんでしょうけれど、この作業が相当面倒くさいので、真に必要な場面だけでやってます。例えば、Shirts and Skinsという英語表現では、画像を載せるだけで理解度が１００倍は変わり、「百聞は一見に如かず」ということわざをまじまじと感じさせてくれました（笑）
そんな海外ドラマのシーン画像ですが、ツイッターなんかでシェアする場合だと字幕入りにしてるパターンも結構あって、これって便利だなとずっと思ってました。該当場面が字幕と一緒に表示されていれば、更に理解しやすくなるわけです。
Who are these "friends?" pic.twitter.com/JK1rihX0CP
— Dead To Me (@deadtome) May 26, 2019
ただし、ここで一つの問題にぶち当たります。
「該当のセリフが話されている＝その字幕が表示されている」という等式は成り立つのですが、
「字幕が表示されている＝画像として分かりやすい」が成り立つとは限らないのです！
例えば、下記シーンはタイニーハウスの一場面ですが、先日紹介したI doがちょうど使われていて、画面キャプチャしました。でも、家の改築をしながら喋ってるので、映像と喋ってる内容が一致してないんですよね。つまり、I doの説明でこの画像を貼る意味はほとんど無いのです。だから、I doの記事ではこのシーンの紹介を見送った経緯があります（でも、I doが含むニュアンスが現れている好例なんですけどね。ピーターとエリザベスの"I do."の意味が知りたい方はI doへ）
他にも、主人公が喋ってる場面なのに、風景しか映ってないとかも結構あります（笑）
こうなると、自分で画像自体に直接字幕を入れるより他ないんですけど、画像をキャプチャするだけでも結構な労力なのに、更にそれ以上時間掛けて字幕入れていたら海外ドラマを見る時間が無くなってしまい本末転倒です（笑）
このジレンマ（horns of a dilemma）にここ最近悩まされていたのですが、昨日簡単に解決する手段を発見しました。
CSSを使って、画像上にテキストを表示すればいいんです！
な、なんだってー！！
IMDbの海外番組のCanceled/Renewedのページを非鑑賞用モードで見ていたら、なんと画像の左上に数字（コピペ可能）が表示されていたんですね。それで、こんな事ができるのかと気付いちゃいました。ありがとう、IMDb〜
画像にCSSで字幕を付ける方法
さて、以下のCSSはIMDbからの抜粋です。重要なところだけ抜き出して、海外ドラマ風字幕っぽくになるよう自分でアレンジしています。
簡単に説明すると、subbed-imageという箱を用意します。その中に、テキストと画像を入れます。テキストにはsubtitleクラスで細かいデザインを調整します。画像は幅100%で表示するようにします。
はてなだと、デザインCSSというところに以下を追加します。字幕の大きさ、色、フォント、サイズ、位置などは各自調整して下さい。
/* 画像に字幕を追加 */ .subbed-image { position: relative; } .subbed-image img { width: 100%; } .subbed-image div.subtitle { color: white; font-family: Arial, sans-serif; position: absolute; bottom: 7%; left: 50%; -ms-transform: translate(-50%); -webkit-transform: translate(-50%); transform: translate(-50%); margin:0; padding:0; text-align: center; font-size: 1em; line-height: 1em; text-shadow: 1px 2px 3px #666666; }
<div class="subbed-image" > <div class="subtitle">今日も奥武蔵の山々に夜の帳が降りる</div> <img src="aaa.jpg" /> </div>
以下、私がドローンで撮った風景に字幕をつけてみました（笑） どうかな？ なかなかいいでしょ（笑） 文字のコピペもできます。
普通版
字幕版
文字の色は白にしてますが、背景が白系統の場合を考えて、黒系統のクラスも用意しておくのが良いかと思います。
皆さんのサイトにお役立て下さい。
広告