HTMLソースコード埋め込みガイド：ウェブサイトデザインを簡単にカスタマイズ
Strikinglyウェブサイトにカスタム機能やデザイン要素を追加したいですか？HTMLコードを安全に埋め込む方法を学び、無限の創造性を解き放ち、独自のウェブサイト体験を作りましょう！
1. HTMLコード埋め込みとは？
HTML（HyperText Markup Language）は、ウェブページの構造や内容を記述するためのマークアップ言語です。HTMLコードは、テキスト、画像、リンク、フォームなどの要素をブラウザに指示し、ウェブページをどのように表示するかを決定します。
HTMLコード埋め込みは、Strikinglyのウェブサイトエディタに直接HTMLコードを追加することを意味します。これにより、Strikinglyの標準機能を超えて、ウェブサイトの機能やデザインをカスタマイズすることができます。
HTMLコード埋め込みで実現できることの一例を以下に示します。
- カスタムフォームの追加
- アニメーション効果の実装
- 独自のレイアウトやデザインの作成
- 外部サービスやコンテンツの埋め込み
2. StrikinglyウェブサイトにHTMLコードを安全に埋め込む方法
StrikinglyウェブサイトにHTMLコードを埋め込むには、以下の手順に従ってください。
- Strikinglyエディタで、HTMLコードを挿入したいセクションに移動します。
- 「セクションを追加」ボタンをクリックし、「高度」セクションから「コード」を選択します。
- コードブロックが表示されます。ここに、埋め込みたいHTMLコードを貼り付けます。
- 「更新」または「公開」ボタンをクリックして、変更を保存します。
以下は、Strikinglyウェブサイトでよく使用されるHTMLコードの例です。
2.1 YouTube動画の埋め込み
<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
上記のコードの「動画ID」を埋め込みたいYouTube動画のIDに置き換えてください。
2.2 Googleマップの埋め込み
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m6!1m2!1s!2s!1s!2s!1m10!1m6!1m2!1s!2s!1s!2s!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s!2s!5e0!7e1675475200000!" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
上記のコードのURLを埋め込みたいGoogleマップのURLに置き換えてください。
2.3 ソーシャルメディア共有ボタンの追加
Facebook、Twitter、Instagramなどのソーシャルメディアの共有ボタンを追加するには、各プラットフォームが提供するHTMLコードを使用します。通常、これらのコードは各プラットフォームの開発者向けウェブサイトで見つけることができます。
3. HTMLコード埋め込みのセキュリティ上の注意
HTMLコードを埋め込む際には、セキュリティに注意することが重要です。悪意のあるコードを埋め込むと、ウェブサイトがハッキングされたり、訪問者の情報が盗まれたりする可能性があります。
- 信頼できるソースからのHTMLコードのみを使用してください。コードの内容をよく理解し、疑わしいコードは使用しないでください。
- コードを埋め込む前に、テスト環境で動作を確認してください。コードが正しく機能し、ウェブサイトの他の部分に悪影響を与えないことを確認してください。
4. HTMLコード埋め込みのよくある質問
| 質問 | 回答 |
|---|---|
| コードが正しく表示されません。 |
|
| コードがウェブサイトのスタイルと競合しています。 |
|
その他の質問や問題が発生した場合は、Strikingly公式カスタマーサポートにお問い合わせください。