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

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

modxのtinymceでpタグが勝手に入らないようにする。br改行タグが勝手に消えないようにする

 modxをtinymceでエディタ編集している際、改行をすると勝手にpタグが入ったり、プレビューするとbr改行タグが消えたりする。

また、チャンクで作成したテンプレートを挿入した際には、例えばh2タグの中身を編集していて改行キーを押したときにh2タグ内で改行されて、カーソルをタグ外でクリックしても出てくれない事象が発生する。

wordpressやtinymce本体の使い方はサイトに多くのっているが、modxでの変更方法がなかなか載っていなかったのでメモ。


「エレメント」→「エレメント管理」

tinymceのプラグインを選択

「設定」タブの「プラグインの設定」のエリアに以下を記載

forced_root_block : 'div',

force_br_newlines : true,

force_p_newlines : false

(一番下にカンマは付けません)


これが何をやっている設定かというと、

・新しく文章を入力する際のブロックはdivで囲みます。

→これがないと、改行したときにh2タグ外へ出てくれない

・brを消さない

・pタグを追加させない


root_blockに''で空を入れるだけだと、

チャンクテンプレートで<br>タグを最後に入れても何故かbrタグが消える。

<br>タグを<br><br>にしておくと何故か消えないが、改行した際に2こめの<br>タグが文末にどんどん増えていく。

という不思議な動きをする。

なので。div自体には特殊なcssを設定せず、とにかく改行ごとにdivで囲ってしまおうという強硬手段。

どうしてもdivタグで囲いたくない場合は、root_blockを''にして、テンプレート側に<br><br>を設定。

そして追加されていく<br>を手動で消していく感じになる。

もっといい解決方法があったら教えて!!!


■追記■

やはり、root_blockは''にしないとだめだ。

そしてチャンクテンプレートがh2やdivで囲っているデザインの場合は最後に<br><br>を入れる。

先ほどのやり方だと改行キーを押したら今いるdivが複製されるようになっている!?

Shift+改行で通常の改行、改行キーを押すと、<div class="col-md-6">が何故かもう一つ追加される!!

コメント

このブログの人気の投稿

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

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

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