10312F17-05C1-4C71-8ED4-CD88F0AD4C4E Created with sketchtool.

HTML編集操作ガイド

コンテンツ

ウェブサイトのレイアウト最適化おいて、よく行われるのは、ページ要素の追加、削除、変更などです。ページ要素とその表示方法を調整することで、ページデザインを簡単にテストし、ユーザー体験を向上させることができます。これに対し、Ptengine では、いくつかの編集機能を提供しています：テキストの編集、画像の置き換え、リンクの編集、スタイルの編集と順序変更、およびHTMLの編集です。この5つの編集は、コーディング知識がなくても、ノーコードで素早くサイトのレイアウトやデザインを調整できるユーザー向けであり、一方のHTML編集は技術的なバックグラウンドをお持ち、もしくは理解されているユーザーに対し、より強力なページカスタマイズ機能を提供するものです。

この記事では、Ptengine の HTML 編集機能を正しく使用する方法を詳細にご説明します。サイトの機能と構造を損なうことなく、安全かつ効率的にページ内容を変更できるようサポートいたします。

なお、この記事の例はすべてPtengineから提供されており、詳細は[Ptengine Page Editing Demo]よりご覧いただけます。

HTML編集機能を使用する際の基本原則 #

まず、編集操作がウェブサイトの機能や構造を損なわないようにするため、以下の原則を守ってください：

1. インタラクティブ要素や動的コンテンツの変更を避ける

インタラクティブ要素
折りたたみメニュー、カルーセル、入力フィールドなどの要素は、複雑なロジックを含む場合が多いため、変更すると機能が失われる可能性があります。

動的コンテンツ
製品の価格、在庫情報、またはCMSによって自動生成された内容などには直接上書きを避けてください。また、動的コンテンツを変更する必要がある場合は、「Code Mode」を使用してカスタムJavaScriptコードを記述することが推奨です。

2. タグ構造の一貫性を保つ

タグ構造
HTML内で要素を定義する方法（例：見出しタグ<h1>、段落タグ<p>、リストタグ<ul>）を指します。タグの種類を変更すると、スタイルが乱れたり、機能が失われたりする可能性があります。

適切な操作
タグ内のテキストや子要素は編集・追加できますが、その際にタグの種類や階層構造を変更するのは避けてください。

3. 同一階層の要素を新規追加しない

リスク
同一階層に直接要素を追加すると、ページレイアウトが破損し、ウェブサイトのユーザー体験が低下する可能性があります。

推奨方法
Ptengineが提供する「前に追加」または「後に追加」を使用するようにしてください。

HTML編集機能が向いている場面 #

HTML編集機能は、一定の技術的な知識をお持ちのユーザーに向けて、強力なページカスタマイズをご提供します。以下のような場合に、この機能を使用することをお勧めします：

要素のレイアウトを正確に制御したい場合
既存のページ上で要素の並び順やネスト構造を詳細に調整する必要がある場合、HTML編集機能は高い柔軟性を発揮します。

ページコンテンツをカスタマイズしたい場合
カスタムHTML要素、クラス名、またはIDを挿入したい場合に、HTML編集機能を使用することで正確な調整が可能です。

ページの問題をデバッグまたは修正する場合
ページのレイアウト崩れやスタイルの異常に直面した際、HTML編集機能を使用すると、問題迅速に特定・解決できます。

サードパーティプラグインやコードを統合する場合
サードパーティプラグインを統合する場合、HTML編集機能でコードを埋め込むことが可能です。ただし、HTML編集機能はHTMLコンテンツの編集のみをサポートし、javascriptやstyleの直接追加はできません。スクリプトやスタイルを追加する必要がある場合は、Ptengineの「Code Mode」のCSS&Javascriptモジュールを併用してください。

HTML編集操作の具体例 #

1. ページレイアウトを変更する（要素配置を正確に制御する場合）

例：製品紹介エリアのレイアウトを調整し、製品説明の右側に紹介セクションを追加して他の製品ページに誘導する際

変更前のHTMLコード：

<div class="product">
    <h2 class="product-title">製品名</h2>
    <p class="product-description">製品説明内容</p>
</div>

変更後：

<div class="product">
    <h2 class="product-title">製品名</h2>
    <section>
        <p class="product-description">製品説明内容</p>
    </section>
    <aside>
        <a href="#">他の製品の簡単な説明</a>
    </aside>
</div>

この変更では、新しい子要素を追加し、新しいレイアウトデザインに対応しています。

2. カスタムHTML要素を挿入する（ページコンテンツをカスタマイズする場合）

例：ページにカスタムHTML要素（例：広告バナー）を挿入する際

変更前のHTMLコード：

<div class="content">
    <h1>当店へようこそ</h1>
    <p>最高品質の商品をご提供します</p>
</div>

変更後：

<div class="content">
    <h1>当店へようこそ</h1>
    <p>最高品質の商品をご提供します</p>
    <div class="ad-banner">
        <img src="banner.jpg" alt="広告バナー">
    </div>
</div>

HTML編集を使用することで、広告バナーなどの新しい要素を自由に追加して、ページコンテンツを充実させることができます。

3. ページスタイルの問題を修正する（デバッグまたは修正する場合）

例：特定のdiv要素のクラス名を変更し、スタイルの乱れを修正します。

変更前のHTMLコード：

<div class="old-class">内容</div>

変更後：

<div class="new-class">内容</div>

HTMLコンテンツを修正することで、スタイルの問題を解決し、ページ表示を正常に戻すことができます。

4. サードパーティプラグインを統合する（外部プラグインやコードの統合）

例：サードパーティ広告プラグインをページに埋め込むため、HTML編集機能で必要なコンテナを追加する際

変更前のHTMLコード：

<div class="content">
    <h1>当店へようこそ</h1>
    <p>最高品質の商品をご提供します</p>
</div>

変更後：

<div class="content">
    <h1>当店へようこそ</h1>
    <p>最高品質の商品をご提供します</p>
    <div id="third-party-ad"></div> <!-- 広告プラグインのコンテナを挿入 -->
</div>

この場合、HTML編集機能を使用してサードパーティプラグインのコンテナを追加しました。プラグインの実際のコードは、Code ModeのCSS&JSモジュールを使用することで、追加・実行されます。

よくあるミスとその回避方法 #

以下に、よくあるミスを挙げ、それぞれに対して正しい代替案をご紹介します。

ケース1：インタラクティブ要素または動的要素を直接編集する

⚠️誤った操作例：

例として、入力フィールドのデフォルトメッセージ（placeholder）を変更したい場合。例えば：

<input type="text" placeholder="メールアドレスを入力してください">

これを以下のように変更します：

<input type="text" placeholder="製品トライアルに申し込むためのメールを入力してください">

🔴影響：

input要素はインタラクティブ要素であり、通常はJavaScriptイベント（例：フォームのバリデーション、エラーメッセージ、送信操作など）と連携しています。しかしここで、HTML編集機能を使用して直接placeholderを変更すると、JavaScriptイベントとの関連が無効化される可能性があり、フォームバリデーションや送信などのインタラクション機能が正常に動作しなくなる可能性があります。

✅ 正しい操作方法：

インタラクティブ要素を変更する場合は、Code ModeでJavaScriptを使用し、動的にplaceholderを設定することをお勧めします。HTMLを直接編集するのではなく、以下のような方法を取ることで影響を避けて変更できます：

image.png

document.querySelector('input').setAttribute('placeholder', '製品試用を申請するためにメールを入力してください');

ケース2：要素のタグを変更する

⚠️誤った操作例：

ページタイトルの内容を置き換える際に、pタグを誤ってdivタグに変更する場合。例：

<p>こんなに簡単に実現</p>

これを以下のように変更します：

<div>最強の</div>

🔴影響：

タグタイプを変更すると、ページのスタイルが失われる可能性があります。特に、段落タグ（p）などは特定のスタイルルールが適用されているため、実際のウェブサイトの見た目やレイアウトが崩れる場合があります。

✅正しい操作方法：

Ptengine の HTML 編集では、要素のタグタイプを変更することはサポートしておりません。タグ内部の内容を編集するか、子要素を追加することのみ可能です。以下は正しい操作の例です：

<p>最強の</p>

単に要素の内容を変更したい場合は、テキスト変更機能を使用することで実現が可能です。具体的な操作方法は次の通りです：

  1. 編集する内容の要素を選択し、ツールバーから「テキスト変更」を選択します。

    image.png

  2. 編集が完了したら、Enterキーを押して保存します。

    image.png

タグ構造を調整したい場合は、要素のコンテナを編集して実現できます。具体的な操作は次の通りです：

  1. 編集する要素をクリックし、要素パス選択バーにカーソルを合わせます。

    image.png

  2. 要素パス選択バーを使って親コンテナのレベルを見つけ、クリックして選択します。

    image.png

  3. 親コンテナを選択した後、ツールバーから「HTMLを編集」を選択します。

    image.png

  4. 編集したいタグの要素を見つけ、タグを調整します。調整後、「適用」をクリックします。

    image.png

ケース3：同じ階層に要素を追加する

⚠️誤った操作例：

製品の説明モジュールを追加する際に、直接新しい要素を挿入する場合。例えば：

<div class="product-title">Product Name</div>

これを以下のように変更します：

<div class="product-title">Product Name</div>
<section class="product-description">Product description content.</section>

🔴 影響：

同じ階層に要素を追加すると、スタイルが崩れたり、機能に異常が発生する可能性があります。

✅正しい操作方法：

Ptengine の HTML 編集では、同じ階層に要素を追加することはサポートしていません。新しい要素を追加する場合は、InsertのHTML機能を使用して、直接要素を挿入するのではなく、以下の手順で追加してください。：

  1. 新しい要素を追加したい位置の要素をクリックし、ツールバーから「コンテンツ追加 (Insert)」を選択します。追加位置（要素の前、後など）を指定し、関連するオプションを選びます。

    image.png

  2. 追加する内容に応じて、対応する要素タイプを選びます。このシーンではHTMLを選ぶのをお勧めします。

    image.png

  3. HTMLを選択した後、追加する要素のHTMLコードをその中に置き換え、「追加する」をクリックして保存します。

    image.png

ミス4：HTMLモジュールで複数のコンテナ要素を直接追加する

⚠️ 誤った操作例：

複数の見出しを一度に追加する際、以下のようにHTMLコードを直接挿入したとします：

<p>こんなに簡単に実現</p>
<p>Web運営の常識が変わる</p>

image.png

🔴 影響：

PtengineのHTML編集機能では、新たに追加するコンテンツは、単一のコンテナ要素内に含める必要があります。複数の同階層のコンテナ要素を直接追加すると、ページ構造が正しく認識されず、レイアウトの崩れやスタイルの適用ミスにつながる可能性があります。例えば、後続モジュールの配置が乱れたり、インタラクション機能に問題が発生したりします。

✅ 正しい操作：

HTMLコンテンツを追加する際は、すべての内容を単一のコンテナ要素内にまとめ、ページ構造の一貫性を確保してください。：

<div>
    <p>こんなに簡単に実現</p>
    <p>Web運営の常識が変わる</p>
</div>

image.png

追加するコンテンツを単一のコンテナ要素（例：<div>）内にまとめることで、ページのスタイルと機能が正常に動作し、コードの可読性と規範性も向上します。

まとめ #

Ptengine の HTML 編集機能を使用する際は、以下の重要な点にご留意ください：

  1. インタラクティブな要素や動的なコンテンツの変更を避ける：サイトの機能が正常に動作しているか確認しましょう。
  2. タグ構造の変更を避ける：タグの変更が問題を引き起こさないよう、構造を理解した上でお使いください。
  3. 推奨される方法でコンテンツを追加する：ページのレイアウトやスタイルの一貫性を保つために、適切な手順でコンテンツや要素を追加してください。

今回のHTML編集機能で、ウェブページのコンテンツを安全かつ効率的に最適化し、ユーザーのサイト体験をさらに向上させましょう！

この記事についてどう思いますか？

  • いいですね！
  • よくないです

評価いただきありがとうございました

  申しわけありません！理由を教えてください。

    サポートチームに直接問合せたい場合、こちらをクリックしてチャットしましょう。