\少額でマンション経営!/

グリーンワークホース
\少額でマンション経営!/

グリーンワークホース
ブログ

ワードプレスで囲み枠をプラグインなしで使いましょう。色も自由に変更可能。四角い枠も簡単。

囲み枠説明

ワードプレスで囲み枠をプラグインなしで使いましょう。色も自由に変更可能です。

ブロックエディターを主に使うようになって

表示がおかしくなっています。上記の【関連記事】をご覧ください。

 

①見出しタイトルタグ付きの囲み枠の作り方

 
①見出しタイトルタグ付きの囲み枠を作りましょう。
 
この①の枠は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;”>

&nbsp;

&nbsp;

</div>

手順
  1. 枠の中の<div style=から最後の<div>までコピーします。
  2. テキストモードにしてペーストします。テキストモード
  3. ビジュアルモードにするか、プレビューにするかして、ちゃんと囲み枠ができているか確認します。
  4. 下図を参考にして、4つの色を変更します。#と6字を選んだ色に変更します。
    ●①タブ背景色
    ●②タイトル文字色(例は白です)
    ●③囲まれた背景色
    ●④囲み枠線の色
  5. ビジュアルモードに変更して、枠の中に文章を書きます。
  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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

手順
  1. 枠の中の<div styleからdiv>までコピーします。
  2. テキストモードにして、ペーストします。
  3. 先ほどと同じ様に変えたい色を変更します。①と同じ色順です。
  4. ビジュアルモードにして、枠内に文字を入力します。
  5. 見出しタイトルも変更します。ビジュアルモードでもOK

最後に

いかがでしたか?自分の好きな配色を何通りか作っておくと、使う時に考えないでいいので、色々な色で試して、どこかにコピーしておきましょう。私は、長いけどユーザー辞書に登録しています。

コメント

タイトルとURLをコピーしました