Blogger:囲み枠を設定する

2020/06/27

Blogger

t f B! P L

ほかのブログを見ると、文章の一節を強調するのに「囲み枠」というのを使っています。Bloggerで同じようにするにはどうすればいいでしょうか。

管理画面から、

テーマ > カスタマイズ > 上級者向け > CSSを追加

と進み、次のCSSをコピーして貼り付けます。

.kakomi {
 margin:0.5em 0;
 padding:0.5em;
 border:1px solid #F4EFF3;
 background-color:#FAF5F9;
}

背景色はラベンダーのような色です。

記事を書くときは、まず、右上の「<>」をクリックして「HTMLビュー」にします。
上の「HTMLの書式を設定」(下図の赤枠)をまずクリックして、HTML表示を整えます。


そして、以下をコピーして貼り付けます。

<div class="kakomi">★ここに記述</div>

「★ここに記述」のところに囲み枠に入れたい文章を書きます。
改行する場合は、<br />を入れます。


こんなふうになりました。
コードはどうでしょうか。

<div class="kakomi">
p {<br />
    line-height:1.6;<br />
}
</div>

こんなのを入れてみました。



あれあれ。line-lengthの左に入れた4つ入れた半角スペースは無視されています。
半角スペース4つの代わりに、全角スペース2つ入れてみると、


と、今度はうまくいきました。
なんだか面倒ですが、場合によっては使えるかもしれません。

QooQ. Powered by Blogger.