かんたんWebエディタの使い方 | かんたんWebツール

1. かんたんWebエディタとは？

「テンプレートを編集して公開してみたいけれど、どこを触ればいいか不安…」という方に！

「かんたんWebエディタ」は、難しいコードを覚えなくても、ボタンを押すだけで直感的にWebページが編集できる無料のブラウザツールです🐾

💡 当ツールのご利用について
こちらのツールは「HTMLだけを手軽に編集すること」を目的としたツールです。CSSやJavaScriptの編集を想定した機能は搭載していません。

このツールの嬉しいポイント

インストール不要： ブラウザ上でそのまま動作するため、ダウンロード不要ですぐに使い始められます。
ボタン感覚で要素をワンタップ挿入： 「太字」「改行」「見出し」などの基本装飾はもちろん、カード枠や中央寄せもボタンひとつでレイアウト可能です。
コードを色分けして表示： コマンド、文字、数字などを色分けして表示する「シンタックスハイライト」機能つきなのでコードがとっても見やすいです。
リアルタイムプレビュー： 編集中の画面が隣のウィンドウに反映されるので快適にデザインの調整ができます。PC表示とスマホ表示の切り替えもワンクリック！

⚠️ ご注意
当ツールはPCでのご利用を想定して作成しています。モバイル端末からご利用の場合は正常に動作しない可能性があります。

2. 初心者にやさしい安心設計

色々な編集を試していただけるよう、サポート機能や快適な編集環境を整えています。

フォルダから画像を選んで簡単配置： ダイアログからパソコン内の画像を選択するだけで画像を配置できます。通常画像、拡大機能（モーダル）付き、リンク付き、背景画像など用途に合わせて選べます。
ワンクリックでカード枠を配置： 「🔲 カード枠（3種類）」のボタンを押すだけで、デザインされた囲み枠や更新履歴欄が一括挿入されます。
カラーパレット連動： 色選択ツールで選んだお好みのカラーが、文字色だけでなく「カード枠のアクセントカラー」や「ページの背景色」にも反映されます。
コード自動整形： ボタンを押すだけでインデントや改行が美しく整い、コードが見やすくなります。
テーマ切替： 目に優しいライトモードとダークモードをいつでも切り替え可能です。
使い方ガイド： ツール内にもシンプルなチュートリアルポップアップを用意しています。

💡 画像機能について
画像機能を使用するとプレビューには画像が表示されますが、コード内に挿入されるのは「画像ファイルを表示するためのタグ」のみとなります。実際のWebページに画像を表示させるときは、HTMLファイルとは別に画像ファイルもサーバーにアップロードする必要があります！

3. 実践編：Webページを作ってみよう

操作はとっても簡単！3つのステップであなただけのWebページが完成します。

1土台となるテンプレートを選ぶ

左上の「📄 テンプレート」ドロップダウンから、作成したいページのイメージを選びます。使いたいテンプレートをご自身で用意している場合は、テンプレートのコードを貼り付けてご利用ください。

💡 テンプレートについて
ツール内で使用できる2種のテンプレートはご自身のサイトで利用していただいてもOKです！

2ボタンを使ってパーツを編集する

文章を書き換えたり、装飾したい文字を選択して「太字」「文字色変更」「見出し」などのボタンを押すと文章に反映されます。

画像は「🖼️ 画像」ボタンからPC内のファイルを選択して配置します。画像が大きすぎるときは好みの幅（例: 100% や 300px）を指定して任意の大きさにしてください。

💡 <body>～</body>の間を編集しよう
サンプル用のテンプレートはコードの上部（<style>～</style>の間）に「CSS」と呼ばれる「デザインの基本設定」となるコードが入っています。慣れないうちはここは触らず、<body>～</body>の間のみを編集するのがおすすめです。

3プレビューを確認する（PC/スマホ切り替え）

右側のプレビュー画面で実際の見栄えを確認します。ヘッダーの「📱 スマホ表示」ボタンを押すと、スマートフォンで開いた時の見え方もその場でチェックできます。

⚠️ ご注意
「左寄せの文字にリンクを貼ったら中央寄せになっちゃった…」というときは、「左寄せ指定のタグごと書き換えてしまった」「CSSによる影響」などの可能性があります。そうなった場合は、タグを含めずテキストのみを選択して「リンク」ボタンを押すことで改善する場合があります。

4. 完成したページの保存方法

ページの編集が完了したら、右上のアクションボタンからコードを出力・保存しましょう。

保存・利用のながれ

HTMLを保存： コードを index.html ファイルとして保存します。
コードをコピー： コード全体をクリップボードにコピーします。

⚠️ ご注意
編集内容は自動保存機能によりお使いのブラウザに記憶されますが、ブラウザのキャッシュを削除したりシークレットモードを使用している場合は消去される場合があります。定期的に「💾 HTMLを保存」を押してファイルを保管することをおすすめします。

5. 困ったときは（Q&A）

編集作業中につまずきやすいポイントと対処法をまとめました。

「背景色」や「文字の色・サイズ」を変更したのに反映されません

テンプレート側（CSS）であらかじめ色や大きさが指定されていると、ボタンで追加したコード（HTML）よりもテンプレート側のルールが優先されることがあります。
【対処法】 文字装飾が効かない場合は、タグを含めずに「変更したい文字だけ」をピンポイントで囲んでボタンを押すと反映されやすくなります。
また、CSSで背景色が指定されている場合は<style>～</style>の間にある--bg-color: #ffffff;などのプロパティ（タグ）の#ffffffの部分を任意のカラーコードにすることで変更できます。

💡 それでも文字の装飾が反映されないときは？
テンプレート内の文字が<h1>などのタグに挟まれている場合は、そのタグに文字の装飾の設定がされている可能性があります。その場合は、タグを削除するとHTMLでの指定が有効になることがあります。

HTMLファイルのコードを編集画面にコピペしたら、プレビュー画面で白黒になりました

「HTMLファイル」と「CSSファイル」が別のファイルとして配布されているテンプレートの場合、色やフォントの指定がCSSファイルの中にあるので、HTMLファイルのコードのみをコピペするとプレビュー画面では装飾のないページになります。
CSSファイルの情報をプレビューに反映させたい場合は、「かんたんHTML統合ツール」でファイルをひとまとめにし、そのコードを編集画面にコピペしてください。編集後に再びファイルを分けたい場合は「かんたんHTML分割ツール」で分離できます。

保存したHTMLファイルを開いたら、挿入した画像が表示されなくなりました

ツール内で画像を選択した際は、お使いのパソコン内にある画像を一時的にプレビュー表示しています。実際にサーバーやネット上に公開・表示する際は、HTMLファイルと同じ場所（または指定のフォルダ）へ画像ファイル自体もアップロード・配置する必要があります。

「HTML保存」でダウンロードしたファイルを開いたら文字化けしています

パソコンの「メモ帳」などで開くと文字化けして見えることがあります。確認したい場合は、ダウンロードしたファイルをGoogle ChromeやEdgeなどのブラウザにドラッグ＆ドロップして開くと、正しくデザインが表示されます。