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

Warning: Undefined array key "className" in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/gutenberg.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined array key "className" in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/gutenberg.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33

テキスト

長いテキストテキストテキストテキストテキストテキストテキスト

テキスト

これです

テキストカラーで左右に出てくる棒の色も変化します

カスタマイズ自体は簡単だけど、コードの書き方は変態やね

ココがポイント！

レスポンシブで使いやすい
文字色で棒の色が変化
文字が長くても綺麗に表示

FANBOX限定

詳細ページへ

予定中：細い線、二重線、ドットとかあるといいかも

FANBOXページ

FANBOXとは？

カスタマイズは自己責任でやろう

自己責任の意味がわからない方、初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。

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

カスタマイズするための
準備

グーテンベルクなら段落ブロック、クラシックエディタならpタグにクラス名を追加する必要があります。

グーテンベルクでの設定

グーテンベルクでは、段落ブロックを使用します。

段落ブロックにテキストを入力したら、右サイドメニューの一番下にある「高度な設定」でクラス名を追加します。

クラス名は「barbar」です。

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

クラシックエディタの場合は、pタグにクラス名を追加した形になります。

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

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

CSSコードの追加方法

おすすめは追加CSSからコードを追加する方法です。

はじめてカスタマイズする方は、こちらの記事を読んでくださいね。

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

追加方法	難しさ
追加CSS
テーマエディター
FTPソフト

複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。

カスタマイズに必要な
CSSコード

ãã®ç»åã«ã¯ alt å±æ§ãæå®ããã¦ãããããã¡ã¤ã«åã¯ kopinosikata.png ã§ã

コメントありver

コメントなしver

.barbar {
    display: flex;
    align-items: center;
}
.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;
}