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

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

wordpressのbasicstoreで子テーマを作成する

wordoressテーマのアクセシビリティに対応した「basicstore」というテーマを導入し、子テーマを作ろうとしてつまずいたのでメモ。

※basicstoreの子テーマを作るときは、通常のfunction.phpだと親のスタイルシートが反映されない!

子テーマのテンプレートをダウンロードしても、本家や作成元を見ても駄目…。
そこで試行錯誤した結果、やっと怪しいエラーが出ずに親テーマのスタイルシートが反映出来るようになりました・

①子テーマのフォルダ「basicstore-child」を作成
②function.phpを作成

<?php
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'style', get_template_directory_uri() . '/../basicstore/assets/css/basicstore.css' );
    wp_enqueue_style( 'basicstore-main-style', get_template_directory_uri() . '/../basicstore/assets/css/theme.css' );
    wp_enqueue_style( 'basicstore-wp-style', get_template_directory_uri() . '/../basicstore/assets/css/wp.css' );
         wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css');

}

これは、親テーマのfunction.phpを覗いた時に「basicstore.css」と「theme.css」と「wp.css」を読み込んでいる箇所から引用し、かつ子テーマから見たときの階層を相対パスとして指定しました。
最後に、子テーマで使用する「style.css」の部分を記載

③style.cssを作成

/* 
Theme Name:   basicstore-child
Template:   basicstore
*/

以上で、一応親のスタイルを継承しつつ子テーマを無事作成できました…!

コメント

このブログの人気の投稿

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

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

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