ブログ アクセスアップ アメブロ~Twitter やり方&方法 ホーム » スポンサー広告 » ブログ アクセスアップ いろんな やり方&方法  »テキスト、文章をボックス、線で囲む やり方&方法 HTML

スポンサーサイト  

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーリンク




★ブログ アクセスアップ サイトマップTOP>>
★ブログランキング攻略 アクセスアップ&ランキングアップ|★アメブロ アクセスアップ&ランキングアップ|
★ブログ/アメブロ アクセスアップ やり方&方法|★ブログ アクセスアップ Twitter|
★ブログ アクセスアップ SEO

category: スポンサー広告

tb: --   cm: --

テキスト、文章をボックス、線で囲む やり方&方法 HTML  

ブログ アクセスアップ やり方&方法

  テキスト文章をボックス、囲む やり方方法 HTML 

こんなのよく見ないですか?

 ブログ アクセスアップ 

 やり方&方法



テキスト文章ライン囲むと目立つし、

記事の中ほどの、見出し強調したい文字文章を目立たせることが

できますね。

上のやつが・・・

<span style="border: 2px solid #4169e1"> ブログ アクセスアップ </span>


下のやつが・・・

<div style="border-style: solid ; border-width: 1px;">やり方&方法</div>


太さを変えてみる

線、ラインの太さを変えるなら、赤いところの数字を変えてあげてね

<div style="border-style: solid ; border-width: 1px;">やり方&方法</div>

5に変えると・・・太くなったでしょ?

 ブログ アクセスアップ 



を変えてみるね

 やり方&方法


border-color: #ff0000 ( red )

これを元のやつに、付け加えるんです。

赤色の#ff0000(red)が色なんでお好きな色に変えてみてください。

付け加えたのは、こんなふうになっています


線を赤に変える前が、こちら

<div style="border-style: solid ; border-width: 1px;"> やり方&方法</div>


<div style="border-style: solid ; border-width: 1px; border-color: #ff0000;"> やり方&方法</div>

ねっ・・・border-color: #ff0000;が加わっているでしょ?

いろんな色をためすなら、#ff0000が色なんで

色見本サイトでいろんな色を試してください。 色見本サイトへ>>


パターンを変えてみるね

 やり方&方法


これを破線にしてみると・・・

 やり方&方法



この線のパターンを変えるのは、border-style: solid ;

solidを・・・・dashed に変えるとできます。

こんなふうに、変わったんです

<div style="border-style: solid ; border-width: 1px;"> やり方&方法</div>

赤い文字のsolidが・・・

<div style="border-style: dashed ; border-width: 1px;"> やり方&方法</div>

dashed に変わってるでしょ?

いろんなパターンがあるから試してください。

点線  dotted

二重線 double

ridgeだとこんな感じ

 やり方&方法


余白を変えてみるねを変えるってことね

 やり方&方法

これに

padding: 20px 20px 20px 20pxを付け加えると・・

 やり方&方法


こんな感じね

<div style="border-style: solid ; border-width: 1px;padding: 20px 20px 20px 20px;"> やり方&方法</div>

赤い

padding: 20px 20px 20px 20px;を入れてあげてください。

幅の調整は・・・左から

上、右、下、左 になっていますので、お好きなように調整してください。

枠内の背景色を変えてみるね

 やり方&方法


これは、background-color: #ffff00;をくわえたものです。

#ffff00が色なんでお好きな色に変えてください。


線で囲まれた範囲を調整してみるね

 やり方&方法


ボックスが小さくなったでしょ?

width: 300px;を付け加えたものです。 300って数字が横幅の数字なので

小さくしたければ、数字を小さくしてあげてください。

こんな感じ 

<div style="border-style: solid ; border-width: 1px; width: 300px;"> やり方&方法</div>

width: 150px;にしてみると

 やり方&方法


ちょうど、イイ感じ♪


HTML5/CSS3って聞いたことある

新しくつかえるようになったんだけど・・

ちょっと、古いInternet Explorer 8などで、古いブラウザで見てる人には

見えないけど・・・

角を丸くする・・・角丸

影をつける・・・・ドロップシャドウ

なんかもできます。

角丸がこんな感じ・・

 やり方&方法


border-radius: 10px;  をくわえたものです。

がこんな感じ

 やり方&方法



box-shadow: 5px 5px 5px #fff;をくわえたものです。

なんにも、変わってヘンやんかって人は

残念ながら・・・古いやつ・・・かも。


慣れないうちは、メモ帳などに、

よく使うパターンを貼り付けておいて

使いたいときに、コピペして

あとは、微調整をする感じでやると

ブログ記事の更新作業がはかどります。

ブログ記事テキスト文章

線で囲ったり、太くしたり、パターンを変えたり

余白を調整したり、線の内側の範囲を塗りつぶしたり、

角丸にしたり、影をつけたりして


メリハリをつけて

ブログアクセスアップ

頑張ってください。
関連記事
スポンサーリンク




★ブログ アクセスアップ サイトマップTOP>>
★ブログランキング攻略 アクセスアップ&ランキングアップ|★アメブロ アクセスアップ&ランキングアップ|
★ブログ/アメブロ アクセスアップ やり方&方法|★ブログ アクセスアップ Twitter|
★ブログ アクセスアップ SEO
ブログ アクセスアップ いろんな やり方&方法 の関連記事

category: ブログ アクセスアップ いろんな やり方&方法 

tb: 0   cm: 0

コメント

コメントの投稿

Secret

トラックバック

トラックバックURL
→http://itigo3999.blog.fc2.com/tb.php/280-f75aa910
この記事にトラックバックする(FC2ブログユーザー)

サイトマップ

カテゴリ

リンク

▲ Pagetop

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。