Dreamweaverでhtmlタグを綺麗にする設定(ソースコードのフォーマット)

イメージ
 Dreamweaverでhtmlを作成していると、プログラマーの人に渡した時に「タブスペースや改行がくずれる」という現象が起きる。 というのも、Dreamweaverでタグをエンター改行すると、インデント分の空白が勝手にタブで入ったりしてしまうのだ。 今まではその都度手作業でスペース入れたりしていたのだが、ちょっとdiv増やしたりするともうスペースの入れ直し!! …というのが一発で解消する方法を知ったので、設定を含めてメモ。 まずは上部メニューの「Dreamweaver」→「環境設定」を開く その中にある「コードフォーマット」で、上記設定をしておく。 ・インデント:☑を使用「2」「スペース」 ・タブサイズ:「2」☑スペースとして挿入 ・TDタグ:□TDタグ内に改行を含めない コード画面左側にある「ソースコードのフォーマット」をクリック その中にメニューとして「コードフォーマット設定」があるので、それを選ぶ。 タグごとに細かな設定ができるので、自分が一番見やすいように修正する。 自分の場合は「a」「div」「head」「button」を修正。 aタグの設定 改行:タグの前後 コンテンツ:フォーマットおよびびインデントあり divの設定 改行:前、中間、後 コンテンツ:フォーマットおよびびインデントあり buttonの設定 改行:前、中間、後 コンテンツ:フォーマットおよびインデントあり headの設定 改行:前、中間、後 コンテンツ:フォーマット及びインデントあり 最後に、「ソースフォーマットの適用」 ソース画面左の「ソースコードのフォーマット」アイコンを押して、「ソースフォーマットの適用」を選択すると、開いているソースの中身が整形されます。 ざっと見直して問題なければこれで完了!

habakiriテーマで印刷がスマホ・タブレット表示になってしまうのを回避するスタイルシート

wordpressのhabakiriテーマを利用してホームページを作成しているのですが、「印刷しようとしたら表示がおかしい」と言われ、回避策を探しました。

とはいえ、最近ホームページを印刷するなんてあまり無いだろうと自分も思っていたのだが、まだまだ一部印刷需要はあるらしく…。

そのまま印刷しようとするとブラウザによっては(というかほぼ全てのブラウザ)スマホサイズの見栄えで印刷されてしまったり、タブレットサイズの見栄えで印刷されてしまったりします。

そもそもhabakiriテーマは、bootstrapを利用しています。
そこで、bootstrapを利用したサイトを印刷しようとした時に、主に同じ問題に当たるそうで、bootstrap用のprint.cssを見つけました!

https://github.com/onocom/bootstrap-print

これを、habakiriの子テーマの直下に配置します。
style.cssと同じ階層です。

そして、子テーマのheader.phpに以下を追記します。


<link rel="stylesheet" type="text/css" media="print" href="<?php echo get_template_directory_uri(); ?>-child/print.css">  ←この行を追加
 <?php wp_head(); ?>

get_directory_uri は、親テーマのパスまでを呼び出してくれるところなので(つまりhabakiriのところまで)。
自分は「habakiri-child」という子テーマフォルダ名にしていたので、「-child」という文字を追加して、その直下のprint.cssを見に行くように共通ヘッダーへ追加しました。

そして更に、子テーマのstyle.cssに以下を追加します。

@media print and (min-width: 992px){
 .container{
  width:950px;
 }
}
@media print and (min-width: 768px){
 .container{
  width:100%;
 }
}
@media print{
 .container{
  width:auto;
 }
}

印刷プレビューでは、横サイズが950pxくらいまでしか表示されません。
なので、昔のホームページ制作では、メインコンテンツの横幅の最大を960pxにする。みたいな暗黙のルールがありました。
これが今回関係してくるので、画面サイズによって自動的にcontainerの横幅を切り替えているスタイルを、印刷時は横いっぱいにしてしまいます。

これで、厄介なIEでも印刷時は全画面で表示してくれます!

コメント

このブログの人気の投稿

Dreamweaver(ドリームウィーバー)でコピーができない。ペーストができない。

wordpressのtwentyseventeenのヘッダー画像サイズを統一する

habakiri 固定ページ・個別(投稿)ページ・その他ページのヘッダー画像にアイキャッチ画像を使用