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

SIRIUSでテキスト付き区切り線を表示させる方法

キャプチャ画像

SIRIUSには水平線を引く機能がデフォルトで搭載されてます。(5タイプ)

 

この機能は「そこが区切りである」ことをより明確にできる便利な機能ですよね。

 

読みやすさもグッとアップします。

 

キャプチャ画像

 

ところでこの水平線の中にテキストを付け加えたいと思ったことはないですか?

 

水平線の中央にテキストを表示させることができれば見出し的な意味合いを持つ区切り線としても活用できます。

 

キャプチャ画像

 

そのやり方をご紹介します。

 

とても簡単なのでコピペですぐに使えます。


表示方法

このコンテンツ(記事)の機能はカスタムテンプレート【Volar】に搭載済みです。

 

記事内のテキスト付区切り線を挿入したい位置で以下を記入します。

(※テキストモードでの編集になります)

<div class="bunkatsu_text">ここで分割</div>

赤文字の”bunkatsu_text”というクラス名はこのあとご紹介するスタイルと連動してます。

 

このクラス名は適宜変更してかまいませんが、このあとご紹介するスタイル内のbunkatsu_textというクラス名も同時にすべて変更する必要があります。

 

また「ここで分割」というテキストはもちろん好きな文言に変更可です。

 

classとid

特定の一部だけを装飾したい場合、その部分にclassidを付けておくことで装飾指定を一元化できます。

classの名前はドット(.)で始まりidはシャープ(#)で始まります。

 

たとえばスタイルシート(【テンプレート】→【スタイルシート編集】で開く画面)内に『f_red』というclass名があったとします。

 

そこに書いてあるのが

.f_red {

color: red;

}

だったとします。

 

これは『f_red』というクラス名がついてる部分はフォント色を赤にする(color: red;)というものなんですが、これを行全体のテキストに適用する時は、記事内に

 

<p class="f_red">私の好きな色は赤です。</p>

 

こんな感じで書きます。

(※pは行を意味します)

 

行全体ではなく行の中の一部だけにclassを設定したい時、たとえば上の例なら「赤」というテキストだけフォント色を赤にしたいような場合は

 

私の好きな色は<span class="f_red">赤</span>

 

このように”span”という文字を付けて書きます。

(spanについてはあまり深く考えず”文の中の一部の装飾にはspanを付ける”ぐらいに思っておくといいでしょう)

 

そしてこのclassは繰り返し使えます。

 

つまり他にもフォントを赤くしたい箇所があれば何度使ってもいいのです。

 

これに対しidは一度しか登場しません

 

たとえばヘッダー部分に使われてる<div id="header">なんかはそのいい例です。

ヘッダーはページ内に2つ出てくることはありませんから。

 

仮にここで『ヘッダー部の背景色は赤にする』なんて設定を付けたい場合はスタイルシートに

#header {

background-color:red;

}

というふうにドット(.)ではなくシャープ(#)をアタマにつけて指定します。

 

どこにクラスをつけてどこにidをつけるかははっきり言って慣れです。

 

迷ったらクラスを付けておけば間違いないです。

 

続いて【テンプレート】→【スタイルシート編集】→【ユーザー指定スタイル】と開き、最後の方に以下のコードをコピー&ペーストします。

(※範囲選択後、[ctrl]+[C]でコピー可)

 

コード

.bunkatsu_text {
display: flex;
align-items: center;
}
.bunkatsu_text::before,
.bunkatsu_text::after {
content: '';
height: 1px;
background-color: #333;
flex-grow: 1;
}
.bunkatsu_text::before {
margin-right: 0.5em;
}
.bunkatsu_text::after {
margin-left: 0.5em;
}

これでOK。

 

実際に表示させたのがこちら↓になります。

(※グレーの背景は見やすくするために付けたもので今回の設定とはいっさい関係ありません)

ここで分割

表示カスタマイズ

カスタマイズ方法をいくつか。

 

コード

.bunkatsu_text {
display: flex;
align-items: center;
}
.bunkatsu_text::before,
.bunkatsu_text::after {
content: '';
height: 1px;
background-color: #333;
flex-grow: 1;
}
.bunkatsu_text::before {
margin-right: 0.5em;
}
.bunkatsu_text::after {
margin-left: 0.5em;
}

 

線の太さを変える

②内の「height: 1px;」を修正します。

 

わかりやすいように「height: 10px;」とかなり太めにしてみた結果がこちら↓

ここで分割

 

(水平)線の長さを変える

線をブラウザの表示枠いっぱいではなく、若干左右に余白を設けたい場合は以下の赤文字部分のスタイルを①内に加筆します。

 

※下のサンプルは”全体幅の80%で表示”する設定になってます。
余白を増やすには80という数字を減らします。

コード

.bunkatsu_text {
display: flex;
align-items: center;
width:80%;
margin-left: auto;
margin-right: auto;
}

この結果がこちら↓

ここで分割

上記設定だとPCでもiPhone(スマホ)でも同じように80%幅で表示されてしまいます。

 

そうではなくiPhone(スマホ)では表示幅いっぱいに表示させたい場合は、以下の赤文字テキストではさんでやります。

 

コード

@media screen and (min-width: 1000px) {
.bunkatsu_text {
display: flex;
align-items: center;
width:80%;
margin-left: auto;
margin-right: auto;
}
}

 

@media screen and (min-width: 1000px)の部分は”PC表示時のみ…”という条件付きスタイル設定になります。

この結果がこちら↓

(※PCでは変わりないですが、スマホで見た時は線幅が先ほどよりも広がってるはずです)

ここで分割

 

線の色を変える

線の色を変えたい場合は②内のbackground-colorの値を変更します。

 

たとえばデフォルト設定の黒から青に変更したい場合は以下の赤文字のように修正します。

 

コード

.bunkatsu_text::before,
.bunkatsu_text::after {
content: '';
height: 1px;
background-color: #0000FF;
flex-grow: 1;
}

#0000FFというのは”青色”を表すカラーコードです。

カラーコードはカラーコード一覧表といったようなページを参考に#から始まる6桁の英数字で指定してください。

 

この結果がこちら↓

ここで分割

 

テキストの色を変える

テキストの色を変えるには①内に以下の赤文字部分を加筆します。

 

コード

.bunkatsu_text {
display: flex;
align-items: center;
color: #ff0000;
}

#ff0000は”赤色”を表すカラーコードです。

 

この結果がこちら↓

ここで分割

 

テキストを太字にする

テキストを太字にするには①内に以下の赤文字部分を加筆します。

 

コード

.bunkatsu_text {
display: flex;
align-items: center;
font-weight: bold;
}

 

この結果がこちら↓

ここで分割

 

テキストの大きさを変える

テキストの大きさを変更するには①内に以下の赤文字部分を加筆します。

 

コード

.bunkatsu_text {
display: flex;
align-items: center;
font-size: 24px;
}

大きさを変えるには24という数字を変更します。

 

この結果がこちら↓

ここで分割

 

線とテキストの間の余白を変える

線とテキストの間の余白を変更するには③内のmargin-leftmargin-rightの数値(※赤文字部分)を変更します。

 

※下のサンプルは元の0.5emから2.0emと数値を増やして余白を増やしてます。

 

コード

.bunkatsu_text::before {
margin-right: 2.0em;
}
.bunkatsu_text::after {
margin-left: 2.0em;
}

 

この結果がこちら↓

ここで分割

 

以上です。

SIRIUSテンプレート【Volar】

キャプチャ画像

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

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

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