このサイトは１ヶ月 (30日) 以上ログインされていません。 サイト管理者の方は
こちら
からログインすると、この広告を消すことができます。
×
マイページ
プロフィール
更新履歴
本棚
なりきりトーク
コメント返信
ダイレクトメッセージ
お問い合わせ
スキのコメント返信
＞夜叉たるとさん（公式サイトのinformationの枠の作り方について）
2019
05
22
19:51
ご質問ありがとうございます！
森の公式サイトでは、下記のCSSを利用して該当部分を表示しております。
※細かな設定の多いCSSになりますので、項目ごとの詳細の解説は省かせていただいております
CSS
.boxtop {
position: relative;
margin: 5px;
padding: 5px 10px;
border: solid 1px #52371d;/* 線の色 */
border-radius: 8px;
}
.boxtop .box-title {
position: relative;
display: inline-block;
top: -13px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #efe6da;/* informationの背景。背景色と同色推奨*/
color: #52371d;/* 文字の色 */
font-weight: bold;
}
.boxtop p {
margin: 0;
padding: 0;
}
HTMLタグ
<div class="boxtop"><span class="box-title">information</span><p>ここに本文</p></div>
以上になります。
また何かございましたら、お気軽にお問い合わせください！
2019/05/22 06:30
コメント返信TOP
読者登録
このサイトの読者登録を行います。
読者登録すると、このユーザーの更新履歴に新しい投稿があったとき、登録したアドレスにメールで通知が送られます。
ログインして読者登録
非会員で読者登録
＞夜叉たるとさん（公式サイトのinformationの枠の作り方について）2019052219:51
森の公式サイトでは、下記のCSSを利用して該当部分を表示しております。
※細かな設定の多いCSSになりますので、項目ごとの詳細の解説は省かせていただいております
CSS
position: relative;
margin: 5px;
padding: 5px 10px;
border: solid 1px #52371d;/* 線の色 */
border-radius: 8px;
}
.boxtop .box-title {
position: relative;
display: inline-block;
top: -13px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #efe6da;/* informationの背景。背景色と同色推奨*/
color: #52371d;/* 文字の色 */
font-weight: bold;
}
.boxtop p {
margin: 0;
padding: 0;
}
HTMLタグ
以上になります。
また何かございましたら、お気軽にお問い合わせください！
2019/05/22 06:30