HTML5プレーヤーにおける高さ固定【CAテンプレート】

HTML5プレーヤーにおける高さ固定【CAテンプレート】

※こちらはニコニコ動画内にあった「ブロマガ」で
2017年01月08日 21:38付けで投稿していた記事です。

 

ブロマガが2021年10月に終了することが決まったため、少々の編集の上こちらに記事を移行いたします。

 


 

 

HTML5プレーヤーのコメント表示仕様の一つに
「コメント領域を超過するような高さをもつコメントは全て固定される」
というものがあります

ueで投稿すれば全て上揃え、shitaならば下揃えといった具合です。

これが何を表すかといいますと、

これまでダブルリサイズ(DR)でしかできなかった
リード行(コメントの横幅を決定させるために入れる文字行)の
画面外配置がダブルリサイズを発生させなくても出来るようになった。

 

・・・もっと簡単に言ってしまうと

 

これまでよりも簡単に、少ない文字数で
コメントの位置を固定させることが出来るようになった。

ということです。

 

そこで今回、それぞれの行でコメント位置の固定をするのに
必要なリード行のテンプレートを作成してみました(`・ω・´)
それぞれ必要なコマンド、行数とリード行(「〟」の文字列)を記載しましたので
コピペしてお使いください。

※CAブログ上では空白文字が反映されなかったためテキストファイルをアップロードしています。

 

 

※注意事項σ( ・3・)σ

・表示確認:win7(IE,Firefox,chrome)、win10(Edge,Firefox,chrome)

・画像は全て「Firefox@win7」のもの

・画像のフォントは全て「gothic」ですが「mincho」「デフォント」でも問題ありません。

・今回使用の文字は
「漢字幅=」「1/3幅=」です。
リード行は漢字幅の文字ならどの文字でも代用可能です。
(漢字幅の空白文字
または漢字幅2つ分の幅を持つ「tabスペース」がオススメ)

・行数が多くなるとその分リード行に必要な文字数も増えていきます。
文字配置の位置によっては文字数オーバーになってしまう可能性もあるので
その場合はリード行そのものを調整してください。
(「tabスペース」を利用すると文字数の大幅削減が出来るのでおすすめです。)

・横幅調整のヒント:漢字幅×2 = U+2001×2 = U+2004×6 = tabスペース×1

 

◎8.5行固定

⇒ 「ender big 9行」 非リサイズ
リード行不要(中央揃え)

いきなりですがこちらの固定はリサイズを
起こしていないのでリード行は不要です。。。

漢字幅17文字を超えるとリサイズがかかってきますので
横幅を伸ばす場合は漢字幅17文字以下にしてください。

コピペ用テキストファイル

 

 

◎9行固定

⇒「ender big 10行」臨海幅リサイズあり
漢字幅18文字(左揃え)

コピペ用テキストファイル

 

 

◎10行固定

⇒「ender big 11行」臨海幅リサイズあり
漢字幅20文字+1/3幅2文字(左揃え)

リード行に空白文字が含まれますのでコピペの際はご注意ください
他の行も漢字幅の文字だけでは中央揃えの配置になりません。
文字を中央揃えで調整する際は一番始めにU+2004(1/3幅)を文字を一つ置いてください。

コピペ用テキストファイル

 

 

◎11行固定

⇒「ender big 12行」臨海幅リサイズあり
漢字幅22文字+1/3幅2文字(左揃え)

リード行に空白文字が含まれますのでコピペの際はご注意ください
他の行も漢字幅の文字だけでは中央揃えの配置になりません。
文字を中央揃えで調整する際は一番始めにU+2004(1/3幅)を文字を一つ置いてください。

コピペ用テキストファイル

 

 

◎12行固定

⇒「ender big 13行」臨海幅リサイズあり
漢字幅24文字+1/3幅2文字(左揃え)

コピペ用テキストファイル

 

 

◎13行固定

⇒「ender medium 14行」非リサイズ
リード行不要(中央揃え)

漢字幅25文字を超えるとリサイズがかかってきますので
横幅を伸ばす場合は漢字幅25文字以下にしてください。

※big ender13行も可能ですが、
win7とwin10間で若干のズレが生じたため除外しました。

コピペ用テキストファイル

 

 

◎14行固定

⇒「ender big 15行」臨海幅リサイズあり
漢字幅29文字(左揃え)

※「medium ender」で調整したほうが使用文字数を抑えることが出来ますが、
win7とwin10間で若干のズレが生じたため除外しました。

コピペ用テキストファイル

 

 

◎15行固定

⇒「ender big 16行」臨海幅リサイズあり(gothic、minchoのみ)
漢字幅31文字(左揃え)

コピペ用テキストファイル

 

 

⇒「ender medium 16行」臨海幅リサイズあり(「medium」は省略可能)
漢字幅29文字(左揃え)

コピペ用テキストファイル

 

 

◎16行固定

⇒「big 16行」改行リサイズあり
リード行不要(中央揃え)

漢字幅34文字を超えると二重リサイズがかかってきますので
横幅を伸ばす場合は漢字幅34文字以下にしてください。

コピペ用テキストファイル

 

 

◎18行固定

⇒「ender medium 19行」臨海幅リサイズあり(「medium」は省略可能)
(gothic、minchoのみ)
漢字幅34文字+1/3幅2文字(左揃え)

リード行に空白文字が含まれますのでコピペの際はご注意ください
他の行も漢字幅の文字だけでは中央揃えの配置になりません。
文字を中央揃えで調整する際は一番始めにU+2004(1/3幅)を文字を一つ置いてください。

コピペ用テキストファイル

 

 

◎21行固定

⇒「small ender 22行」非リサイズ
リード行不要(中央揃え)

漢字幅37文字を超えるとリサイズがかかってきますので
横幅を伸ばす場合は漢字幅37文字以下にしてください。

コピペ用テキストファイル

 

 

 

このように横幅の調整次第で二重リサイズを起こさずに、様々な高さ固定が可能となります。
このような高さ固定はflash版プレーヤーでも第1コメントに限り可能でしたが、
新たなプレーヤーによって実用性が一気に上がったかたちです。

 

この他、有名な高さ固定として
medium25行、small38行などがありますが、
通常コメントで使用するには実用性に乏しいため
今回は除外しました。

 

 

今回紹介した高さ固定行を横に並べて繋げるとこのようになります。

 

このようにしてみると、例えば9行固定の5行目と11行固定の6行目、15行固定の8行目、21行固定の11行目
全てほぼ同じ位置で表示できることがわかりますね。

異なる行数同士の重ね合わせ時にご活用ください。

 

 

ちなみに、これら全ての高さ固定を
重ね合わせるとこうなります。

 

もう何がどうなってんだかわけがわかりませんが・・・

 

つまりは
もはや画面上に文字を高さ固定で置けない箇所はない
・・・と言っても良いということです。

 

歌詞の配置も絵系の行間埋めも思いのままですね(`・ω・´)
shitaも含めればもう怖いものはありません!

・・・いい時代になりましたねえ(・∀・)

制作講座カテゴリの最新記事