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

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

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

wordpressのテーマ「Twenty Seventeen」を使ってみたのですが、ヘッダー画像(カスタムヘッダー画像)のサイズが、トップページと他のページではサイズが異なり、画像を上下左右最大限まで表示する必要があったので、その設定方法と苦労をメモしておきます。

1.まずは子テーマを作成します(これについては別途記載)
2.子テーマの「function.php」に以下を追加します。

// Eliminate twentyseventeen-front-page home css
// フロントページのヘッダー画像を他のページと統一する
add_filter( 'body_class', 'my_body_class',20 );
function my_body_class( $classes ) {
unset($classes[array_search("twentyseventeen-front-page",$classes)]);
unset($classes[array_search("home",$classes)]);
return $classes;
}

フロントページの画像を表示するプログラムを、他ページと同様の扱いにしてしまいます。
最初はトップページ、サブページのヘッダー画像をそれぞれCSSを探って変更したのですが、
IEと他のブラウザで見え方が違ったりと色々苦戦しました。

3.子テーマの「style.css」に以下を追加します。
.site-branding{
padding:30% 0 !important;
height: calc(100vh - 104px);
}
.panel-image {
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: 100%;
position: relative;
}

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-hheadereader,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header,
.has-header-image.twentyseventeen-front-page .custom-header img{
height: 100vh !important; /* 75vh */
max-width:100%;
}
.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe {
position: absolute; /* fixed */
max-width:100%;
}

@media screen and (min-width: 48em) {
.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
height: 100vh;
max-width:100%;
}
.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
height: 100vh; /* 100vh */
max-width:auto;
width:100%;
}
}
.custom-header-media:before{
background:transparent !important;
}

/* powered by wordpress の文を削除*/
.site-footer .site-title:after {
content: "";
}

span.credit-link
{
display: none;
}

.site-info {
display: none;
}

ついでに、コピーライトも消しちゃいます。
メニューのエリアがファーストビューに収まらなかったり、メニューの下に変な空白ができちゃいますが
今は一旦ここまで。
また追加修正があれば書いていきます。

コメント

このブログの人気の投稿

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

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