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://hama-sush-jp.pro/exlink/entry-10073480287.html#t002 ">前回の002のテーブルです</a>
#t002 がミソです
http://hama-sush-jp.pro/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名をつけてしまうことです
これではその場所には飛びません