JIN

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

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

これです

テキスト

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

テキスト

テキスト

テキストが長くても

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

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

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

細い線にしても良いかも

テキスト

二重線にしても良いかも

テキスト

メンくん

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

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

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

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

くま

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

カスタマイズの準備

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

グーテンベルクでの設定

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

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

「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;
}

カスタマイズの締め

カスタマイズコードを書き込んだら、最後に必ずキャッシュ削除して更新をしましょう。 これを忘れてしまうとせっかくカスタマイズしたのにデザインに反映されません

キャッシュ削除

簡単な方法は Ctrl + F5 を押す方法です。またはF12を押した後に更新マークを右クリックして「キャッシュの消去とハード再読込」をクリックします。