wordpressで印刷すると、画像がはみだすのでCSSで調整してみた。

レスポンシブルなCSSを使っている。画像がどうも一枚に収まらない。サイドバーやヘッダー、フッターは表示しないようにしている。画像は、表示エリアのサイズに合わせて横幅を変える。印刷しようとすると、そのサイズが想定しないものになり印刷エリアからはみ出てしまう。

@page でA4だよと教えてあげると、一枚に収まった。

@page {  
  size: A4 portrait; 
}

ヘッダーのロゴとサイト名ぐらいは、印刷するようにしている。あとパンくず。そのため、最初のページにいきなり画像があると、ヘッダーだけ印刷して余白たんまり、2枚目に最初の画像がくるようになった。

marginが利くので設定しておく、さらに画面いっぱいに大きい画像のときは、size-large classがつくので、このときは、max-sizeを設定し、widthはそれに合わせる

ちなみにA4のサイズは、
A4サイズ 210×297mm

@page {
	size: A4 portrait;
	margin: 5.0mm 9.7mm 2.0mm;
}
@media print {
	.size-large img {
	    width: 100%;
	    max-height: 213mm;
	    display: block;
	    text-align:center;
	    margin-left:auto;
	    margin-right:auto;
	}
}

私はあんまり使わないけど挿絵のような画像も大きくなってしまうので、その時は、画像のブロック設定で、size-large/full-size/thumnailを切り替えることにした。

cssの確認は、chromeのdeveloper toolsを使い、レンダリングをチェックして、printにして行う。これでもまだプリント画面と一致しないのでプレビューで確認してやった。

曇り。10度くらいまであがる

イオン天童のスケスケ展に行ってきた。

お昼はマクド。スマホで注文したら、すぐに受け取れた。行列はながかったが、スマホ注文だとすぐに受け取れた。今回も説得して、おもちゃなしのものにしてみた。セットではなく、バラで注文した。シェイクをすすめてみた。お気に入りだった。

2021年2月21日(日曜日)

イオン天童でスケスケ展やっていたので、いってみた

宿題店のわかばのたいやきをいただく

関連キーワード

関連記事

たいやきわかば

関連ランキング:たい焼き・大判焼き | 山形駅北山形駅

令和3年2月21日

  • 平成33年2月21日
  • 昭和96年2月21日
  • 旧1月10日
  • 如月(きさらぎ)

今日は何の日

  • 日刊新聞創刊の日

下手は上手のもと

へたはじょうずのもと

練習していくうちに上手になっていくので、最初は下手であってもはずかしくないということ。

引用元

四季風呂暦2月

梅湯(うめゆ):
咲き頃の梅の花を花瓶に生けて、浴室に置くことによって香りがこもる。植物に含まれる芳香物質をかいだり、肌にすりこんだりして健康作りをすることをアロマテラピーといい、梅の香りもストレス解消に効く。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です