本ブログに記載されている内容は、それぞれの記事投稿時点の情報です。
2008年2月27日のSo-net blogサービスリニューアルにより、一部内容に変更がある場合がございます。 恐れ入りますが、ご了承いただけますようお願い申し上げます。
なお、So-net blogの使い方につきましては、下記ページをご参照ください。
⇒So-net blog使い方
簡単HTML：文字の色や大きさを変える [ブログのための簡単HTML]
ブログを書くとき、ちょっとしたHTMLタグを知っているととっても便利。
そんな皆さまからの声にお答えして、3回に分けて「ブログのための簡単HTML講座」
を連載いたします。
HTMLタグは実はとっても簡単。ちょっとだけ知っていれば簡単なレイアウトは
すぐにできます。他にもHTMLタグを使えば、文字の色を変えたり、リンクを張ったり
することもできます。
今回は「文字の色や大きさを変えるタグ」をお教えします。
|
タグを書くときの注意点 |
HTMLの基礎の基礎とSo-net blogで記述する際の注意点です。
■注意■ タグは半角文字で書きます
タグはすべて半角文字で書いてください。全角文字で書くと、ブラウザでは それがタグだとわからず、そのままの文字が表示されてしまいます。○ <center>まんなか</center>
× ＜ｃｅｎｔｅｒ＞まんなか＜／ｃｅｎｔｅｒ＞
■注意■ 終わりのタグには「/（スラッシュ）」が入ります。
タグでくくった部分の文字が変更されますが、始めのタグと終わりの タグは少し形式が異なります。始めのタグはカッコでくくられている だけですが、終わりのタグには「/（スラッシュ）」が入ります。○ <center>まんなか</center>
× <center>まんなか<center>
■注意■ 設定を「シンプルな入力」にしてください。
So-net blogの「記事の設定」が「URL自動リンクと改行だけのシンプルな入力」 になっている必要があります。詳しくは以下でご確認ください。
So-net blog 使い方：本文編集機能の切り替え
|
文字の色を変える |
文字の色を変えるには、<font color>というタグを使います。 変えたい色を指定すれば、色々な色を表示することができます。
○文字の色を変えたい場合
<font color="色の名前">色を変えたい文字</font>
色の名前は「red」「blue」「green」など基本の色の名前ならば、文字を記述
することで色が変更できます。
#808080■gray
#C0C0C0■silver
#FFFFFF■white
#00FF00■lime
#00FFFF■aqua
#FF00FF■fuchsia
#800000■maroon
#808000■olive
#800080■purple
#000080■naby
#008080■teal
#008000■green
その他の色については、「#FF0000」などの色コードを記述する必要があります。 色と色コードの一覧は以下のページに用意してあるので参考になさってください。
So-net blog 使い方：カラーパレット
-
<font color="red">赤い文字（1)</font>または
<font color="#ff0000">赤い文字（2)</font>
- 赤い文字（1)
- 赤い文字（2)
|
文字の大きさを変える |
文字の大きさを変えるには、<font size>というタグを使います。
sizeの後に数字で大きさを指定することで文字の大きさを変更します。
○文字の大きさを変えたい場合
<font size="文字の大きさ">大きさを変えたい文字</font>
サイズには 1～7 の値を指定できます。
- 小
<font size="1">とっても小さい</font> - ちょっと大きく
<font size="+2">通常より2レベル分大きく</font> - 大
<font size="7">大きい！</font>
- とっても小さい
- 通常より2レベル分大きく
- 大きい！
|
太字にする/斜体文字にする |
文字を太くするには<b>、斜体文字にするには<i>というタグを記述します。
- 太く <b>太い！</b>
- 斜体 <i>ナナメ</i>
- 太く 太い！
- 斜体 ナナメ
■ポイント■ タグは組み合わせることができます。
色々な効果のタグがありますが、重ねて記述することができます。【記述例】
<font color="#ff0000" size="5"><b>赤くて大きくて太い文字</b></font>
【表示例】
赤くて大きくて太い文字
次回は「中央に表示する」「リンクをつける」「リストをつける」を予定しています。 お楽しみに(^o^)丿
初柿子ですっ?”
ぉもろぃですねっ…
青春??って感じのフレーズダッ☆彡
by 貴美子 (2007-01-27 12:02)
はじめまして。
カスタムスキンが加わり独自のものが作れるようになって嬉しい限りです。
ただ、初心者にはアレンジするのが難しい；
「CSSセレクタ（タグ）一覧をみる」をみてもタグが羅列されているだけなので、どこにどう書き込めばいいのか分かりません。
それでもなんとかいじくって記事の幅を広げるのに成功しました。
が、２カラムではきれいに広がっていた記事幅が３カラムでは広がりません。
３カラムを利用したいと思っています。どうすれば記事幅が広がるのでしょうか。
同じような悩みを書いていらっしゃる日記を数多く見かけました。（仲間がいると思うとちょっと心強いです）
知りたいと思っていらっしゃる方がたくさんいると思います。
お教えくださると嬉しいです。
それからもうひとつお願いです。
スキンの編集のときでもレビューできるようにしてもらえないでしょうか。
設定してからでないと見られないというのは大変不便です。
今のレイアウトがどうなっているか、その都度確認できるようにしてもらいたいです。
そのときに２カラムと３カラムのどちらも確認できるのを切望します。
最後に。
このブログにたどりつくのに大変苦労しました。
「so-netブログ」のトップページにはリンクがないし、ソネブロ内を検索してもヒットしないし；
なぜ？
お忙しいとは思いますが、上記のこと、ぜひぜひお願いいたします。
by 銀 (2007-01-31 13:22)
はじめまして。
すっごく分かりやすくてめっちゃ助かりました☆
実は今日はじめたばっかで(^^;;
今後とも参考にさせていただきます。
ありがとうござぃます☆
by kao (2007-02-03 01:03)
わかりました。
今度使ってみましょう。
がんばります。
by shtne (2007-03-17 16:09)