「2012年2月」のアーカイブ

こんにちは。

ぜんです。

前回は画像のサイズを変更する方法をお伝えしました。

今日は少し発展して

画像の横に文字を書く方法です。回り込みとも言います。

例えば、こんな感じです。

　　早く回り込み教えて

 

 

　

 

 

 

 

 

普通の画像を挿入しただけだと

画像の上か下にしか文字が書けません。

ですがタグを記述することで画像の横に文字を書く事ができます。

では今日もいってみましょう！

 

 

 

画像の横に文字を書くには

画像のタグのところに　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点ほどお伝えします。

１　商品の説明をするときに使える

 

画像の横に文字を書くことで

商品の説明がし易くなります。

 

 

例

  

 　　ブログとメルマガを使ったアフィリエイト教材。
　　
　　これがアンリミテッドアフィリエイトです。
　　

 

 

 

このように商品の横に文字を書くと

商品の簡単な説明ができて便利です。

 

 

もう一つのことは

実例を先に見てもらいましょう。

 

では、どうぞ。

 

 

 

ねぇねぇ～

回り込みを使うメリットって何なの？

 

 

 

 

 

　　こんな風に

     対話形式にできることだよ。

　　対話形式にすると読み易くなる場合もあるよ。

 

 

 

 

　　　画像って難しい時もあるけど

　　　うまく使えたら面白いね～。

 

 

 

 

 

 

そうそう。
文字だけだと読むのがしんどいけど

画像があると雰囲気も変わって
読むのが楽しくなることもあるよ。

 

 

 

 

２　対話形式にすることができる

 

はい。回り込みを使うと

こんな風に対話形式にすることができます。

 

キャラクターを使って

立場別に対話形式にすることで

説明しやすいこともありますので、

機会があれば使って見てください。

 

 

 

では長くなりましたが本日のまとめ

 

画像の横に文字を書くには

img タグ　のところに　　align=”        ” を入れ

left     right     top    middle    bottom　を記述する。

 

 

画像の回り込みをすることで

商品説明や対話形式に使うことができる。

 

 

 

いつもと記事の雰囲気が

変わりましたが大丈夫ですかね？

 

ちょっと不安ですが、、、。

 

 

 

本日もご訪問ありがとうございました～。

タグ

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%>

 

 

まとめ

 

１　画像のタテヨコの比を変えたい場合

　width　height を変更する

２　画像のタテヨコを同じ比率で表示したい場合

　
   width 　height に　％で大きさを指定する。

 

 

 

 

 

本日もご訪問ありがとうございました～。

タグ

html、サイズ、タグ、画像

こんにちは。

 

ぜんです。

 

今日はですね、

文字の色を変える方法について

お伝えします。

 

 

では今日もいってみましょう。

 

 

 

文字の色を変える方法

 

 

文字の色を変えるには

下記の黄色の部分をいろいろ変えてみてください。

 

１　<font color="色番号もしくは色名称">色を変える文字</font>

 

２　<span style="color:色番号もしくは色名称">色を変える文字</span>

 

 

１，２の形式があります。

 

 

例

色名称で変えてみます。

 

１　赤色　<font color="red">色を変える文字</font>　　　　　　　　　　

 

色を変える文字

 

色番号で変えてみます。

 

２　青色　<span style="color:#0000ff">色を変える文字</span>　　

 

色を変える文字

 

 

htmlでは１６の基本的な色を次のように定義しています。

 

 

色名称	色番号	色
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などの無料のツールやソフトで色番号を取得できます。

 

 

色の使い方

 

文字の色を変える方法がわかったなら

あとは実際に使ってみて

見栄えが良くなるようにしていきましょう。

 

 

基本的な使い方

 

基本的な使い方としましては

あまりたくさんの色を使いすぎないということです。

いろんな色があり過ぎると訪問者さんの目も疲れますし

どの色を見ていいのかわからなくなります。

 

 

 

一般的に

 

文字は黒

リンクには青

強調したいところは赤

 

がいいと思います。

 

 

緑色の文字も比較的見やすいので

赤文字と違ったニュアンスを表現したいならば

使ってみてもいいかもしれません。

 

 

見やすくする使い方

 

１　　赤文字は普通に使うより

　　　

<b>や<strong>などの強調タグを使うとくっきりして見やすいです。

そのまま普通の赤

 

<b><span style="color:red;">強調した赤色</span></b>

 

強調した赤色

 

 

２　　また背景色を黄色にするのも効果的です。

 

背景色を黄色にする

 

文字色のタグの前に　

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、タグ、文字の色

こんばんは。

 

ぜんです。

今日はですね、

文字の大きさを変える方法について

書いていきたいと思います。

では今日もいってみましょう。

 

 

文字の大きさの変え方ですが

調べてみると結構あります。

 

１　アルファベットを使って変える

２　数字を使って変える

３　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　文字サイズ

2　文字サイズ

3　文字サイズ

4　文字サイズ

5　文字サイズ

6　文字サイズ

7　文字サイズ

 

 

 

px 単位を使う

 

 

 

px 　ピクセルという単位を使っても

文字の大きを変えることができます。

 

<span style="font-size:16px;">文字サイズ</span>

 

px　の前の黄色いところに数字を入れてみましょう。

 

10 文字サイズ

11 文字サイズ

12 文字サイズ

14 文字サイズ

16 文字サイズ

32 文字サイズ

 

 

 

こんな感じで

文字の大きさを変えるというだけでも

いろんなやり方があります。

 

他にもあるようですが

ややこしくなってもいけないので

簡単に３つにまとめてみました。

 

 

テキストエディタ等、便利なものがあるので

頻繁には使わないかと思いますが、

 

ブログテンプレートの編集とかには

必要になってくるので

こんなやり方もあるんだと

知っておくといいと思います。

 

 

 

本日もご訪問ありがとうございました～。

 

 

 

 

 

タグ

html、タグ、文字の大きさ