Deprecated: The each() function is deprecated. This message will be suppressed on further calls in /home/zhenxiangba/zhenxiangba.com/public_html/phproxy-improved-master/index.php on line 456
So-net blog:So-net blogのブログ教室:簡単HTML:レイアウトを変える・リンクをつける
[go: Go Back, main page]

簡単HTML:レイアウトを変える・リンクをつける  [ブログのための簡単HTML]  

ブログを書くとき、ちょっとしたHTMLタグを知っているととっても便利。
そんな皆さまからの声にお答えして、3回に分けて「ブログのための簡単HTML講座」 を連載しております。

HTMLタグは実はとっても簡単。ちょっとだけ知っていれば簡単なレイアウトは すぐにできます。他にもHTMLタグを使えば、文字の色を変えたり、リンクを張ったり することもできます。

2回目の今回は、レイアウトを変える方法やリンクをつける方法をお教えします。

   中央に表示する

文字や画像を記事の中央に表示するには、<center>というタグを使います。

■中央に表示したい場合
   <center>中央に表示したい文字・画像のタグ</center>
【記述例 1】
<center>まんなかに表示</center>

まんなかに表示
【記述例 2】
<center>
<img src="/blog/_images/blog/_95c/blog-class/6327969.png">
</center>

   左寄せ・右寄せに表示する

文字や画像を左寄せ・右寄せで表示するには、<div align>というタグを使います。 タグの中で位置をを指定することにより、左寄せや右寄せになります。

■左寄せで表示したい場合
  <div align="left">左寄せで表示したい文字・画像のタグ</div>

■右寄せで表示したい場合
  <div align="right">左寄せで表示したい文字・画像のタグ</div>

また、このタグを使って中央に表示することもできます。
■中央に表示したい場合
  <div align="center">中央に表示したい文字・画像のタグ</div>
【記述例1: 左寄せ】
<div align="left">
<img src="/blog/_images/blog/_95c/blog-class/6327969.png">
</div>

【記述例2: 中央】
<div align="center">
<img src="/blog/_images/blog/_95c/blog-class/6327969.png">
</div>



【記述例3: 右寄せ】
<div align="right">
<img src="/blog/_images/blog/_95c/blog-class/6327969.png">
</div>



   リンクをつける

文字や画像にリンクをつけるには、<a href>というタグを使います。 この時、aとhrefの間には半角スペースを入れて記述します。

■リンクをつける場合
<a href="リンク先のURL">リンクをつけたい文 字や画像</a>
【記述例1: 普通にリンク】
<a href="http://blog.so-net.ne.jp/">
So-net blogに普通にリンク</a>

So-net blogに普通にリンク
【記述例2: リンク先を新しいウインドウで開く】
<a href="http://blog.so-net.ne.jp/" target="_blank">
So-net blogを新しいウィンドウで開く </a>

So-net blogを新しいウィンドウで開く

【記述例3: リンクにマウスのカーソルをあてると説明をだす】
<a href="http://blog.so-net.ne.jp/" title="So-net blogのトップページです">
So-net blog</a>

So-net blog



次回は「中央に表示する」「リンクをつける」「リストをつける」を予定しています。 お楽しみに(^o^)丿


2007-02-01 17:09  nice!(20)  コメント(4)  トラックバック(1)

ブログを書くとき、ちょっとしたHTMLタグを知っているととっても便利。 そんな皆さまからの声にお答えして、3回に分けて「ブログのための簡単HTML講座」 を連載しております。 HTMLタグは実はとっても簡単。ちょっとだけ知っていれば簡単なレイアウトは すぐにできます。他にもHTMLタグを使えば、文字の色を変えたり、リンクを張ったり することもできます。 2回目の今回は、レイアウトを変える方法やリンクをつける方法をお教えします。 &nbsp; 中央に表示する &nbsp; 左寄せ・右寄せに表示する &nbsp; リンクをつける &nbsp;&nbsp; 中央に表示する 文字や画像を記事の中央に表示するには、&lt;center&gt;というタグを使います。 ■中央に表示したい場合    &lt;center&gt;中央に表示したい文字・画像のタグ&lt;/center&gt; 【記述例 1】 &lt;center&gt;まんなかに表示&lt;/center&gt; まんなかに表示 【記述例 2】 &lt;center&gt; &lt;img src="/blog/_images/blog/_95c/blog-class/6327969.png"&gt; &lt;/center&gt; &nbsp;&nbsp; 左寄せ・右寄せに表示する 文字や画像を左寄せ・右寄せで表示するには、&lt;div align&gt;というタグを使います。 タグの中で位置をを指定することにより、左寄せや右寄せになります。 ■左寄せで表示したい場合   &lt;div align="left"&gt;左寄せで表示したい文字・画像のタグ&lt;/div&gt; ■右寄せで表示したい場合   &lt;div align="right"&gt;左寄せで表示したい文字・画像のタグ&lt;/div

コメント 4


タグが使えるようになってとても楽しませていただいてます☆
、bodyの所に背景画像を設置した時myspaceのようにスクロールしても背景画像が残るようにする事ってできるのでしょうか??

あと背景全体のカラーコードと、背景画像両方表示されるようにするにはどうしたら良いのでしょうか??
(例えばカスタムスキンの黒を選択して body の所のカラーコードを画像タグに変えたら、画像は残るのですが背景が真っ白になってしまうので元々の黒い背景の上に画像を載せる・・・というような。何か説明が下手で申し訳ありませんっ)

いつかタグ講座でのレクチャー、よろしくお願いいたしますーっ☆
by soul (2007-02-01 23:59)

タグって知っていると便利なんでしょうけど、なかなか難しくて・・・と思っていましたが、とてもよくわかりました。私は自分でタグを書こうとすると間違えてしまうので、PC上のメモ帳にコピペしてすぐ使えるように、デスクトップに置いています。すごく便利です!ありがとうございます。
今日早速「リンクにマウスのカーソルをあてると説明をだす」ってのをやってみたいと思います♪
by みちや (2007-02-02 03:12)

>bodyの所に背景画像を設置した時myspaceのようにスクロール
>しても背景画像が残るようにする事ってできるのでしょうか??

これではいかがでしょうか?
http://www.tagindex .com/stylesheet/page /background_image4.h tml

ご参考になれば幸いです。
by MANTA (2007-02-03 14:08)

>PC上のメモ帳にコピペしてすぐ使えるように、デスクトップに置いています。

それもよいですが、こういうのはいかが?お試しアレ!
http://blog.so-net. ne.jp/goto33/2007-02 -03
by MANTA (2007-02-03 14:08)

コメントを書く

お名前:
URL:
コメント:
  下の画像に表示されている文字を入力してください。
画像の数字:
(入力必須・半角のみ)
 

トラックバック 1

めんどくさいタグの簡単な打ち方 (海の研究者 2/3 13:58)
ソネブロのブログ教室で「ブログのための簡単タグ」が紹介されていますね。 ただこのタグ、覚えるのはめんどくさいし、だいいち打ち込むのがめんどくさい。 そこで私が愛用している”簡単にタグを打つ方法”をお教えしましょう。 「単語登録」を利用するのです。コツは「セミコロン」です。 -...[続く]

この記事のトラックバックURL:
http://blog.so-net.ne.jp/blog-class/2007-02-01-1/trackback