がとらぼ

WordPress 5.0がリリースされたが、それには新しい公式テーマのTwenty Nineteenが入っている。一応、「Gutenberg 対応の新テーマ」と書かれているが、そんなことは全くどうでも良くて、とてもシンプルげな見た目が一部の人に好まれそうな感じ。全く触らない標準状態だとPCでは字が大きすぎるし殺風景すぎるので当然少しは手を入れないといけないけど。
で、おそらく手を入れて使う前提のテーマなら触りやすい筈と思って例の縦書きブログ用に改造した。 実際Twenty Nineteenを縦書きブログ用に改造してみて思ったが、本当に手は入れやすい。ただし、標準のCSSの設定の一部が縦書きには全く合わなくて苦労されられる部分も無くはない。
この記事はそのTwenty Nineteen縦書き化のメモ。前回のTwenty Seventeen縦書き化がベースで大して違いはない。

縦書きの段組を行うと、段組したブロックの高さが正常に認識されなくなるので段組のブロック要素に続く別のブロックが段組の下部に上書きされてしまう(または覆い隠されるか)。
本当の段組ブロックの高さであるElement.scrollHeightの値とブラウザが認識している段組ブロックの高さであるElement.heightの値が違うのが問題なので、Element.scrollHeightの値を求めてElement.heightの値でそれを上書き指定してやる。それはCSSだけではできないのでJavascriptを使うのは前回と同じ。
そのJavascriptは(正直どこでも良いけど)、footer.phpに書くとする。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<?php wp_footer(); ?>
<!-- ここから -->
<script type="text/javascript">
  jQuery(window).load(function () {
    reDesign();
  });
  jQuery(window).resize(function () {
   reDesign();
  });

  function reDesign() {
    var vrh = jQuery('.entry').prop('scrollHeight');
    vrh = vrh + 'px';
    jQuery('.entry').css({ height: vrh });
  };
</script>
<!-- ここまで -->
</body>
</html>

<?php wp_footer(); ?>と</body>の間くらいに書いてやる。 今回はarticleタグのentryクラスの高さ2種を求めた。
前回のTwenty Seventeenでは「前の記事」「次の記事」のナビケーションとサイドバーにあたるsecondaryを下にずらす処理を入れていたが、今回はそういうのは無しで処理はシンプル。
前回はHTMLを読み込んだ時点で高さ計算を行い再描画にしていた。その方が圧倒的に実行タイミングが早いので。それが jQuery(document).ready(function () {処理}); だった。しかし、よく考えると、例えば画像だけが表示される段があると画像読み込み前に高さを計算してしまうので高さが足りないという事象が発生することに気付いた。そこで、今回はjQuery(window).load(function () {処理}); にして、画像まで読み込んでから高さ計算を行うようにした。これで高さ合わせは正確になるが、ページの表示途中はずっとレイアウトが崩れた状態で表示されるという欠点がある。なんとも難しいところ。jQuery(document).ready(function () {処理});も入れるいうのもありかも。つまり3段階表示。
または、HTML中に画像の高さを必ず書くなら前回同様jQuery(document).ready(function () {処理});だけでも行けるかな？広告などサイズが事前にわからないものもあるので難しいと思うけど。

もしも、各「記事」だけでなく、記事のリストも縦書き段組化する場合は、.entryの高さはリスト全体の高さではないので.site-mainの高さを求めるのが良さげ。ただし、その場合は記事の表示で「前の記事」「次の記事」のナビケージョンが正しく位置しなくなる。そこで、.entryの高さと.site-mainの高さを比べて、.site-mainの高さが.entryの高さより大きければ記事のリストであると判断して.site-mainの高さを上書き、そうでなければ(.entryと.site-mainの高さは同じになるかと)、.entryの高さを上書きするとする。(下)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

  function reDesign() {
    var eth = jQuery(".entry").prop('scrollHeight');
    var smh = jQuery(".site-main").prop('scrollHeight');
    if (smh > eth) {
      smh = smh + 'px';
      jQuery('.site-main').css({ height: smh });
    } else {
      eth = eth + 'px';
      jQuery('.entry').css({ height: eth });
    }
  };

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

.vr-cont {
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  -webkit-column-width: 24em;
  -moz-column-width: 24em;
  -ms-column-width: 24em;
  column-width: 24em;
  -moz-column-gap: 53px;
  -webkit-column-gap: 53px;
  -ms-column-gap: 53px;
  column-gap: 53px;
  column-rule-style: dashed;
  column-rule-width: 1px;
  column-rule-color: grey;
  column-fill: auto;
  margin: 0 auto;
  display: inline-block;
  font-size: 1em;
  line-height: 2.0em;
  width: 100%;
  height: 25em;
}

.vr-box {
  position: relative;
  right:7px;
}

.navigation {
    position: relative;
    top: 60px;
}
#colophon {
    position: relative;
}

.navigationと#colophonをposition: relative;にすることで、無駄な位置(高さ)合わせを不要にしている。

1
2
3
4
5
6
7
8

前略
<article id="post-<?php the_ID(); ?>" < ?php post_class(); ?>>
        <div class="vr-cont">
        <div class="vr-box">
中略
        </div><!-- .vr-box -->
        </div><!-- .vr-cont -->
</article><!-- #post-hoge -->

上の例では前回同様にコンテンツの本文の中にvr-cont、さらにその内側にvr-boxクラスのブロックを置いているが、サイト中の全てのコンテンツ縦書きで構わないということであれば、vr-contのブロックは不要でCSSのクラス名 .vr-cont を .entry に書き換えればほぼ同じ結果になる。ちなみにarticleタグのentryというクラス名はテーマディレクトリのinc/template-functions.phpにあるtwentynineteen_post_classes()で指定されている。
vr-boxのブロックは前回同様にルビを振る場合に段の境でルビが縦に切れるのを防止するために指定している。

この記事では本文だけを縦書き段組にしているが、もちろん、#colophon (これまでの#secondaryに相当)の中、実際にはwidget別に縦書きを加えたいというのもある筈。それはとても簡単なのでこの記事では省略。

Twenty NineteenではCSS中でcalc()が多用されているが、縦書きにするとそのclac()は指定されている要素を意図していない位置にズラしたりバカみたいに幅を取ったりと非常に厄介な結果をもたらすので必要に応じて削除するなり変更するなり。

Twenty Nineteenを改造して縦書き段組化したブログの参考例はhttps://nippon.cloud/。このブログはChromeとFirefoxの最新版以外では表示確認していないので他のブラウザでは正しく縦書き表示されなかったり、中の要素が正しくない位置に表示されたりするかもしれない。