2021/10/19 (更新日: 2021/10/22)

【かわいい】ポイントマーク付きボックスを作ろう！【Manablog Copy】

ブログ運用

これを目標にします^ ^

記事を書いていて、もっと記事を装飾したいな〜って思うことはないですか？
Manablog Copyはシンプルで使いやすいのですが、装飾に関しては少し少ないですよね。ぜひこの記事を参考に、色々な装飾を織り交ぜながら、一緒にブログライフを楽しんでいきましょう♪

事前の準備

それでは早速一緒に作っていきましょう！

テーマエディター「style.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;
}

記事への挿入方法

<div class="memo">
<div class="memo-title">
ポイント
</div>
<p><span class="bold">『ポイントマーク付きのボックス』を作ろう！</span><br>
ぜひ試してみてください。</p>

以上です^ ^

  　　　　　 ↓ 完成 ↓

 

まずはやってみましょう！

【かわいい】ポイントマーク付きボックスを作ろう！【Manablog Copy】ということでお伝えしてきましたが、いかがでしょうか？できましたか？

これを読んで少しでも理解できたなら、あとは実践あるのみです。サイト設計は８０点が取れれば十分です。内容が一番重要！
やりながら、自分のやり方を作っていけば大丈夫です。少しずつで良いですので、一歩ずつ前進していきましょう！

それでは、次の記事でお待ちしています^ ^

 

参考サイト：
【Manablog Copy】マナブログコピーでポイントマーク付き/注意マーク付きのボックスを作る方法
いつもありがとうございます♪

人気記事【資産運用】インデックス投資家が老後も失敗しない５つの理由を解説！

人気記事【結論】小金持ちになる方法は「毎月１０万円を、年利５％で２３年間運用」すること！

ブログ運営

• facebook
• Tweet
• hatebu
• LINE
• Read Later