html・CSSの小技
●●● 切り貼りのためのhtml集 ●●● copy
free! ソースはコピー&ペーストして自由に使ってね。
CSSで ねこアルバム は、こちら
■汎用リンク ★★★の部分にURLを入れる(コピー&ペースト)だけ! ●●●の部分に文字を入れるだけ!
■文章の回り込むイメージ(左側) ■■■■
画像左位置で文章回り込み、画像周辺のマージン各10、画像の枠(1)
<img src="http://plaza.rakuten.co.jp/img/user/75/35/7127535/13.jpg" width="200" height="148" alt="わたしってイケナイ子?" align="left" vspace="10" hspace="10" border="1" title="イケナイ子でも、いいじゃん!">画像左位置で文章回り込み、画像周辺のマージン各10、画像の枠(1) |
altまでは、画像倉庫(画像の登録・管理)からコピペしたほうが無難。
画像にリンクするときは、ボーダーの色が変わっちゃうから border="0"のほうがいいかも?
titleは、画像にマウスカーソルを置くと、表示されます。
■汎用タイプ そのまま使える形に整理してみました。画像倉庫からコピペしてきて、最後の「>」を消します。
タグとタグの間に、半角スペース1個が入っているかどうか、確かめて!(ないと、エラーになるの~)。
■■■の部分を入れると、画像にマウスカーソルを当てると、文字が出るようにできます。
●●画像倉庫から●● align="left" vspace="10" hspace="10" border="1" title="■■■"> |
■文章の回り込むイメージ(右側) ■■■■
日記の文章の右側に写真を入れたいときは、テーブルが必要かなあ?
でも、上の画像もそうだけど、文章が長いときには、問題ないけど、写真の縦サイズより文章が短い場合は、ちょっと問題よね。
文章の長さが短いときは、全体をテーブルに入れたほうがいいかにゃあ?
<table width="150" border="0" align="right" cellpadding="0" cellspacing="0"><tr><td><img
src="http://plaza.rakuten.co.jp/img/user/75/35/7127535/8.jpg" alt="じっと見るしゃとらん" width="150" height="200" hspace="10" vspace="10" border="1" align="right"></td></tr><
/table>日記の文章の右側に写真を入れたいときは、テーブルが必要かなあ? |
日記の場合、改行が途中に入っちゃうと、ダメなん(これに気づかなくて、何回書き直しをしたか・・)。
作成ソフトで作ると、タグが見やすいように改行が入ってるんだけど、上記のように詰めてから日記を書く欄に入れとかなくちゃいけなかったのです。
●●● 日記に使う切り貼りのための小技集 その2 (アフィリエイトのために)●●●
copy free!
■ひとつだけ紹介(日記用) ■■■■
↑こんな感じで使います。
<切り貼り用ソース>
10/5 ソースを多少、整理しました。不具合を発見した方は、BBSまたはコメントでお願いします。10/13 ちょっとタグ変更しました
<table width="100%" border="0" cellpadding="5" cellspacing="1" bgcolor="#009900"><tr><td
bgcolor="#FFFFFF" align="center">■■■画像リンクからコピー■■■</td><td
valign="top" bgcolor="#FFFFFF">★★★テキストリンクからコピー★★★<br>●●●●コメントはこちらに!●●●●</td></tr></table> |
わかりやすいように色をつけましたが、日記作成のフォームにコピー&ペーストした時には反映しません。
コピー&ペーストしたら赤、青の色付きの部分を楽天アフィリエイトから、コピーしてきます。コメント部分は自由に記入してくださいね。
■並べて二つ(日記用) ■■■■
(現在、テスト中です)
<切り貼り用ソース>
<table width="100%" border="0" cellpadding="5" cellspacing="1" bgcolor="purple"><tr><td
width="10%" valign="middle" bgcolor="#FFFFFF" align="center">■■■画像リンクからコピー(左側)■■■</td><td
width="40%" valign="top" bgcolor="#FFFFFF">★★★テキストリンクからコピー(左側)★★★<br>●●●●コメント(左側)●●●●</td><td
width="10%" valign="middle" align="center" bgcolor="#FFFFFF">■■■画像リンクからコピー(みぎ)■■■</td><td
width="40%" valign="top" bgcolor="#FFFFFF">★★★テキストリンクからコピー(みぎ)★★★<br>●●●●コメント(みぎ)●●●●</td></tr></table> |
bgcolor="purple" の部分で、枠の色が変わります。色の指定はふつう#FFFFFF などの16進数(めんどい、わからんし)でやるけど、今のところ、色の名前でも指定できるものがあるようです。red
とか blue とか、よくある奴は大丈夫。
詳しくは、杜甫々さんの とほほのWWW入門、とほほの色入門・色見本 のページなどを参考にしてくださいね。
このソース、もっと整理できるかも?
●●● 日記に使う切り貼りのための小技集 その3 (色いろ 特集)●●●
★ |
<font color="#FFCC00">★</font> |
★ |
<font color="#FF66FF">★</font> |
★ |
<font color="#0099FF">★</font> |
★ |
<font color="#006600">★</font> |
★ |
<font color="#FF0000">★</font> |
★ |
<font color="#0033CC">★</font> |
★の部分を文字と入れ替えてね! そのままで、マークとして使用するのもいいかも?
例:#0033CC の部分に色の名前を入れて、他の色にするのもOK! vol2.アフィリエイト用テーブル に紹介したサイトも参考に!
●●● |
<font color="#99CCCC">●</font><font
color="#009999" size="+1">●</font><font
color="#99CCCC">●</font> |
●●● |
<font color="#66CCFF">●</font><font color="#3366FF" size="+1">●</font><font
color="#66CCFF">●</font> |
●●● |
<font color="#9933FF">●</font><font color="#CC3399" size="+1">●</font><font
color="#9933FF">●</font> |
●●● |
<font color="#FFCCFF">●</font><font color="#FF66CC" size="+1">●</font><font
color="#FFCCFF">●</font> |
作成ソフトで作ると、そんなに難しくないけれど、タグ打ちしようと思うと、かなり面倒。
好きな色や形で、一度作っておいて、使いまわし――もいいかな?
■■■■ |
<font color="#FFCCFF">■</font><font
color="#FF99FF" size="+1">■</font><font
color="#FF66FF" size="+2">■</font><font
color="#FF33FF" size="+3">■</font> |
■■■■ |
<font color="#CCFFCC">■</font><font color="#00CC99" size="+1">■</font><font
color="#009933" size="+2">■</font><font
color="#006600" size="+3">■</font> |
CSS(インライン)を使ったバナーっぽいもの(テスト中)
もりのねこアルバム
<a href="http://リンク先" target="_blank"><font style=font-size:16px;font-family:"HG創英角ポップ体",fantasy;padding:5px;border-style:double;background-image:url(http://plaza.rakuten.co.jp/img/user/**/**/******/透明化した背景画像.gif);background-repeat:repeat;background-color:#FFC1C1>■もりのねこアルバム■</font></a> |
<a href="http://plaza.rakuten.co.jp/morinoneko/" target="_blank"><font style=font-size:16px;font-family:"HG創英角ポップ体",fantasy;padding:5px;border-style:double;background-image:url(http://plaza.rakuten.co.jp/img/user/75/35/7127535/69.gif);background-repeat:repeat;background-color:#FFC1C1>もりのねこアルバム</font></a>
背景色の上に重ねた画像は