月並みですが、お気軽にどうぞ。

どんなコトでも、大歓迎。
なにかお気づきの点などありましたら、どうぞこちらよりメッセージをお寄せください。

つぶやきとか

近況とかつぶやきとか。こちらからも不定期に発信してます。
みなさまとどこかでつながれたらいいなぁ。なんて思いながら。

カテゴリ・タグ

当サイトではカオルコーポレーションのWEBチームが、サービスのお知らせやご案内以外にも
ネタになりそうなニュースや気になったことなどを不定期にテキトーにあげています。
何かのお役にたてればウレシイです。

メンバーのご紹介

カオルデザインのWEBチーム。こんなヤツらがつくっております。
まぁ、若干...いえ、結構クセの強いスタッフが多いのですが、
「自由で個性的」ということにしておいていただけると幸いです。

もんじやま
もんじやまデザイナ~
やまぐち
やまぐちデザイナ~
さいまる
さいまるプランナ~
みうら
みうらFEエンジニア
にし
にしデザイナ~
あめみや
あめみやデザイナ~
もちづき
もちづきプランナ~
くつかわ
くつかわプランナ~
さくらい
さくらいFEエンジニア
はらだ
はらだプランナ~
でざいな~
でざいな~ち~むデザイナ~
そつぎょうしゃ
そつぎょうしゃいろいろ

運営会社のご案内

当サイトは広告デザイン会社プロダクション・株式会社カオルデザインが運営しております。
WEBとかマーケティング、広告とかいろいろやらせていただいておりますが、
『コミュニケーションをデザインする』っていう、世の中が少しでも楽しく、イキイキするためのお手伝いをさせていただいております。

商号
株式会社カオルデザイン
住所
東京都立川市栄町4-13-4
設 立
平成11年2月(1999/02)
TEL / FAX
042-595-8807 / 042-595-8703
資本金
10,000,000円
業務内容
ホームページ企画・制作・運営・管理
インターネットコンサルティング
各種媒体デザイン企画・制作
Googleビジネスパートナー制度導入企業
ホームページ
https://www.kaorudesign.com/
ホームページを背景画像込で印刷させるプラグイン
May/16

ホームページを背景画像込で印刷させるプラグイン


ホームページを印刷しようとして画像が印刷されないって経験ないですか!?

そんなこんなでJQueryのプラグインを作ってみました。


まずはjQuery本体を本家サイトからダウンロードして

以下のように読み込ませます。

<script type="text/javascript" src="./scripts/jQuery.js"></script>

続けて今回作ったプラグインを読み込ませてあげれば
背景画像を表示したまま印刷ができるようになります。

$.fn.Print = function(onload){
    this.each(function(){
        var img = $('<img />'),
            obj = $(this),
            file = obj.css('background-image'),
            i = obj.css('text-indent'),
            w = obj.width(),
            h = obj.height();
        file = file.match(/https?:\/\/[-_.!~*'()a-zA-Z0-9;\/?:@&=+$,%#]+[a-z]/g);
        i = i ? i.replace('px','') : 0;
        if(i < 0){
            $(img).attr({
                src:file,
                alt:obj.text()
            })
            .width(w)
            .height(h)
            .css({
                'margin':0,
                'padding':0
            })
            .load(typeof onload == 'function' ? onload : function(){});
            var a = obj.find('a'),toAppend = a.length ? a.empty().append(img) : img;
            obj.empty().append(img).css('text-indent',0);
        }
    });
    return this;
}
$(function(){
    $('*').Print();
});

※このプラグインはtext-indent-9999pxによる画像置換えと隠しテキストにのみ対応しております。

にかよった記事
そつぎょうしゃ by: Category:WEBアイデア Tag: