囲み枠(ボックス)で気に入ったデザインを発見！
そこまでは良いとして…
「で、これどうやったら使えるの？」となる人も多いと思います。
なので囲み枠(ボックス)をブログで使用できる状態にするまでの流れを書いてみました。
囲み枠(ボックス)を使う方法
先に要点だけ説明しておきますね。
囲み枠(ボックス)を使うには、2つの工程が必要です。
- 使用したい囲み枠(ボックス)のCSSを、自分のサイトのCSSに貼り付け
- 文章を指定の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に貼り付けて保存します。
これでサイトに、囲み枠デザインの設定が適用された状態になります。
テーマを直接編集すると、テーマを更新したとき消えてしまうので、追加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を貼り付ければOKです。
「このブロックには、想定されていないか無効なコンテンツがふくまれています。」と表示されますが大丈夫です。
右にある点をクリックし、「HTMLに変換」をクリックしてください。
これでプレビューを見れば、適用されているはずです。
またブロックで「カスタム HTML」を追加しても同じことができるので、好きな方を使いましょう。
コメント