バカネコ日記

フリーページ

保存ﾌｧｲﾙ見方

< 新しい記事

新着記事一覧(全963件)

過去の記事 >

全て | カテゴリ未分類 | バカネコＰＣ講座 | バカネコのお話

2005年05月15日

本日のバカネコ講座は、背景の使い方について。

写真の上に文章を重ねる、つまり、写真を背景として
文章を書く方法について紹介しよう。
すでに、使いこなしておられる方も多いが、一応初めての方のために。

通常のwebサイトなら、ページ全体に背景を使うのは、簡単だ。
ボディタグ<body>に、 background="画像のURL"
という呪文を仕込んでおしまい。　つまりこうだ。
<body background="画像のURL">

だが、楽天日記のようなブログでは、ボディタグがいじれないので、
少し小細工が必要だ。
なので今回は、よく使う表組み、すなわちテーブルタグ<table>を使ってみよう。

ではさっそく、始める。
カラッポのテーブルは、
<table><tr><td></td></tr></table>
と書けば良い。　中身は仮に、「こんにちは」とでもしておこうか。

つまり、こう書く。
<table><tr><td>こんにちは</td></tr></table>
これは、１行１列の表、というより、タダの枠だ。

これに、背景をセットしよう。
何のことはない、先ほど出てきた、background="画像のURL"　という呪文を放り込むだけである。
backgroundというのは、背景という意味であるから、そのまんまである。

<table background="画像のURL" ><tr><td>こんにちは</td></tr></table>
これで、テーブル全体の背景がセットされる。
もちろん、いつも通り、テーブル内部に好きな文章が書けることは言うまでもない。

ためしに、ライオンの画像を設定してみる。
<table background="画像のURL"><tr><td>こんにちは</td></tr></table>

こんにちは

　↑　ありゃりゃ、なんじゃ、こりゃ。

サイズ指定を忘れると、こうなる。
じゃ、テーブルのサイズを指定しよう。
幅は width、高さは heightで指定するのであった。
写真のサイズに合わせて、テーブルのサイズを指定してみると．．．
　　　　↓
<table background="画像のURL" width="400" height="400" ><tr><td >こんにちは</td></tr></table>

こんにちは

ライオンは出てきた。
さっきのは、左上の片隅しか出ていなかったわけだ。
しかし、「こんにちは」はどこに行った？

原因は簡単。
黒い背景に、黒い文字だからよく見えないのだ。
じゃ、文字色を白くするか。　ついでにサイズも大きくしてみよう。
　　　↓
<table background="画像のURL" width="400" height="400"><tr><td> <font size="6" color="#FFFFFF">こんにちは</font> </td></tr></table>

こんにちは

こうやれば、画像処理などしなくても、写真の上にがんがん文字が重ねて書けるわけだ。
ただ、注意点すべき点も多々あるが、それはまた次回にしよう。

【今日のポイント】
１．背景を使うと、写真の上に文章を簡単に重ねて書ける。
２．雰囲気作りにも使える。

【次回予告】
　背景の設定　その２
　画像と枠の大きさの関係。
　中身の文章の位置決め。

【トド短信】
　背景か．．．これ、奥が深いんだよね。

この記事がおもしろかったと思う人は１票！　クリック　→

・楽天日記専用バックアップツール、バーニャン３号のサンプル版、
　「バーニャン・ミニ」のダウンロードはこちら。
・にゃんタグのサンプル版は、このページの中段付近。
・バカネコ・ビューアのダウンロードはここ。

※バカネコ講座では、安全な方法を選んで紹介していますが、
　途中でわけがわからなくなっても、責任は負えませんので、あらかじめご了承下さい。

ネコでもわかるＰＣ講座はこちら　→　バカネコ講座
秋葉原にもない楽天専用ツール　　→　バカネコソフト

【楽天トラベル】バカネコ講座バカネコソフトバカネコ村爆笑ガイド猫砂の研究パソコン購入費用の削り方現物の投下位置ずぼらなアクセスアップページを読みやすくする方法バーニャン１号ミニバーニャン１号の秘密にゃんこのコスプレテキストリンク下線の消し方楽しめるアフィリ己を知れ自分のＰＣを知るバカネコ・ビューアバーニャン３号にゃんタグ・フルバージョン

HTMLオンチでもＯＫ！　いきなり使える