ブログ アクセスアップ アメブロ~Twitter やり方&方法 ホーム » スポンサー広告 » ブログ アクセスアップ いろんな やり方&方法  »画像に枠をはめる HTMLでやるよ~ CSSは、ググってね

スポンサーサイト  

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




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

category: スポンサー広告

tb: --   cm: --

画像に枠をはめる HTMLでやるよ~ CSSは、ググってね  

アメブロアクセスアップ&ランキングアップ

ブログアクセスアップのためには、ブログ記事にアイキャッチのために

画像YouTubeなどの動画を貼り付けて訪問者が

ブログ記事に引き込まれる仕掛けを心がけよう。

アメブロアクセスアップも画像、動画があるかないかで

大違い。ブログ記事が文字ばっかりだと、ちょっと

つらいよ~



 HOW TO DO 方法&やり方  
 画像に枠をはめる 基本的な考え方 





ブログに挿入した画像だけだと

寂しいので

挿入した画像に枠をはめるやり方を説明するね


ブログで画像をはめ込んだことのある人は

こんな、imgタグを見たことがあるんじゃないでしょうか?

<img src="http://blog-imgs-50.fc2.com/i/t/i/itigo3999/201305072332049c7.png" alt="アメブロアクセスアップ 画像の枠" border="0" width="335" height="301" />



HTMLに慣れてないと、呪文みたいだけど

分解してみるとよくわかるよ。

<img・・画像の内容のはじまり

src  ・・画像のURL

art ・・画像の名前

border ・・枠の大きさ(px単位)

width ・・画像の横幅(px単位)

height ・・画像の縦幅(px単位)

/> ・・画像の内容の終わり

画像タグ内には、画像のURL,画像の名前、枠の大きさ、

画像の横幅、画像の縦幅なんかが入っています。


ちょっと、練習 アクセスアップのためにね

ブログにYouTubeをはめ込んだけど

大きすぎて入らないとか

小さいから大きくしたい・・なんてときに

上の数字をかえて、お好きな大きさにかえてみてください。

やってみようか?


これが、YouTubeをブログに埋め込むコードです  
          ↓

<iframe width="640" height="360" src="http://www.youtube.com/embed/Zm1Jk0tp6iQ?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>          



上のやつの大きさ(赤い数字が、幅、高さ・・つまりwidthとheight)
    ↓


上の数字をこのようにかえると
    ↓
<iframe width="200" height="180" src="http://www.youtube.com/embed/LIAvpEYjUdk?feature=player_detailpage" frameborder="0" allowfullscreen>この大きさになる(赤い数字が、高さ、幅)
    ↓


 
半角英数字でね←注意

画像に枠をつけてみよう

<img src="http://blog-imgs-50.fc2.com/i/t/i/itigo3999/201305072332049c7.png" alt="11" border="0" width="335" height="301" />


最初のタグの"height301"のあとに

半角を開けて

style="border:solid 1px #909090; padding:1px;" を

つけてみてください。

<img src="http://blog-imgs-50.fc2.com/i/t/i/itigo3999/201305072332049c7.png" alt="11" border="0" width="335" height="301" style="border:solid 1px #909090; padding:1px;" />



これが・・

アメブロアクセスアップ 画像に枠





こうなる

アメブロアクセスアップ 画像に枠い

枠が薄いから

もっと・・太くしてみよっか?

style="border:solid 1px #909090; padding:1px;" 

solid :1pxの1を5にかえると・・・



アメブロアクセスアップ 画像に枠

ねっ・・太くなったでしょ・・簡単

今度は、枠線の色をかえてみよっか?

#909090 が色だから

#008000 にかえてみよっか #008000は緑ね

アメブロアクセスアップ 画像に枠け

ねっ・・枠線が緑になったでしょ。

今度は枠線のパターンを変えてみよっか

いままでのが solid なんです。

style="border:solid 1px #909090; padding:1px;" 

double がこれ 分かりやすくするために枠線を10pxにかえるね
 
 style="border:double 10px #909090; padding:1px;"    


アメブロアクセスアップ 画像に枠

dotted がこれ
     ↓

アメブロアクセスアップ 画像に枠1

groove がこれ
     ↓

アメブロアクセスアップ 画像に枠2

ridge がこれ
     ↓

アメブロアクセスアップ 画像に枠

inset がこれ
     ↓

アメブロアクセスアップ 画像に枠3

outset がこれ
     ↓

アメブロアクセスアップ 画像に枠4

dashed がこれ
     ↓

アメブロアクセスアップ 画像に枠5

いろんなパターンを試してみてね。

画像と枠との幅は

style="border:solid 1px #909090; padding:1px;" 

padding:1px で均一

これを上下左右の画像からの距離を変えるのは

padding: のあとの数値は、上、右、下、左の順で反映されるので

padding:1px 10px 30px 40px ってするとこうなります
                  ↓

アメブロアクセスアップ 画像に枠6

数字が大きくなるにつれて、画像から枠線が離れます。

ポラロイド写真みたいにしてみると・・

padding:10px 10px 80px 10px ってやってみるね
                    ↓

アメブロアクセスアップ 画像に枠7

ねっ・・画像の下におおきな余白が出来たでしょ?


あっ・・

色のパターンをいろいろ変えたい人は

WEB色見本 原色大辞典を参考にしてね
         ↓

原色大辞典のサイトにジャンプ



FC2の画像で、説明したので、

アメブロでやりやすいように、分かりやすく説明するね



style="border-style:solid;border-color: #000000 ;border-width:1px"

これを<imgのあとに、半角スペースをおいて、入れてください。

アメブロで、画像を貼り付けて、通常表示から、HTML表示にかえると

<a href="http://stat.ameba.jp/user_images/20130902/10/itigo-whatsup3/83/9c/j/o0200020012670102220.jpg"><img style="border: currentColor; width: 200px; height: 200px;" alt="画像 枠" src="http://stat.ameba.jp/user_images/20130902/10/itigo-whatsup3/83/9c/j/o0200020012670102220.jpg" ratio="1"></a> <br>
 

  ↑
これが、画像がHTMLであらわされたもの

赤い<imgのあとに、半角開けて、コピペするだけ~

枠の種類を変えたい場合は、

style="border-style:solid;border-color:black;border-width:1px"
赤くなった、solid を上記の枠線の種類に置き換えてください。

枠線の太さを変えたい場合は、

style="border-style:solid;border-color:black;border-width:1px"

1pxの 1を大きくすれば、太くなります。

枠の色を変えたい場合は、

style="border-style:solid;border-color: #000000 ;border-width:1px"

#000000が色になりますので、お好きな色に変えてください。

アメブロで、ブログ記事に貼り付けた画像に、枠をつけて

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




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

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

thread: アクセスアップ

janre: アフィリエイト

tb: 0   cm: 0

コメント

コメントの投稿

Secret

トラックバック

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

サイトマップ

カテゴリ

リンク

▲ Pagetop

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