カンタンなhtmlを覚えて、文字に色をつけたり、文字からリンクさせてみよう

html

カンタンなhtmlを覚えて、文字に色をつけたり、文字からリンクさせてみよう
  •  

htmlってなぁに?


パソコンでサイトを作ったりする時に
文字に色をつけたり
太い文字にしたりしたいなぁって

思うこと、ありますよね?

そんな時に、htmlの知識が
ほんの少しあるだけで

他の人のブログと
差をつけることができるのです。


htmlを覚えれば

ここからここの文字の色を
赤色にしますよ~

とか

ここからここの文字を太くしますよ~

って指定できるのです。


その他にも
知ってると便利なhtmlは
いっぱいありますが

今回は、ブログ記事を書く時に
知っていると便利なhtmlだけを

お伝えしたいと思います。

htmlのお約束


文章のどこからどこまでと
指定するので、最初と最後に
同じhtmlを使います。

たとえば、
ここからここまでが
一段落です、という意味の

<p>

これは、<p>から</p>の間の文章が
一段落です、と書きます。


<p>ここに文章を書く</p>

改行したい時

改行のhtmlは、<br />

改行したいところに、このhtmlを入れれば
改行してくれます。


たとえば

この文章をここまでで<br />改行します。


これをhtmlで記入するところに入力すると・・・

下記のようになります。




この文章をここまでで
改行します。

色をつけたい時



では、文字に色をつけたい場合は
どうするかというと

<span style="color: #ff0000;">赤い文字</span>

このように書きます。
カラーって言葉の後ろにある
#から始まるのが
ネットでの色を決めるカラーコード

ここのカラーコード部分を変えれば
いろんな色を表示させることができます。

ただ、記事内で
あまりにも多くの色を使うと
チカチカして見づらいので

できれば3色ぐらいに
しておいた方がいいと思います。

で、実際に、この文字列を入れると
このように、文字の部分が赤くなります。


赤い文字 


青い文字にしたい場合は、
こんな感じで、青色のカラーコードに変更します。

<span style="color: #0000ff;">青い太文字</span>

太い文字にするには


次に、太い文字にしたい時には
このように ストロング という文字列で囲みます。
<strong>黒い太文字</strong>

実際にhtmlで表示させると

ほら、ちゃんと太文字になりました。


黒い太文字

【応用編】文章を書いていく時には  

それでは、実際に文章を書いていく時には
こちらを参考にしてください。

<p>文章を書いて、改行する<br />
文章<strong><span style="color: #ff0000;">赤い太文字にする</span></strong>文章を書いて、改行する
<br />文章 </p>

このhtmlの文字列を表示させると
このように、ちゃんと赤い太文字にしたいところは
色が変わって太くなってますよね。



文章を書いて、改行する
文章赤い太文字にする文章を書いて、改行する
文章

アンダーラインを入れたい時


文字の下にアンダーラインを入れたい時には

<span style="text-decoration:underline; color: #0000ff;">青い文字のアンダーラインつき</span>

これで、青い文字にアンダーラインが入った表示がされます。


青い文字のアンダーラインつき

文字の大きさを変えるには

文字の大きさを変更したい時には
文字のまわりを、このようなhtmlで囲みます。

<FONT size="7">文字のサイズが7</FONT> <br/>
<FONT size="6">文字のサイズが6</FONT> <br/>
<FONT size="5">文字のサイズが5</FONT> <br/>
<FONT size="4">文字のサイズが4</FONT> <br/>

これを、そのままhtml表示させると
こんなふうに文字のサイズが
いろいろな大きさで表示されます。


文字のサイズが7
文字のサイズが6
文字のサイズが5
文字のサイズが4
 

リンク先に飛ばしたい場合は

テキストをクリックする時

次に、テキスト(文字)をクリックすると
他のサイトにリンクできるように設定するには


〇〇については、<a href="http://リンク先URL" target="_blank"><span style="text-decoration:underline; color: #0000ff;">こちらのリンク</span></a>を参考にしてください。

と書きます。

ためしに、このようにhtmlを設定すると

LINE@のキーワード応答メッセージについては<br/><a href="http://netmanual.whdno.com/p/1703/XJS0N4o91.html" target="_blank"><span style="text-decoration:underline; color: #0000ff;">こちらの記事</span></a>をご覧ください。


こんな風に表示されます。



LINE@のキーワード応答メッセージについては
こちらの記事をご覧ください。

画像をクリックする時

画像をクリックしたら
どこかのサイトにリンクするようにさせたい時も
ありますよね?

そういう場合は、
このようにhtmlコードを指定します。

<a href="http://リンク先アドレス" target="_blank"><img src="http://画像.jpg" alt="画像にたいする説明" width="300" border="0" /></a>

画像は、いったん
お持ちのサイトにアップしてから
画像のURLをメモしておいて使います。

たとえば、LINE@への友達追加を
してもらいたい時には
こんなふうに入れると・・・

<!--LINE@友達追加-->LINE@への友達追加は<br/>こちらの画像をクリックしてくださいね<br/>
<a href="http://heart-made-cafe.info/yline/mb/" target="_blank"><img src="http://heart-made-cafe.com/net/wp-content/uploads/2015/05/line_friends_en.png" alt="LINE@友だち追加" width="150" border="0" /></a>
<br>

こうやって表示されるので
誰かが友達追加してくれるかもしれないですよね。



LINE@への友達追加は
こちらの画像をクリックしてくださいね
LINE@友だち追加


※画像は、.jpeg か.png をお使いください。

htmlの内容をメモしたい時

<!--LINE@友達追加-->

この<--! と --> で囲まれた

「LINE@友達追加」は
実際にはサイトに表示されないので
どんなことを書いてあるか
自分のメモのように使うことができます。

いつも、同じページに
リンクさせたい時には
このメモのところを見れば
どのページにリンクされるのか
すぐにわかるので

とても便利なhtmlです。

リンク先を別のページとして表示させたい時

そんな時には、これです。

target="_blank"

上段のように
このhtmlを入れないと、今見ている画面が
そのまま違う画面に切り替わるだけですが

<a href="http://リンク先アドレス" ><img src="http://画像.jpg" alt="画像にたいする説明" width="300" border="0" /></a>

target="_blank" を入れることで
別のページが開くようになるのです。

<a href="http://リンク先アドレス" target="_blank"><img src="http://画像.jpg" alt="画像にたいする説明" width="300" border="0" /></a>

別のページが開いた時には
そのページを見終わった人は
もう一度、あなたのページも
見てくれますが

あなたのページが
そのまま違うページに切り替わってしまうと
そこから、どこか、また他のサイトを
のぞきにいってしまった人は

あなたのサイトに戻ってきてくれる可能性は
ゼロに近いです。


忘れずに、 target="_blank" を
入れるようにしましょうね~♪



カンタンなのにhtmlを使うと
サイト作成の幅が一気に広がるので

どれかひとつでもいいので
使ってみてくださいね。


1
 

関連記事

ピックアップ!

ピックアップ!