こんにちは。たくまと申します。
ホームページの背景画像も、うまく印刷できるようにする方法について、
お聞きしたいことがあります。
まず、下記のクーポンを掲載したページがあります。
http://
そして、上記ページを印刷すると、背景の画像が消えてしまい、
文字の部分しか、印刷ができない状況です。
これを、背景の画像も、綺麗に印刷するように、
「ページを作成する方法」を探しています。
背景の画像が消えてしまう理由は、ＷＥＢデザイナーの方なら、ソースを
見て分かると思いますが、画像をバックグラウンドで表示させているためです。
本来であれば、すべて画像にしてしまえば、綺麗に印刷ができるのですが、、
文字の部分は流動的に変えるため、文字のままにしておきたいと思っています。
上記のクーポンを、背景の画像も綺麗に印刷できるように、
ページを作成する方法をご存知の方がいらっしゃいましたら、
教えていただけると、とても助かります。
どうぞ、よろしくお願いいたします。
|
|
|
|
コメント(36)
「印刷 背景 ＣＳＳ」で検索するといろいろな方法が出てきます。
http://ameblo.jp/linking/entry-10057836400.html
http://www.lucky-bag.com/archives/2005/12/print-background-image.html
などから下記を引用いたします。
（引用ここから）
cssのメディアタイプをprintにする。
<link rel="stylesheet" type="text/css" href="css/print.css" media="print">
cssで対象となる箇所を
display:list-item;
にする。そして
list-style-image
に印刷したい画像を指定する。
（引用ここまで）
検索すれば自分の得たい情報をすぐに得ることが出来るので、先に検索してみたら、案外すぐに片付いたりしますよー。頑張ってくださいねー
http://ameblo.jp/linking/entry-10057836400.html
http://www.lucky-bag.com/archives/2005/12/print-background-image.html
などから下記を引用いたします。
（引用ここから）
cssのメディアタイプをprintにする。
<link rel="stylesheet" type="text/css" href="css/print.css" media="print">
cssで対象となる箇所を
display:list-item;
にする。そして
list-style-image
に印刷したい画像を指定する。
（引用ここまで）
検索すれば自分の得たい情報をすぐに得ることが出来るので、先に検索してみたら、案外すぐに片付いたりしますよー。頑張ってくださいねー
ありゃりゃ、しばらく見てなかった間にトピが育ってたｗ
私の解説が片手落ちだったから再質問させてしまい、さらに、なんか話が逸れてしまってたですね。
ひこさん、モリオさん、フォローありがとうございます。
とくに技術的な面に関しては、ひこさんの仰るとおりで、positionで上に文字がくるように配置すればOKです。
たくまさんが、Webデザイナーを育てる、というのは、ざっとプロフィールや日記に目を通した感じだと、技術的な側面から育てるわけではなく、経営的な面からの支援ぽいなーって印象を受けました（ざっと見ただけなので、ズレてたらごめんなさい）。
ですので、技術的に不足してても構わないんじゃないですか？メディチ家が芸術家を育てたからといって、彼らが芸術家として名を馳せたわけでもないんですから。それよか、まぁ、必要以上に噛み付いたりせず、まったりやりましょうよー。
で、この後は蛇足になってしまうかもしれませんが、ちょっと思ったこと。
たくまさんは周囲に技術者が沢山いらっしゃるみたいですから、彼らに直接聞くという方法の方が早かったかもしれませんね。ネットで尋ねると…回答者の性格は分かりませんし、文字で質問するって意外と難しいし、時に些細な考え方の相違や勘違いで衝突することもありますから、僕の場合は、ネットで質問するのは最後の手段で、なるべくは周囲の技術者と相談して解決するようにしてます。
私の解説が片手落ちだったから再質問させてしまい、さらに、なんか話が逸れてしまってたですね。
ひこさん、モリオさん、フォローありがとうございます。
とくに技術的な面に関しては、ひこさんの仰るとおりで、positionで上に文字がくるように配置すればOKです。
たくまさんが、Webデザイナーを育てる、というのは、ざっとプロフィールや日記に目を通した感じだと、技術的な側面から育てるわけではなく、経営的な面からの支援ぽいなーって印象を受けました（ざっと見ただけなので、ズレてたらごめんなさい）。
ですので、技術的に不足してても構わないんじゃないですか？メディチ家が芸術家を育てたからといって、彼らが芸術家として名を馳せたわけでもないんですから。それよか、まぁ、必要以上に噛み付いたりせず、まったりやりましょうよー。
で、この後は蛇足になってしまうかもしれませんが、ちょっと思ったこと。
たくまさんは周囲に技術者が沢山いらっしゃるみたいですから、彼らに直接聞くという方法の方が早かったかもしれませんね。ネットで尋ねると…回答者の性格は分かりませんし、文字で質問するって意外と難しいし、時に些細な考え方の相違や勘違いで衝突することもありますから、僕の場合は、ネットで質問するのは最後の手段で、なるべくは周囲の技術者と相談して解決するようにしてます。
9: たくまさん＞
> 誰も、「調べてないけど質問します」って、書いてないのに・・・・。
でも「調べたけど分からないので質問します」とも書いていないですよね……。
たくまさんの技術レベルやお調べになった内容が分からないと、どうアドバイスしたものか悩みます。
どの程度の事ができて、どのような環境(使用OSやソフト、ブラウザなど)で作業をされていて、どのような事を調べられたのか。
もしアドバイスした内容が「あ、それはもう見たんですが」なんて言われたら、アドバイスした方としては「先に言ってよ……」となりますよね？
あるいは「これくらい伝えておけばいいかな？」と思った書き込みに対して「何を言っているのか分かりません。そもそも○○って何ですか？ それを知るためにはどうすればいいですか」あるいは「そこまでは分かってるんですよ」というコメントが返ってきたら、それもまた「先に言ってよ……」となりますよね？
文字コミュニケーションはやりとりに時間がかかりますから、良好な関係を維持しながら最適解をなるべく早く得るためには「手持ちのカードを最初からすべて晒しておく」必要があると思います。
カードが晒されていないという事は、「手持ちのカードがない＝調べてない」と思われる可能性がどうしても高くなる事は否めません。質問する側としては理不尽かもしれませんが、誰も彼もが考えもせずに決めつけている訳でもない事は理解して欲しいな、と思います。(もちろん考えなしに決めつける人もいるでしょうが)
--
これだけでは何ですので一応アドバイスしておくと、キーワードは「CSS Position 文字 重ねる」辺りです。(私はこのキーワードの検索結果を見て、必要な情報がたくさん出てきたと感じました)
> 誰も、「調べてないけど質問します」って、書いてないのに・・・・。
でも「調べたけど分からないので質問します」とも書いていないですよね……。
たくまさんの技術レベルやお調べになった内容が分からないと、どうアドバイスしたものか悩みます。
どの程度の事ができて、どのような環境(使用OSやソフト、ブラウザなど)で作業をされていて、どのような事を調べられたのか。
もしアドバイスした内容が「あ、それはもう見たんですが」なんて言われたら、アドバイスした方としては「先に言ってよ……」となりますよね？
あるいは「これくらい伝えておけばいいかな？」と思った書き込みに対して「何を言っているのか分かりません。そもそも○○って何ですか？ それを知るためにはどうすればいいですか」あるいは「そこまでは分かってるんですよ」というコメントが返ってきたら、それもまた「先に言ってよ……」となりますよね？
文字コミュニケーションはやりとりに時間がかかりますから、良好な関係を維持しながら最適解をなるべく早く得るためには「手持ちのカードを最初からすべて晒しておく」必要があると思います。
カードが晒されていないという事は、「手持ちのカードがない＝調べてない」と思われる可能性がどうしても高くなる事は否めません。質問する側としては理不尽かもしれませんが、誰も彼もが考えもせずに決めつけている訳でもない事は理解して欲しいな、と思います。(もちろん考えなしに決めつける人もいるでしょうが)
--
これだけでは何ですので一応アドバイスしておくと、キーワードは「CSS Position 文字 重ねる」辺りです。(私はこのキーワードの検索結果を見て、必要な情報がたくさん出てきたと感じました)
何か、面倒な話になってますねぇ。
人類みな兄弟！
この程度の質問でごたごた言うのやめましょうよ！
ってことで、やってみました↓
(mixi上で綺麗に見せるために、インデントに全角スペースを使ってます)
■案１：お気軽版
<div style="text-align:center;">
<img src="./img/coupon.gif"><br />
</div>
<div style="margin-top:-148px;">
<table width="700" height="140" align="center">
〜省略〜
</table>
</div>
■案２：真面目に CSS position 対応
<div style="position: relative; text-align: center; width: 100%;">
<img src="./img/coupon.gif">
<div style="position: absolute; top: 0; left: 0; text-align: center; width: 100%;">
<table width="700" height="140" align="center">
〜省略〜
</table>
</div>
</div>
人類みな兄弟！
この程度の質問でごたごた言うのやめましょうよ！
ってことで、やってみました↓
(mixi上で綺麗に見せるために、インデントに全角スペースを使ってます)
■案１：お気軽版
<div style="text-align:center;">
<img src="./img/coupon.gif"><br />
</div>
<div style="margin-top:-148px;">
<table width="700" height="140" align="center">
〜省略〜
</table>
</div>
■案２：真面目に CSS position 対応
<div style="position: relative; text-align: center; width: 100%;">
<img src="./img/coupon.gif">
<div style="position: absolute; top: 0; left: 0; text-align: center; width: 100%;">
<table width="700" height="140" align="center">
〜省略〜
</table>
</div>
</div>
>16
サーバ側で作るのは、呼び出されたときに背景画像の上に文字をいれて表示する、という処理です。
何の言語使ってるか分かりませんが、画像生成ライブラリを呼び出せばいいと思います。
この辺りは、プログラムの方の判断を仰ぐ必要がありますが･･･この手のクーポンであれば、僕の場合
１．背景を諦める。
２．サーバサイドで合成する
の2択しか考えません。CSSで無理矢理載せるのは、あくまで無理矢理な方法でしかないと思います（１８で書いたように面白いので、そのやり方をあれこれ検討するのは凄く有意義だと思いますが）
サービスによって、そこまで手間かける必要がなければさっさと諦めた方が無難だし、次のフェーズで背景を入れることを考えてもいいと思うし。
サーバサイドで合成は、そんな難しい技術と思わないですけどねぇ。先日も、某DVDの初回特典で待ちうけ合成やったばっかですけど、１日で納品しましたし。
サーバ側で作るのは、呼び出されたときに背景画像の上に文字をいれて表示する、という処理です。
何の言語使ってるか分かりませんが、画像生成ライブラリを呼び出せばいいと思います。
この辺りは、プログラムの方の判断を仰ぐ必要がありますが･･･この手のクーポンであれば、僕の場合
１．背景を諦める。
２．サーバサイドで合成する
の2択しか考えません。CSSで無理矢理載せるのは、あくまで無理矢理な方法でしかないと思います（１８で書いたように面白いので、そのやり方をあれこれ検討するのは凄く有意義だと思いますが）
サービスによって、そこまで手間かける必要がなければさっさと諦めた方が無難だし、次のフェーズで背景を入れることを考えてもいいと思うし。
サーバサイドで合成は、そんな難しい技術と思わないですけどねぇ。先日も、某DVDの初回特典で待ちうけ合成やったばっかですけど、１日で納品しましたし。
23: ちふみんさん＞
画像を生成する負荷と、存在する画像を呼び出す負荷(サーバにかかる負荷です)を比較すると圧倒的に後者が少ないはずなので、都度生成するのは避けられるなら避けた方が良いのではないかなぁ、と。
サーバのスペックと呼び出される(画像が生成される)頻度との兼ね合いによっては、それでも良いとは思うのですが。
> でも、GDで生成した画像を特定のディテクトリに店舗名をつけてファイル吐き出ししておいて、んで、そのファイルがなければ、生成する、てぐらいの処理でいけないかしらね？
これは私が19で発言した「何かの条件でファイルの存在をチェックしてから存在しなければ生成するような仕組み」に合致するので、この手法なら私も良いと思います。
印刷する度に画像が生成されるのは個人的にはどうかなぁ、と思うので。
> CSSだと、ケータイ対応の時に厄介かな
まぁ携帯の場合、そもそも印刷しないだろ的な話はありますけどね(笑)
どのみち紙に印刷する事を想定した画像サイズだと携帯で表示するのには無理がありますから、携帯には別途対応がどうしても必要になるのではないかと。(PCでの「印刷」に対応する「クーポンを表示」というリンクを用意して、そこをクリックすると携帯用のクーポン画面が出てくるとか。この画面なら画像に文字が重なっていなくても良いんじゃないか、とか)
画像を生成する負荷と、存在する画像を呼び出す負荷(サーバにかかる負荷です)を比較すると圧倒的に後者が少ないはずなので、都度生成するのは避けられるなら避けた方が良いのではないかなぁ、と。
サーバのスペックと呼び出される(画像が生成される)頻度との兼ね合いによっては、それでも良いとは思うのですが。
> でも、GDで生成した画像を特定のディテクトリに店舗名をつけてファイル吐き出ししておいて、んで、そのファイルがなければ、生成する、てぐらいの処理でいけないかしらね？
これは私が19で発言した「何かの条件でファイルの存在をチェックしてから存在しなければ生成するような仕組み」に合致するので、この手法なら私も良いと思います。
印刷する度に画像が生成されるのは個人的にはどうかなぁ、と思うので。
> CSSだと、ケータイ対応の時に厄介かな
まぁ携帯の場合、そもそも印刷しないだろ的な話はありますけどね(笑)
どのみち紙に印刷する事を想定した画像サイズだと携帯で表示するのには無理がありますから、携帯には別途対応がどうしても必要になるのではないかと。(PCでの「印刷」に対応する「クーポンを表示」というリンクを用意して、そこをクリックすると携帯用のクーポン画面が出てくるとか。この画面なら画像に文字が重なっていなくても良いんじゃないか、とか)
※印刷する際は「背景の色とイメージを印刷する」にチェックを入れてください
みたいな感じで運用側で、ユーザー側で設定してもらうみたいなことはダメですかね？
自分もクーポン券ではありませんが同じような案件（画像の上に文言があって、その文言は動的に出すみたいな）を受けたことがあって
CSSでなんとかしようとしましたが、同じような壁にぶち当たり、結局最後は上記のような注意文言を表示して
ユーザー側で印刷するときにページ設定の「背景と…」にチェックを入れてもらうという運用で収めたことがあります。
PDFで吐き出すという方法もありますが、結構難しいみたいです
actionscriptが書ければFlashで出せて理想的なんだけどな〜
みたいな感じで運用側で、ユーザー側で設定してもらうみたいなことはダメですかね？
自分もクーポン券ではありませんが同じような案件（画像の上に文言があって、その文言は動的に出すみたいな）を受けたことがあって
CSSでなんとかしようとしましたが、同じような壁にぶち当たり、結局最後は上記のような注意文言を表示して
ユーザー側で印刷するときにページ設定の「背景と…」にチェックを入れてもらうという運用で収めたことがあります。
PDFで吐き出すという方法もありますが、結構難しいみたいです
actionscriptが書ければFlashで出せて理想的なんだけどな〜
- mixiユーザー
- ログインしてコメントしよう！
|
|
|
|
Webデザイン 更新情報
Webデザインのメンバーはこんなコミュニティにも参加しています
人気コミュニティランキング
- 1位
- 40歳以上のおじさん&おばさん
- 14781人
- 2位
- 30代〜40代から友達作り【友活】
- 35869人
- 3位
- 株式投資
- 65312人