THE THOR ザ･トール 文字の左右にボーダー をつける

THE THOR で 文字の左右にボーダー をつけるカスタマイズを紹介します。

出来上がりは以下のようになります。

意外と良く見るタイプの装飾です。

THE THOR の標準ではこの左右ボーダーのパターンが無かったので作ってみました。

このカスタマイズはコメントにて質問がよせられたので記事化しました。当サイトで行っているカスタマイズについて質問があればドシドシお寄せいただければと思います。※応えられない場合もありますのでご了承ください。

文字の左右にボーダーをつける方法

文字の左右にボーダーをつけるには疑似要素のbeforeとafterを使います。

簡単に言うと、文字の前(before)とうしろ(after)に線になるもの（背景を細く設定して線に見せかけている）を設定するだけです。

面倒なのは設定する場所を作る、調べることです。

使用する基本的なコードは以下のとおり。下記コードを設定する場所に合わせて使用します。

このコードは実際にこのままでは使用できないので参考程度に見てください。

display: flex; ←要素を横並びにする
align-items: center;  ←縦センターにする
:before,after { ←前とうしろに以下を設定
content: ""; ←空白スペースを設置
flex-grow: 1; ←空白スペースを拡げる
background-color: #404050; ←背景色の設定
height: 2px; ←背景を縦2pxにして線のようにする

文字の左右にボーダーをつけるコード

左右ボーダーで装飾する対象物にclassを設定します。ここではCborderとします。

例えば記事内で使用する場合テキストエディタで<div class=”Cborder”>この文字に装飾</div>と準備します。Cborderに対するCSSは追加CSSに記述。

追加CSSに記述するコードは以下のとおり

.Cborder {
	color: #404050;
	font-size: 24px;
	display: flex;
	align-items: center;
}
.Cborder:before, .Cborder:after {
	content: "";
	flex-grow: 1;
	height: 2px;
	background-color: #404050;
}
.Cborder:before {
	margin-right: .6em;
}
.Cborder:after {
	margin-left: .6em;
}

文字の大きさと色、ボーダー(背景)と文字の間隔も指定しています。

文字との間隔は前とうしろで別々に背景の右（左）にマージンを設定して確保。

※太さなど数値は変更してお好みの設定にしてください。

以上でCborderというclass名をつけた要素に左右のボーダーを設置できました。

次からは当サイトでの設定を見ていきます。

トップページの見出しに左右ボーダーをつける【当サイトでの設定】

現在の当サイトの設定ではトップページの見出しに左右ボーダーを設定しています。

トップページの見出しはh2.heading.heading-mainで指定ができます。

トップページのウイジェットタイトルはh2.heading.heading-widgetで指定ができます。ウィジェットにはTHE THOR の設定で装飾がされているので不必要な装飾はクリアしましょう。ここではbackground-color:initial!important;として背景色の設定を初期化しています。全ての設定を初期化することも可能ですが、余白の再設定などが必要となるのでここでは個別に初期化しています。

上記2点に先ほどのCborderもあわせて装飾をしていきます。

当サイトのトップページは固定ページを使用しています。トップページにウィジェット[THE]スタイルテキストを使用して項目タイトルなどを設置しています。

サンプル
ウイジェット[THE]スタイルテキスト：<div class=”Cborder”>おすすめ</div>

h2.heading.heading-mainとh2.heading.heading-widgetとCborderを指定してトップページの見出しに左右のボーダーを設置している当サイトのコードは以下の通りとなります。

/* 見出しセンターボーダー */
/* ウィジェット見出し再設定 */
h2.heading.heading-widget{
	background-color:initial!important;
	padding-left:0;
	padding-right:0;
}

/* センターボーダーの基本設定 */
.Cborder, h2.heading.heading-main,h2.heading.heading-widget {
	color: #404050;
	font-size: 24px;
	display: flex;
	align-items: center;
}

/* 左右にボーダー */
.Cborder:before, .Cborder:after, h2.heading.heading-main:before, h2.heading.heading-main:after,
h2.heading.heading-widget:before,
h2.heading.heading-widget:after{
	content: "";
	flex-grow: 1;
	height: 2px;
	background-color: #404050;
}

/* 左右ボーダーに隙間 */
.Cborder:before, 
h2.heading.heading-main:before,h2.heading.heading-widget:before{
	margin-right: .6em;
}
.Cborder:after, 
h2.heading.heading-main:after,
h2.heading.heading-widget:after{
	margin-left: .6em;
}

※文字サイズ、カラー、マージンなどは各サイトにあわせて調整してください。

以上です。

左右センターボーダーをデフォ設定にする

頻繁に使用するオリジナルの装飾は THE THOR のスタイルに設定してしまいましょう。

H2見出しに左右ボーダーを付ける方法

ウィジェットなどの装飾はそのままで記事中のh2見出し（自身でh2見出しと指定した箇所）にのみ左右ボーダーを適用するCSSです。
※一通りチェックはしましたが、思いもよらぬ場所に左右ボーダーが付いてしまう可能性があります。

カラーは赤にしているので好みで変更してください。テーマで設定するh2見出しは「基本」などシンプルなものにしておくことを推奨します。

以下のコードをコピペ。適用後にサイトをチェックしてみてください。

/* 見出しセンターボーダー */
/* h2見出し再設定 */
.l-main h2:not(.widget .heading){
	background:initial!important;
}

/* センターボーダーの基本設定 */
.l-main h2:not(.widget .heading) {
	color: #ff0000;
	display: flex;
	align-items: center;
}

/* 左右にボーダー */
.l-main h2:not(.widget .heading):before,
.l-main h2:not(.widget .heading):after{
	content: "";
	flex-grow: 1;
	height: 2px;
	background-color: #ff0000;
}

/* 左右ボーダーに隙間 */
.l-main h2:not(.widget .heading):before{
	margin-right: .6em;
}
.l-main h2:not(.widget .heading):after{
	margin-left: .6em;
}

あとがき

今回の記事作成にあたってコードを見直したところ無駄なものが多くあり、修正を行いながらの執筆となりました。

「出来たからいいや！」じゃなくて、しっかり内容を理解しながら作っていかないといけないな〜と改めて思います。

【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チート...

Mana

2,400円(04/18 13:59時点)

Amazonで購入する楽天市場で探すYahoo!で見る

Amazonの情報を掲載しています

間違いやもっと良い方法などがあればコメントをお願いします。

「このカスタマイズは素晴らしい！」と思ったらシェアなど拡散をお願いします。 THE THOR をもっと盛り上げていきましょう！