【かわいい】ポイントマーク付きボックスを作ろう!【Manablog Copy】
これを目標にします^ ^
ポイント
『ポイントマーク付きのボックス』を作ろう!
ぜひお試しください〜♪
記事を書いていて、もっと記事を装飾したいな〜って思うことはないですか?
Manablog Copyはシンプルで使いやすいのですが、装飾に関しては少し少ないですよね。ぜひこの記事を参考に、色々な装飾を織り交ぜながら、一緒にブログライフを楽しんでいきましょう♪
スポンサードサーチ
事前の準備

それでは早速一緒に作っていきましょう!
テーマエディター「style.CSS」の編集
①外観→
②テーマエディター→
③style.css
④style.cssに「下記のコード」を、一番下に「コピー&ペースト」
②テーマエディター→
③style.css
④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;
}
記事への挿入方法

①テキストエディタ ②下記のコードをコピー&ペースト ③3行目タイトル、5・6行目テキスト部分を編集
<div class="memo">
<div class="memo-title">
ポイント
</div>
<p><span class="bold">『ポイントマーク付きのボックス』を作ろう!</span><br>
ぜひ試してみてください。</p>
以上です^ ^
↓ 完成 ↓
ポイント
『ポイントマーク付きのボックス』を作ろう!
ぜひお試しください〜♪
まずはやってみましょう!
【かわいい】ポイントマーク付きボックスを作ろう!【Manablog Copy】ということでお伝えしてきましたが、いかがでしょうか?できましたか?
これを読んで少しでも理解できたなら、あとは実践あるのみです。サイト設計は80点が取れれば十分です。内容が一番重要!
やりながら、自分のやり方を作っていけば大丈夫です。少しずつで良いですので、一歩ずつ前進していきましょう!
それでは、次の記事でお待ちしています^ ^
参考サイト:
【Manablog Copy】マナブログコピーでポイントマーク付き/注意マーク付きのボックスを作る方法
いつもありがとうございます♪
人気記事【資産運用】インデックス投資家が老後も失敗しない5つの理由を解説!
人気記事【結論】小金持ちになる方法は「毎月10万円を、年利5%で23年間運用」すること!