WEBサイトの印刷の際に、不要な情報を消す方法:Lightning編

この記事のURLとタイトルをコピーする

マニュアルや何かを教えるテキストを作ろうかなと思ったときにまず考えるのはWordで作ることかなぁと思うんですが、Wordは結構苦手で(^_^;)、読むことぐらいしかしていません。かといってDTPソフトでは大げさすぎるし、と考えたときに「慣れているWordPressで執筆できたらな」と思いました。問題はPDFなどにするときに余計な表示があることなので、それをCSSで取る、という方法を考えてみました。

テキストをWordPressの固定ページに書いてみる

WordPressの投稿や固定ページなら、書き慣れているし、見出しを付けたり画像を入れたりするのも慣れているのでマニュアルや何かを教えるテキストを作るのに向いていると思います。

ということで、固定ページにテキストを書いてみました。テーマはLightningを使っています。

ブラウザで表示するとこんな感じです。

これをそのままPDFにして送ったり、印刷したりできたら便利ですよね。

Chromeブラウザなら Ctrl+P で印刷プレビューを見ることができます。

こんな感じになります。ブラウザで表示しているときと違って、ヘッダーが表示されないというのは自動で実装されているようです。

アップにすると、

こんな感じです。ヘッダーが出ないのは良いのですが妙に空いてしまいます。またぱんくずも印刷の時にはなくていいかなーと思いました。

下の方を見てみると、

サイドバーの表示が入っていました。これも要らないですね。あと、

このフッター部分も印刷には要らない、かなーと思いました。

印刷の時だけ有効になる、CSSの書き方 @media print

ということで、印刷の時だけに有効になるCSSの書き方で不要と思う部分を印刷時には見えなくしたいと思います。

CSSの中に @media という記述を見たことがあるかもしれません。よく使われるのはレスポンシブデザインにする際に@media (min-width: 992px)←最小の幅が992px=992px以上の幅の時 のように指定して画面の幅によってCSSを切り替えるときに使います。

印刷用の指定もあり、

のように@media print {から}の間に書いたCSSは印刷時にしか有効になりません。

これを使って、印刷したくないと思う箇所を表示しないようにすることができます。

印刷時の状態をブラウザで確認する

私はいつもCSSに手を入れるときはChrome のデベロッパーツールを使います。これを使うと、CSSを書き直さなくてもどのようなCSSにするとどのようになるのか?を調べることができます。

デベロッパーツールについてはこちらの記事に書いてあります。

WordPressサイトやCMSなどphpを使っているサイトではカスタマイズしようとしたとき、まず「その部分を表示しているのはどのphp...

印刷画面ではこのデベロッパーツールは使えないので、ブラウザ上で印刷状態のエミュレーションをしながら、このデベロッパーツールを使って、CSSのどこを書き換えたらいいか検討しました。

エミュレーション:ある環境を模倣し、代替として動作させること。この場合は印刷状態をブラウザで表示させます

Chromeで、デベロッパーツールを起動します。

点が3つの縦→その他のツール→デベロッパーツールをクリック

このように表示されます。

ここから印刷状態のエミュレートをしたいと思います。

点が3つの縦→More tools→Renderingをクリック

画面の下部にこのようなメニューが表示されます。見出ししか出てないときは

見出しの上辺あたりをクリックして、

このように内容が見えるようにします。この画面の下の方にスクロールすると、

Emulate CSS mediaというものが見つかりますので、

printを選びます。これでブラウザには、

先ほど印刷プレビューで見たようなものが表示されます。サイドバーは右に出ていますが、これは、、、たぶん画面幅との兼ね合いでこのように見えるのかなと思います。

とにかく、この状態でCSSを確認して不要な部分を消すCSSを作ります。

ヘッダー部分の空き

一番わからなかったのはヘッダー部分の空きがどうして生じてしまうか?でした。デベロッパーツールで見ると、

このように見出しの上に何かがある?のかなと思うのですが、ソースを見ると

このように見出しの上には何もありませんでした。

この部分でmargin-topに196pxの空きを生じさせているせいのようです。おそらくこの部分に通常のヘッダーが入るのかなと思います。デベロッパーツールで、

ここを0pxにしてみたところ、

上部の空きがなくなったのでこれで良さそうです。CSSとしては、

このように追加します。!importantを付けたのは、CSSが重なっているのでより効くように、と思って付け足してみました。

ちゃんと考えるともっと詳しく書く(親要素を沢山書くなど)ことにより優先度を上げたりもできるのですが、とりあえず手軽に追加したかったのでこのようなコーディングになっています。

表示したくないものを消すCSS

あとは表示したくない部分のclass名を調べて、表示しないようにしました。デベロッパーツールで調べたところ、それぞれのクラス名は

ぱんくず:breadcrumb
サイドバー:subSection
フッター:siteFooter

だったので、CSSとしては

このように書きました。display:noneで見たとおり、表示しなくなります。

追加のCSSは子テーマのstyle.cssやカスタマイザーの追加CSS、code snippetsなどお好きな場所に書けます

上記のコードを1つにまとめると、

このようになります。このコードを入れる箇所は子テーマのstyle.cssカスタマイザーの追加CSSCode Snippetsプラグインなどお好きなところから入れることができます。

何もしていない状態(子テーマでもなく、プラグインも入れていない)場合はカスタマイザ-の追加CSSから入れて下さい。

アドミンバーのカスタマイズをクリック、

追加CSSをクリックし、

このようにコードを貼り付けて、

公開をクリックします。

追加CSSで印刷画面を再度確認してみる

いずれかの方法で追加CSSが追加できたら、印刷画面を再度確認してみます。

このようにヘッダ部分の空きがなくなりました。

記事の下に表示されていた、サイドバーやフッターも表示されなくなりました。

印刷用に改ページが指定できるようにする

このように印刷にちょうどいい感じにはなったのですが、印刷という場面でちょっとこうしたいということが起こってきました。

たとえば

このように、見出しの直下に画像があるのですが画像が大きいので次のページに表示されてしまいます。これだと印刷したときにあまり使いやすいとは言えません。Wordなどのソフトであれば、見出しの前に改ページしたいところです。ということで改ページが指定できるようにCSSを追加します。

このようなコードを先ほどの@ media printに追加しました。意味としては「h2タグのnewpageというクラスが指定されているものの表示前に改ページする」ということになります。

追加してから、改ページしたい見出しにclassを追加します。

Classic Editorのテキストモードでは

改ページしたい見出しに、class=”newpage”を追加します。

ブロックエディタでは

高度な設定>追加CSSクラスnewpageと追加します。

これで印刷プレビューを見ると、

このように、指定した見出しの前に改ページが入りました。

まとめ:印刷用のCSSで印刷用の資料もWordPressで作れるようになれば、1ソースで何通りにも使えるようになる

今回はLightningの場合のソースですが、他のテーマの時も調べ方や試し方は書いてありますので印刷用のCSSを作る方法はわかるかと思います。

このように印刷用のCSSで印刷用の資料もWordPressで作れるようになれば、1ソースで何通りにも使えるようになります。

WordPressで作ったWEBサイト、特に会員限定コンテンツの内容などを作った時にそれを講習用の資料として印刷したり、PDFで配布するのも1つのコンテンツを作っただけで2通りの使い方ができます。

またkindleで出版するときにも基本的にはHTMLが使えるのでWordPressにコンテンツを書きためていくと楽に原稿を作ることができます。

WordPressで作った自分のコンテンツを何通りにも使えるのはとても便利だと思いますので是非お試しください。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

この記事のURLとタイトルをコピーする
スポンサーリンク
スポンサー広告
トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。