Huemanテーマの印刷スタイルを書く
WordPress のテーマ Hueman はなかなか素敵．しかし印刷用のスタイルが定義されておらず，ページを印刷しようとしたらえらいことになる（本家サイトも対応していないし）．Web で調べてみても，大して情報が出てこない．同じように困っている人がいることは確認．このテーマはそこそこ利用者が多い様子だけど，みんなこそっとカスタマイズして使ってるのかしら．
とりあえずページを印刷できないといろいろ困るので，スタイルを追加して最低限の情報をプリントできるようにする．参考までに
症状
- Hueman なサイトで記事（ページ）を印刷しようとすると，サイドバーの幅の影響で本文が表示されない．表示されたとしても，コンテンツ領域の幅が細く縦長に表示されてしまう．印刷できる状態でない．
目的
- Hueman なサイトでちゃんと記事（ページ）をしっかり印刷できるようにする
目標
- 個別記事（ページ）の本文を印刷できるようにする
- サイドバーやメニュー，ナビゲーション，関連記事等は印刷対象としない
環境
- WordPress 4.2.2-ja
- Hueman 2.2.3
- 子テーマ（Hueman-Child）を作成してサイトデザイン・運営
- Layout は 3 Column Middle（左サイドにPrimary，中央はメインコンテンツ，右サイドにSecondary）
子テーマの style.css に印刷用の media query を定義し，元スタイルを上書きしていい感じに印刷できるようにする．子テーマを使わずに運用している人は，custom.css を有効にして追記すればよいかと
何がいけないのか調べてみる
Chrome のデベロッパーツールで見てみる．
サイドバーの .s1 と .s2 クラスなオブジェクトのスタイルを単純に display:none; にすればできそう・・・だけど，印刷プレビューするとサイドバー分の空間が残ったまま（改善せず）．
サイドバーの .s1 と .s2 クラスなオブジェクトのスタイルを単純に display:none; にすればできそう・・・だけど，印刷プレビューするとサイドバー分の空間が残ったまま（改善せず）．
原因は div の main-inner クラス要素の padding が効いてるからっぽい．
具体的には，.col-3cm（3カラム設定でコンテンツ中央のときに適用されるクラス）の下の .main-inner（画像参照）．
style.css の該当箇所を表示してみる．
ということで，その padding 指定部分を print 時に 0 になるようにする．
style.css にメディアクエリ print の記述を追加
次のように style.css に追記．
@media print {
/* ページ幅を適当に決めるとよいと思う．auto でもよい人はそうしたほうが */
body { width:960px; }
/* 印刷に含めないものたち */
#nav-topbar,
#nav-header,
#nav-footer,
#footer-widgets,
#comments,
.sidebar,
.post-nav,
.content h4.heading,
.related-posts,
.s1, .s2 { display: none !important; }
/* main 領域の幅をフルに，main-inner の余計な padding や margin を除く */
.col-3cm .main { background: none repeat-y right 0; width:100%; }
.col-3cm .main-inner { background: none repeat-y left 0; padding: 0px; margin:0px; }
}
結果
- とりあえずは記事本文を印刷できるようになった
- 画像の大きさが気になる・・・けどとりあえずはOKとする
- 3 Column Middle（col-3cm）じゃない人は，他の Layout のクラスで同じようにすればできるだろうと予想（試してはいない）
- 誰かうまいこと print.css を作って
- 何かあればコメント欄にどうぞ
