CSS 新広告をなんとかしちゃおう 6
どんな色でどんなテーブルができるか見本です
（できればＩＥでご覧下さい・・・・ＩＥ以外では外枠が黒くなってしまいます・・・）
| このテーブルは |
<table cellspacing="0" bgcolor="#ffe5ff" bordercolorlight="#fcf9ff" bordercolordark="#ffe0e0" cellpadding="2" width="150" border="1">
<tr><td style="text-align: center;font-size:13px;color:#ff99ff;">このテーブルは</td></tr>
<tr><td style="height:50px; background:#ffffff;" > </td></tr>
</table>
| このテーブルは |
<table cellspacing="0" bgcolor="#ffb7ff" bordercolorlight="#ffeaff" bordercolordark="#ffb2d8" cellpadding="2" width="150" border="1">
<tr><td style="text-align: center;font-size:13px;color:#ffffff;">このテーブルは</td></tr>
<tr><td style="height:50px; background:#ffeaff;" > </td></tr>
</table>
| このテーブルは |
<table cellspacing="0" bgcolor="#ddffbc" bordercolorlight="#efffe0" bordercolordark="#b7ffb7" cellpadding="2" width="150" border="1">
<tr><td style="text-align: center;font-size:13px;color:#7fff7f;">このテーブルは</td></tr>
<tr><td style="height:50px; background:#ffffff;" > </td></tr>
</table>
| このテーブルは |
<table cellspacing="0" bgcolor="#ccffff" bordercolorlight="#efffff" bordercolordark="#d1e8ff" cellpadding="2" width="150" border="1">
<tr><td style="text-align: center;font-size:13px;color:#9999ff;">このテーブルは</td></tr>
<tr><td style="height:50px; background:#f9fcff;" > </td></tr>
</table>
| このテーブルは |
<table cellspacing="0" bgcolor="#ffff99" bordercolorlight="#ffffea" bordercolordark="#ffff7f" cellpadding="2" width="150" border="1">
<tr><td style="text-align: center;font-size:13px;color:#ff7fff;">このテーブルは</td></tr>
<tr><td style="height:50px; background:#ffffff;" > </td></tr>
</table>
次はこのテーブルをプリントスクリーンを使って画像にします・・・・・
※できればＩＥでご覧下さい・・・・ＩＥ以外では外枠が黒くなってしまいます・・・
CSS 新広告をなんとかしちゃおう 5
結局4を飛ばしちゃいました・・・
広告のテーブルを使った背景画像の作り方です
前回のように広告の裏にテーブルが置ければ楽なのですが
そうはいきませんので広告にあわせたテーブルを作って画像にします
まずはテーブル
記事を書くで新規に開いて適当なタイトルをつけます
公開はしません、タイトルがないとプレビューが出来ませんので・・・・
<table cellspacing="0" bgcolor="#e5e5e5" bordercolorlight="#cbcbcb" bordercolordark="#ffffff" cellpadding="2" width="400" border="1">
<tr>
<td style="text-align: center;font-size:13px;color:#999999;">この広告はアメブロが自動的につけています。</td>
</tr>
<tr>
<td style="height:170px; background:#ffffff;" > </td>
</tr>
</table>
HTMLタグを表示でHTMLに上のテーブルをコピペします
基本的には赤い部分横と縦と文面を変更してください
なれてきたら色なんかも変えてみてください
| この広告はアメブロが自動的につけています。 |
コピペしたらタグの非表示に切り替えますと↑このようにテーブルが現れます
で、今度は表示を確認する・・・プレビューしちゃうんですね
ちょうど都合よく広告の上にテーブルが表示されます
テーブルの横と縦だけみて合っていないようでしたら
記事を書く画面に戻って赤字部分の横と縦を調整してから
またプレビューを繰り返してちょうど良いサイズにします
※広告の横幅はテーブルに入るように調節します
広告の縦は広告の説明文が長くなって2行になることを考慮して余裕を持って作ってください
完成したらとりあえずは下書き（非公開）で保存しておきます
横を合わせるのに、こんな方法でもサイズ変更が可能です
タグの非表示画面でテーブルの角をクリックして変形のカーソルを出します
カーソルを角にもっていって4方向のカーソールになったらクリックします
横変形のカーソルにして横に変形させます
変形させたらプレビューしてサイズが合うまで調節します
※斜めにも縦にも変形可能なのですが・・・・・
<table width="400" bgcolor="#e5e5e5" bordercolorlight="#cbcbcb"bordercolordark="#ffffff" border="1" cellspacing="0" cellpadding="1">
<tr>
<td>
<table width="100%" bgcolor="#e5e5e5" bordercolorlight="#cbcbcb" bordercolordark="#ffffff" border="1" cellspacing="0" cellpadding="2" >
<tr>
<td style="text-align:center;font-size:13px;color:#999999;">この広告はアメブロが自動的につけています。</td>
</tr>
<tr>
<td style="height:170px;background:#ffffff;" > </td>
</tr>
</table>
</td>
</tr>
</table>
<table width="400" border="1" bgcolor="#e5e5e5" bordercolorlight="#cbcbcb" bordercolordark="#ffffff" cellspacing="0" cellpadding="1">
<tr>
<td style="height:170px;background:#e5e5e5;" > </td>
</tr>
</table>
<table width="400" border="1" bgcolor="#fafcc7" bordercolorlight="#ffffff" bordercolordark="#cbcbcb" cellspacing="5" cellpadding="1" >
<tr>
<td style="border:dotted 1px #cccc00;height:170px;background:#fafcc7;" > </td>
</tr>
</table>
・・・・なんかテーブルなんてしばらく使っていなかったから間違っていたらどうしましょ？
まっ、公開するわけじゃないからいいか・・・・
色の組み合わせは「CSS 新広告をなんとかしちゃおう 6 」を参考にして下さい
※ついでに？ちょっとリンクのお話・・・・
普通リンクはページトップへ貼りますが
このページの「前回の002のテーブルです
」のリンクのように
あるページの特定の場所へリンクを張る事ができます
これの書き方は
<a href="http://ameblo.jp/exlink/entry-10073480287.html#t002 ">前回の002のテーブルです</a>
#t002 がミソです
http://ameblo.jp/exlink/entry-10073480287.html までは普通のリンクです
この後にそのページのドコに飛ぶのかを#に続けて書きます・・・・
リンク先のページにはidとかnameでフラグメント（場所）を作っておきます
あるいはすでにあるidとかを指定します
記事の途中でココに飛ばしたいってところがあったら
<div id="abc"></div>
って入れておけばいいんです
あるいは別の記事を書いていて過去のあの部分に詳しく書いてあったのに・・・・なんてときも
過去のあの部分の上に<div id="abc"></div>を書き加えておいて
<a href="/***/entry-0000000.html#abc">詳しくはココ見てください</a>
で、ＯＫ
注意として2つ以上同じ名前があってはダメです
たとえば各ページに広告は1つしかありませんので
リンク先URL#advertising2 ってリンクするとそのページの広告部分が表示されます
普通に作れば1ページに同じid名は付けられませんので重複はありえないのですが・・・
むりやり同じid名を作らないで下さい
classは同じページに同じ名前でいくつあってもＯＫですが、idは同じページに同じ名前はNG
名前の付け方には約束があります
アルファベット［A-Za-z］で始まり、アルファベット、数字［0-9］ 、ハイフン( - )、アンダースコア( _ )、コロン( : )、ピリオド( . )を組み合わせた名前でなければダメです
私がよくやるミスは数字だけのid名をつけてしまうことです
これではその場所には飛びません
またトップページ変えましたか？
アメブロ・・・・・・
今晩、まったくトップページに入れませんでした・・・・
やっと入れたと思ったら・・・・・・
字の大きさがでっかくなっちゃってる・・・
皆さんの中には逆にちっちゃくなって読めないって方もいると思います
前にもあったんですが
アメブロが意識してやったのか
またはＣＳＳのエラーなのかはアナウンスがありませんのでわかりません
1/30 でっか～
http://ameblo.jp/exlink/entry-10069053345.html
ブラウザーの表示で文字の大きさを変えて、
トップページの左下の小・中・大で調節して
自分に合った文字サイズにして下さい・・・・・
もし、意識して変えたのでしたら
アクセシビリティ・・・ってやつです
少しだけ1/30の記事で説明してあります
簡単に説明すると・・・・
サイトの文字は見る方が見やすい大きさで見ることが出来るようにする・・・・
目の良い若い方は小さい文字で記事を書きますが
目の悪い私らからすると文字を大きくして欲しいわけですよ・・・
で、ブラウザーについている表示で文字の大きさを変えようとするんですが・・・・・
これまた・・・・
なにをしても変わらないんですよ・・・・・
ためしにブログサイトの上で変更をしてみてください
変わらないはずです・・・・・・
これ・・・・
私もサイトを作るときやっちゃうんですが
文字を大きくされると・・・・
レイアウトがメチャクチャになっちゃうんです
だからココはなんpx、こっちはなんpxってがちがちに固めちゃうんです
できるだけ見る方全部に意図したデザインで見せたいっていう制作側のエゴです
それでもトップページの小・中・大で調節できるようにしてあったのは
３段階だけじゃ意味ないかもですが・・・・・それでもアクセシビリティ・・・ってやつです
利用者の立場に立つと自由に文字サイズが変えられるのは良いことなんです
作る方からすると頭が痛くなるのですが・・・・・
って、プロじゃない私が言ってることですから適当に流してくださいな