アメブロをカスタマイズしよう!

最近、サイトの見栄えやSEO対策により、アクセスアップを図ろうとする傾向が顕著になってきました。そこで、その解決策の一つとして、アメブロのカスタマイズを研究してみようと思います。あなたのブログのご参考にしてくださいね。


テーマ:
ご訪問ありがとうございます。
人気ブログランキングの応援
をして戴けると励みになります。



ブログの記事を作成しながら、
文字を枠で囲みたいってことありませんか?



アメブロでは、記事の投稿画面の書式では
文字を枠で囲むことはできません。



それでは、文字を枠で囲むことはできないのかというと
ある方法を使用すると可能になります。



今回は、その方法を説明していきます。



1 <blockquote>タグを使用し、CSSで詳細に設定する場合

[入力例]
<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;
}

[ブログでの表示]

例えば、上記のように入力すると、
ブログでは、下記のように表示されます。

文字を点線で囲む



2 <div style></div>タグを使用し、点線の場合

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

[ブログでの表示]

ブログ記事を枠で囲むサンプル2




3 <div style></div>タグを使用し、実線の場合

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

[ブログでの表示]

ブログ記事を枠で囲むサンプル3




4 <div style></div>タグを使用し、点線で線の幅と高さを指定する場合

[入力例]
<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




5 <div class></div>タグを使用し、CSSで詳細に設定する場合

[入力例]
<div class="waku">ブログ記事を枠で囲むサンプル5</div>

[CSS]
.waku{
border: 1px solid #0747b2;
padding: 5px 5px 5px 5px;
background: #ffffff;
}

[ブログでの表示]

ブログ記事を枠で囲むサンプル5




6 <span style></span>タグを使用し、点線の場合

[入力例]
<span style="border: 2px dotted red;">ブログ記事を枠で囲むサンプル6</span>の場合です。

[ブログでの表示]

ブログ記事を枠で囲むサンプル6の場合です。



※線の種類は、いろいろありますが、
一般的には次のようなものがあります。

solid・・・実線
dotted・・・丸い点線
dashed・・・四角い点線
double・・・二重線



今回は、以上です。



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

少しでもお役に立ちましたら、
応援お願いします!!

人気ブログランキングへ
AD
いいね!した人  |  コメント(6)

[PR]気になるキーワード