割とどこでも使えるよ！テキストを挟んで横に伸びる棒

「テキストを挟んで横に伸びる棒」を作ってみました。

これです

テキスト

テキストの色で横の棒も色が変わります

テキスト

テキストが長くても

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

50pxほど線が残るようにしています。

ここから下はFANBOXで公開予定のやつです。

細い線にしても良いかも

テキスト

二重線にしても良いかも

テキスト

もう少しアレンジを加えてみても良いかもしれませんね

カスタマイズを始める前に

カスタマイズは自己責任でお願いします。

参考カスタマイズは自己責任。ぼくはこんな風に思っています。

カスタマイズは仮に同じテーマであっても、100％成功する補償はありません。

Contents

カスタマイズの準備
1. グーテンベルクでの設定
2. クラシックエディタでの設定
カスタマイズコード

カスタマイズの準備

グーテンベルクとクラシックエディタでは、ちょっとだけ導入方法が異なります。

グーテンベルクでの設定

段落ブロックを使います。

段落ブロックを選択した状態で、右サイドメニュー一番下にある「高度な設定」で下記のクラス名を追加します。

「barbar」

クラシックエディタでの設定

pタグにクラス名を追加したコードをお使いください。

<p class="barbar">テキスト</p>

あとはCSSコードを追加するだけ

カスタマイズのコードを入力する場所を決める

2つの方法でカスタマイズコードを追加できます。

追加CSS（初心者向けでおすすめ）
外観＞テーマエディタ＞style.css（慣れた人向け）

はじめてカスタマイズするかたは、「追加CSS」がおすすめです。

詳しいやり方はこちらを参考にしてください。

参考ブログのカスタマイズを加速させる「追加CSS」の追加方

カスタマイズコード

.barbar {
    display: flex;
    align-items: center;
    font-weight: 600;
}
.barbar:before, .barbar:after {
    content: "";
    flex: 1;
    border-radius: 6px;
    background: currentColor;
    height: 4px;
    opacity: .3;
    min-width: 50px;
}
.barbar:before {
    margin-right: 12px;
}
.barbar:after {
    margin-left: 12px;
}