2008年12月15日 22:34 - アイコン雑記の吹き出し説明
ウチのブログで使っている吹き出しアイコン雑記形式は、他のブログやサイトでも(比較的)簡単に使うことができます。ただしアイコンキャラクター画像は自分で用意して下さいね。
1.吹き出しを使うには、まず使いたいページでこのCSSファイルを読み込む必要があります。ブログの場合だと、HTMLを編集できるページなどで、HEADタグ内に記述しましょう。このブログで使っているCSSファイルをそのまま指定してもかまいません。その場合だと、吹き出しの種類を追加してもCSSファイルをアップし直す手間がはぶけます。
例(赤字が追加するもの)
2.吹き出しはtableタグに背景を指定する事で実現しています。横のサイズは自動で引き延ばされますが、縦のサイズは引き延ばしできません。なので、最大文字数には気をつけて下さい(綺麗に表示できなくなります)。
たとえば、
と記述すると、
と表示できます。
3.別の吹き出しを使いたい場合は、上のタグの赤い部分pic1-1や1-2...となっている所を、別の数字に変えます。たとえば
に変更すると
となります。
ただし、変更する時は4カ所全てを同じ数字にしないといけません。別の数字にしてしまうと、
のように変な事になりますｗ
※現在アップしている吹き出しは以下の9種類です。
例(赤字が追加するもの)
<head>
...
<link rel="stylesheet" href="http://blog.livedoor.jp/kani_kiss/archives/iconhukidashi.css" type="text/css" />
...
</head>
<body>...
2.吹き出しはtableタグに背景を指定する事で実現しています。横のサイズは自動で引き延ばされますが、縦のサイズは引き延ばしできません。なので、最大文字数には気をつけて下さい(綺麗に表示できなくなります)。
たとえば、
<table border="0" cellspacing="0" cellpadding="0"><tr><td rowspan="3" class="huki_pic1-1"></td><td class="huki_pic1-2"></td><td rowspan="3" class="huki_pic1-3"></td></tr><tr><td class="huki_text">テキスト</td></tr><tr><td class="huki_pic1-4"></td></tr></table>
と記述すると、
テキスト
と表示できます。
3.別の吹き出しを使いたい場合は、上のタグの赤い部分pic1-1や1-2...となっている所を、別の数字に変えます。たとえば
<table border="0" cellspacing="0" cellpadding="0"><tr><td rowspan="3" class="huki_pic2-1"></td><td class="huki_pic2-2"></td><td rowspan="3" class="huki_pic2-3"></td></tr><tr><td class="huki_text">テキストその２</td></tr><tr><td class="huki_pic2-4"></td></tr></table>
に変更すると
テキストその２
となります。
ただし、変更する時は4カ所全てを同じ数字にしないといけません。別の数字にしてしまうと、
テキスト
のように変な事になりますｗ
※現在アップしている吹き出しは以下の9種類です。
 |
|||
| pic1 | |||
 |
|||
| pic2 | |||
 |
|||
| pic3 | |||
 |
|||
| pic4 | |||
 |
|||
| pic5 | |||
 |
|||
| pic6 | |||
 |
|||
| pic7 | |||
 |
|||
| pic8 | |||
 |
|||
| pic9 | |||
RSS