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

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

wordpressの簡単子テーマ作成方法

①親テーマのフォルダ名+「-child」のフォルダを作成する
場所はwordpressをインストールしているディレクトリの「wp-content」>「themes」の中。
親テーマと同じ階層。
「coldbox」なら「coldbox-child」
「basicstore」なら「basicstore-child」

②function.phpとstyle.cssを作成する
■function.phpの中身は

<?php
add_action( 'wp_enqueue_scripts', '***_enqueue_styles' );
function ***_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
}

// テーマフォルダ直下のeditor-style.cssを読み込み
add_action('admin_init',function(){
    add_editor_style();
});
?>
エディタcss の読み込み前までで問題ないが、エディタでもサイトと同じ見栄えにする為、エディタ用のスタイルシートも読み込む設定をしておくと便利。

「***」の部分は親のテーマの名前を入れる。

※親テーマによっては、funciton.phpに記載する方法が異なる事があります。
よく子テーマ作成で紹介されているのは、「theme_enqueue_styles」ですが、
「coldbox」の場合は「coldbox_enqueue_styles」になります。
「basicstore」の場合は「my_theme_enqueue_styles」になります。

「テーマ名 wordpress child」で検索をかけると、子テーマファイルがDL出来るサイトが表示されるので、探してみましょう。

■style.cssの中身は

/*
 Template: ***
 Theme Name: ***-Child
*/
「***」の 部分には親テーマの名前を入れる。

③wordpressの管理画面で、「外観」>「テーマ」にアクセスすると、「***-Child」というテーマが追加されているので、それを選んで有効化。
そうすると、基本的には親テーマがバージョンアップしてもカスタマイズした箇所には影響がないはず。

コメント

このブログの人気の投稿

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

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

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