人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

歌詞和訳のテンプレート(更新版)

2017年 06月 19日
HTMLの規則では、「<center>タグ」は非推奨で、<div align="center">という表記も「align属性」が非推奨で、このあたりの規則の意味は、要するに全部CSSでデザインしろと言ってるわけです。 しかしエキサイトブログでは、スマホ表示に関するスキンはユーザーが触ることは出来ません。 これをなんとかしようと、逆に「style属性」でHTMLにデザインを持ち込む事が増えて逆行をしています。 ネット環境は今後も右往左往が続くのでしょう。



今回は、以前より気になっていた歌詞和訳のテンプレートを少し見直し、HTML準拠に近付けました。 歌詞和訳のテンプレートに関しては、以下がこれまでの基本的なHTMLでした。(概要に簡略化しています)

YouTube動画部分
<div align="center" class="vcont"><iframe ~~~ ></iframe></div>

歌詞訳テーブル部分
<div align="center" style="overflow: auto;"><table bgcolor="#efefef"><tbody><tr><td></td><td nowrap="" colspan="3">
          ■歌詞題名部分■<br>
</td><td></td></tr><tr><td width="20"></td><td nowrap="" valign="top">
■英語詞■<br>
</td><td width="20"></td><td nowrap="" valign="top">
■歌詞訳■<br>
</td><td width="20"></td></tr></tbody></table></div>

以上の赤文字の部分が最近のHTMLでは非推奨です。 エキサイトが編集制限をするiflameの中にも非推奨表記がありますが、これは仕方がありません。

以下は、これらの非推奨の部分を改善した、最新版の歌詞訳テンプレートです。
◎「vcont」のスキン修飾で中央配置表記は不要です。 エキサイトのスマホスキンは動画は左寄せ、サイズは「width="320"」に固定されます。 これは変えようがありません。
◎ 歌詞訳のTableのスマホ表示は、動画が左寄せなので左寄せのままとします。
◎ 歌詞訳のTableのPC表示修飾のために「.lyrics_table」のclass名を付けます。
◎ スマホ表示に必須の修飾は「style=""」の代替表記に改めています。

洋楽 歌詞和訳 テンプレート / スマホ対応版 / 動画透過背景

<br>
<div class="vcont"><iframe width="320" height="240" src="//www.youtube.com/embed/YoutubeCODE?wmode=transparent" frameborder="0" allowfullscreen=""></iframe></div>
<br>
<div style="overflow: auto;"><table class="lyrics_table" style="background: #efefef;"><tbody><tr><td> </td><td colspan="3" style="white-space: nowrap;"><br>
        ■■■■■■■■■■■■<br>
           / ■■■■■ 19■■<br>
            Music &amp; Lyrics by ■■■■■<br>
</td><td> </td></tr><tr><td></td><td style="vertical-align: top; white-space: nowrap;"><br>
□□□□□□□□□□□□□□□□<br>
<br>
<br>
</td><td> </td><td style="vertical-align: top; white-space: nowrap;"><br>
□□□□□□□□□□□□□□□□<br>
<br>
<br>
</td><td></td></tr></tbody></table></div>
<br>
<br>
<br>
<br>
== 表題部サンプル =============================<br>
        ■■■■■■■■■■■■<br>
            / ■■■■■■ 2000<br>
             Music: ■■■■■■<br>
             Lyrics: ■■■■■■<br>
<br>
== 表題部サンプル =============================<br>
        ■■■■■■■■■■■■<br>
            / ■■■■■■ 2000<br>
             Written by ■■■■■■<br>
<br>
========================================<br>
<br>
<br>
<br>



邦楽 歌詞テンプレート / スマホ対応版 / 動画透過背景

<br>
<div class="vcont"><iframe width="320" height="240" src="//www.youtube.com/embed/YouTube-CODE?wmode=transparent" frameborder="0" allowfullscreen=""></iframe></div>
<br>
<div style="overflow: auto;"><table class="lyrics_table" style="background: #efefef;"><tbody><tr><td>    </td><td colspan="3" style="white-space: nowrap;"><br>
        ■■■■■■■■■■■■<br>
           / ■■■■■ 19■■<br>
            Music &amp; Lyrics by ■■■■■<br>
</td><td>    </td></tr><tr><td></td><td></td><td style="vertical-align: top; white-space: nowrap;"><br>
□□□□□□□□□□□□□<br>
<br>
<br>
</td><td></td><td></td></tr></tbody></table></div>
<br>
<br>
<br>
<br>
== 表題部サンプル =========================<br>
        ■■■■■■■■■■■■<br>
            / ■■■■■ 2000<br>
             Music: ■■■■■■■■<br>
             Lyrics: ■■■■■■■■<br>
<br>
== 表題部サンプル =========================<br>
        ■■■■■■■■■■■■<br>
            / ■■■■■ 2000<br>
             Written by ■■■■■■■■<br>
<br>
====================================<br>
<br>
<br>
<br>



なお、PC表示のために、以下のCSS項目をブログスキンに登録します。
◎「vcont」は、PC表示で動画の中央配置と自動ズーミングを実現します。
◎「yrics_table」は、歌詞訳Tableの中央配置の指定をします。
◎ 改善済みの歌詞訳Tableが区別出来る様に、枠線 borderをデザイン付加しました。

ブログスキン CSS追加項目
.vcont {
position: relative;
padding-bottom: 50%;
padding-top: 30px;
height: 0px;
margin: 0px 60px;
overflow: hidden; }

.vcont iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }

.lyrics_table {
margin: 0 auto;
border: outset 1px #ddd; }


動画ズーミング表示(文書幅に自動的にフィット)の詳細については、以下のリンク先を参照ください。

また、余禄の情報ですが、IE11のYoutube動画が他要素の上層に常に表示される問題が、いつのまにか改善されていました。 Win10移行で解消されたのでしょうか? 以下のリンク先はテスト画面ですが、最初の動画は、以前は右メニューが迫り出した際に、メニューの上層に表示されましたが、現在は改善されています。 これはIE11のバージョンやOS環境で見え方が異なるかもしれません。



by Ataron2 | 2017-06-19 10:34 | ブログスキンのアレンジ