日記の文字サイズと色の指定

HTML, , 日記機能

日記,ブログの文字に色とかサイズとか変更しているを見かける。
どのように行なっているのかサンプルを作成してみた。HTMLタグとCSSの利用だ。

lilpumpkinさんの HTML Tag Test / 日記で使用可能なHTMLタグ
idojunさんの 日記で使える CSSクラス ちょっとだけカラフルに
を参考にして、私もいろいろ試してみた。(日記、参考にしました。ありがとうございます。)

HTMLタグは、FAQに基本的なものはOKとなっていた。
CSSクラスの使用(class指定しているもの)は idojunさんが言っているように自己責任ですね。

サンプル
うなぎ eel eel eel


フォント 色
ostrich <span class="color_1">ostrich</span>
ostrich <span class="color_2">ostrich</span>
ostrich <span class="color_3">ostrich</span>
ostrich <span class="color_4">ostrich</span>
ostrich <span class="color_5">ostrich</span>

ostrich <span class="grey_1">ostrich</span>
ostrich <span class="grey_2">ostrich</span>
ostrich <span class="grey_3">ostrich</span>
ostrich <span class="grey_4">ostrich</span>
ostrich <span class="grey_5">ostrich</span>

ostrich <span class="red">ostrich</span>
ostrich <span class="informative_message">ostrich</span>
ostrich <span class="highlight">ostrich</span>
ostrich <span class="warning">ostrich</span>

ostrich <small class="color_1">ostrich</small>
ostrich <b class="color_1">ostrich</b>
ostrich <big class="color_1">ostrich</big>



フォント サイズ
chicken
<small>chicken</small> chicken
<big>chicken</big> chicken

<span class="font10">chicken</span> chicken 75%
<span class="font11">chicken</span> chicken
<span class="font12">chicken</span> chicken
<span class="font13">chicken</span> chicken 100%
<span class="font14">chicken</span> chicken
<span class="font16">chicken</span> chicken
<span class="font18">chicken</span> chicken 136%



テキスト スタイル
太字     penguin   <b>penguin</b>
斜体     penguin   <i>penguin</i>
強調     penguin   <em>penguin</em>
より強調   penguin   <strong>penguin</strong>

上付き文字  七面鳥turkey   七面鳥<sup>turkey</suo>
下付き文字  七面鳥turkey   七面鳥<sub>turkey</sub>

削除部分 Owls can mimic human voices.
<del>Owls can mimic human voices.</del>

略語 IPA (文字上にカーソル移動すると)
<abbr title="International Phonetic Alphabet">IPA</abbr>

頭字語 UNESCO (文字上にカーソル移動すると)
<acronym title="United Educational Scientific and Cultural">UNESCO</acronym>


テキスト ボーダー
A cat has nine lives. <ins>テキスト<ins>

cat and dog <span class="border_bottom_1">テキスト<span>

cat and dog <span class="border_bottom_2">テキスト<span>

cat and dog <span class="border_bottom_3">テキスト<span>


cat and dog <span class="border_top_1">テキスト<span>

cat and dog <span class="border_top_2">テキスト<span>

cat and dog <span class="border_top_3">テキスト<span>


cat and dog

<span class="border_top_1 border_bottom_1">テキスト<span>



リスト
  • optopus
  • squid
  • eel

<ul><li>optopus</li><li>squid</li><li>eel</li></ul>


センタリング
<div align="center">テキスト</div>



右寄せ
<div align="right">テキスト</div>



グループ化 (こいつの事)
<fieldset><legend align="left"> グループ化 (こいつの事) </legend>
テキスト
テキスト
</fieldset>


アップ画像の右横に文章を (画像も小さくする)
penguin
雪の上をお散歩中のペンギン!
雪の上をお散歩中のペンギン!

雪の上をお散歩中のペンギン!

<img src="/assets/blog_entries/xxx.jpg" class="align_left" alt="penguin" width="25%"/>
雪の上をお散歩中のペンギン!
雪の上をお散歩中のペンギン!
<br class="brclear"/>雪の上をお散歩中のペンギン!

class="align_center" を class="align_left" に変更、これで画像の右横に文章が回り込む。alt="penguin" は、画像上にマウスカーソルで"penguin"の文字が出力される。width="25%" は、日記の横の表示領域を100%とした時のサイズを指定、画像が小さくなる。文章の回りこみを途中で終わらせるのには、
<br class="brclear"/> を指定する。


アップ画像の左横に文章を
penguin
<img src="/assets/blog_entries/xxx.jpg" class="align_right"/>
テキスト
テキスト

class="align_center" を class="align_right" に変更、
これで画像の左横に文章が回り込む。
注)080410のシステム変更で画像の枠線が消えた。


29/3/2008 | 55 comments | 151 favorites

Profile

Name
ninetails
Gender
Male
Birthday
Jul
Hometown
北海道

Skills

ninetails knows
Japanese
ninetails wants to learn
English