オウンドメディアなど、記事中心の文字で構成されているサイトは圧倒的に横書きですが、最近縦書きを部分的に使ったサイトも見かけます。
この縦書きのレイアウトと明朝系のフォントを併用して部分的に用いることで、しっとりとした和の雰囲気や、落ち着いた印象を出すことも可能で、WEBサイトは横書きが標準なので、一目で目を引くことも可能で、色々見ていくと縦書きの文章を横にスクロールさせるようにしたり、細分化したメディアクエリで制御してレスポンシブ に対応しているようです。
今回は、コピペでできるWordPressの記事部分にレスポンシブの縦書きで段組ソース一式についてご紹介します。
縦書きの仕様とCSSで使うソース
縦書きの設定は簡単で、縦書きにしたい箇所にCSSで writing-mode: vertical-rl;
を記述して、念の為IEのベンダープレフィックスも併記しましょう。
vertical が縦、rl が右から左を意味するコードです。
これ以外に、併用して使うカラム系のCSSコードは以下で、主に3つのコードを使って縦書きと段組を作ります。
カラムの数と幅
columns …… カラム幅とカラム数の指定
column-width …… カラム幅の指定
column-count …… カラム数の指定
カラムの間隔と区切り線
column-gap …… カラムの間隔の指定
column-rule …… カラムの区切り線のスタイル・幅・色を指定
column-rule-color …… カラムの区切り線の色を指定
column-rule-style …… カラムの区切り線のスタイルを指定
column-rule-width …… カラムの区切り線の幅を指定
カラムへの要素の配置
column-span …… 要素がまたがる(横切る)カラム数の指定
column-fill …… カラム同士の高さ(長さ)を揃えるかどうかを指定
縦書きのサンプルとコピペのソース
縦組みの文章を極力HTMLとCSSで作ろうと思うと、どうにも縦にした文字部分が多い場合、overflow で縦にはみ出てしまい、かつ縦書き文章のスクロールバーの実装ではイケてないので、文字量に応じてはみ出ないようJQueryで自動生成させるような構成にしています。
ので、忘れずHTML+CSSに加えて、jsのコードも</header>の前に記述するようにしましょう。
実装したサンプル
約1500文字程度の夏目漱石の「坊ちゃん」を縦書きのブロックに書いた場合のサンプルです。
<p>の段落のつかけたと、全体の文字量によって、段組のレイアウトが若干変わったりするので、全体感を見ながら <p>のmarginを調整を取るようにすると、両端の余白もなくなりいい感じです。
坊ちゃん
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。
親類のものから西洋製のナイフを貰って奇麗な刃を日に翳して、友達に見せていたら、一人が光る事は光るが切れそうもないと云った。切れぬ事があるか、何でも切ってみせると受け合った。そんなら君の指を切ってみろと注文したから、何だ指ぐらいこの通りだと右の手の親指の甲をはすに切り込んだ。幸ナイフが小さいのと、親指の骨が堅かったので、今だに親指は手に付いている。しかし創痕は死ぬまで消えぬ。
庭を東へ二十歩に行き尽すと、南上がりにいささかばかりの菜園があって、真中に栗の木が一本立っている。これは命より大事な栗だ。実の熟する時分は起き抜けに背戸を出て落ちた奴を拾ってきて、学校で食う。菜園の西側が山城屋という質屋の庭続きで、この質屋に勘太郎という十三四の倅が居た。勘太郎は無論弱虫である。弱虫の癖に四つ目垣を乗りこえて、栗を盗みにくる。ある日の夕方折戸の蔭に隠れて、とうとう勘太郎を捕まえてやった。その時勘太郎は逃げ路を失って、一生懸命に飛びかかってきた。向うは二つばかり年上である。弱虫だが力は強い。鉢の開いた頭を、こっちの胸へ宛ててぐいぐい押した拍子に、勘太郎の頭がすべって、おれの袷の袖の中にはいった。邪魔になって手が使えぬから、無暗に手を振ったら、袖の中にある勘太郎の頭が、右左へぐらぐら靡いた。しまいに苦しがって袖の中から、おれの二の腕へ食い付いた。痛かったから勘太郎を垣根へ押しつけておいて、足搦をかけて向うへ倒してやった。山城屋の地面は菜園より六尺がた低い。勘太郎は四つ目垣を半分崩して、自分の領分へ真逆様に落ちて、ぐうと云った。勘太郎が落ちるときに、おれの袷の片袖がもげて、急に手が自由になった。その晩母が山城屋に詫びに行ったついでに袷の片袖も取り返して来た。
この外いたずらは大分やった。大工の兼公と肴屋の角をつれて、茂作の人参畠をあらした事がある。人参の芽が出揃わぬ処へ藁が一面に敷いてあったから、その上で三人が半日相撲をとりつづけに取ったら、人参がみんな踏みつぶされてしまった。古川の持っている田圃の井戸を埋めて尻を持ち込まれた事もある。太い孟宗の節を抜いて、深く埋めた中から水が湧き出て、そこいらの稲にみずがかかる仕掛であった。その時分はどんな仕掛か知らぬから、石や棒ちぎれをぎゅうぎゅう井戸の中へ挿し込んで、水が出なくなったのを見届けて、うちへ帰って飯を食っていたら、古川が真赤になって怒鳴り込んで来た。たしか罰金を出して済んだようである。
コピペ用コード
サンプルの文章と以下のソースにはいれていませんが、text-orientation
: upright; をCSSにいれることで、行内の英数字のテキストの向きを設定します。このプロパティは縦書きのテキストで効果があり、縦書きで英数字の文章を作成したりする場合は、これもCSSに追記しましょう。
コードを表示する
<div class="wrapper">
ここに中身。
<p>〜〜〜</p>のように、<p>でひとまとまりの文章を書くと、文頭の一文字を下一個下げて表示されます。
</div>
.wrapper {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
columns:18em auto;
column-rule: dotted 1px #ccc;
column-gap: 2.5rem;
width: 100%;
box-sizing: border-box;
}
/* 字下げ */
.wrapper p {
margin-left: 2rem;
text-indent: 1rem;
margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
.wrapper p {
margin-left: 1.2rem;
}
}
.wrapper h3 {
margin-left: 2rem;
text-indent: 0rem;
margin-bottom: 0;
margin-top: 0;
}
//ページ読み込み後に実行
jQuery(document).ready(function () {
reDesign();
});
//ブラウザサイズ変更時に再実行
jQuery(window).resize(function () {
reDesign();
});
function reDesign() {
var scH = jQuery(".wrapper").prop('scrollHeight'); //高さ取得
var primH = (scH + 0) + 'px'; //#primaryの高さは更に+0px
jQuery('.wrapper').css({ height: primH }); //高さを指定して反映
};