たねっぱ！ » Dreamweaver https://taneppa.net コツコツあつめるWeb作りのためのたね　たねっぱ！Web系情報ブログ　Webのお役立ちネタ配信中！ Tue, 09 May 2023 00:02:06 +0000 ja hourly 1 http://wordpress.org/?v=3.5.1 【Dreamweaver CC】でHTML5での画像挿入バグを直す方法 https://taneppa.net/dwbug/ https://taneppa.net/dwbug/#comments Mon, 28 Jul 2014 06:33:56 +0000 yanoppa! https://taneppa.net/?p=2070

おはこんばんちわ、毎年かならず風邪を3度は患うやのっぱです(´・ω・｀)おほー


本日はあの煩わしかったDreamweaverCCの画像挿入バグ改善法をご紹介します。


この改善方法が、意外とググっても出てこないんですよね。。。
というわけで、ふたっぱのジェバンニ（Boss）が一晩でやってくれました←ものの4～5分


その前に、どのようなバグかと申しますと、DreamweaverCCを使用してドキュメントタイプHTML5でコーディングしていくとき
画像挿入をすると、<img src=”*****.jpg” width=”300″ height=”300″ alt=”"/>と出ます。


なにがおかしいの？っと思いますよね…
よくご覧になってください。

bug01

そう…HTML5は閉じスラッシュいらないんです…しかも半角スペースも入ってないし(´・ω・｀)


一応HTML5はxhtmlの記述でも問題なく動くのですが、気持ち悪いですよね。
きっちりしてる制作会社だと、直して～と言われるところです。


でわ、これを直す方法ですがDreamweaverを制御してるjsを直接編集していきます。
ファイルの場所など自信が無い方は、お近くのよく知ってる人にお願いしてみてください！


ファイルの場所

C:\Program Files (x86)＞\Adobe＞\AdobeDreamweaverCC＞\configuration＞\Objects＞\Common＞\image.js

のimage.jsを変更していきます。
階層が奥の方なので、変なところを触らないように気をつけましょう♪


では、エディターソフトでimage.jsを開きます。(Dreamweaverでも良いです)
失敗が心配な方はバックアップをとっておきましょう！ image.jsファイルをコピーして拡張子.jsを.bkなどに変えて置いておくと便利です。


編集する場所は52行目にある【rtnStr = rtnStr + ‘alt=”‘ + ‘” />’;】の部分です

bug02


ここを以下のソースに置き換えます。

 if(thisDOM.getIsXHTMLStrictDocument()){
   rtnStr = rtnStr + 'alt="' + '" />';
 }else{
   rtnStr = rtnStr + 'alt="' + '">';
 }




こんな感じになればよいです

bug03


保存したら、Dreamweaverを起動している方は一度落として、もう一度ソフトを立ち上げてください。

すると、imgタグのバグが直っているはずです！

この仕様に戸惑っていた方も多いはず！
早速書き換えてみてください♪

それでは！良きコーディングライフを～see you(・ω<)ﾉｼ

]]> https://taneppa.net/dwbug/feed/ 0 Dreamweaverのコーディングを楽にする方法 https://taneppa.net/coding01/ https://taneppa.net/coding01/#comments Mon, 02 Jun 2014 09:19:02 +0000 yanoppa! https://taneppa.net/?p=1717

Dreamweaverのコーディングを楽にする方法

こんばんちわ、まーくあっぷえんじにゃぁ4ヶ月弱のやのっぱです。

少しは出来るようになってきたのか、いかに楽をしてコーディングをするかを考える余裕が出来てきたので、そろそろ一度まとめてみようかと思います。


目次


1.ショートカットキーを使う、カスタマイズする


よく使っているショートカットキーを並べてみました。
コピペや保存とかは割愛並べると増えたなぁ…と実感しますねｗ


Shift+Enter <br>
Ctrl+Shift+P <p></p>
Ctrl+B <strong></strong>
Ctrl+G 行へ移動（chromeのデベロッパーツールなどをみて行数移動したいとき重宝）
Ctrl+F 検索・置換
Ctrl+Alt+I 画像挿入
Home 行の先頭へ
End 行の最後へ
Ctrl+Home ページの先頭へ
Ctrl+End ページの最後へ

色々いじってるので、標準はこのくらいかと思います

次は追加したものです、追加の仕方は編集→キーボードショートカットを開いて追加して行けます。

私はほとんどがEmmetになってましたｗ


Ctrl+Shift+Q ソースフォーマットの適用
Ctrl+Q 閉じタグ挿入（閉じタグ挿入プラグイン）
Ctrl+Shift+A Emmet機能(wrap with addreviation)：選択範囲を任意のタグで囲う
Ctrl+Shift+W Emmet機能(toggle comment)：選択範囲をコメントにする
Ctrl+PageUp Emmet機能(previous edit point)前のタグとタグの間へ移動
Ctrl+PageDown Emmet機能(next edit point)次のタグとタグの間へ移動
Alt+下矢印 Emmet機能(select next item)次のプロパティ？へ移動
Alt+上矢印 Emmet機能(select previous item)前のプロパティ？へ移動
Ctrl+E Emmet展開

よく使うものは左手だけで押せるようにしてます。

リストやdivを作るのもショートカットで出来ます。


2.コードヒントのカスタマイズ


Dreamweaverなどのコードヒントはとても助かるのですが、よくwidthと打とうとしてwindow打っちゃうことが多々。。。

windowとかつかわないし！！っということで、コードヒントでまず使わないであろうものを削ったり、並び替えたりしてあるコードヒントに変えてしまいます。


私はカラクリエイトさんのブログでダウンロードできるCodeHintsを使わせていただいてます。


打ち易さが劇的に変わりますので、おためしください。

使い方は、ダウンロードしたCodeHints.xmlをc:>Program Files>Adobe>Adobe Dreamweaver CC>configuration>CodeHintsの中にあるもともとのCodeHints.xmlに上書きするだけです。

心配な方は、もともとの方の拡張子を.bakなどに変更しておくと安全です。


他にも私は使っていませんがCSS3のコードヒント拡張やセレクターコードヒントの拡張などもあります。


3.スニペットを活用する


スニペットというのは、コピペ集のようなものです。

CSSでグラデーションつけるとか、これはまた打つの面倒くさいなぁ。。。と思うようなものを
どんどん登録して置いておける機能です。

使い方は、ウィンドウ>スニペットでスニペットウィンドウを開きます。
ウィンドウ右下の新規スニペットで作成し、適当な名前をつけて、種類を囲むのか挿入なのかを決めて
内容を決めて保存すると使えます。


初めはなんのこっちゃ？抹茶に紅茶ですが、使っていくと便利さに気がつくと思います。

まずは、無理矢理にでも使ってみてください。


4.閉じタグプラグインを使う


マークアップに欠かせないのが閉じタグコメントです。

これがあるのと無いのとで、作業のやりやすさがだいぶ変わってきます。

でも、いちいち打ち込むのも面倒。。。

ということで、拡張してワンタッチで挿入できるようになるプラグインをご紹介します。


End_comment.mxp

コメントを生成して挿入するDreamweaver用の拡張機能を作成しました：KATAC DESIGNER’S BLOG 渕上さん


こちらmxpファイルですので、ExtensionManager CS6は正常にインストールできますが、CCはzxpファイルに変換しないとつかえません。

変換の仕方はExtensionManager CS6を開き、ツールからMXP拡張機能をZXPに変換を選び、End_comment.mxpを置いてあるフォルダへ移動して、End_comment.mxpを選択すると、同じ場所に変換したものを作成してくれます。
変換したEnd_comment.zxpをダブルクリックするとExtensionManager CCが立ち上がり、インストールしてくれます。


5.画像サイズリセット・ハーフプラグインを使う


画像の差し替えや、Retina対応のためサイズを半分にするとき、一つ一つ変更してると面倒ですよね。
面倒くさいのはいやなので、これも一括で変更できる拡張機能を入れます。

とっても便利なので、おすすめします。


この、そう！それが欲しかった！という拡張機能作ってくださったのは、きんくまデザインさんです。

ほんと感謝ですｗ


きんくまデザインさん Dreamweaver 画像の幅と高さをリセットするコマンド


そして、Retina対応に欠かせない画像サイズを半分にするのもご紹介


バシャログさん Dreamweaverで画像サイズをリセットするコマンド＆半分にするコマンド（Retina対応に便利）


これまた、欲しかった機能です。
ページ内の画像サイズを縦横半分にしてくれます。

すばらしぃ

スマホサイトを作るときは重宝します。


6.Emmet/Zen-Codingを使う


今ではこれがないとコーディングしたくないですねｗ

エメットさんは俺の嫁


使い方を覚えるまではもたもたするかもですが、コーディングの効率が格段に上がります。 まだお使いでない方はためしに使用してみるのもいいと思いますよ。


インストール方法

こちらEmmet公式サイトから使用エディターのダウンロードを選びます。

ダウンロードはこちら

GitHubに飛びますので、右にあるDownload ZIPでダウンロードしてください。
あとはEmmet.zxpをダブルクリックしてExtensionManagerでインストールするだけです。

基本的な使い方

省略されたコマンドを打って展開するとHTMLやCSSがぽぽぃっと吐き出されます。


展開キー Ctrl+E
> の中の
ˆ 一つ戻って
+ 同列
* 掛ける
$ 連番1～
$$ 二桁の連番01～
() グループ化
. Class
# id

これだけあれば大体つかえます。


例えば#Contentsを展開するとdivにidが付いた状態で展開されます。

<div id="Contents"></div>


divの中にpを入れたいときはこんなかんじです。

#Contents>p

<div id="Contents">
  <p></p>
</div>


htmlのテンプレートもでます。

 
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>


このテンプレは
!と打って展開するだけで出てきます。
楽ちんすぎる！！

他にも

ul>li*6と打って展開すると

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>


と一発ででます。

もう少しいじって
ul>(li>a[href=#]{サンプル$$})*6を展開すると

<ul>
  <li><a href="#">サンプル01</a></li>
  <li><a href="#">サンプル02</a></li>
  <li><a href="#">サンプル03</a></li>
  <li><a href="#">サンプル04</a></li>
  <li><a href="#">サンプル05</a></li>
  <li><a href="#">サンプル06</a></li>
</ul>


と連番も可能です。

imgのsrcを連番にしておくと挿入が一瞬ですし、サイズ違ってても先にご紹介した画像リセットコマンド使えば問題なく使えます。

ul>(li>a>img[src=./images/dummy_img$$.jpg])*6を展開すると

<ul>
  <li><a href=""><img src="./images/dummy_img01.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img02.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img03.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img04.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img05.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img06.jpg" alt=""></a></li>
</ul>


途中からもできます。

ul>(li>a>img[src=./images/dummy_img$$@3.jpg])*6、$$の後ろに@3をつけました。

<ul>
  <li><a href=""><img src="./images/dummy_img03.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img04.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img05.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img06.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img07.jpg" alt=""></a></li>
  <li><a href=""><img src="./images/dummy_img08.jpg" alt=""></a></li>
</ul>


このように03から連番に出来ます。

私はタグをせこせこ打ちたくないので、全部これで作っちゃいます。
手間っぽいですが、今のところ余程レイアウトがあれこれしてなければ、この方法で作る方が早くなりました。

例えば

!>(hdr#header>.inner>h1.logo{ロゴ}+nav#Gnav>ul.navList.clearfix>(li>a[href=#]{ナビ$})*5)+(#Contents>art.contArt>h2.mainTi{タイトル}t+(sect.contSect$$>h3.sectTit{タイトル}+.sectMain.clearfix>.txtBlock>p.txt{テキスト}^fig.photo>a[href=#]>img)*2)+(ftr#Footer>.inner>small#CopyRight>img)と改行をしないで長々と打ちます。
慣れるとこのくらいなら4～5分かからないで打てます。

展開すると

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header id="header">
  <div class="inner">
    <h1 class="logo">ロゴ</h1>
    <nav id="Gnav">
      <ul class="navList clearfix">
        <li><a href="#">ナビ1</a></li>
        <li><a href="#">ナビ2</a></li>
        <li><a href="#">ナビ3</a></li>
        <li><a href="#">ナビ4</a></li>
        <li><a href="#">ナビ5</a></li>
      </ul>
    </nav>
  </div>
</header>
<div id="Contents">
  <article class="contArt">
    <h2 class="mainTi">タイトル</h2>
    <section class="contSect01">
      <h3 class="sectTit">タイトル</h3>
      <div class="sectMain clearfix">
        <div class="txtBlock">
          <p class="txt">テキスト</p>
        </div>
        <figure class="photo"><a href="#"><img src="" alt=""></a></figure>
      </div>
    </section>
    <section class="contSect02">
      <h3 class="sectTit">タイトル</h3>
      <div class="sectMain clearfix">
        <div class="txtBlock">
          <p class="txt">テキスト</p>
        </div>
        <figure class="photo"><a href="#"><img src="" alt=""></a></figure>
      </div>
    </section>
  </article>
</div>
<footer id="Footer">
  <div class="inner"><small id="CopyRight"><img src="" alt=""></small></div>
</footer>
</body>
</html>


が一瞬で吐き出されます。
あとはテキストや画像を入れて、CSSを書くだけ簡単！

それに閉じタグ忘れなどもなくなります。

構造がややこしくなればなるほど書くことも多くなりがちですが、マウス使わないでさくさく打つだけなので、私はこの方が好きみたいです。

詳しいコマンドはこちら

コーディングは早ければ早いほどよいし、楽にそうできたらいいですよね。

]]> https://taneppa.net/coding01/feed/ 0