KAKI blog Written by KAKI

【おしゃれ】タイトル付きボックスを作ろう!【Manablog Copy】

ブログ運用

これを目標にします^ ^

『タイトル付きのボックス』を作ろう!

記事を書いていて、もっと記事を装飾したいな〜って思うことはないですか?Manablog Copyはシンプルで使いやすいのですが、装飾に関しては少し少ないです。ぜひこの記事を参考に、ブログライフを楽しんでください♪

スポンサードサーチ

事前の準備

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

テーマエディター「style.CSS」の編集

①外観→
②テーマエディター→
③style.css
④style.cssに「下記のコード」を、一番下に「コピー&ペースト」
.titlebox {
	background: #fff;
	margin-top: 14px;
	margin-bottom: 14px;
	margin-left: 5%;
	margin-right: 5%;
	padding-top: 0px;
	padding: 33px 30px 25px 30px;
	text-align: left;
	position: relative;
	box-sizing: border-box;
	border: 3px solid #6090b6;
	font-size: 18px;
}
 
.titlebox:before {
	content: attr(title);
	display: inline-block;
	background: #6090b6;
	color: #ffffff;
	padding: 8px 15px;
	position: absolute;
	top: -17px;
	left: 16px;
	box-sizing: border-box;
	line-height: 1;
	font-weight: bold;
	border-radius: 16px;
	font-size: 16px;
}

.titlebox2 {
	margin: 2em 0;
	border: solid 3px #6090b6;
	border-radius: 8px;
	text-align: left;
	margin-left: 5%;
	margin-right: 5%;
}

.titlebox2-title {
	background: #fff;
	color: #6090b6;
	display: inline-block;
	position: relative;
	top: -14px;
	left: 10px;
	padding: 0 9px;
	margin: 0 7px;
	font-size: 19px;
	font-weight: bold;
	line-height: 1.4;
}

.titlebox2-title:before {
	content: "\f02e";
	padding-right: 4px;
	font-family: FontAwesome;
}

.titlebox2-content {
	padding: 0 1.5em 24px;
}

.article-title {
	font-size: 22px;
	font-weight: bold;
}

記事への挿入方法

①テキストエディタ
②下記のコードをコピー&ペースト
③タイトル、テキスト部分を編集
以上です^ ^
<div class="titlebox" title="タイトル">
<span class="bold">『タイトル付きのボックス』を作ろう!</span>
</div>

        ↓ 完成 ↓

『タイトル付きのボックス』を作ろう!

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

【おしゃれ】タイトル付きボックスを作ろう!【Manablog Copy】ということでお伝えしてきましたが、わかっていただけましたでしょうか?

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

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

参考記事:
【Manablog Copy】マナブログコピーでタイトル付きのボックスを作る方法

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

人気記事【結論】小金持ちになる方法は「毎月10万円を、年利5%で23年間運用」すること!