WordPressテーマ『Cocoon』で縦書き表示を実装してみた

この記事は約6分で読めます。

仮にもテキストメインで活動しているものですから、小説本文のサンプルは縦書きで表示したくて、隙間時間にかなり試行錯誤した結果いい感じの表示ができるようになったので覚え書き。参考にするしないはご自由にどうぞ。

 サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
 サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

改行してもOKです。

ふりがなも大丈夫だいじょうぶ

太さは変えられますが文字サイズは途中で変えられません

 サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

ソースコードも掲載してありますが、なにぶん素人コードなので不具合が起こる可能性があります。あと質問には一切応じられませんのでご了承ください。ワシズが質問したいぐらいだよ!!

Cocoonと縦書き表示

このページをご覧になっているということは、(おそらく)小説とか文章メインで活動されていて、Cocoonを使用されている皆様なんだろうなとは思いますが、そしてお試しの方もいるかと思いますが、Cocoonと世に出回っている縦書き表示プラグインの相性は控えめに言って最悪です。

どんな縦書きプラグインをいれてもまず満足のいく表示にはなりません。
そもそもCocoonは開発者さんが「プラグイン入れて表示崩れてもサポートできません」という旨のことをおっしゃっているぐらい、これ一つでだいたいのことはできる代わりにプラグイン入れることはおそらく推奨していないWordpressテーマなので、仕方ないと言えばそうなのですが。
ワシズも一通りプラグイン入れたりCSSいじったり試行錯誤しましたが、最終的に縦書きプラグインの導入は投げました。

で、「じゃーどうやってこの表示作ってんの?」って話なんですが、単純な話で、Cocoon子テーマのstyle.cssに縦書き表示用の記述追記しました。

ソースコード

どうやらCocoonは、(良くも悪くも)記事の体裁に関することは子テーマのstyle.cssを最優先にする作りになっているようです。ですので、子テーマのstyle.cssに以下のコードを追記しました。

/* 文章縦書き表示用 */

.design1 {
writing-mode:vertical-rl;
width: 100%;
height: 60%;
overflow-x: scroll;
overflow-y: hidden;
font-size: 80%;
font-family: serif;
}

コピペ自由ですが、何か不具合起こってもワシズは対応できませんのであしからず。これを子テーマのstyle.cssに記入してあげると、あとは<div class=”design1″></div>で縦書きにしたい文章を挟むだけで冒頭のような表示になります。<p class=”design1″></p>でも大丈夫です。

ソースコード解説

めんどくさいので割愛しようかとも思ったんですがせっかくなので要素を解説していきます。

writing-mode:vertical-rl; ……文章を縦書き表示にするための指示

width:100%; ……縦書き表示する領域の幅の指示。ワシズはページ幅100%にしてます

height:60%; ……縦書き表示する領域の高さの指示。これは記事の高さ画面の高さですゴメンナサイの60%を高さにしてね、という指示

overflow-x:scroll; ……X方向のスクロールバーを出現させるための指示

overflow-y:hidden; ……Y方向のスクロールバーを隠すための指示

font-size:80%; ……文字サイズの指示。通常文字よりちょっと小さめにしたかったのでこの大きさ。

font-family:serif; ……縦書き表示領域のフォントを明朝体にするための指示

CSSの記述方法をちゃんと守っていれば、応用で文字の色を変えたり背景色をつけたりもできるはずです。
ふりがなや文字を太くする操作はCocoonのデフォルト機能を使って行い、最後にhtmlモードにしてclass属性を指示してあげるとスムーズかも。
まあその筋の方が見たら「なんじゃこのコードは」と思われる可能性もありますが、とりあえずこんな方法で縦書き実装したやつもいるよと言うことで一つ。

ワシズでした。

追記:縦中横のソースコード

一晩たってふと思い出したんですが、上のCSS、全角の「?」「!」は縦表示してくれるんですが、縦中横に未対応だったのでしたやっちまったい。というわけでコードを追記しました。下記の指示を上記のコードとは別に子テーマのstyle.cssに記載します。

.tate {
-webkit-text-combine: horizontal;
-ms-text-combine-horizontal: all;
text-combine-upright: all;
}

縦中横にしたいところを<span class=”tate”></span>で挟むと縦中横になります。参考までに。

タイトルとURLをコピーしました