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

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

googlemapsをiframeを使わないで表示する

- 
■googlemapsをiframeを使わないで表示する
【HTML】
<head>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"
        type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
    //<![CDATA[

    var map;
    
    function map() {

      var latlng = new google.maps.LatLng(35.711783,139.796686);  //緯度経度の初期値
      var opts = {
        zoom: 17,  //初期の拡大値（大きいほど拡大）
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: latlng
      };

      map = new google.maps.Map(document.getElementById("map"), opts);  //id="map"のところに表示しますよー
    
 // Marker
      var markerOpts = {
        position: new google.maps.LatLng(35.711844,139.796444),   //マーカーを表示する緯度経度
        map: map,
        title: "マーカーですよー"  //カーソルを合わせたら表示される文字
      };

      var marker = new google.maps.Marker(markerOpts);
   }

    //]]>
    </script>
</head>

<body onload="map()">
      <div class="map">
        <div id="map"></div>
      </div>
</body>

【スタイルシート】
/*マップの表示サイズ*/
#map {
  height: 300px;
  width: 440px;
}
/*マップを囲んで写真のような見栄えにする*/
.map {
  padding: 3px;
  border: 1px solid #aaaaaa;
}

コメント

コメントを投稿

このブログの人気の投稿

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

-
突然Dreamweaverでコピペができなくなりました！ 具体的にどうなったかというと、ソースをコピー（Ctrl＋C）、そしてペースト（Ctrl＋V）のショートカットを使用したところ、何故かペーストした時に、その直前にコピーしていた情報がペーストされる！ いろんな情報サイトで問題解決方法を検索したが、どうも違うらしい。 で、結果何をして解決したかというと、 ★沢山表示していたページ（タブ）を減らしてみた★ えっ？これだけで解決した…！？ どうやらメモリを沢山食ってた？？のかもしれない。 とにかく、この方法でとりあえずは解決したのでオッケー！ ということで、メモを残してみました。 ドリームウィーバーで突然コピペが出来なくなった！という方がいたら、試してみてくださいね！
続きを読む

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

-
wordpressのテーマ「Twenty Seventeen」を使ってみたのですが、ヘッダー画像（カスタムヘッダー画像）のサイズが、トップページと他のページではサイズが異なり、画像を上下左右最大限まで表示する必要があったので、その設定方法と苦労をメモしておきます。 １．まずは子テーマを作成します（これについては別途記載） ２．子テーマの「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と他のブラウザで見え方が違ったりと色々苦戦しました。 ３．子テーマの「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 .custo...
続きを読む

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

-
■Wordpressテーマ「habakiri」の子テーマで、固定ページ、個別ページ（投稿ページ）、その他ページのヘッダーに表示される画像を変更する。 ・カスタマイズ前の状態では、各ページのヘッダー画像は固定で１枚に決まってしまっているので、固定ページの「アイキャッチ画像」に選択した画像をヘッダー画像として表示します。 ・もし親ページがある場合は（子ページの場合は）親ページのアイキャッチ画像を表示する。 ・ それ以外のページ（４０４ページや検索ページ）の場合は、指定のページのアイキャッチ画像を表示する。 ■変更するファイル wp-content/themes/habakiri-child/inc/class.entry-meta.php （habakiri-childのフォルダ名は作成した際の子テーマのフォルダ） ■変更する箇所 行番号：26 あたりから、Display page header の設定場所が始まる。 行番号：34 でphpが終了した後辺りに、以下を追加します。 <?php global $post; $parent_id = $post->post_parent; if(get_the_post_thumbnail_url()): ?> ↑の説明 $parent_idに、親IDを代入 get_the_post_thumbnail_url()で、アイキャッチ画像が設定されているかどうか確認 <style> /*get_the_post_thumbnail_url*/ .page-header{ background:url(<?php echo get_the_post_thumbnail_url(get_the_ID(),'full'); ?>); background-size:cover; } </style> ↑の説明 アイキャッチ画像が設定されている場合は、.page-headerのclassにbackgroundで自分のページget_the_ID()のアイキャッチ画像を指定してます <?php elseif( is_page() && $parent_id...
続きを読む