※ご注意
本ブログに記載されている内容は、それぞれの記事投稿時点の情報です。
2008年2月27日のSo-net blogサービスリニューアルにより、一部内容に変更がある場合がございます。 恐れ入りますが、ご了承いただけますようお願い申し上げます。
なお、So-net blogの使い方につきましては、下記ページをご参照ください。
⇒So-net blog使い方
本ブログに記載されている内容は、それぞれの記事投稿時点の情報です。
2008年2月27日のSo-net blogサービスリニューアルにより、一部内容に変更がある場合がございます。 恐れ入りますが、ご了承いただけますようお願い申し上げます。
なお、So-net blogの使い方につきましては、下記ページをご参照ください。
⇒So-net blog使い方
簡単HTML：レイアウトを変える・リンクをつける [ブログのための簡単HTML]
ブログを書くとき、ちょっとしたHTMLタグを知っているととっても便利。
そんな皆さまからの声にお答えして、3回に分けて「ブログのための簡単HTML講座」
を連載しております。
HTMLタグは実はとっても簡単。ちょっとだけ知っていれば簡単なレイアウトは
すぐにできます。他にもHTMLタグを使えば、文字の色を変えたり、リンクを張ったり
することもできます。
2回目の今回は、レイアウトを変える方法やリンクをつける方法をお教えします。
|
中央に表示する |
文字や画像を記事の中央に表示するには、<center>というタグを使います。
■中央に表示したい場合
<center>中央に表示したい文字・画像のタグ</center>
<center>中央に表示したい文字・画像のタグ</center>
【記述例 1】
<center>まんなかに表示</center>
まんなかに表示
<center>まんなかに表示</center>
【記述例 2】
<center>
<img src="/blog/_images/blog/_95c/blog-class/6327969.png">
</center>
<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>
<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>
<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>
<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>
<div align="right">
<img src="/blog/_images/blog/_95c/blog-class/6327969.png">
</div>
|
リンクをつける |
文字や画像にリンクをつけるには、<a href>というタグを使います。 この時、aとhrefの間には半角スペースを入れて記述します。
■リンクをつける場合
<a href="リンク先のURL">リンクをつけたい文 字や画像</a>
<a href="リンク先のURL">リンクをつけたい文 字や画像</a>
【記述例2： リンク先を新しいウインドウで開く】
<a href="http://blog.so-net.ne.jp/" target="_blank">
So-net blogを新しいウィンドウで開く </a>
↓
So-net blogを新しいウィンドウで開く
<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
<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!(27)
コメント(4)
トラックバック(2)
タグが使えるようになってとても楽しませていただいてます☆
、bodyの所に背景画像を設置した時myspaceのようにスクロールしても背景画像が残るようにする事ってできるのでしょうか？？
あと背景全体のカラーコードと、背景画像両方表示されるようにするにはどうしたら良いのでしょうか？？
(例えばカスタムスキンの黒を選択して body の所のカラーコードを画像タグに変えたら、画像は残るのですが背景が真っ白になってしまうので元々の黒い背景の上に画像を載せる・・・というような。何か説明が下手で申し訳ありませんっ)
いつかタグ講座でのレクチャー、よろしくお願いいたしますーっ☆
by Bee (2007-02-01 23:59)
タグって知っていると便利なんでしょうけど、なかなか難しくて･･･と思っていましたが、とてもよくわかりました。私は自分でタグを書こうとすると間違えてしまうので、ＰＣ上のメモ帳にコピペしてすぐ使えるように、デスクトップに置いています。すごく便利です！ありがとうございます。
今日早速「リンクにマウスのカーソルをあてると説明をだす」ってのをやってみたいと思います♪
by みちや (2007-02-02 03:12)
＞bodyの所に背景画像を設置した時myspaceのようにスクロール
＞しても背景画像が残るようにする事ってできるのでしょうか？？
これではいかがでしょうか？
http://www.tagindex.com/stylesheet/page/background_image4.html
ご参考になれば幸いです。
by MANTA (2007-02-03 14:08)
＞ＰＣ上のメモ帳にコピペしてすぐ使えるように、デスクトップに置いています。
それもよいですが、こういうのはいかが？お試しアレ！
http://blog.so-net.ne.jp/goto33/2007-02-03
by MANTA (2007-02-03 14:08)