【ブログ】シケポンの囲み枠のイメージとサンプルと備忘録

ベネチア お小遣いブロガーQA

ベネチア

 前々から、「ブログ記事を囲み枠で修飾したいなぁ」と思ってました。そこで今回は、僕(シケポン)がよく使う、囲み枠をまとめてみます。

 

 

備忘録

 これは僕、シケポンの囲み枠のサンプル、および備忘録です。

(参考になるなら、ご自由に使ってください)

 

 

 -PR-

 

 

囲み枠の参考記事

 囲み枠について、ネット検索していたら、便利でわかりやすい記事を見つけました。それがこちらです。

 

参考記事
 → 【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

 

 ブログ界では有名な「サルワカ」さんの記事です。たいへん参考になりました。ありがとうございます。 m(_ _)m

 

 

使い方

 CSSのコードをCSSに追記し、ブログ記事でHTMLのタグを使用すれば、囲み枠の使用が可能です。

(もしこれでわからなければ、webやcssでググって勉強してください)

(なお、知っていると思いますがchildのcssに追記してください。)

 

 

囲み枠のサンプル

以下が、僕がよく使う囲み枠のサンプルです。

(コピペで使えるので、気に入れば使ってね)

 

 

その1/ 「合わせて読みたい」用のボックス(囲み枠)

更新日: 19/04/29

コード例)

<HTML>

<div class=”box01″>
<span class=”box-title”>合わせて読みたい</span>
<p>ここに文章</p>
</div>

 

<CSS>

.box01 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 2px #ff7f50;
}
.box01 .box-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #ff7f50;
color: #fffaf0;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.box01 p {
margin: 0;
padding: 0;
}

 

イメージ例)
囲み枠のイメージはこんな感じです。

 

合わせて読みたい

記事下の「合わせて読みたい」をアピールするときによいかな

 

 

その2/ 「関連記事」用のボックス(囲み枠)

更新日: 19/04/29

コード例)

<HTML>

<div class=”box02″>
<span class=”box-title”>関連記事</span>
<p>ここに文章</p>
</div>

<CSS>

.box02 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 2px #62c1ce;
}
.box02 .box-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #62c1ce;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.box02 p {
margin: 0;
padding: 0;
}

 

イメージ例)
囲み枠のイメージはこんな感じです。

 

関連記事

記事中の「関連記事」でリンクを強調したいときによいかな

 

 

その3/ 「コード記述」用のボックス(囲み枠)

更新日: 19/04/29

コード例)

<HTML>

<div class=”box03″>
<p>ここに文章</p>
</div>

<CSS>

.box03{
padding: 0.5em 1em;
margin: 1em 0;
background: #f4f4f4;
border-left: solid 6px #5bb7ae;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
}
.box03 p {
margin: 0;
padding: 0;
}

 

イメージ例)
囲み枠のイメージはこんな感じです。

 

たまにコードをサンプルとして記事に記述するときよいかな

 

 

その4/ 「ポイント」用のボックス(囲み枠)

更新日: 19/04/29

コード例)

<HTML>

<div class=”box04″>
<span class=”box-title”>ポイント</span>
<p>ここに文章</p>
</div>

<CSS>

.box04 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 1px #95ccff;
border-radius: 8px;
}
.box04 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
color: #95ccff;
font-weight: bold;
}
.box04 p {
margin: 0;
padding: 0;
}

 

イメージ例)
囲み枠のイメージはこんな感じです。

 
ポイント

記事中でポイントを強調したいときによいかな

 

 

その5/ 破線のボックス(囲み枠)

更新日: 19/04/29

コード例)

<HTML>

<div class=”box05″>
<p>ここに文章</p>
</div>

<CSS>

.box05 {
padding: 0.5em 1em;
margin: 2em 0;
background: #f0f7ff;
border: dashed 1px #5b8bd0;/*点線*/
}
.box05 p {
margin: 0;
padding: 0;
}

 

イメージ例)
囲み枠のイメージはこんな感じです。

記事中に文章を目立たせたいときによいかな

 

 

その6/ 実線[黒]のボックス(囲み枠)

更新日: 19/04/29

コード例)

<HTML>

<div class=”box06″>
<p>ここに文章</p>
</div>

<CSS>

.box06 {
padding: 0.5em 1em;
margin: 2em 0;
font-weight: bold;
border: solid 0.5px #000000;
}
.box06 p {
margin: 0;
padding: 0;
}

 

イメージ例)
囲み枠のイメージはこんな感じです。

シンプルに囲み枠を使って文章を強調したいときによいかな

 

 

 

自分がよく使う囲み枠をまとめてみた

 まあ、自分がよく使う、囲み枠をまとめてみました。今後のブログ作業がしやすくするためにね。

 

 

まとめ

 これは単なる僕、シケポンの囲み枠の備忘録記事です。PC上よりネット上にアップしたほうが利便性がよいと思い、囲み枠のまとめ記事をアップしました。

 

 

 

 

●最後まで読んでいただきありがとうございました。

 

おしまい

 

タイトルとURLをコピーしました