はてなダイアリーの改行問題とか

 はてなダイアリー時代の表記の問題です。はてなダイアリーサービス終了後には用のないエントリーですが、一応残しておきます。はてなブログ上で無理やり表示しているため、表示がおかしくなっている部分もあります。
 はてなブログでも完全にHTML準拠とはなっていないため、表記上の多くの問題があります。



 先日チェルニー30番の10番の解説を書いたとき、和音の記号を表記することが出来ないかと頑張った結果、"V46"と表示することが出来た。
 HTMLでこういう表記は出来ないものだと思っていたのでちょっと意外だった。スタイルシートを使うのだけど、これまでスタイルシートには見向きもせずにいたのでこういう発想はできなかった。ちょっとスタイルシートについて勉強した方が良いのかなとか思った。
 教えて!gooの質問版で上付き文字と下付き文字を同時に左揃えにできますか.というのがあって、回答の中に次のものが存在したのでそのまま使わせてもらった。

Texだと、$X_0^2$ですね。
MathMLで書くというのが本来でしょうね。
MathMLについては調べてください。

ここでは、HTMLでの方法に限定して説明
★後の方をposition: relative;にしleftを指定する(汎用性に欠けます)
 欠けません。というか必要です。
 添え字の幅が決まっていないため、その幅を指定しないと揃いません。
 もちろん、項自体をインラインブロックにして、内部でabsoluteを使うことも可能ですが、項の主たる文字(ここでいう x )の字数の関係でその文字をずらして、ずらした分前に寄せるという複雑でもっと汎用性の欠けるものになります。

<p class="math">
x<sub>0</sub><sup style="left:-0.5em;">2</sup>=y
<!-- ここでleft:-0.5emで、その前のsub内の文字数に合わせる -->
</p>
スタイルシート
<style type="text/css">
<!--
html,body{padding:0px;margin:0px;}
p.math{font-size:1.5em;padding-left: 5em;}
p.math sub{font-size:0.6em;}
p.math sup{font-size:0.6em;position:relative;top:-0.2em;}
-->
</style>

 そんなわけで、原子番号と質量数を同時に表示したいとか必要に応じてこの表示を使っていこうと思う。ただし、これまでどれほどこの表記をしようと思ったことがどの程度あったかというとちょっと謎である。というのは、上の質問・回答がこのブログを始める前の2010年2月のことなのでよっぽどこうしたいという希望を持っていなかったのだなあと自分のことながら思う。しかし、別の記憶ではこういう書き方をしたいと思ったことがあるので、まあそのうち使うことになると思う。
 53 こんな風に分数とか書けちゃうんだぞ!



 さて、スタイルシートでちょっとページの体裁を弄れると分かったので、以前問題にしたはてなダイアリーの改行問題を解決した。
 以前論じた時はどうしてもHTMLデフォルトの表示をしたかったらtableで囲って表記するしかないということだったのだけど、見ての通り通常の部分で普通の行間にできるようになった。
 そのやり方について説明する。

はてなダイアリーの管理-デザインというページでヘッダの編集をする。
<style type="text/css"> </style>で囲った中にp.gyou1 { line-height: normal; }と入れる。下の画像みたいになる。

②ソースの先頭に"<ul><p class="gyou1">"と入れ、最後に"</p></ul>"と入れる。
"<p>"はパラグラフを表すタグで、これで囲われた部分が一つの段落を示している。これまで惰性で段落分けしたい部分に<p>と入れて通常の改行である<br>とは分けて使っていたけど、これからはこの部分は正しい表記をしなければならなくなった。スペースを開けて改行したいときは<br>を2つ置くことにする。
 "<ul>"というのは箇条書きするときに使うタグなのだけど、なぜこれが必要なのかは分からない。とにかくこれを入れておかないと上のスタイルシートが実行されないのだ。まったくワケガワカラナイヨ。

 以上より、今後は通常の部分にAAを挟み込むことができるようになった。

やっぱり・・・・
                  _r'ニ二> 、
               _,. :'´ ̄: :`ヽ\::.::`ヽ
            _,.:'´: : : : : : : : : : ヽ ';:.::.::ハ
          ∠,仁._‐-、 : : : : : : : : : :}_j::/::.::i
        , '´ ̄¨´‐.、 `y'^ー、: : : : : : :/'イ::.::.::{       ,.、
      /  .   : :  Y }   }_;.-'TT´::::::.::.::.:;ノ   _,.f´__,\
      .′ :   :    :}v  .i`ト-く._!:::::::_;.イ--、―¬;.:.:.:.:_:.:.:\
.     l .  :     :. .:!|   !!  /イ ̄ /   j_,. -亠'¨⌒ヽ:_ノ
      ! {  :  :.  |:.:,! !  | `ー'´ ヽ.__,,.. -‐'´
     }.:}.  :.l  :.: .!:.i r' , 、〉
   (_,ノ_;{:...:.:.:!: .:.:. .ハ:{_`T~^i
      f彡Y:.:.}:|:.!:.:!:{:イ'` |  !
     ⌒j,ィ:.{:!:ハ:|:!{{|   j  !
       ,レ^ト! }川`ー/,.  {    だまされてた・・・・
              }n.n r}

 はてなダイアリーではまだまだ出来なくなっていることが色々ありそう。次に問題となりそうなのは<Table>かな。今回みたいにスタイルシートで<table>を定義してやればできるようになるような気もするけど、まあ必要があったらまた試してみようと思う。

関連エントリー
 20101104 はてなダイアリーの改行問題