THOR 見出し カスタマイズ

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

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

※トップページのウイジェットタイトルへの対応などを追記しました。

 

 

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

文字の左右にボーダー THE THOR

 

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

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

 

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

 

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

 

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

簡単に言うと、文字の前(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

 

追加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-mainh2.heading.heading-widgetCborderを指定してトップページの見出しに左右のボーダーを設置している当サイトのコードは以下の通りとなります。

/* 見出しセンターボーダー */
/* ウィジェット見出し再設定 */
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 のスタイルに設定してしまいましょう。

操作手順
外観 → カスタマイズ → パーツスタイル設定[THE] → ラベル設定
好きなタイトルをつけ、テキストエディタから作った装飾のクラス名をコピーしてスタイルにペースト。
もとのスタイルは消えてしまうので必要があればテキストファイルなどに保存しておきましょう。
これで記事中などで簡単に左右ボーダーが使用できます。(ライブプレビュー/ビジュアルエディタには表示されないのでプレビューで確認しましょう。)

 

 

あとがき

 

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

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

 

 

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

 

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

 

 

>