バカネコ日記

フリーページ

2006年06月17日
XML
カテゴリ:バカネコPC講座
バカネコ村の記事を検索する
本日のバカネコ講座は、要望の多かった交差する画像の作り方。

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

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



【作成手順】

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

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

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

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

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

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

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

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

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

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

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

<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としたサンプル例である。





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


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


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

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




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


クリックしてね! ブログランキング↓
ぜひ、クリックしてね



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


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


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


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








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

PR

バックナンバー

2019年08月
2019年07月
2019年06月
2019年05月
2019年04月

プロフィール


海獣トド

コメント新着

 海獣トド@ Re:意外な一面に触れて。(08/14) 泡雪さんへ >マザーテレサって本当にす…
 海獣トド@ うめぼしがキラリ☆さんへ >ひゃー、ブログさぼってる間にトドさん…
 海獣トド@ 鵜の岬さんへ >これからも・・ヨロシク・・ね こち…
 海獣トド@ sshijimisanさんへ >でも、トド様のおかげで少しの村民は救…
 海獣トド@ もぐらのこさんへ >日記の下書き機能残ってるよ(^-^) …
 海獣トド@ archfelisさんへ >せめて12日一杯残せばいいのに・・・…

Copyright (c) 1997-2019 Rakuten, Inc. All Rights Reserved.