CSSだけでWordPressの一部記事を縦書きにする - セブンおやじ

セブンおやじ

つれづれなるままに

よもやま話

CSSだけでWordPressの一部記事を縦書きにする

2018/05/03

スポンサーリンク

手紙とか小説とか。

スマホだとレスポンシブで文章折り返されちゃうしサイトデザインの観点から縦書きにしたいな、ってことたまに思うよね?

って場面に自分も出くわしたので、縦書きCSS置いてきます。

もちろんWordPressの縦書きプラグインもあるけど、サイトレスポンス考えたらできるだけプラグイン使わずに軽くしたいしね。

縦書きCSS

/*--------------------------------
文章を縦書き(右から左)
---------------------------------*/
.tategakirtol {
width: 100%;
height: 500px;
writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-webkit-writing-mode:vertical-rl;
}

/*--------------------------------
文章を縦書き(左から右)
---------------------------------*/
.tategakiltor{
width: 100%;
height: 500px;
writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
-webkit-writing-mode: vertical-lr;
}

スポンサーリンク

縦書きHTML

◇右から左へ縦書き
<span class="tategakirtol">右から左へ縦書きにする場合は クラス名 tategakirtol で縦書きにしたい文章をSPANタグとかで囲ってください。
なおクラス名はCSSの名前と合ってれば任意ですよ。
ただしCSS内で一意(重複しない)名前にしてくださいね。
</span>

◇左から右へ縦書き
<span class="tategakiltor">クラス名を tategakiltor に変えただけです。
ちなみに一部古いブラウザだと反映されないと思うのでそこはご容赦ください。
どのブラウザのどのバージョンから反映されるかは時間かかってめんどいので調べませんが、基本的にCSS3対応であれば大丈夫だと思います。
</span>

見え方

右から左へ縦書きにする場合は クラス名 tategakirtol で縦書きにしたい文章をSPANタグとかで囲ってください。
なおクラス名はCSSの名前と合ってれば任意です。
ただしCSS内で一意(重複しない)名前にしてくださいね。

 
クラス名を tategakiltor に変えただけです。
ちなみに一部古いブラウザだと反映されないと思うのでそこはご容赦ください。
どのブラウザのどのバージョンから反映されるかは時間かかってめんどいので調べませんが、基本的にCSS3対応であれば大丈夫だと思います。

こっそり自己紹介

初めまして。セブンと申します。
ハンドルネームは「セブンおやじ」ですが、検索キーワードで一発で引っ掛けてもらいたいがために「おやじ」をつけたのであって、面識のある方からは「セブン」と呼んでもらうようにお願いしています。
ま、でも、「おやじ」に変わりないしこんなめんどいこと言ってる時点で既に「おやじ」なんでしょうが。。
「セブン」の由来は「CRウルトラセブンL77」から取っています。車アイコンだし車好きなんで「RX-7」のセブンですか?と言われることもありますが、今はなきパチンコ台「CRウルトラセブンL77」からです。
なんて、どうでもいい話で失礼いたしました。
来るもの拒まず去る者追わずなんで気軽に絡んでください♬

注意点!
◇必ず今のスタイルシートをセーブしてから試してください
◇子テーマのスタイルシートに記述することをおすすめします
◇スマホなどで文章の横幅がはみ出した場合、はみ出した文章は折り返されず表示もされません
◇上記CSSの”height: 500px;”の500pxの値が縦幅の大きさなので、横幅がはみ出す場合は縦幅を調整してください

-よもやま話
-,

[juiz_sps buttons="pinterest, viadeo, mail, bookmark"]
このボタンをクリックすると記事タイトルとURLがコピーされます。
メールやメモ帳などに貼り付けてご利用ください。

TOP