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; にすればできそう・・・だけど,印刷プレビューするとサイドバー分の空間が残ったまま(改善せず).

原因は div の main-inner クラス要素の padding が効いてるからっぽい.

main-inner

具体的には,.col-3cm(3カラム設定でコンテンツ中央のときに適用されるクラス)の下の .main-inner(画像参照).
.col-3cm 下の .main-inner に padding

style.css の該当箇所を表示してみる.
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 を作って
  • 何かあればコメント欄にどうぞ

あわせて読みたい

コメントを残す

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