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

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

こんにちは！サラファイです。

この記事ではマナブログコピーで下記のような「タイトル付きボックス」を作る方法を説明します。

動作環境 Manablog Copy Ver3.0

---

---

事前の準備 | 追加CSSへの登録

追加CSSに下記のCSS(ソースコード)を張り付けてください。
※テーマエディタでstyle.cssに追記してもらう方法でもOKです。

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;
}

記事の書き方

記事を書くときは、下記に示すHTML(ソースコード)をカスタムHTMLブロックにコピーしてください。

タイトル付きボックス1

HTML

<div class="titlebox" title="タイトル">
説明文説明文説明文説明文説明文説明文説明文説明文
</div>

画面表示

タイトル付きボックス2(テキスト型)

HTML

<div class="titlebox2">
<div class="titlebox2-title">
タイトル
</div>
<div class="titlebox2-content">
説明文説明文説明文説明文説明文説明文説明文説明文
</div>
</div>

画面表示

タイトル付きボックス2(リスト型)

HTML

<div class="titlebox2">
<div class="titlebox2-title">
タイトル
</div>
<div class="titlebox2-content">
<li>説明１｜説明説明説明説明説明説明</li>
<li>説明２｜説明説明説明説明説明説明</li>
<li>説明３｜説明説明説明説明説明説明</li>
</div>
</div>

画面表示

あわせて読みたいボックス

HTML

<div class="titlebox" title="あわせて読みたい">
<div class="article-title">
<a href="https://happy-fire.com/" style="color:black;">タイトル</a>
</div>
記事の説明記事の説明記事の説明記事の説明<br>
記事の説明記事の説明記事の説明記事の説明
</div>

画面表示

---

---

• facebook
• Tweet
• hatebu
• Share
• Read Later