コピペでできるWordPressの記事部分にレスポンシブの縦書きで段組ソース

縦組みのイラスト

オウンドメディアなど、記事中心の文字で構成されているサイトは圧倒的に横書きですが、最近縦書きを部分的に使ったサイトも見かけます。

この縦書きのレイアウトと明朝系のフォントを併用して部分的に用いることで、しっとりとした和の雰囲気や、落ち着いた印象を出すことも可能で、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に追記しましょう。

コードを表示する

HTML

<div class="wrapper">
ここに中身。
<p>〜〜〜</p>のように、<p>でひとまとまりの文章を書くと、文頭の一文字を下一個下げて表示されます。
</div>

CSS

.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

    //ページ読み込み後に実行
    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 });  //高さを指定して反映
    };