みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

フォトショップのスライス機能で分割、web用保存した部分全体にリンクを貼りたい

画像をフォトショップのスライス機能で分割し、web用に保存しました。
この画像はHPの全ページに使用しております。
スライス機能で分割したそれぞれの部分にはリンクが貼ってあり、
このリンクにしばしば変更が入るため、分割画像はしょっちゅう作りなおさなくてはなりません。

ここまではできるようになったのですが、変更があるたびに、全ページのタグを
書き換えなくてはなりません。
これまではこの部分はただの画像だったので、
(<img height="100" src="images/title.jpg" width="200" >)
アップしている画像を変えるだけで、当然、全ページの画像が変わりました。

しかしスライスしたせいで、この<img   >の部分が長いタグになったわけです。
わかりづらい説明で申し訳ありませんが、そこで質問です。
リンクを貼るなり、なんらかの形で「スライスしてweb保存」した部分を
1回書き換えれば、全ページにそれが反映される方法はありますでしょうか。

どうか教えてください。よろしくお願いいたします。

投稿日時 - 2009-08-12 15:01:22

QNo.5201697

すぐに回答ほしいです

質問者が選んだベストアンサー

またまた憶測ですいません…。

mmeamitieさんは
1,リンクはphotoshopのスライスオプションでつけたのでしょうか?
2,<table>~リンク先~<table>~リンク先~<table>となってしまうというのはmmeamitieさんがコーディング
(htmlを記述)したものでしょうか?それともphotohopの自動生成のhtmlでしょうか?
3,<table>~リンク先~<table>~リンク先~<table>というタグを前頁手作業で更新しているのでしょうか?

もしそうだとしたら、3,の作業が一番めんどくさいとおもいます。
3、の作業を一括で変更する方法があります。

フリーソフトで一括置換ソフトというのがあります。(たくさんあるので下記は参考まで)
▼Devas
http://www.forest.impress.co.jp/article/2007/03/12/devas.html

フォルダを指定するとその中のファイル全ての該当箇所を新しいタグに一瞬で置換してくれます。
htmlが100ファイルあったとしても一瞬でできます。

またまた、mmeamitieさんの求める内容と違うようでしたらごめんなさい。

------------------------------------
mmeamitieさんのホームページの制作環境をもう少し教えていただけると、もう少しお力になれるかもしれません。

ホームページの制作環境は人によって好き好きもありますので何とも言えませんが、

1,photoshopで画像やデザインをしてスライスして、画像のみ保存。

2,dreamweaverとかホームページビルダー等のソフトでコーディング(htmlを記述)
※私はテキストエディタでhtml手打ちで記述してます。

3,サーバーへアップロード

が通常のホームページの制作の流れです。
photoshopにhtmlの生成機能がありますが、思うようにきちんとしたhtmlが生成されないことが
多いので、2,のときはホームページ制作ソフトかテキストエディタ等を使う方が、今度また、何かで
つまづいたときに質問しやすいかもしれません。
(すでに制作ソフト等使われてたら私の勘違いデス。ごめんなさい)

------------------------------------

投稿日時 - 2010-03-09 11:31:41

お礼

お忙しそうですのに、こんなにも丁寧に書いてくださってありがとうございます!!

>1,リンクはphotoshopのスライスオプションでつけたのでしょうか?

そうです。

>2,<table>~リンク先~<table>~リンク先~<table>となってしまうというのはmmeamitieさんがコーディング
(htmlを記述)したものでしょうか?それともphotohopの自動生成のhtmlでしょうか?

photoshopの「web用に保存」というものなので、photoshopの自動生成のhtmlだと思います。

>3,<table>~リンク先~<table>~リンク先~<table>というタグを前頁手作業で更新しているのでしょうか?

そうです! そしてご指摘のとおり、これが時間がかかるので、なんとかならないものか
と思っていたのです!!! せいぜい30ページ程度のHPではありますが、
それを1ページ、1ページ範囲指定して削除、新しいタグをペーストと・・・
どんだけアナログなんだ・・・という世界におります。

一括置換ソフト(たくさんあるんですかー・・・)っていうので、調べればよかったんですね。
Devas、使ってみます。希望がわいてきました!!!


わたくしのHP制作環境は・・・
よくわかっていないのですが、少なくとも制作ソフトは使っていません。
だからといって手打ちとも違うような? むしろコピー&ペーストでしょうか。
こんなシロウト未満の状態で30ページってどうなの? というぐらいムチャな状態で・・・
それでも自分のHPのソースを見ると、シロウト目にも、
「いやいやいや、これはないんじゃない?」という惨状です。

CSSというのを使えば、もう少しすっきりするらしい、のですが、
現在挫折中です。
なにかものすごくわかりやすいcssの説明サイトをご存知ですか? 
一番の問題は用語がまったく理解できないので、日本語を読んでいる気がしない、
という点のように思います。

本当にご親切にありがとうございました!!
Devas、早速やってみますね。

投稿日時 - 2010-03-09 13:22:53

ANo.4

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.3

mmeamitieさんがお困りの状況を憶測でお答えしますが、間違っていたらごめんなさい。

【1】title.jpgという画像を変更したい
【2】title.jpg等画像は前ページに使用されている
【3】変更した画像がうまく反映されていない(表示しない)

mmeamitieさんは【1】までうまく行ったが、そのあとがつまづいてるという状況だと思います。

>(<img height="100" src="images/title.jpg" width="200" >)

これはphotoshopで生成されたタグではないかと憶測します。

src="images/title.jpg"

もしかしたら、images/
という風にphotoshopで自動で画像のパスを作ってしまうので、画像のパスの指定が
mmeamitieさんの運営しているサイトの画像のパスの位置と違っているのが原因だと思います。

【画像のパスについて】http://www.dekirukana.net/path.html

>アップしている画像を変えるだけで、当然、全ページの画像が変わりました。

mmeamitieさんのおっしゃる通り、画像の縦と横のサイズが同じものであればそのまま
画像ファイルのみサーバーにアップロードすれば、画像が新しいものに上書きになります。
photohopで生成されたhtmlに変更する必要はないですよ!

だいぶ前のご質問ですでに解決していたらごめんなさい。

投稿日時 - 2010-03-08 10:56:17

お礼

わざわざご回答くださいまして、ありがとうございます!

解決していないんです・・・
相変わらずのシロウト未満なので、とんちんかんなことを言っていると思います。
知りたいのは、スライスした画像の変更が1回でできるか、ということなんですが、
画像の状態ですと、
<img height="100" src="images/title.jpg" width="200" >なので、この「title」という画像を
替えるだけでこのタグの入った全ページの画像が変わります。

ですが、スライスしてその1つ1つにリンクを張ったために、このこれまではたった1行だったタグが
<table>~リンク先~<table>~リンク先~<table>~と続くものになってしまったわけです。

具体的にいいますと、更新情報を日付入りで1枚の画像の上に書いています。
各日付をクリックするとそのページに飛ぶようにしたいのです。当然1枚の画像のままでは、
各ページに飛べませんので、日付ごとにスライスしてそのスライス毎にリンクを張っています。
この情報はどんどん更新されていくので、各スライスに書いてある日付もリンク先もどんどん変わるわけです。

と、こう書きますと普通に考えればこの部分は見た目は1枚の画像ですが、「部分画像+リンク先」が
集まったものなので、1発で変更できるわけないんですよね。
とあきらめて毎回、全ページ変更、という面倒臭い作業を続けています。

投稿日時 - 2010-03-08 12:48:40

ANo.2

1.画像の分割枚数は変更があるたびに変わるんですか?
2.画像のファイル名は変わるんですか?
3.リンクのURLも変わるんですか?
4.HTMLは静的なものですよね?(PHP等のサーバサイドスクリプトでない)

全部変わるとしたら、マクロ機能のあるエディタを使ったり、あるいは、スクリプトとか、プログラムとか書いて変換するしかないような気がします。

文字列の変換だけなら、初心者でもけっこう簡単にプログラムがかけると思うのですが、WSHでスクリプトの作成にチャレンジしたり、
フリーのDelphiや、GNUのgccなどで、プログラムを書いてしまうのが手っ取り早いと思います。

動的なHTMLで構わないなら、JavaScriptのXMLHttpRequestで、テキストファイルなどに書かれたリンクを読み込んでHTML中に出力するというような方法もありますけど、どうなんでしょう。
毎回そのためだけにJavaScriptが走って、URLを拾ってきてHTMLを書き出すという処理を行うことになります。
http://allabout.co.jp/internet/javascript/closeup/CU20050515A/

あとは、その絵が画面の端(上下左右)にあるのなら、フレームやレイヤーを使ってその部分だけ、別ページにしてしまって、他のページと一緒に表示したりする事になりますかね。
http://www.asahi-net.or.jp/~ax2s-kmtn/ref/html/hp7.html

投稿日時 - 2009-08-12 15:20:31

お礼

早速のご回答をありがとうございます。

申し訳ありません。
お察しのとおり、シロウト未満でして、せっかくお答えくださったのに
日本語でお答えくださっているとは思えない状態です・・・

1.画像の分割枚数はいつも一定です。
2.画像のファイル名は「title」なんですが、スライスして「web用に保存」したことで、
ファイルではなくなってしまいました(とわたくしの理解では思われるのですが)。
No.1の方がお答えくださったように、この部分をファイルにできるのでしょうか。
3.リンク先がしょっちゅう変わるんです。
4.申し訳ありません。意味が全くわからないのですが、いずれにしろシロウトですから、
文字とただの画像が埋まっているだけです。

こんなに書いてくださったのに本当にごめんなさい。
でも最後の2行はなんとか理解できそうなので、やってみます!!

投稿日時 - 2009-08-12 15:53:14

ANo.1

新しい画像でスライスの位置が変わらないのであれば
同じファイル名でFTPでアップロードすればいいだけです

投稿日時 - 2009-08-12 15:07:02

お礼

早速のご回答ありがとうございます。

申し訳ありません。シロウト未満でして、意味がよくわからないのですが、
新しい画像ではスライスの位置は変わらないのですが、
それぞれのスライスに貼ってあるリンク先が変わります。
この部分、「web用で保存」すると<table>の中に複数の<tr>やら<td>やらあるのですが、
この部分(<table>~</table>)をファイルにするというのはどうやればいいのでしょうか?
教えていただけますか。

投稿日時 - 2009-08-12 15:37:20

あなたにオススメの質問