文字や画像にリンクを貼る方法
こんにちは、ぜんです。
これまでｈｔｍｌ タグについて書いてきましたが、
やりだすとキリがないので
今回でいったん終わりにします。
今回は文字や画像にリンクを貼る方法です。
リンクを貼ることは頻繁にありますので、
基本だけはしっかりと学ぶ必要があります。
では今日もいってみましょう。
文字にリンクを貼る方法
リンクを貼るには
<a href="リンク先のＵＲＬ”＞リンクにしたい文字</a>
で記述します。
例
<a href="http://levelup-affiliate.com">私のブログのトップページ</a>
とこんな具合に <a href= の後にＵＲＬとリンクにしたい文字を続けることで
文字にリンクをつけることができます。
画像にリンクをつける方法
では次に画像にリンクをつける方法です。
画像にリンクをつける場合はもう少し複雑になります。
商品画像にアフィリエイトリンクをつけたい場合などに
この方法を使うと良いでしょう。
例をあげますが
商材のアフィリエイトリンクをつけるのも
現金ですので私の個人的に好きな
バッタちゃん画像でいきます。
下のバッタちゃん画像をクリックすると
私が以前運営してたブログにとびます。
この時のタグは
<a href="リンク先のＵＲＬ"><img src="画像のＵＲＬ”width="200"height"150"></a>
のようにリンクタグと画像タグを連続で使えばいいわけです。
補足として知っておきたいのは
altという文字です。
img の後に このaltという文字を入れることで
この画像が何を意味しているのかを表します。
<a href="http://onbu-.seesaa.net/"><img alt="オンブバッタ"
height="150" src="画像ＵＲＬ" width="200" /></a>
画像そのものは私たち人間から見ると
「それが何であるか」はわかるのですが、
検索エンジンからは
その画像が何の画像であるかは認識できません。
なので この alt の後ろに 画像の説明を入れることで
「この画像はオンブバッタの画像である」
ということを認識させることができます。
リンクを別のウインドウで開く方法
もう一つ付け加えておきたいのが
リンクを別のウインドウで開く方法です。
リンクをつけるといっても
その使い方は様々です。
リンク先へ読者さんを誘導してから
もう一度自分のブログへ帰ってきてもらいたい時などは
別のウインドウで開いてもらった方が
読者さんがわざわざ戻るボタンを押す手間が省けます。
戻るボタンを押すのは
意外に面倒だったりするんですよね。
読者さんが別窓で開いたものだと思って
ウインドウの右上の×マークを押してしまったら
「あれっ閉じちゃった」といって
もう戻って来れなくなります。
なのでリンクをつける場合には
同じページでウインドウを開くか
新しくウインドウを開くかを意識してする必要があります。
やり方としましては
target=”_blank” という文字を
リンク先のＵＲＬの後ろに追加します。
例
<a href="http://onbu-.seesaa.net" target="_blank">
<img alt="オンブバッタ" height="150" src="画像ＵＲＬ" width="200" /></a>
こうすることで別のウインドウで開くように設定できます。
ＨＴＭＬの項目を続けてきましたが
なかなか最初はやっかいで
苦手意識をもってしまうかもしれません。
ですが
自分がしたいことは何なのか、
自分がしたいことをするにはどうすればいいのか
この２点だけを考えて
検索したり調べたりしてやっていけば
しだいに身につきますので
地道にやってみてください。
あとがき
リンクと聞くと私は昔にやった「ゼルダの伝説」という
ゲームのキャラクターを思い出します。
ＣＭでこのリンクというキャラが
剣をジャンプしながら上に突いたり下に突いたり
してモンスターを倒す技が当時は斬新でして
「これやりたいな～」と思ったものでした。
その時分、近所のお兄ちゃんが私の家で
長い木の定規を持ちリンクの上突きのマネをして
蛍光灯を見事粉砕しました。
リンクをするときは慎重にしないといけませんね。
本日もご訪問ありがとうございました～。
タグ
html、リンク、文字、画像2012年3月6日 | コメント／トラックバック(2)|
カテゴリー:html タグ
画像の横に文字を書く方法（回り込み）
こんにちは。
ぜんです。
前回は画像のサイズを変更する方法をお伝えしました。
今日は少し発展して
画像の横に文字を書く方法です。回り込みとも言います。
例えば、こんな感じです。
早く回り込み教えて
普通の画像を挿入しただけだと
画像の上か下にしか文字が書けません。
ですがタグを記述することで画像の横に文字を書く事ができます。
では今日もいってみましょう！
画像の横に文字を書くには
画像のタグのところに 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、タグ、回り込み、画像2012年2月19日 | コメント／トラックバック(22)|
カテゴリー: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、サイズ、タグ、画像2012年2月13日 | コメント／トラックバック(4)|
カテゴリー: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、タグ、文字の色2012年2月4日 | コメント／トラックバック(10)|
カテゴリー: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、タグ、文字の大きさ2012年2月1日 | コメント／トラックバック(4)|
カテゴリー:html タグ
html タグ
こんにちは～。
ぜんです。
昨日はドメインを取りました。
昔はドメインを取ることも
いろいろ時間もかかって
もたついていましたが、
安くなっていたので４つほど取ってみました。
行動が遅くとも継続していけば
自然に力がついていくもんなんですよね。
では今日もいってみましょう。
今日は手短に終わりますが
html と タグについてです。
ブログやサイトを運営するにあたって
この知識はどうしても必要になってきます。
でもなんか難しい。
こう思っていませんか？
知らないことだし勉強するのがしんどいとか。
やっていくにしたがって必ず必要になる知識なので
よく使うもの必要性があるものについては
勉強しなくてはなりません。
すべて勉強するのは大変ですが
アフィリエイトブログやサイトを運営するのに
必要なものだけはしっかりと使えるようにしておきましょう。
よく使うものに関しては
何も見なくてもスラスラ記述できるようにする
ということです。
よく忘れちゃうんですよ。笑
日本語じゃないですから。
毎日使っているわけではないですから。
こうしたいな～とか思っていても
「あれっやり方どうだったっけ？」って
やり方探していると時間がどうしてもかかってしまいます。
必要なものに関しては
ワードとかに大きな字でまとめて
プリントアウトしてパソコンの近くに
置いておくと便利です。
やり方を知ることだけでなく
使用するときにサッと対応できるように
準備しておくといいですよ。
では次回から
基本的な html タグ についてお伝えします。
本日もご訪問ありがとうございました～。
タグ
html、tag、タグ2012年1月17日 | コメント／トラックバック(4)|
カテゴリー:html タグ
