マニュアルや何かを教えるテキストを作ろうかなと思ったときにまず考えるのは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 {
h2 {
font-size:20px;
}
}
のように@media print {から}の間に書いたCSSは印刷時にしか有効になりません。
これを使って、印刷したくないと思う箇所を表示しないようにすることができます。
印刷時の状態をブラウザで確認する
私はいつもCSSに手を入れるときはChrome のデベロッパーツールを使います。これを使うと、CSSを書き直さなくてもどのようなCSSにするとどのようになるのか？を調べることができます。
デベロッパーツールについてはこちらの記事に書いてあります。
印刷画面ではこのデベロッパーツールは使えないので、ブラウザ上で印刷状態のエミュレーションをしながら、このデベロッパーツールを使って、CSSのどこを書き換えたらいいか検討しました。
Chromeで、デベロッパーツールを起動します。
点が3つの縦→その他のツール→デベロッパーツールをクリック
このように表示されます。
ここから印刷状態のエミュレートをしたいと思います。
点が3つの縦→More tools→Renderingをクリック
画面の下部にこのようなメニューが表示されます。見出ししか出てないときは
見出しの上辺あたりをクリックして、
Emulate CSS mediaというものが見つかりますので、
printを選びます。これでブラウザには、
先ほど印刷プレビューで見たようなものが表示されます。サイドバーは右に出ていますが、これは、、、たぶん画面幅との兼ね合いでこのように見えるのかなと思います。
とにかく、この状態でCSSを確認して不要な部分を消すCSSを作ります。
ヘッダー部分の空き
一番わからなかったのはヘッダー部分の空きがどうして生じてしまうか？でした。デベロッパーツールで見ると、
このように見出しの上に何かがある？のかなと思うのですが、ソースを見ると
このように見出しの上には何もありませんでした。
<div class="section page-header" style="margin-top: 196px;">
この部分でmargin-topに196pxの空きを生じさせているせいのようです。おそらくこの部分に通常のヘッダーが入るのかなと思います。デベロッパーツールで、
ここを0pxにしてみたところ、
上部の空きがなくなったのでこれで良さそうです。CSSとしては、
@media print {
.page-header {
margin-top: 0px !important;
}
}
このように追加します。!importantを付けたのは、CSSが重なっているのでより効くように、と思って付け足してみました。
表示したくないものを消すCSS
あとは表示したくない部分のclass名を調べて、表示しないようにしました。デベロッパーツールで調べたところ、それぞれのクラス名は
ぱんくず：breadcrumb
サイドバー：subSection
フッター：siteFooter
だったので、CSSとしては
@media print {
.subSection,.siteFooter, .breadcrumb {
display:none !important;
}
}
このように書きました。display:noneで見たとおり、表示しなくなります。
追加のCSSは子テーマのstyle.cssやカスタマイザーの追加CSS、code snippetsなどお好きな場所に書けます
上記のコードを1つにまとめると、
@media print {
.page-header {
margin-top: 0px !important;
}
.subSection,.siteFooter, .breadcrumb {
display:none !important;
}
}
このようになります。このコードを入れる箇所は子テーマのstyle.css、カスタマイザーの追加CSS、Code Snippetsプラグインなどお好きなところから入れることができます。
何もしていない状態（子テーマでもなく、プラグインも入れていない）場合はカスタマイザ－の追加CSSから入れて下さい。
アドミンバーのカスタマイズをクリック、
追加CSSをクリックし、
このようにコードを貼り付けて、
公開をクリックします。
追加CSSで印刷画面を再度確認してみる
いずれかの方法で追加CSSが追加できたら、印刷画面を再度確認してみます。
このようにヘッダ部分の空きがなくなりました。
記事の下に表示されていた、サイドバーやフッターも表示されなくなりました。
印刷用に改ページが指定できるようにする
このように印刷にちょうどいい感じにはなったのですが、印刷という場面でちょっとこうしたいということが起こってきました。
たとえば
このように、見出しの直下に画像があるのですが画像が大きいので次のページに表示されてしまいます。これだと印刷したときにあまり使いやすいとは言えません。Wordなどのソフトであれば、見出しの前に改ページしたいところです。ということで改ページが指定できるようにCSSを追加します。
h2.newpage {
page-break-before: always !important;
}
このようなコードを先ほどの@ media printに追加しました。意味としては「h2タグのnewpageというクラスが指定されているものの表示前に改ページする」ということになります。
追加してから、改ページしたい見出しにclassを追加します。
Classic Editorのテキストモードでは
改ページしたい見出しに、class=”newpage”を追加します。
ブロックエディタでは
高度な設定＞追加CSSクラスにnewpageと追加します。
これで印刷プレビューを見ると、
このように、指定した見出しの前に改ページが入りました。
まとめ：印刷用のCSSで印刷用の資料もWordPressで作れるようになれば、１ソースで何通りにも使えるようになる
今回はLightningの場合のソースですが、他のテーマの時も調べ方や試し方は書いてありますので印刷用のCSSを作る方法はわかるかと思います。
このように印刷用のCSSで印刷用の資料もWordPressで作れるようになれば、１ソースで何通りにも使えるようになります。
WordPressで作ったWEBサイト、特に会員限定コンテンツの内容などを作った時にそれを講習用の資料として印刷したり、PDFで配布するのも1つのコンテンツを作っただけで2通りの使い方ができます。
またkindleで出版するときにも基本的にはHTMLが使えるのでWordPressにコンテンツを書きためていくと楽に原稿を作ることができます。
WordPressで作った自分のコンテンツを何通りにも使えるのはとても便利だと思いますので是非お試しください。
コメント