【Manablog Copy】マナブログコピーでポイントマーク付き/注意マーク付きのボックスを作る方法

こんにちは!サラファイです。
皆さんはブログを書いている時に「ポイントを強調したい!」「注意を目立たせたい!」と思ったことはありませんか?
この記事ではマナブログコピーで「ポイントマーク」や「注意マーク」が付いたボックスを作る方法を説明します。
ポイント
説明文
動作環境 Manablog Copy Ver3.0
事前の準備 | 追加CSSへの登録
追加CSSに下記のCSS(ソースコード)を張り付けてください。
※テーマエディタでstyle.cssに追記してもらう方法でもOKです。
CSS
.memo {
background: #fff7d9;
color: #545454;
margin-bottom: 1.5em;
margin-left: 5%;
margin-right: 5%;
padding: 1em;
}
.memo-title {
content: "\f303";
color: #ff6600;
margin-left: 0.5em;
margin-bottom: 0.5em;
margin-top: 0px;
text-align: left;
font-size: 1.2em;
font-weight: bold;
}
.memo-title:before {
content: "\f040";
background: #ff6600;
color: #fff;
margin: 0 0.2em 0.2em 0;
display: inline-block;
text-align: center;
vertical-align: middle;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
font-family: FontAwesome;
font-weight: normal;
}
.memo p {
margin: 0 0 5px;
coloer: #333333;
}
記事の書き方
記事を書くときは、下記に示すHTML(ソースコード)をカスタムHTMLブロックにコピーしてください。
ポイントを目立たせるボックス
HTML
<div class="memo">
<div class="memo-title">
ポイント
</div>
<p>ここに書いた内容がボックスに表示されます。<br>
お試しください。</p>
</div>
画面表示
ポイント
ここに書いた内容がボックスに表示されます。
お試しください。
注意を目立たせるボックス
HTML
<div class="memo">
<div class="memo-title">
注意
</div>
<p>ここに書いた内容がボックスに表示されます。<br>
お試しください。</p>
</div>
画面表示
注意
ここに書いた内容がボックスに表示されます。
お試しください。