【WordPress】文章に囲み枠(ブロック)をつける方法!導入から使い方までを簡潔に解説!

【WordPress】文章に囲み枠(ブロック)をつける方法!導入から使い方までを簡潔に解説! 副業

囲み枠(ボックス)で気に入ったデザインを発見!

そこまでは良いとして…

「で、これどうやったら使えるの?」となる人も多いと思います。

なので囲み枠(ボックス)をブログで使用できる状態にするまでの流れを書いてみました。

囲み枠(ボックス)を使う方法

先に要点だけ説明しておきますね。
囲み枠(ボックス)を使うには、2つの工程が必要です。

  1. 使用したい囲み枠(ボックス)のCSSを、自分のサイトのCSSに貼り付け
  2. 文章を指定のHTMLで囲む

要は
「自分のサイトに、使用したい囲み枠デザインを設定する」
「文章に囲み枠を適用させる」
という設定です。

このブログではCOCOONを使用していますので、COCOONで説明しますね。

COCOONで囲み枠(ボックス)を使う流れ

このブログで使用している囲み枠(ボックス)を例に説明していきますね。

囲み枠(ボックス)の例

  • ここに文章を入れると
  • 囲まれます

まず囲み枠(ボックス)のCSSをコピーします↓

.box1 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box1 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box1 p {
    margin: 0; 
    padding: 0;
}

最初の . や } をコピーしそこなうことが多いので注意してください。

次に 外観→カスタマイズ→追加CSS と進みます。
先ほどコピーしたCSSを、追加CSSに貼り付けて保存します。
cocoonの追加CSS
これでサイトに、囲み枠デザインの設定が適用された状態になります。
テーマを直接編集すると、テーマを更新したとき消えてしまうので、追加CSSに書き込むようにしましょう。

あとは文章を指定のHTMLで囲むだけ!
下記HTMLをコピーして、テキストを入れ替えてみてください↓

<div class="box1">
<span class="box-title">囲み枠(ボックス)の例</span>
<p>
	<ul>
		<li>ここに文章を入れると</li>
		<li>囲まれます</li>
	</ul>
</p>
</div>

もし、枠内の文章下のスペースが気になる場合は、4行目の<ul>をこちらに入れ替えてください。

<ul style="margin-bottom: 0px;">

囲み枠が反映されない場合は、追加前のCSSが読み込まれている可能性があります。
サイトのトップで良いのでアクセスして、「ctrl + F5」を押してリロードしましょう。

COCOONではこのような流れになりますが、他のテーマでもやることは同じになります。
「CSSの追加」と「指定のHTMLで文章を囲む」の2つです。

ブロックエディター(Gutenberg)で使いたいときは?

ブロックエディター(Gutenberg)を使い始めたばかりだと、最後の「HTMLを使って文章を囲む」がわかりにくいと思います。

なのでこちらも簡単に説明しておきますね。

まず適当に文字を入力してください。
上に表示されるメニューの、一番右の点をクリックします。
「HTMLとして編集」をクリックします。
ブロックをhtmlとして編集
ここに先ほどのHTMLを貼り付ければOKです。

「このブロックには、想定されていないか無効なコンテンツがふくまれています。」と表示されますが大丈夫です。

右にある点をクリックし、「HTMLに変換」をクリックしてください。
ブロックをhtmlに変換
これでプレビューを見れば、適用されているはずです。

またブロックで「カスタム HTML」を追加しても同じことができるので、好きな方を使いましょう。

コメント

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