画像の横に文字を書く方法(回り込み)
こんにちは。
ぜんです。
前回は画像のサイズを変更する方法をお伝えしました。
今日は少し発展して
画像の横に文字を書く方法です。回り込みとも言います。
例えば、こんな感じです。
早く回り込み教えて
普通の画像を挿入しただけだと
画像の上か下にしか文字が書けません。
ですがタグを記述することで画像の横に文字を書く事ができます。
では今日もいってみましょう!
画像の横に文字を書くには
画像のタグのところに align=“ ” というタグを記述し、
黄色のところに場所を表すアルファベット指定します。
画像を左におきたい場合は left
画像を右におきたい場合は right
例
<img src=”画像” width=”サイズ” height=”サイズ” alt=”” align=”right”>
やっほ~
こんな感じです。
画像の上部、真ん中、下部に文字を書く場合
画像の横でさらに
その画像の上から、
その画像の真ん中から
その画像の下部に文字を書く場合には
alingh=” “ のところに top middle bottom と記述します。
例 画像の上部から文字を書く
<img src=”画像” width=”サイズ” height=”サイズ” alt=”” align=”top”>
上から~マリコ
例 画像の真ん中から文字を書く場合
<img src=”画像” width=”サイズ” height=”サイズ” alt=”” align=”middle”>
ち~ゆう
例 画像の下部に文字を書く場合
<img src=”画像” width=”サイズ” height=”サイズ” alt=”” align=”bottom”>
ち~ゆうって何(中?)
こんな感じになります。
回り込みを使うメリット
次に画像の横に文字を書くことの
メリットについて私から2点ほどお伝えします。
1 商品の説明をするときに使える
画像の横に文字を書くことで
商品の説明がし易くなります。
例
ブログとメルマガを使ったアフィリエイト教材。
これがアンリミテッドアフィリエイトです。
このように商品の横に文字を書くと
商品の簡単な説明ができて便利です。
もう一つのことは
実例を先に見てもらいましょう。
では、どうぞ。
ねぇねぇ~
回り込みを使うメリットって何なの?
こんな風に
対話形式にできることだよ。
対話形式にすると読み易くなる場合もあるよ。
画像って難しい時もあるけど
うまく使えたら面白いね~。
そうそう。
文字だけだと読むのがしんどいけど
画像があると雰囲気も変わって
読むのが楽しくなることもあるよ。
2 対話形式にすることができる
はい。回り込みを使うと
こんな風に対話形式にすることができます。
キャラクターを使って
立場別に対話形式にすることで
説明しやすいこともありますので、
機会があれば使って見てください。
では長くなりましたが本日のまとめ
画像の横に文字を書くには
img タグ のところに align=” ” を入れ
left right top middle bottom を記述する。
画像の回り込みをすることで
商品説明や対話形式に使うことができる。
いつもと記事の雰囲気が
変わりましたが大丈夫ですかね?
ちょっと不安ですが、、、。
本日もご訪問ありがとうございました~。
タグ
html、タグ、回り込み、画像2012年2月19日 | コメント/トラックバック(6)|
カテゴリー:html タグ
画像のサイズを変更する方法
どうも、こんにちは。 ぜんです。
もうね最近寒いですね。
冷えび~えです。
html タグの項目もう少し続きます。
さて今日は画像でいきますよ~。
今日は画像の大きさの変更方法についてです。
なんとなく適当にやっておけばどうにかなりそうなことですが、
基本的なことをしっかり身に付けることこそ大切だと思い、
今回お伝えしようと思います。
なにかしらつまづく原因は 基礎的知識や理解が
不足していることが多いですからね。
では本日のゲストの登場していただきましょう。
画像を使うには次の img タグ を使います。
<img src="画像URL" />
<img src=""/>の ” と " の間に
http://~から始まる画像URLを入れます。
画像のサイズの変更の仕方
では次に画像のサイズの変更の仕方ですが、
サイズを指定するときには次のように width と height を使います。
例
<img src="http://levelup-affiliate.com/wp-content/uploads/0190631.jpg"
width=180 height=120>
width は横幅 height は縦幅を表します。
ここの数字を変えることで縦長にしたり横長にすることができます。
タテヨコを同じ比率で拡大、縮小したい場合には
%表示を使います。(ブラウザに対する比率を表します)
<img src="http://levelup-affiliate.com/wp-content/uploads/0190631.jpg"
width=50% height=50%>
まとめ
1 画像のタテヨコの比を変えたい場合
width height を変更する
2 画像のタテヨコを同じ比率で表示したい場合
width height に %で大きさを指定する。
本日もご訪問ありがとうございました~。
タグ
html、サイズ、タグ、画像2012年2月13日 | コメント/トラックバック(4)|
カテゴリー:html タグ
文字の色を変える方法
こんにちは。
ぜんです。
今日はですね、
文字の色を変える方法について
お伝えします。
では今日もいってみましょう。
文字の色を変える方法
文字の色を変えるには
下記の黄色の部分をいろいろ変えてみてください。
1 <font color="色番号もしくは色名称">色を変える文字</font>
2 <span style="color:色番号もしくは色名称">色を変える文字</span>
1,2の形式があります。
例
色名称で変えてみます。
1 赤色 <font color="red">色を変える文字</font>
色を変える文字
色番号で変えてみます。
2 青色 <span style="color:#0000ff">色を変える文字</span>
色を変える文字
htmlでは16の基本的な色を次のように定義しています。
色名称 | 色番号 | 色 |
white | #ffffff | white #ffffff |
silver | #c0c0c0 | silver #c0c0c0 |
gray | #808080 | gray #808080 |
black | #000000 | black #000000 |
red | #ff0000 | red #ff0000 |
maroon | #800000 | maroon #800000 |
yellow | #ffff00 | yellow #ffff00 |
olive | 808000 | olive 808000 |
lime | #00ff00 | lime #00ff00 |
green | #008000 | green #008000 |
aqua | #00ffff | aqua #00ffff |
teal | #008080 | teal #008080 |
blue | #0000ff |
blue #0000ff |
navy | #000080 | navy #000080 |
fuchsia | #ff00ff | fuchsia #ff00ff |
purple | #800080 | purple #800080 |
このような代表的な色は英語もしくは#色番号で表すことができます。
他の色はGIMPなどの無料のツールやソフトで色番号を取得できます。
色の使い方
文字の色を変える方法がわかったなら
あとは実際に使ってみて
見栄えが良くなるようにしていきましょう。
基本的な使い方
基本的な使い方としましては
あまりたくさんの色を使いすぎないということです。
いろんな色があり過ぎると訪問者さんの目も疲れますし
どの色を見ていいのかわからなくなります。
一般的に
文字は黒
リンクには青
強調したいところは赤
がいいと思います。
緑色の文字も比較的見やすいので
赤文字と違ったニュアンスを表現したいならば
使ってみてもいいかもしれません。
見やすくする使い方
1 赤文字は普通に使うより
<b>や<strong>などの強調タグを使うとくっきりして見やすいです。
そのまま普通の赤
<b><span style="color:red;">強調した赤色</span></b>
強調した赤色
2 また背景色を黄色にするのも効果的です。
背景色を黄色にする
文字色のタグの前に
background-color:色番号を入れると背景色を変えることができます。
<span style="background-color: #ffff00"><span style="color: #000000">背景色を黄色にする</span></span>
背景色を黄色にする
強調タグは背景色のタグの前につけます。
<strong><span style="background-color: #ffff00"><span style="color: #ff0000">背景色を黄色にする</span></span></strong>
大事なところは
こんなふうに背景色を黄色にすると目立ちます。
ただ私個人的には
これもあまり使い過ぎたり
あまり大き過ぎたりしない方がいいかと思います。
この記事では説明するために
多めに使っていますが
やはり黄色は刺激が強いので
大事なところにポイントを絞って使っていきましょう。
デカ過ぎ
このように
色だけですでに強調しているのに
大きさでさらに強調すると圧が強くなるので
あまり文字サイズは大きくしない方が
良いように私は思います。
こんな感じで実際に使ってみて
訪問者さんが見やすい色の使い方を
いろいろ考えてみてください。
本日もご訪問ありがとうございました~。
タグ
html、タグ、文字の色2012年2月4日 | コメント/トラックバック(10)|
カテゴリー:html タグ
文字の大きさを変える方法
こんばんは。
ぜんです。
今日はですね、
文字の大きさを変える方法について
書いていきたいと思います。
では今日もいってみましょう。
文字の大きさの変え方ですが
調べてみると結構あります。
1 アルファベットを使って変える
2 数字を使って変える
3 px単位を使う
アルファベットを利用して変える
下記のアルファベットを利用して変えます。
FC2ブログの高機能テキストエディタなどはこの形式ですね。
medium | 標準 |
xx-large | 超特大 … 最も大きいサイズ |
x-large | 特大 |
large | 大 |
small | 小 |
x-small | 極小 |
xx-small | 超極小… 最も小さいサイズ |
<span style="font-size: large">サイズ</span>
この黄色のところに上記のアルファベットを入れます。
xx-small サイズ
x-small サイズ
small lサイズ
medium サイズ
large サイズ
x-large サイズ
xx-large サイズ
数字を使う
<font size="数値">文字サイズ</font>
数値のところに1~7の数字を入れます。
1 文字サイズ
2 文字サイズ
3 文字サイズ
4 文字サイズ
5 文字サイズ
6 文字サイズ
7 文字サイズ
px 単位を使う
px ピクセルという単位を使っても
文字の大きを変えることができます。
<span style="font-size:16px;">文字サイズ</span>
px の前の黄色いところに数字を入れてみましょう。
10 文字サイズ
11 文字サイズ
12 文字サイズ
14 文字サイズ
16 文字サイズ
32 文字サイズ
こんな感じで
文字の大きさを変えるというだけでも
いろんなやり方があります。
他にもあるようですが
ややこしくなってもいけないので
簡単に3つにまとめてみました。
テキストエディタ等、便利なものがあるので
頻繁には使わないかと思いますが、
ブログテンプレートの編集とかには
必要になってくるので
こんなやり方もあるんだと
知っておくといいと思います。
本日もご訪問ありがとうございました~。
タグ
html、タグ、文字の大きさ2012年2月1日 | コメント/トラックバック(4)|
カテゴリー:html タグ