※モバイル機器のみ有効→PC表示に切替 モバイル表示に切替

SIRIUSで縦書きテキストの”見出し”を作るやり方

キャプチャ画像

画像はゲットしたけどそのままじゃ使いにくいし、かといって画像編集ソフトも持ってないから加工もできないしさてどうしようなんて経験、あなたもあるんじゃないですか?

 

今回はそんなシンプルな画像に縦書きのテキストを載せることで、サムネイル画像(アイキャッチ画像)風の”見出し”を作るやり方をご紹介します。

 

H2とかH3が付くわけではないので純粋な「見出し」とは異なりますが、単なるテキストの見出しよりもインパクトはあるので目を引くことは間違いないです。

 

それにテキスト表示なのでSEO上も問題なし。


縦書きテキストによる”見出し”作成

先にサンプル例を挙げておきます。

 

コチラ↓が画像に縦書きテキストを載せた状態。

 

おいしいパンの
作り方

 

テキストを2行にしても中央寄せ。

 

おいしいパンの
作り方

 

カンタンだよ

 

コチラ↓は(グラデーションの)背景色に縦書きテキストを載せた状態。

 

おいしいパンの
作り方

テキスト解説

記事内に挿入するテキストは以下のようになってます。

 

1行テキスト

コード

<div class="tategakibox">
<div class="tategaki">
おいしいパンの<br />作り方
</div>
</div>

2行テキスト

コード

<div class="tategakibox">
<div class="tategaki">
おいしいパンの<br />作り方

カンタンだよ
</div>
</div>

赤文字のテキスト部分はもちろん変更可能です。

 

”おいしいパンの”の直後にある<br />強制的に改行するHTMLタグです。

 

それ以外の部分はこのあとご説明するスタイルと連動してるので変更不可です。

”tategakibox”や”tategaki”などのクラス名の変更も可能ですが、HTML・CSS両方とも同時に変更する必要があります。

 

この説明がわからない方はこのままご利用ください。

スタイル解説

縦書きテキスト用に作ったスタイルがコチラ↓になります。

使う場合はユーザー指定スタイルの最後尾に追記するか、個別ページ設定内の上級者向け設定→スタイル割り込みに追記します。

説明用に一部書き換えているので下のスタイルをそのままコピーしても上のような表示にはなりません。

コード

.tategakibox {
     ①width:70%;
     ①margin:0 auto;
     ①display: flex;
     ①justify-content: center;
     box-sizing: border-box;
     ②background-image: url(img/(※背景に置く画像ファイル名));
     ②background-repeat: no-repeat;
     ②background-position: center center;
     ②background-size: contain;
     ③background:linear-gradient(180deg, #f2d50f 0%,#e2522e 100%);
     ④background-color:#CCC;
}
@media screen and (max-width:768px) {
     .tategakibox {
          ⑤width:98%;
     }
}
.tategaki{
     ⑥font-family: "游明朝 Medium", "Yu Mincho Medium", 游明朝体, YuMincho, serif;
     ⑦height:320px;
     ⑧line-height:1.3;
     ⑨-ms-writing-mode: tb-rl;
     ⑨-webkit-writing-mode:vertical-rl;
     ⑨writing-mode: vertical-rl;
     ⑩-ms-text-orientation: upright;
     ⑩-webkit-text-orientation: upright;
     ⑩text-orientation: upright;
}
.tategaki p {
     ⑪font-feature-settings:normal!important;
     ⑫text-shadow:0 0 3px #fff;
}
⑬.tatechu {
     text-combine-upright: all;
}

冒頭の”tategakibox”というクラス名は、全体幅や背景の装飾用に使います。

①の”width:70%”は表示幅です。100%にすれば幅いっぱいに広がります。

500pxなどの絶対値でもOKですが、その

場合はスマホ視聴時に画面が広がってしまうので⑤のところで最大100%で調整します。

margin:0 auto;は全体枠の中央寄せ設定で、その下のdisplay: flex;justify-content: center;はテキストブロックの中央寄せの設定になります。

box-sizing: border-box;はそのまま付けておいてください。

背景画像を使う場合は②で設定します。

サンプル例では画像を繰り返し表示せず(no-repeat)、ど真ん中に画像を配置し(center center)、枠内にぴったり収まるよう縮小して(contain)表示する設定になってます。

③は背景画像ではなくグラデーションの背景色にしたい場合の設定です。

グラデーションジェネレーターなどを利用すると簡単に設定できます。

④は単一背景色の設定例です。

※②③④はどれか一つだけ設定します。

⑥はテキストを明朝体(游明朝)で表示する設定です。

ゴシック体でよければこの行は削除します。

⑦は全体枠の高さです。

これを指定しないとブラウザ側で勝手な高さで表示されるようです。

⑧は行間です。数値を大きくすると行間が広がります。

2枚目の画像で言えば「おししいパンの」と「作り方」の間です。

「作り方」と「カンタンだよ」の間は段落間になります。

⑨が縦書き表示用の設定です。ここは一切いじりません。

⑩は英字を縦書き表示にする設定です。

たとえば縦書き設定に変えたところで英字の「SIRIUS」はコチラ↓のように横書きのままです。

SIRIUS

しかしながら⑩の設定があるとコチラ↓のように文字が90度回転して縦文字に変わってるハズです。

SIRIUS

どっちがいいかはお好みで。

なお英字は横文字のままでいいというのであれば⑩はすべて削除します。

相変わらず独自仕様を貫くMicrosoft EdgeやInternet Explorerでは縦にならず横文字のままです。

(上記ブラウザでこのページをご覧になってる方は”変化なし”かと思います)

上記ブラウザを視野に入れるのであれば見出しに英字は使わない方がいいかもしれません。

⑪は通常は必要ありません。

管理人作成のSIRIUSテンプレート【Volar】使用時にはこの設定がないとテキストがちぐはぐな並び方になってしまいます。

⑫はテキストの縁取りみたいなもんです。(正確にはテキストシャドウ)

最初のサンプルのように背景とテキストカラーが似たような場合は縁取りがないと見づらくなります。

必要なければここも削除します。

⑬は縦中横たてちゅうよこの設定です。

数字はそのままだと縦1列に並んで表示されてしまいます。

しかしながら⑭のクラスを付与してやることで数字が1文字分の高さで横書きに配置されるようになります。

たとえば(今回の見出し作成とはなんの関係もありませんが)次のような文章があったとします。

これから寒い冬を迎えるにあたって3機のストーブと48個のみかんと756人前のおせちを準備しなくてはならない。

これを普通に縦書き設定に放り込んでやると、数字だけが横になって表示されてるかと思います。

これから寒い冬を迎えるにあたって3機のストーブと48個のみかんと756人前のおせちを準備しなくてはならない。

今度は縦中横のクラスを数字に付与して下のように書き換えてみます。

これから寒い冬を迎えるにあたって<span class="tatechu">3</span>機のストーブと<span class="tatechu">48</span>個のみかんと<span class="tatechu">756</span>人前のおせちを準備しなくてはならない。

これを実行すると数字が縦に回転し、2桁以上は横に並んで表示されてるハズです。

これから寒い冬を迎えるにあたって3機のストーブと48個のみかんと756人前のおせちを準備しなくてはならない。

ここでもMicrosoft EdgeInternet Explorerだと若干ですが挙動が変わってきます。

コチラ↓が上記ブラウザで見た時のキャプチャ画像です。

キャプチャ画像

1桁の数字は横に広がって配置され、2ケタ以上の数字は数字の前に余計な空白が生じています。

といってもさほど大きな問題ではないので縦中横に関しては無視していいレベルかと。

 

縦中横の設定はあくまで半角数字に限ってのことです。

全角数字の場合はひらがなと同じ動作になります。

先の文章の数字を全角数字に置き換えてそのまま縦書き表示にしたのがコチラ↓。

 

これから寒い冬を迎えるにあたって3機のストーブと48個のみかんと756人前のおせちを準備しなくてはならない。

こちらの方がいいという場合は縦中横の設定は無視しておきます。

以上です。

SIRIUSテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSテンプレートが【Volar】です。

詳細および入手方法についてはコチラ↓をご覧ください

 この記事をシェア 
キャプチャ画像