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

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

habakiriのグローバルメニューのブレイクポイントを変更する

wordpressテーマ「habakiri」のカスタマイズ方法は情報があるようで全く無い…
ヘッダーメニュー(グローバルメニュー gnav)が、画面のどのサイズからハンバーガーメニューに切り替わるのかは


「設定」「レイアウト」「グローバルナビゲーション」から
「オフキャンパスナビゲーションに切り替えるブレイクポイント」という設定はあるのだが、初期設定では「常に」か「タブレットサイズ」か「ノートサイズ」しかないわけで。

そこでまず強引にでも、と調べた結果、以下の場所をいじれば一応変えられることが確認できた。

■親テーマの「function.php」一番最後の方にある
行数:655辺り
/**
  * Return the breakpoint when switching responsive_nav <> offcanvas_nav
  *
  * @return int
  */
 public static function get_gnav_breakpoint() {
  $breakpoint      = null;
  $gnav_breakpoint = Habakiri::get( 'gnav_breakpoint' );
  switch ( $gnav_breakpoint ) {
   case 'md' :
    $breakpoint = 992;←ここを768とかにする
    break;
   case 'lg' :
    $breakpoint = 1200;
    break;
  }
  return $breakpoint;
 }

やってることは、設定で「タブレットサイズ」を選んでいたら「md」の横幅でブレークしますよ。
「ノート」にしてたら「lg」の横幅でブレークしますよ。
てことです。
「md」とか「lg」は、ご存知「habakiri」が採用しているbootstrapのカラム指定時のアレです。

ということで、設定で「タブレットサイズ」を選んでおいてから、上の場所を「768」にしておけば、ウィンドウサイズが768でブレイクポイント=ハンバーガーメニューが出るということです。

ただし、自分の場合は子テーマでグローバルメニューをあれこれいじっていたせいで、他にもいろいろ影響出ました…。

とりあえず、habakiriのブレイクポイントを変えたい!と悩んでる方は試してみてください。
親テーマのfunction.phpを直接いじってしまっているので、テーマのアップロード時はご注意!


★子テーマで設定したい場合はこちら
子テーマの「functions.php」に以下を追加します。

//ブレークポイントを変更する
 function my_get_gnav_breakpoint() {
  $breakpoint      = null;
  $gnav_breakpoint = Habakiri::get( 'gnav_breakpoint' );
  switch ( $gnav_breakpoint ) {
   case 'md' :
    $breakpoint = 767;
    break;
   case 'lg' :
    $breakpoint = 1200;
    break;
  }
  return $breakpoint;
 }
add_action( 'init', 'my_get_gnav_breakpoint' );

コメント

このブログの人気の投稿

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

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

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