人気ブログランキングの応援
をして戴けると励みになります。
ブログの記事を作成しながら、
文字を枠で囲みたいってことありませんか?
アメブロでは、記事の投稿画面の書式では
文字を枠で囲むことはできません。
それでは、文字を枠で囲むことはできないのかというと
ある方法を使用すると可能になります。
今回は、その方法を説明していきます。

[入力例]
<blockquote>ブログ記事を枠で囲むサンプル1</blockquote>
(注意)下記のCSSを設定しなくても、上記の入力のみでも枠で囲めますが、
その場合は、文字の色は黒、囲み枠は薄い灰色の点線で表示されます。
[CSS]
blockquote{
background-color:#ffffff;
border-style:dotted;
border-width:2px;
border-color:gray;
font-size: 14px;
color:red;
margin:10px 10px 5px 10px;
padding:10px 10px 10px 10px;
}
[ブログでの表示]
例えば、上記のように入力すると、
ブログでは、下記のように表示されます。


[入力例]
<div style="border: 2px dotted gray;margin:10px 10px 5px 10px;padding:10px
10px 10px 10px;">ブログ記事を枠で囲むサンプル2</div>
[ブログでの表示]
ブログ記事を枠で囲むサンプル2

[入力例]
<div style="border: 1px solid gray;margin:10px 10px 5px 10px;padding:10px 10px 10px 10px;">ブログ記事を枠で囲むサンプル3</div>
[ブログでの表示]
ブログ記事を枠で囲むサンプル3

[入力例]
<div style="border: 2px dotted gray;margin:10px 10px 5px 10px;padding:10px 10px 10px 10px;height:20px;width:250px;background:#ffffff;">ブログ記事を枠で囲むサンプル4</div>
[ブログでの表示]
ブログ記事を枠で囲むサンプル4

[入力例]
<div class="waku">ブログ記事を枠で囲むサンプル5</div>
[CSS]
.waku{
border: 1px solid #0747b2;
padding: 5px 5px 5px 5px;
background: #ffffff;
}
[ブログでの表示]
ブログ記事を枠で囲むサンプル5

[入力例]
<span style="border: 2px dotted red;">ブログ記事を枠で囲むサンプル6</span>の場合です。
[ブログでの表示]
ブログ記事を枠で囲むサンプル6の場合です。
※線の種類は、いろいろありますが、
一般的には次のようなものがあります。
solid・・・実線
dotted・・・丸い点線
dashed・・・四角い点線
double・・・二重線
今回は、以上です。
最後まで読んでいただき、
ありがとうございました。
少しでもお役に立ちましたら、
応援お願いします!!
