全17件 (17件中 1-17件目)
1
にほんブログ村少し前に、アフィリエイト画像が変わりましたね。以前は、写真だけでしたが、商品説明と価格も表示されるようになりました。でも、『横に並べたいのに、縦にしか並べない。。。』という方、いらっしゃいませんか?コレは、以前説明した『横に並べる』を使って下さい。現在のアフィリエイト画像は、tableで表示されています。この、tableを横に並べるには、それよりも大きなtableで囲む必要があります。(※詳しく知りたい方は、コチラから)今回は、横に3つ並べる方法の説明をします。画像1画像2画像3<table border="1"><tr><td>画像1</td><td>画像2</td><td>画像3</td></tr></table>コレに、画像を入れます。レースがアクセントのナチュラルな母子手帳ケース。出産準備にどうぞ♪ご懐妊祝い、出産祝い、...価格:2,625円(税込、送料別)Pate ボウル(S)価格:840円(税込、送料別)手作りの温もりベビーシューズ出産祝い、誕生祝い、ギフトに最適!ベビーシューズ価格:3,675円(税込、送料別)周りに、変な枠がありますよね。。。コレを消すには、1番最初の方にある、border="1"を、border="0"に、変更します。上の画像で、"1"を、"0"に変えます。レースがアクセントのナチュラルな母子手帳ケース。出産準備にどうぞ♪ご懐妊祝い、出産祝い、...価格:2,625円(税込、送料別)Pate ボウル(S)価格:840円(税込、送料別)手作りの温もりベビーシューズ出産祝い、誕生祝い、ギフトに最適!ベビーシューズ価格:3,675円(税込、送料別)これで、アフィリエイト画像を横に並べる事が出来ました♪^^♪:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ★テンプレートを探す★★テンプレートの作り方★★もっと、テンプレートの勉強をする★♪HOME♪
2010.09.24
コメント(4)
★::::: こういうテンプレートはいかがでしょうか?^^?新作ではないのですが(2年位前に作ったモノですが^^;)、クリスマスの雰囲気が感じられますか~^^☆ コチラからどうぞ↓↓ ★ by 凛 こんなんのありますよ~♪^^ ★ コチラからどうぞ ★ by 凛
2009.12.07
コメント(4)
只今ランキング 8位 です ★ ココに日記 ★ by 凛 上のテンプレートでは、星が動いています。ちなみにコチラにあります。今日は、文字を動かしてみます。marqueeを使います。動いてるよ <marquee><font color="#FFB533"><b>動いてるよ</b></font></marquee> 今度は、文字が左右を往復します。 動いてるよ <marquee behavior=alternate><b><font color="#FFB533">動いてるよ</font></b></marquee> スピードを速めます。 動いてるよ <marquee behavior=alternate scrollamount=15><font color="#FFB533"><b>動いてるよ</b></font></marquee> 左右で動く範囲を指定します。 動いてるよ <marquee width="300" behavior=alternate><b><font color="#FFB533"><b><font color="#FFB533">動いてるよ</font></b></font></b></marquee> 上下で動く範囲を指定します。 動いてるよ 背景色を指定します。 背景をピンクにしました^^ <marquee width=400 behavior=alternate bgcolor="#ffcccc"><font color="#000000"><b>背景をピンクにしました^^</b></font></marquee> 他の動かし方は、また次回^^★テンプレートを探す★★テンプレートの作り方★★もっと、テンプレートの勉強をする★♪HOME♪
2008.12.22
コメント(4)
只今ランキング 8位 です今日は、styleについて、お話します。周りを変えるという日記で、styleに、ついてお話しました。styleは、tdにもtableにも、つける事が出来ます。では、やってみます。まずは、周りの枠を消した状態から説明します。504円ボトルラック901円ガベージ缶では、周りのテーブル枠にstyleを使います。504円ボトルラック901円ガベージ缶<table border="0" style="border:13px dotted #4a2900;" ><tr><td><table border="0"><tr><td width="90" height="90"><a href="http://hb.afl.rakuten.co.jp/hgc/04d5f873.71960d63.04d5f874.83a33681/?pc=http%3a%2f%2fitem.rakuten.co.jp%2fcozymom%2ffog0005%2f&m=http%3a%2f%2fm.rakuten.co.jp%2fcozymom%2fi%2f10000141%2f" target="_blank"><img src="http://hbb.afl.rakuten.co.jp/hgb/?pc=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fcozymom%2fcabinet%2fitem-p%2fimg1057943194.jpg%3f_ex%3d80x80&m=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fcozymom%2fcabinet%2fitem-p%2fimg1057943194.jpg%3f_ex%3d64x64" border="0"></a></td></tr><tr><td width="90" height="15" >504円</td></tr><tr><td width="90">ボトルラック</td></tr></table></td><td><table border="0"><tr><td width="90" height="90"><a href="http://hb.afl.rakuten.co.jp/hgc/04d5f873.71960d63.04d5f874.83a33681/?pc=http%3a%2f%2fitem.rakuten.co.jp%2fcozymom%2fdlt080917605%2f&m=http%3a%2f%2fm.rakuten.co.jp%2fcozymom%2fi%2f10005333%2f" target="_blank"><img src="http://hbb.afl.rakuten.co.jp/hgb/?pc=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fcozymom%2fcabinet%2fdulton%2fimg55627987.jpg%3f_ex%3d80x80&m=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fcozymom%2fcabinet%2fdulton%2fimg55627987.jpg%3f_ex%3d64x64" border="0"></a></td></tr><tr><td width="90" height="15" >901円</td></tr><tr><td width="90">ガベージ缶</td></tr></table></td></tr></table>更に、中の枠もやります。中の方は、色を変えましょう。この場合、tableに色を付ける場合と、tdに付ける場合をやってみます。504円ボトルラック901円ガベージ缶<table border="0" style="border:13px dotted #4a2900;"><tr><td><table border="0" bgcolor="#d9c465"><tr><td width="90" height="90"><a href="http://hb.afl.rakuten.co.jp/hgc/04d5f873.71960d63.04d5f874.83a33681/?pc=http%3a%2f%2fitem.rakuten.co.jp%2fcozymom%2ffog0005%2f&m=http%3a%2f%2fm.rakuten.co.jp%2fcozymom%2fi%2f10000141%2f" target="_blank"><img src="http://hbb.afl.rakuten.co.jp/hgb/?pc=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fcozymom%2fcabinet%2fitem-p%2fimg1057943194.jpg%3f_ex%3d80x80&m=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fcozymom%2fcabinet%2fitem-p%2fimg1057943194.jpg%3f_ex%3d64x64" border="0"></a></td></tr><tr><td width="90" height="15" >504円</td></tr><tr><td width="90">ボトルラック</td></tr></table></td><td><table border="0"><tr><td width="90" height="90"><a href="http://hb.afl.rakuten.co.jp/hgc/04d5f873.71960d63.04d5f874.83a33681/?pc=http%3a%2f%2fitem.rakuten.co.jp%2fcozymom%2fdlt080917605%2f&m=http%3a%2f%2fm.rakuten.co.jp%2fcozymom%2fi%2f10005333%2f" target="_blank"><img src="http://hbb.afl.rakuten.co.jp/hgb/?pc=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fcozymom%2fcabinet%2fdulton%2fimg55627987.jpg%3f_ex%3d80x80&m=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fcozymom%2fcabinet%2fdulton%2fimg55627987.jpg%3f_ex%3d64x64" border="0"></a></td></tr><tr><td bgcolor="#ffefa8" width="90" height="15" >901円</td></tr><tr><td bgcolor="#ffffa8" width="90">ガベージ缶</td></tr></table></td></tr></table>いかがでしょうか?分からない事、聞きたい事があれば、コメント欄に、どんどん書き込んで下さいね~^^★テンプレートを探す★★テンプレートの作り方★★もっと、テンプレートの勉強をする★♪HOME♪
2008.12.20
コメント(4)
只今ランキング 8位 です今日は、tableについて、お話します。table→『枠』td→『マス』ですが、マスをいくつかつなげると、1つの枠になります。(tableで囲んでいますよね)画像価格商品説明<table border="1"><tr><td width="90" height="90">画像</td></tr><tr><td width="90" height="15">価格</td></tr><tr><td width="90">商品説明/td></tr></table>上記のモノを、2つ並べたい時は、もう一つ、大きなtable枠で囲んであげます。tableを、tableで囲むということです。画像価格商品説明画像価格商品説明<table border="1"><tr><td><table border="1"><tr><td width="90" height="90">画像</td></tr><tr><td width="90" height="15">価格</td></tr><tr><td width="90">商品説明</td></tr></table></td><td><table border="1"><tr><td width="90" height="90">画像</td></tr><tr><td width="90" height="15" >価格</td></tr><tr><td width="90">商品説明</td></tr></table></td></tr></table>ココで、周りの線を消します。border="0"にします。画像価格商品説明画像価格商品説明本来は、こういう並びになっています^^画像価格商品説明画像価格商品説明これに、styleシートを使って色付けしようと思いましたが、あまりにも、長くなるので、今回は、一旦ココまで。。。★テンプレートを探す★★テンプレートの作り方★★もっと、テンプレートの勉強をする★♪HOME♪
2008.12.20
コメント(6)
只今ランキング 5位 です画像と文章の組み合わせについてです。画像価格商品説明<table border="1"><tr><td rowspan="2" width="130" height="130">画像</td></tr><tr><td width="130" height="30">価格</td></tr><tr><td width="130" height="100">商品説明/td></tr></table>こういう枠を作って、もう一つ大きなで囲んでみます。189円アイアンバードです。 我が家にもあります^^ お値段も、とってもリーズナブルです♪ さりげなく、あちこちに飾ってみてはいかかですか?^^?そして、中に入っている枠の線を <border="0"> を使って消します。189円アイアンバードです。 我が家にもあります^^ お値段も、とってもリーズナブルです♪ さりげなく、あちこちに飾ってみてはいかかですか?^^?もう1つは、<align> を、使う方法があります。 こんな風に、画像の横に、文章を持ってくることが出来ました~^^どうですか?<table style="border:13px dotted #eee8aa;"><tr><td><img src="http://image.space.rakuten.co.jp/lg01/27/0000114327/13/img7c9a7764zik1zj.gif" width="100" height="137" alt="knban.gif" border="0" align="left" hspace="30" vspace="30"> こんな風に、画像の横に、文章を持ってくることが出来ました~^^どうですか?</td></tr></table>align="left" ⇒ 左に寄せる(右に寄せたいときは"right")hspace="30" ⇒ 横のスペースvspace="30" ⇒ 縦のスペース文章の続きを、下に書きたい時は、<br clear=""> を使います。"left" "center" "right" で、画像下のどこに持ってきたいのか指定します。 こんな風に、画像の横に、文章を持ってくることが出来ました~^^どうですか?次の文章は、画像下の真ん中にに持ってきました。この方法は、日記や長い文章を書く時にオススメですね^^★テンプレートを探す★★テンプレートの作り方★★もっと、テンプレートの勉強をする★♪HOME♪
2008.12.15
コメント(4)
只今ランキング 5位 です今日は、サイズについてのお話です。まず、下のテンプレを使って説明します。画像価格商品説明<table border="1"><tr><td width="90" height="90">画像</td></tr><tr><td width="90" height="15">価格</td></tr><tr><td width="90">商品説明/td></tr></table>実際に、商品画像を入れてみます。500何と、驚きの500円♪こんなチャンスはめったにない!!早くしないとなくなっちゃうよ~~~何か、商品説明が読みにくいですね。。。上のテンプレは、画像中サイズに合わせています。なので、横幅が狭くなっています。こういう枠に、説明文を長く書くと、改行ばかりの文章になります。同じテンプレで、画像大サイズにすると、500何と、驚きの500円♪こんなチャンスはめったにない!!早くしないとなくなっちゃうよ~~~説明文が読みやすくなりました^^こういう風に、テンプレートに合わせて、文章を長くしたり短くしたりするとスッキリ見えますね。2つ並びのテンプレートを使う時、高さを揃えるのも、キレイに見えるコツです。やってみます。分かりやすく、外枠を表示しておきます。画像中サイズのテンプレートに、画像大を入れると、こんな感じになります。3360円【冬季限定】北海北方四島産 生うに(無添加)新鮮!剥きたて完全密封パック塩水漬け漁師のとれたてトロける生エゾバフンウニ[100g 1個]知床海洋深層水仕立て 398円秘伝の醤油に漬け込んだ鱒いくら醤油漬けサイズが大きい画像を入れたため、枠が伸びているのが分かります。画像を中サイズに変えて、説明文も短くしてみます。3360円北海道産!無添加生うに。お早めに^^398円秘伝の醤油に漬け込んだいくら醤油漬け枠を外すと、こんな感じです^^3360円北海道産!無添加生うに。お早めに^^398円秘伝の醤油に漬け込んだいくら醤油漬けいかかですか^^?★テンプレートを探す★★テンプレートの作り方★★もっと、テンプレートの勉強をする★♪HOME♪
2008.12.15
コメント(4)
只今ランキング 5位 です今日は、マスの周りを変えてみます。また、『何の事?』って、感じですよね。実際に、こちらでやってみます。『style』というのを使います。1つ目の枠2つ目の枠3つ目の枠2段目・12段目・22段目・3<table cellspacing="10" border="0"><tr><td width="130" height="130" bgcolor="#efcd9a">1つ目の枠</td><td width="130" height="130" bgcolor="#efcd9a" >2つ目の枠</td><td width="130" height="130" bgcolor="#efcd9a">3つ目の枠</td></tr><tr><td width="130" height="130" bgcolor="#efcd9a">2段目・1</td><td width="130" height="130" bgcolor="#efcd9a">2段目・2</td><td width="130" height="130" bgcolor="#efcd9a">2段目・3</td></tr></table>この1つ1つのマスの周りに、枠を付けます。直線2重枠・3px2重枠・6px 点線・1px点線・3px点線・6px ドット・3pxドット・6pxドット・13px<table cellspacing="10" border="0"><tr><td style="border:1px solid #4a2900;" width="130" height="130" bgcolor="#efcd9a;">直線</td><td style="border:3px double #4a2900;" width="130" height="130" bgcolor="#efcd9a:">2重枠・3px</td><td style="border:6px double #4a2900;" width="130" height="130" bgcolor="#efcd9a:">2重枠・6px</td></tr><tr><td style="border:1px dashed #4a2900;" width="130" height="130" bgcolor="#efcd9a;">点線・1px</td><td style="border:3px dashed #4a2900;" width="130" height="130" bgcolor="#efcd9a;">点線・3px</td><td style="border:6px dashed #4a2900;" width="130" height="130" bgcolor="#efcd9a;">点線・6px</td></tr><tr><td style="border:3px dotted #4a2900;" width="130" height="130" bgcolor="#efcd9a;">ドット・3px</td><td style="border:6px dotted #4a2900;" width="130" height="130" bgcolor="#efcd9a;">ドット・6px</td><td style="border:13px dotted #4a2900;" width="130" height="130" bgcolor="#efcd9a;">ドット・13px</td></tr></table>いかがですか?^^それでは、今度は、背景の色を消します。『bgcolor="#ffffff"』にします。直線2重枠・3px2重枠・6px 点線・1px点線・3px点線・6px ドット・3pxドット・6pxドット・13px<table cellspacing="10" border="0"><tr><td style="border:1px solid #4a2900;" width="130" height="130" bgcolor="#ffffff;">直線</td><td style="border:3px double #4a2900;" width="130" height="130" bgcolor="#ffffff;">2重枠・3px</td><td style="border:6px double #4a2900;" width="130" height="130" bgcolor="#ffffff;">2重枠・6px</td></tr><tr><td style="border:1px dashed #4a2900;" width="130" height="130" bgcolor="#ffffff;">点線・1px</td><td style="border:3px dashed #4a2900;" width="130" height="130" bgcolor="#ffffff;">点線・3px</td><td style="border:6px dashed #4a2900;" width="130" height="130" bgcolor="#ffffff;">点線・6px</td></tr><tr><td style="border:3px dotted #4a2900;" width="130" height="130" bgcolor="#ffffff;">ドット・3px</td><td style="border:6px dotted #4a2900;" width="130" height="130" bgcolor="#ffffff;">ドット・6px</td><td style="border:13px dotted #4a2900;" width="130" height="130" bgcolor="#ffffff;">ドット・13px</td></tr></table>好きなモノがありましたか??★テンプレートを探す★★テンプレートの作り方★★もっと、テンプレートの勉強をする★♪HOME♪
2008.12.12
コメント(4)
只今ランキング 5位 です今日は、背景に色をつけます。『何の事?』って、感じですよね。実際に、こちらでやってみます。『bgcolor="カラーコード"』というのを使います。1つ目の枠2つ目の枠3つ目の枠2段目・12段目・22段目・3<table cellspacing="10" border="0"><tr><td width="130" height="130" bgcolor="#75c6d2">1つ目の枠</td><td width="130" height="130" bgcolor="#c4d6ff" >2つ目の枠</td><td width="130" height="130" bgcolor="#75c6d2">3つ目の枠</td></tr><tr><td width="130" height="130" bgcolor="#c4d6ff">2段目・1</td><td width="130" height="130" bgcolor="#75c6d2">2段目・2</td><td width="130" height="130" bgcolor="#c4d6ff">2段目・3</td></tr></table>これには、実はこういう枠が付いています。1つ目の枠2つ目の枠3つ目の枠2段目・12段目・22段目・3『border="0"』を使い、周りの枠を表示しないようにしています。大きな枠で、小さなマスを囲んでいると思った方が良いでしょう。そこで、色を付けてみます。1つ目の枠2つ目の枠3つ目の枠2段目・12段目・22段目・3<table cellspacing="10" border="0" bgcolor="#745c4a"><tr><td width="130" height="130" bgcolor="#75c6d2">1つ目の枠</td><td width="130" height="130" bgcolor="#c4d6ff" >2つ目の枠</td><td width="130" height="130" bgcolor="#75c6d2">3つ目の枠</td></tr><tr><td width="130" height="130" bgcolor="#c4d6ff">2段目・1</td><td width="130" height="130" bgcolor="#75c6d2">2段目・2</td><td width="130" height="130" bgcolor="#c4d6ff">2段目・3</td></tr></table>こんな感じもありますよ^^1つ目の枠2つ目の枠3つ目の枠2段目・12段目・22段目・3<table cellspacing="10" border="0" bgcolor="#ff9c83"><tr><td width="130" height="130" bgcolor="#75c6d2">1つ目の枠</td><td width="130" height="130" bgcolor="#c4d6ff" >2つ目の枠</td><td width="130" height="130" bgcolor="#75c6d2">3つ目の枠</td></tr><tr><td width="130" height="130" bgcolor="#c4d6ff">2段目・1</td><td width="130" height="130" bgcolor="#75c6d2">2段目・2</td><td width="130" height="130" bgcolor="#c4d6ff">2段目・3</td></tr></table>こういうのは、どうでしょう??1つ目の枠2つ目の枠3つ目の枠2段目・12段目・22段目・3<table cellspacing="10" border="0" bgcolor="#75c6d2"><tr><td width="130" height="130" bgcolor="#75c6d2">1つ目の枠</td><td width="130" height="130" bgcolor="#c4d6ff" >2つ目の枠</td><td width="130" height="130" bgcolor="#75c6d2">3つ目の枠</td></tr><tr><td width="130" height="130" bgcolor="#c4d6ff">2段目・1</td><td width="130" height="130" bgcolor="#75c6d2">2段目・2</td><td width="130" height="130" bgcolor="#c4d6ff">2段目・3</td></tr></table>中にある小さなマスの色と、大きな枠の色を同じにすれば、境目がなくなります。どうですか?テンプレートを作りたくなりませんか??^^★テンプレートを探す★★テンプレートの作り方★★もっと、テンプレートの勉強をする★♪HOME♪
2008.12.11
コメント(6)
只今ランキング 5位 です先日、こういう表の様なものを作りました。では、バランスを調整してみましょう。『cellspacing="数字"』 を使います。1つ目の枠2つ目の枠3つ目の枠2段目・12段目・22段目・3<table border="0"><tr><td width="130" height="130" bgcolor="#75c6d2">1つ目の枠</td><td width="130" height="130" bgcolor="#c4d6ff" >2つ目の枠</td><td width="130" height="130" bgcolor="#75c6d2">3つ目の枠</td></tr><tr><td width="130" height="130" bgcolor="#c4d6ff">2段目・1</td><td width="130" height="130" bgcolor="#75c6d2">2段目・2</td><td width="130" height="130" bgcolor="#c4d6ff">2段目・3</td></tr></table>では、"5" に設定します。1つ目の枠2つ目の枠3つ目の枠2段目・12段目・22段目・3<table cellspacing="5" border="0"><tr><td width="130" height="130" bgcolor="#75c6d2">1つ目の枠</td><td width="130" height="130" bgcolor="#c4d6ff" >2つ目の枠</td><td width="130" height="130" bgcolor="#75c6d2">3つ目の枠</td></tr><tr><td width="130" height="130" bgcolor="#c4d6ff">2段目・1</td><td width="130" height="130" bgcolor="#75c6d2">2段目・2</td><td width="130" height="130" bgcolor="#c4d6ff">2段目・3</td></tr></table>今度は、"10" に設定します。1つ目の枠2つ目の枠3つ目の枠2段目・12段目・22段目・3<table cellspacing="10" border="0"><tr><td width="130" height="130" bgcolor="#75c6d2">1つ目の枠</td><td width="130" height="130" bgcolor="#c4d6ff" >2つ目の枠</td><td width="130" height="130" bgcolor="#75c6d2">3つ目の枠</td></tr><tr><td width="130" height="130" bgcolor="#c4d6ff">2段目・1</td><td width="130" height="130" bgcolor="#75c6d2">2段目・2</td><td width="130" height="130" bgcolor="#c4d6ff">2段目・3</td></tr></table>いかかですか??★テンプレートを探す★★テンプレートの作り方★★もっと、テンプレートの勉強をする★♪HOME♪
2008.12.09
コメント(4)
只今ランキング 5位 です今日は、マスを縦に繋げてみます。まずは、分かりやすく、こういう枠で説明します。1段目・11段目・21段目・32段目・12段目・22段目・33段目・13段目・23段目・3<table border="1"><tr><td width="130" height="130">1段目・1</td><td width="130" height="130">1段目・2</td><td width="130" height="130">1段目・3</tr><tr><td width="130" height="130">2段目・1</td><td width="130" height="130">2段目・2</td><td width="130" height="130">2段目・3</td></tr><tr><td width="130" height="130">3段目・1</td><td width="130" height="130">3段目・2</td><td width="130" height="130">3段目・3</td></tr></table>これの『1段目・1』と『2段目・1』をつなげます。それには、 <rowspan="数字"> を使います。今回は、2つの枠をつなげたいので、"2"と入力します。1段目・11段目・21段目・32段目・22段目・33段目・13段目・23段目・3<table border="1"><tr><td rowspan="2" width="130" height="260">1段目・1</td><td width="130" height="130">1段目・2</td><td width="130" height="130">1段目・3</tr><tr><td width="130" height="130">2段目・1</td><td width="130" height="130">2段目・2</td><td width="130" height="130">2段目・3</td></tr><tr><td width="130" height="130">3段目・1</td><td width="130" height="130">3段目・2</td><td width="130" height="130">3段目・3</td></tr></table>『2段目・1』が、無くなったのは分かりますか?では、今度は『3段目・1』もつなげます。1段目・11段目・21段目・32段目・22段目・33段目・23段目・3<table border="1"><tr><td rowspan="3" width="130" height="390">1段目・1</td><td width="130" height="130">1段目・2</td><td width="130" height="130">1段目・3</tr><tr><td width="130" height="130">2段目・2</td><td width="130" height="130">2段目・3</td></tr><tr><td width="130" height="130">3段目・2</td><td width="130" height="130">3段目・3</td></tr></table>こんな感じになりました^^いかがでしょうか?★テンプレートの作り方★★もっと、テンプレートの勉強をする★♪HOME♪
2008.12.09
コメント(4)
只今ランキング 5位 です今日は、マスを繋げてみます。まずは、分かりやすく、こういう枠で説明します。 1つ目の枠2つ目の枠3つ目の枠2段目・12段目・22段目・3<table border="1"><tr><td width="130" height="130">1つ目の枠</td><td width="130" height="130">2つ目の枠</td><td width="130" height="130">3つ目の枠</tr><tr><td width="130" height="130">2段目・1</td><td width="130" height="130">2段目・2</td><td width="130" height="130">2段目・3</td></tr></table>これの『1つ目の枠』と『2つ目の枠』をつなげます。それには、 <colspan="数字"> を使います。今回は、2つの枠をつなげたいので、"2"と入力します。1つ目の枠&2つ目の枠3つ目の枠2段目・12段目・22段目・3<table border="1"><tr><td colspan="2" width="260" height="130">1つ目の枠&2つ目の枠</td><td width="130" height="130">3つ目の枠</tr><tr><td width="130" height="130">2段目・1</td><td width="130" height="130">2段目・2</td><td width="130" height="130">2段目・3</td></tr></table>変更した部分を、赤で表示しています。この時に、幅の大きさを変えるのも忘れないで^^では、今度は3つのマスをつなげます。1つ目の枠&2つ目の枠&3つ目の枠2段目・12段目・22段目・3<table border="1"><tr><td colspan="3" width="390" height="130">1つ目の枠&2つ目の枠&3つ目の枠</td></tr><tr><td width="130" height="130">2段目・1</td><td width="130" height="130">2段目・2</td><td width="130" height="130">2段目・3</td></tr></table>こんな感じで、マスを繋げると、グッとテンプレートらしくなってきます^^次回は、縦のマスを繋げます。★テンプレートの作り方★★もっと、テンプレートの勉強をする★♪HOME♪
2008.12.08
コメント(3)
只今ランキング 5位 です今日は、枠に色を付けてみます。まずは、先日作った枠でやってみます。 1つ目の枠2つ目の枠3つ目の枠2段目・12段目・22段目・3<table border="1"> <tr><td width="130" height="130">1つ目の枠</td><td width="130" height="130">2つ目の枠</td><td width="130" height="130">3つ目の枠</tr><tr><td width="130" height="130">2段目・1</td><td width="130" height="130">2段目・2</td><td width="130" height="130">2段目・3</td></tr></table>では、枠の1つ1つに色を付けていきましょう。『bgcolor="カラーコード"』 を使って色を付けていきます。 1つ目の枠2つ目の枠3つ目の枠2段目・12段目・22段目・3<table border="1"><tr><td width="130" height="130" bgcolor="#4e1500">1つ目の枠</td><td width="130" height="130" bgcolor="#c6aa85" >2つ目の枠</td><td width="130" height="130" bgcolor="#4e1500">3つ目の枠</td></tr><tr><td width="130" height="130" bgcolor="#c6aa85">2段目・1</td><td width="130" height="130" bgcolor="#4e1500">2段目・2</td><td width="130" height="130" bgcolor="#c6aa85">2段目・3</td></tr></table>何だか、アフィリエイトテンプレートっぽい感じになりました^^外側のグレーの枠がイマイチ。。。という方は、『border="0"』というのを使い、回りに枠を消しましょう。1番始めにある『<table border="1"』の数字を『"0"』にします。すると、下の様に、周りの枠が消えます。1つ目の枠2つ目の枠3つ目の枠2段目・12段目・22段目・3どうですか?色を変えて、自分のページに合うようにして下さい^^★テンプレートの作り方★★もっと、テンプレートの勉強をする★♪HOME♪
2008.12.07
コメント(2)
只今ランキング 4位 です表を作りましょう。まずは、分かりやすいように、下の表を作ります。1つ目の枠2つ目の枠3つ目の枠<table border="1"><tr><td>1つ目の枠</td><td>2つ目の枠</td><td>3つ目の枠</td></tr></table>そして、これを2段にします。この時、「tr」を使い増やしていきます。「tr」と一緒に、「td」もいっしょに増やすのを忘れずに。 1つ目の枠2つ目の枠3つ目の枠2段目・12段目・22段目・3<table border="1"> <tr><td>1つ目の枠</td><td>2つ目の枠</td><td>3つ目の枠</td></tr><tr><td>2段目・1</td><td>2段目・2</td><td>2段目・3</td></tr></table>赤い部分を増やすと、2段に増やす事が出来ます^^では、アフィリエイト画像・大が入るように高さと幅を設定します。 2つ目の枠3つ目の枠2段目・12段目・22段目・3<table border="1"> <tr><td width="130" height="130">1つ目の枠</td><td width="130" height="130">2つ目の枠</td><td width="130" height="130">3つ目の枠</tr><tr><td width="130" height="130">2段目・1</td><td width="130" height="130">2段目・2</td><td width="130" height="130">2段目・3</td></tr></table>どうですか?^^イイ感じでしょう~。★テンプレートの作り方★★もっと、テンプレートの勉強をする★♪HOME♪
2008.12.06
コメント(8)
只今ランキング 5位 です今日は、枠を縦に並べてみましょう^^マスが1つの場合1つ目の枠<table border="1"><tr><td>1つ目の枠</td></tr></table>マスを2つに増やします1つ目の枠2つ目の枠<table border="1"><tr><td>1つ目の枠</td></tr><tr><td>2つ目の枠</td></tr></table>マスを3つに増やします1つ目の枠2つ目の枠3つ目の枠<table border="1"><tr><td>1つ目の枠</td></tr><tr><td>2つ目の枠</td></tr><tr><td>3つ目の枠</td></tr></table>更に、高さや幅を変えていきます^^アフィリエイト画像(大)が入るサイズ1つ目の枠2つ目の枠3つ目の枠<table border="1"><tr><td width="130" height="130">1つ目の枠</td></tr><tr><td width="130" height="130">2つ目の枠</td></tr><tr><td width="130" height="130">3つ目の枠</td></tr></table>いかがですか?<tr> は、『行が増える』感じです。では、次は、実際に表を作りましょう^^★もっと、テンプレートの勉強をする★♪HOME♪
2008.12.06
コメント(5)
只今ランキング 4位 です今日は、枠を横に並べてみましょう^^<table><tr><td>~</td></tr></table>これが、1つの枠の基本ですが、マスを増やしたい時は、 <td> で増やしていきます。マスが1つの場合1つ目の枠<table border="1"><tr><td>1つ目の枠</td></tr></table>マスを2つに増やします1つ目の枠2つ目の枠<table border="1"><tr><td>1つ目の枠</td><td>2つ目の枠</td></tr></table>マスを3つに増やします1つ目の枠2つ目の枠3つ目の枠<table border="1"><tr><td>1つ目の枠</td><td>2つ目の枠</td><td>3つ目の枠</td></tr></table>更に、高さや幅を変えていきます^^アフィリエイト画像(大)が入るサイズ1つ目の枠2つ目の枠3つ目の枠<table border="1"><tr><td width="130" height="130">1つ目の枠</td><td width="130" height="130">2つ目の枠</td><td width="130" height="130">3つ目の枠</td></tr></table>枠の色や種類を変えるやり方は、また今度^^★もっと、テンプレートの勉強をする★♪HOME♪
2008.12.05
コメント(0)
只今ランキング 3位 ですテンプレート枠の作り方の紹介です。これが、テンプレートの基礎となります。ここに文章や画像これを表示したい時は、下の様に入力します。<table width="300" height="50" style="border:1px solid #ff0000;"><tr><td>ここに文章や画像</td></tr></table>width="400" height="50" は、枠のサイズを表します。ここの数字を変えると、枠の大きさを自由に変える事が出来ます^^幅を広げたい時は、width="○○"高さを広げたい時は、height="○○"で調整します。次は、枠の種類です。『dashed』・『double』・『dotted』などの種類があります。まずは、『dashed』です。ここに文章や画像これを表示したい時は、下の様に入力します。<table width="300" height="50" style="border:1px dashed #ff0000;"><tr><td>ここに文章や画像</td></tr></table>次は、『double』です。ここに文章や画像これを表示したい時は、下の様に入力します。<table width="300" height="50" style="border:3px double #ff0000;"><tr><td>ここに文章や画像</td></tr></table>この時、線の大きさを変えた方が良いです。線の大きさは、『border:3px 』の数字で変更出来ます。4pxにすると、外枠が大きくなって、可愛いですよ^^お次は、『dotted』です。ここに文章や画像これを表示したい時は、下の様に入力します。<table width="300" height="50" style="border:3px dotted #ff0000;"><tr><td>ここに文章や画像</td></tr></table>この、『dotted 』の大きさ・色を変えると、様々な枠を作る事が出来ます。では、『border:3px 』を、『6px』に変えます。ここに文章や画像次は、『border:3px 』を、『12px』に変えます。ここに文章や画像最後は、『border:3px 』を、『15px』に変えます。ここに文章や画像好きな枠はありましたか??^^★もっと、テンプレートの勉強をする★♪HOME♪
2008.12.04
コメント(6)
全17件 (17件中 1-17件目)
1