【コメントアート】HTML5プレーヤーにおける高さ固定【テンプレート】
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

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

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

    ueで投稿すれば全て上揃え、shitaならば下揃えといった具合です。
    (詳細はこちらを参照してください →
    【コメントアート】新プレーヤー(HTML5プレーヤー)について 前編【基本的なこと】)

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

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


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

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


    ということです。


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


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

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

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

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

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

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

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




    ◎8.5行固定

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



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

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

    [ ue big ender full gothic ]
    ↓ここから--------------------------------------------------------------------------









    ↑ここまで--------------------------------------------------------------------------




    ◎9行固定

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



    [ ue big ender full gothic ]
    ↓ここから--------------------------------------------------------------------------









    WWWWWWWWW WWWWWWWWW
    ↑ここまで--------------------------------------------------------------------------




    ◎10行固定

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



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

    [ ue big ender full gothic ]
    ↓ここから--------------------------------------------------------------------------










    W WWWWWWWWWWWWWWWWWW W
    ↑ここまで--------------------------------------------------------------------------




    ◎11行固定

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



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

    [ ue big ender full gothic ]
    ↓ここから--------------------------------------------------------------------------











    W WWWWWWWWWWWWWWWWWWWW W
    ↑ここまで--------------------------------------------------------------------------




    ◎12行固定

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



    [ ue big ender full gothic ]
    ↓ここから--------------------------------------------------------------------------












    WWWWWWWWWWWWWWWWWWWWWWWWW
    ↑ここまで--------------------------------------------------------------------------




    ◎13行固定


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



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

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

    [ ue ender full gothic ]
    ↓ここから--------------------------------------------------------------------------














    ↑ここまで--------------------------------------------------------------------------




    ◎14行固定

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



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

    [ ue big ender full gothic ]
    ↓ここから--------------------------------------------------------------------------














    WWWWWWWWWWWWWWWWWWWWWWWWWWWWW
    ↑ここまで--------------------------------------------------------------------------




    ◎15行固定

    ※big、mediumどちらでも固定が可能です。

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



    [ ue big ender full gothic ]
    ↓ここから--------------------------------------------------------------------------















    WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW
    ↑ここまで--------------------------------------------------------------------------


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



    [ ue ender full gothic ]
    ↓ここから--------------------------------------------------------------------------















    WWWWWWWWWWWWWWWWWWWWWWWWWWWWW
    ↑ここまで--------------------------------------------------------------------------




    ◎16行固定

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



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

    [ ue big full gothic ]
    ↓ここから--------------------------------------------------------------------------
















    ↑ここまで--------------------------------------------------------------------------




    ◎18行固定

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



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

    [ ue ender full gothic ]
    ↓ここから--------------------------------------------------------------------------


















    W WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW W
    ↑ここまで--------------------------------------------------------------------------



    ◎21行固定

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



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

    [ ue small ender full gothic ]
    ↓ここから--------------------------------------------------------------------------






















    ↑ここまで--------------------------------------------------------------------------




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

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


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



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



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

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


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

    広告
    コメントを書く
    コメントをするには、
    ログインして下さい。