JavaScript対応ブラウザで表示してください。

FAQ-Photoshopデータの編集

Photoshopデータを作成する時のタグの付け方にルールはありますか?

はい。指定するタグについては「タグ一覧」を御覧ください。
また、基本的な使い方はチュートリアル及びマニュアルを参照して頂くか、 定期的に行っているセミナーにご参加ください。

divタグはどういった場合に使われますか?

#sectionや#articleなどのブロックタグのレイヤータグを指定しなかった場合、自動的にdivタグが使用されます。

フォルダ名やレイヤー名が日本語になっていた場合はどうなりますか?

「layer_1」、「 layer_2」といったレイヤー名が自動的につきます。

#で指定を入れていないフォルダやレイヤーは どのように処理されますか?

divタグ等を用い、エンジンが適宜判断して書き出しを行います。

レイヤー名すべてに指定を入れないといけませんか? (例:レイヤー1とかが残っていた場合はどうなりますか?)

日本語レイヤー・レイヤーグループが残っていてもエンジンが適宜判断をし、デフォルトの名前に書き出していくので、特に問題はありません。
ですが、意図したレイヤー名・レイヤーグループ名にしたい場合は、必ず指定をして下さい。

テキストになる部分以外の全レイヤーが、ラスタライズされていればいいということですか?

CSS3を使用しないのであれば、テキスト箇所以外の全てのレイヤーをラスタライズしておく必要があります。
CSS3で書き出しを行いたい場合は、その限りではありません。 詳しくはマニュアルの「CSS3での書き出しについて」の項目を御覧ください。

CSS3で角丸の処理や文字への影はつけられますか?

可能です。詳しくはマニュアルの「CSS3での書き出しについて」の項目をご参照ください。

利用可能なタグ以外を入れた場合はどうなりますか?

特に反映はされず、エンジンはないものとして動作します。
そして、日本語のままのものは適宜自動で英語に書き出していきます。
例:レイヤー1というレイヤー名で画像になるレイヤーが残っていたら「image1」等に書き換えます。 (※レイヤー名が英語翻訳されるという意味ではありません)

abc#sectionなどとした場合、 abcはid又は、classのどちらになりますか?

classになります。
原則、idとして書き出すタグ指定をしていないものについてはclassとして書き出されます。

wrap等でheaderとfooter以外を内包したい時は#wrapの中に該当するフォルダを入れたらいいですか?

その通りです。Photoshopデータのフォルダをすべて閉じた状態でレイヤーグループが#header#wrap#footerフォルダのみになっていれば質問通りの構成になります。

テーブルタグは使えませんか?

現在開発中ですので、もうしばらくお待ち下さい。
また、新機能の実装に関しては、新機能ページにて随時お知らせをしていきます。

idの指定をしたい場合はどうしたらいいですか?

#id{xxx}のxxx部分にidにしたい文言を入れることでdiv idとして書き出されます。
また、#id{xxx}#sectionや#id{xxx}#articleといった組み合わせでも書き出しが可能です。
詳しくは、マニュアルを御覧ください。

テキスト内の一部をリンクにしたい場合は、書き出しをしてからリンク先などを指定するのですか?

テキスト内で、下線が引いてある箇所は自動的にリンクになります。
ですが、リンク先の指定はできないので、書き出し後に手動で指定をして頂くことになります。

バナーやグロナビのオンマウスは設定できますか?

新機能として実装されました。設定することが可能です。設定方法については管理画面>TIPS>オンマウスを御覧ください。

スライドショーの指定はどうしたらいいですか?

現在開発中ですので、もうしばらくお待ち下さい。 また、新機能の実装に関しては、新機能ページにて随時お知らせをしていきます。

テキストにイタリックや強調(ボールド)を使用した場合、反映されますか?

反映されます。テキスト全体にかかっている場合は、CSSに指定が行われ、部分的に使われている場合には、「strong」や「em」でマークアップされて表示されます。

テキスト中に特殊文字が使われている場合はどうなりますか? 例えば、©とか♥とかいうものです。

通常テキストとしてそのまま書き出されます。特殊文字に変換はされないので、 ブラウザによっては正常に見ることができない可能性があります。

フォームでセレクトボックスは使えませんか?

申し訳ありませんが、現在対応しておりません。

spanタグは使用できますか?

使用可能です。テキストの一部分のみ色を変えて頂くと、自動的に反映されます。

hrタグは使えますか?

申し訳ありませんが、HTML5では廃止されているため、対応していません。

ol、dd系のタグは使えますか?

現在開発中ですので、もうしばらくお待ち下さい。
また、新機能の実装に関しては、新機能ページにて随時お知らせをしていきます。

クリッピングマスク、レイヤーマスク、ベクトルマスクの効果がきいた状態で変換はできますか?

変換出来ません。マニュアルに沿ってラスタライズ及びレイヤーの結合をして下さい。

レイヤーグループでマスクを切っていれば変換できますか?

変換できません。レイヤーマスクを適用するか、ラスタライズをしてください。 詳しくは、マニュアルに記載されていますので、そちらもご参照ください。

レイヤーグループの順番はコーディングを意識した並びにしないと いけませんか?バラバラの状態でも大丈夫でしょうか?

特に問題ありません。バラバラでも綺麗に書きだされます。

複数ページを連携するのはどうやればいいですか? また、1サイトを全てAUTOCODINGでやる場合、 リンク指定のやり方はどうすればいいですか?

管理画面でPhotoshopデータを共通デザインに指定して下さい。 こうすることで、Photoshopデータに内包されている#headerタグと#footerタグの中身が、 そのプロジェクトにアップされている全てのファイルに対して共通化された状態で 書き出すことができます。

h1やh2をテキストとして書き出したい時は、 どのように指定すればいいですか?

テキストデータを編集できる状態のままで、#h1~#h6のタグをつけることで hタグに対応したテキストデータを書き出すことができます。

h1やh2を画像として書き出したい時は、 どのように指定すればいいですか?

画像にしたい箇所をラスタライズ(テキストとして編集できない状態にする)しておくことで、画像として書き出すことが出来ます。その際に「#h1{altとして入れたい文章}」という指定をすると h1の画像に対してaltタグが指定されます。

テキストレイヤー上で指定したline-heightは、コーディングデータに反映されますか?

しっかりと反映されます。意図的に段落を大きく取りたい場合などにご活用ください。

#fixタグと#flexタグはどのように使いますか?

AUTOCODINGの管理画面で「新規プロジェクトの設定」をする際の設定と連動しています。
管理画面上の「固定幅で表示する」に設定した際は#flexタグを使用し、 「画面幅に合わせて可変にする」の際には、#fixタグを使用します。

■「固定幅で表示する」を選んだ場合
ページ全体がPhotoshopデータの幅で固定された状態で書きだされます。
その中で可変にしたいものに対して、#flexタグをつけることで、その部分のみ可変にすることができます。

■「画面幅に合わせて可変にする」を選んだ場合
ページ全体が、Photoshopデータ幅=ブラウザ100%のサイズとして書き出されます。
その中で固定にしたいものに対して#fixタグをつけることで、その部分のみ固定にすることができます。

#asideタグはどういった場合に使用しますか?

BLOGなどのレコメンド、本文に対して関連する情報性のある情報を出す際などに使用します。

同じクラス名がある場合はどうなりますか?

自動で末尾に番号がつきます。
例:topimage#sectionが2つある場合、2つ目はtopimage2として書き出されます。

レイヤーグループに#ulをつけた場合、中にあるレイヤーの各要素に対して自動的にliタグはつきますか?

はい。自動的にliタグをつけて書き出しをするので、中の要素に手動でつける必要はありません。
ただし、リストマーカーの画像+テキストというリスト形式の場合は、リストマーカーに#imageというタグを手動でつけて頂く必要があります。

#mergeタグはどんな時に使いますか?

#mergeタグは、複数の画像やテキストデータをコーディング時に 1枚の画像として書き出す時に使用します。

#imgタグはどんな時に役立ちますか?

Photoshop上でテキストを編集できる状態で保存しておきたい場合は、#imgタグをつけておくと書きだした後もテキストの編集が可能になるので、編集が必要になった時などに便利です。

オンマウスを実装させることは可能ですか?

はい、可能です。
他のタグを指定する方法と同じで、専用のタグをつけることで各種リンク(オンマウス・アクティブ・選択状態)を指定することができます。
詳しい使用方法はタグ一覧表をご覧いただくか、マニュアルのTIPS>オンマウスリンクを ご確認下さい。

レイヤー名称(#altや#linkなど)の順番には何か関係りますか?

特に関係はありませんので、自由に設置して頂けます。