2020/08/13 (更新日: 2020/08/14)

【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>

画面表示

---

---

• facebook
• Tweet
• hatebu
• Share
• Read Later