このブログはメインコンテンツを縦書きデザインをレスポンシブに表示できるように実装してみたのだが、作成における技術的なポイント簡単にまとめておきたいと思う。
尚、今回まとめた方法はhtml, css, php, javascriptの知識が必要。

縦書きの表示方法

WEBサイト上で縦書きの文章を（メインコンテンツとして）表示させる方法は以下の二通りに分かれると思う。

1. 横スクロール表示
2. カラム分け縦スクロール表示

スマホなどは縦スクロールが基本なので、メインになるものが横スクロールっていうのは具合悪いなと感じる。よって 今回は縦スクロール表示を採用。

横いっぱいまで行が広がったら、横割りでカラムが下に増えていくようになっていく仕様。新聞とか雑誌みたいな感じである。

縦書きの実装

作業の流れは以下の通り。

1. single.phpの編集
2. single.cssの作成
3. function.phpの編集
4. 要素サイズ調整用jsファイルの作成

1、single.phpの編集

メインコンテンツ部分をdivで囲いIDを付与する。ID名は適当でOK。

ここではsingle.phpとしているが、テーマによってはsingle.phpからさらに別ファイルを読み込んでコンテンツ部分を呼び出している場合があるのでその点注意。

2、single.cssの作成

投稿ページのみに縦書きのスタイルを当てたかったため、新しくCSSファイルを作成してテーマフォルダ内に保存。CSSファイルには縦書きデザインの記述をする。

以下注意点。

• Firefox以外はheightとcolumnsで必ず同じ高さを指定しておく。
• 最終的にFirefoxのみheightはautoにする必要があった。※最初は逆にheightをcolumnsと同じに指定しなければうまくいってなかったのでバグかも
• box-sizingは必ず初期値のcontent-boxにしておく。 これをしておかないと後の要素サイズ調整がうまくいかない。

縦書き仕様のCSSに関しては以下のサイトを参考にした。

• 縦書きWEB普及委員会

3、function.phpの編集

single.phpにのみにsingle.cssのスタイルをあてたかったため、function.phpに条件分岐を使って追加記述する。

ここまででメインコンテンツが縦書きになるが、2カラム目以降がオーバーフロー扱いになるので、下の要素と重なって大変な状態になっている。

なのでJavascriptでオーバーフロー分のスペースを確保する必要がある。

4、要素サイズ調整用jsファイルの作成

javascriptのコードは、以下の記事を参考にした。

• 縦書きでレスポンシブなブログを作った – yuhei blog –
• iframe の高さが動的に変わっても親画面でスクロールバーを表示させない方法 – webllica –

で、実際に書いたコードがこれ。

これに名前を付けて、テーマフォルダ内の適当なところに保存。
そして「3、function.phpの編集」でfunction.phpに追記した箇所から、このjsファイルを読み込ませる。

以上で縦書きで表示されるようになる。
既存テーマでも縦書きにアレンジできるか試したところデフォルトテーマの「Twenty Seventeen」はこのやり方で縦書きにできた。

その他気づいたこと

その他縦書きにしたときに気づいたことを箇条書きにしておく。

• Firefoxは文章中に引用タグ(blackquote)が入っているとレイアウトが崩れる
• マージンの上下左右の位置関係がEdgeだけ90度回転する
• 画像を文章中に挿入する場合は、ブラウザサイズごとで細かく画像サイズを調整しなければならない。

とにかく縦書きレイアウトはブラウザごとの挙動の違いが大きいので、それぞれに異なるCSSを当てるとかの調整の必要がある。

まとめ

個人的なWEB学習の課題として作ってみたが、結果としていい学びになったと思う。割とゲーム感覚で楽しめたし、全くよく分かってなかったJavascriptが、WEB上で何をしているのかの雰囲気もつかめた。

もしこの記事を見て試そうと思う人がいたら、くれぐれもバックアップは忘れずに楽しく試してもらえたらと思う。