html・CSSの小技

切り貼りのためのhtml集 ●  copy free! ソースはコピー&ペーストして自由に使ってね。


CSSで ねこアルバム は、こちら

汎用リンク ★★★ の部分にURLを入れる(コピー&ペースト)だけ!  ●●● の部分に文字を入れるだけ!

<a href=" ★★★ "> ●●● </a>

文章の回り込むイメージ(左側) 

わたしってイケナイ子?画像左位置で文章回り込み、画像周辺のマージン各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!

ひとつだけ紹介(日記用)

【送料無料】2004年9月 「ひの木の猫砂」共同購入第2弾
【送料無料】2004年9月 「ひの木の猫砂」共同購入第2弾
快適ねこ生活:この猫砂を買うと、送料無料! フードもグッズも一緒に頼めます。

↑こんな感じで使います。

<切り貼り用ソース>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>

わかりやすいように色をつけましたが、日記作成のフォームにコピー&ペーストした時には反映しません。
コピー&ペーストしたら の色付きの部分を楽天アフィリエイトから、コピーしてきます。 コメント部分 は自由に記入してくださいね。

並べて二つ(日記用) (現在、テスト中です)

【送料無料】2004年9月 「ひの木の猫砂」共同購入第2弾
【送料無料】2004年9月 「ひの木の猫砂」共同購入第2弾
剣神ドラゴンクエスト 甦りし伝説の剣(ACアダプタ付)
剣神ドラゴンクエスト 甦りし伝説の剣(ACアダプタ付)
今なら、大特価! 一年前の発売だから、欲しい人は早めに!

<切り貼り用ソース>

<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>

背景色の上に重ねた画像は
透明壁紙


© Rakuten Group, Inc.
Design a Mobile Website
スマートフォン版を閲覧 | PC版を閲覧
Share by: