バカネコ日記

フリーページ

保存ﾌｧｲﾙ見方

< 新しい記事

新着記事一覧(全963件)

過去の記事 >

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

2006年06月17日

交差する画像の作り方

(20)

カテゴリ：バカネコＰＣ講座

本日のバカネコ講座は、要望の多かった交差する画像の作り方。

今回のHTMLは、別に珍しい裏技というわけではなく、
既に、使っている方もおられる。
それでも、わから～ん、という方のための作り方を紹介する。
こんなやつである　↓

まともにタグの解説をすると、初心者にはチンプンカンプンかと思われるので、
ややこしいタグの説明は省いて、いきなり作ってみよう。

【作成手順】

雛形を用意したので、画像のURLとサイズだけ入れればよい。

１．まず、タテヨコのサイズが、同じ画像を２枚用意し、
　　それぞれ、画像Ａ、画像Ｂとする。
　　同サイズの画像を作るのが面倒なら、左右反転させて
　　２枚分確保する。
→　ペイントで「ラクして別の画像を作るワザ」参照。

２．画像をアップロードし、そのURLをメモしておく。

３．画像の、タテヨコの寸法を確認しておく。　
　　（あとから、タテは Heght= で、ヨコは width= で指定するため）
　　画像ファイルをペイントで開いて、メニューの「変形」から、
　　「キャンバスの色とサイズ」を選択すればわかる。　単位はピクセル。

４．下記のHTMLを、メモ帳などにコピーして貼り付ける。

　　<DIV style="Z-INDEX: 1; POSITION: relative; TOP: 0px">
　　<MARQUEE>
　　<img border="0" src=" 画像Ａの場所 " width=" ○○ " height=" △△ "">
　　</MARQUEE>
　　</DIV>

　　<DIV style="Z-INDEX: 2; POSITION: relative; TOP: -△△px
　　<MARQUEE direction=right>
　　<img border="0" src=" 画像Ｂの場所 " width=" ○○ " height=" △△ ">
　　</MARQUEE></DIV>

５．画像Ａ、画像Ｂの場所(URL)の部分を、それぞれ、
　　用意したものに書き換える。
　　　( 例　src="http://rakluten/xxx/right.jp" など)

６． ○○ の部分を、画像の横幅サイズで置き換える→２カ所。
　　同様に △△ の部分も、画像の高さで書き換える→３カ所。
　　「TOP: - △△ px」の部分は、マイナス記号(-)や単位(px)を忘れぬように。

７．日記ページは自動改行されるので、「改行」をすべて削除して、
　　１行につなげる。

できあがると、以下のようになる。

<DIV style="Z-INDEX: 1; POSITION: relative; TOP: 0px"><MARQUEE><img border="0" src="http://～" width="400" height="200""></MARQUEE></DIV><DIV style="Z-INDEX: 2; POSITION: relative; TOP: -200px"><MARQUEE direction=right><img border="0" src="http:/～" width="400" height="200"></MARQUEE></DIV>

画像のサイズは、便宜上、タテ200、ヨコ400としたサンプル例である。

【本日のポイント】
１．同サイズ画像を２枚用意して、タテヨコのサイズをメモ。
２．２枚目の画像を、最初の画像に重ねるため、画像の高さ分だけ
　　その位置を引き上げている。　（ここがミソ）
３．マイナス記号や単位を落とさないように。
４．自動改行対策として、全てを１行につなげる。

【参考資料】
　・ラクして別の画像を作るワザ

【注意】
　ヨコのサイズは、関係ないように思うが、実はこれも指定しておかないと
　動きが左右対称にならず、見苦しくなる。
　このHTMLは、日記ページでは正常に機能するが、フリーページでは
　上下に分離してしまって、うまく表示されない。
　残念ではあるが、ご了承いただきたい。
　自動改行のページで、DIVタグを使うせいか、下部が少し間延びするが、
　これも今回、処置はしていない。　あしからず。
　段落または文末など、下に空間出来ても、違和感のないようなところに
　配置する方が、よりバランスがとれる。

【トド短信】
　用語や意味が分からない、という意見もあったので、
　質問はこのページに、書き込んでいただくと、出来る範囲で
　バカネコ講座でも取り上げます。
　ただし、用語辞典や検索サイトを使って、ご自分で調べる
　努力も大切です。

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

クリックしてね！　ブログランキング↓

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

ネコでもわかるＰＣ講座はこちら　→　バカネコ講座

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

画面右上「日記リンク追加」をクリック、「◎追加する」ボタンを押すとこの日記がリンクできます。
このサイトの新着記事の通知をご希望の方はご利用ください。

お気に入りの記事を「いいね！」で応援しよう

最終更新日 2006年06月18日 21時23分13秒
コメント(20) | コメントを書く

[バカネコＰＣ講座] カテゴリの最新記事

マイドキュメントフォルダを、Ｄドライブ… 2008年08月12日コメント(22)
保存できないWebページを保存するには 2008年07月03日コメント(22)
Outlook Express を整備してドライブの空… 2007年11月21日コメント(28)

■コメント

Re:交差する画像の作り方(06/17)

朱のANTARES さん

DIVの入れ子は仕切りが高く感じるので敬遠しがち…
覚えるとためになりますけど、面倒だからって省いた村長の判断に賛成。
今は(も)CPUが過負荷なので無理です。(苦笑)

＞ただし、用語辞典や検索サイトを使って、ご自分で調べる
＞努力も大切です。

ですよね～、苦労しないと見に付きませんからねぇ。
（手抜きしている人間がそれを言うなとか言われそう）
今、手持ちの資料でタグの意味を調べてます。
とりあえず、Z-INDEXは横方向（Z軸）の移動指定だってことは判りました。
あとは…
(2006年06月17日 17時32分24秒)