『Dear Esther』を日本語訳してみる：番外編～CCSで二段組み～

順番に訳していっているものをそのままペタペタとベタ張りしていけば良いのかも知れないけれど、訳したものと原文を見比べる事を考えれば、左右に並べて記載したいな、と思った。

ここのブログは編集画面を切り替えて、HTMLを直接記述することも出来るので、テーブルタグを使うのかな、と調べてみると、今じゃCSSなるものを使う模様。幸いここもCSSの編集や追加が出来たので、四苦八苦の末に、以下のようなフォーマットで続けていけそうな感じにまできた。

ちょっと追記:
仕方ないのだけど、スマホ向けのモバイル用テーマだと、この苦労があまり反映されない…。見にくいとまではならないし、そこまでの労力をかける部分ではないのだけど、ほんのり残念。

---

text key="eventa"

日本語へに訳すときに
改行を多用するので、
原文に比べると縦長になる。

I am not good at English.

text key="eventb"

だから、それに対して、
本来必要ないかも知れないけど、
仕方なしに組み込んでいる設定もある。

I say again,
I am not good at English.

---

中身はこんな感じ。

<h3 class="cl_esther">
    text key ="eventa"
</h3>

<div class="ja_esther">
    日本語へに訳すときに<br>
    改行を多用するので、<br>
    原文に比べると縦長になる。
</div>

<div class="en_esther">
    I am not good at English.
</div>

CSSへの追加分.

.ja_esther {
    border-radius: 5px;
    padding:  10px 5px 20px 5px;
    margin: 5px 0px 50px 0px;
    background-color: #fafafa;
    color: ;
    width: 48%;
    float: left;
}

.en_esther {
    border-radius: 5px;
    padding: 10px 5px 20px 5px;
    margin: 5px 0px 50px 0px;
    background-color: #fafafa;
    color: ;
    float: right;
    width: 47%;
}

.cl_esther {
    clear: both;
}

「.cl_ether」というので、とりあえず誤魔化している。これを引用部分の後にちょろっと書いておかないと、レイアウトが上手く収まらない。図表的なものや、その後の文章が思い通りのところに収まらないのは、本当に厄介。かつてTexでも同じような感じに悩んでいたなぁ、と、遠い目にもなった。フロートの本来的な思想とか、考え方を知らないので、どうしてこんなメンドクサイ仕様にしたんだ、とかなり久方ぶりだけど、常々思う。

これでようやく気持ちいいレイアウトでコピペが出来そうだけど、WYSIWYGとHTMLべた書きを平行利用しないといけない感じなので、それも手順をちゃんと押さえておかないと、かなり面倒なことも分かった。実際、少し痛い目をみた。

このエントリーでもソースコードのベタ張りが上手く出来ず、かなり時間を取られた。「pre」タグって「<」と「&gt」は特殊コード「&lt;」、「&gt;」を使わないといけないのね…。

本来、やりたい事はゲームなのに、なかなかそれに届かない。