【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>説明1|説明説明説明説明説明説明</li>
<li>説明2|説明説明説明説明説明説明</li>
<li>説明3|説明説明説明説明説明説明</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>
画面表示
記事の説明記事の説明記事の説明記事の説明
記事の説明記事の説明記事の説明記事の説明
記事の説明記事の説明記事の説明記事の説明