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

ベネチア

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

備忘録

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

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

 -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上よりネット上にアップしたほうが利便性がよいと思い、囲み枠のまとめ記事をアップしました。

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

おしまい

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

関連ユニット広告A



スポンサーリンク