新機能の使い方や、ウェブサイトの構築・運用に役立つTIPSを紹介しています。ベーステーマで構築された運用中のサイトを印刷対応する方法ベーステーマで構築された運用中のサイトを印刷対応する方法2018.03.30機能紹介デザインsaoriツイートお待たせいたしました!要望のあった、一部のテーマの印刷対応をしました。ブラウザメニューから[印刷]をすると、背景画像や色がなくなってしまったり、デザインが崩れて印刷されてしまう...。いう声にお応えし、PCで見たままの印刷ができるようになっています。今回対応したのは、特に印刷での利用用途が多い以下のテーマです。Corporateブラウザから[印刷]を選ぶと、PC版のデザインがそのままA4サイズにぴったり収まるように印刷できます。※MEDIAのみ、記事の可読性を優先してスマホ版のサイトのデザインになっています。印刷の際は、Chromeの場合「詳細設定」からオプションの「背景のグラフィック」にチェックを入れてくださいね。テーマを使用したWebサイトを運用中の方は、テンプレートの書き換えとCSSを追加して印刷に対応できます。印刷対応CSSを追加する手順1.追加ファイルをダウンロード2.CSSの読み込み3.確認1.追加ファイルをダウンロード印刷対応したテーマに追加したファイル、「print.css」をダウンロードします。以下からダウンロードしてください。Corporate用ダウンロードこちらのファイルは今回のアップデートで各テーマに追加されたファイルと同じものです。目次へ戻る2.CSSの読み込みダウンロードしたcssフォルダの中に、「print.css」というファイルが入っています。このファイルはサイトの要素がA4サイズに収まるようスタイルが書かれています。これを印刷時のみに適用されるようにします。デザイン>ファイルマネージャに「css」フォルダを作り、その中に「print.css」をアップロードします。続いて、デザイン>テンプレートから読み込むファイルを追加します。一部のテーマを除き<head></head>内でのファイルの読み込みはテンプレート・モジュールの「common_stylesheet」や「header-script」に記述されているので、以下のように書き換えます。「print.css」を追加。場所は、「styles.css」の読み込みの1つ前です。encode_html="1"$>css/print.css">media="print"で、印刷時のみ読み込みにしているのがポイントです。既存のfoundation、boorstrapを画面にのみ適用させます。media="screen"をlinkタグに追加します。保存したら、ブラウザで印刷での見え方を確認していきます。サイトを開き、メニューからファイル>印刷を選択します。プリントダイアログにプレビューが表示されるので、確認してみましょう。A4サイズに印刷されます。作成したウェブサイト毎に14日間無料で利用可能です。制作者向けポータルお問い合わせ・FAQ。