【ブログ】たかぴろ☆の囲み枠のイメージとサンプルと備忘録

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

経歴15年の元IT技術者。

2020年で、ブログ歴7年目のたかぴろ☆です。

 

Twitterアカウント: フォロワー数は400人以上

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

 

 

備忘録

ペン立て

 これは僕、たかぴろ☆の囲み枠のサンプル、および備忘録です。

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

 

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

 

 

 

 

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

 

おしまい

 

動作が軽い! セキュリティソフトのご紹介

動作が軽く、セキュリティが強力で使いやすい、

筆者おすすめのセキュリティソフトをご紹介します。

 

なんといっても動作が軽い!

パソコン

裏で動いているセキュリティソフトの動作が遅いとイラっときませんか?

そんな不満を解消してくれるセキュリティソフトがこちら!

 

スポンサーリンク

canon(キャノン)から販売しているESETというセキュリティソフトです。
ESETの特徴として・・

・動作が軽快
・ウイルス検出率が高い
・顧客満足度が高い

 

実際に僕もESETを利用していますが、裏で動いているのがわからないくらい動作が軽いです。

しかも、ウイルス検出率が高く安全で信頼性が高いセキュリティソフトです。

 

 

ウイルスを強力にガードし、軽快なパソコンライフを過ごしたいならセキュリティソフト(ESET)は必須だね!

 

 
ESETを購入して、快適なパソコン環境でパソコンを楽しみましょう。

 

お小遣いブロガーQA
スポンサーリンク
digital01をフォローする



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