ワードプレスで囲み枠をプラグインなしで使いましょう。色も自由に変更可能です。
ブロックエディターを主に使うようになって
表示がおかしくなっています。上記の【関連記事】をご覧ください。
①見出しタイトルタグ付きの囲み枠の作り方
例
①見出しタイトルタグ付きの囲み枠を作りましょう。
この①の枠は4色の色を使用しています。それぞれ選択出来るので、カラーコード変更し
て自分の好きな色でいくつか作って保存しておきましょう。
①見出しタイトル
<div style=”display: inline-block; background: #00ffff; padding: 5px 10px; color: #ffffff; border-radius: 5px 5px 0 0;”><strong>①見出しタイトル</strong></div>
<div style=”background: #e0ffff; padding: 10px; border: 2px solid #0000ff;”>
</div>
- 枠の中の＜div style=から最後の＜div＞までコピーします。
- テキストモードにしてペーストします。
- ビジュアルモードにするか、プレビューにするかして、ちゃんと囲み枠ができているか確認します。
- 下図を参考にして、4つの色を変更します。＃と6字を選んだ色に変更します。
●①タブ背景色
●②タイトル文字色（例は白です）
●③囲まれた背景色
●④囲み枠線の色 - ビジュアルモードに変更して、枠の中に文章を書きます。
- 見出しタイトルの文字を消して入れたい文字を入力します。ビジュアルモードでもOK
②見出し枠付き囲み枠作り方
例②見出し枠付き囲み枠を作りましょう。
見出しタイトル
<div style=”background: #7fffd4; padding: 5px 10px; color: #ffffff; text-align: center;”><strong>見出しタイトル</strong></div>
<div style=”background: #ccffee; padding: 10px; border: 2px solid #ccffee;”>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
- 枠の中の<div styleからdiv>までコピーします。
- テキストモードにして、ペーストします。
- 先ほどと同じ様に変えたい色を変更します。①と同じ色順です。
- ビジュアルモードにして、枠内に文字を入力します。
- 見出しタイトルも変更します。ビジュアルモードでもOK
最後に
いかがでしたか？自分の好きな配色を何通りか作っておくと、使う時に考えないでいいので、色々な色で試して、どこかにコピーしておきましょう。私は、長いけどユーザー辞書に登録しています。
コメント