楽天やYahoo!ショップのHTMLを編集する際の無料エディタについて

無料のテキストエディタ

楽天ショップやYahoo!ショップを運営していると、HTMLなどを触れる場面があります。
そしてHTMLに馴染みが無い方は、編集の際、「表示が崩れてしまったり、画像が消えてしまう」等、HTMLタグのミスなどが原因でページがおかしくなってしまうことがあります。

上記のような不具合を防ぐためにも、無料エディタを使用し、HTML編集する際の環境を整えておきましょう。

本記事では、「HTML編集の際によくやりがちなミス」も踏まえながら、「無料で使えるエディタ」を初心者の方向けにご紹介します。

 

スポンサーリンク

HTML編集の際によくやりがちなミス

HTMLはちょっとした記述ミスでも、表示がおかしくなったり、動作などが機能しなくなることがあります。

閉じタグが無い

よくあるケースのひとつに、「閉じタグが無い」または「閉じタグを忘れてしまっている」場合があります。

HTMLは一部を除いて、基本的に「始まりタグと閉じタグでワンセット」です。
例えば、以下は<a>タグ(リンクを設定するHTML)を使用した場合の、「間違っている例」と「正しい例」を記述したものです。

間違っている例(</a>閉じタグが無い)

<a href="リンク先のURL">テキスト文言など

正しい例(</a>閉じタグで最後閉められている)

<a href="リンク先のURL">テキスト文言など</a>

</a>閉じタグが無い場合、リンクがおかしくなってしまうため、それ以降に記述されているリンクが機能しなかったり、表示がおかしくなることがあります。

他にも「ダブルクォーテーション(“)や左大不等号(>)」など、本来あるべきはずの記述が無いと表示が崩れたり、ページのレイアウトがおかしくなることもありますので、注意が必要です。

 

無料エディタのご紹介

ご紹介する前に、まずはエディタを使用するメリットについてお話します。

エディタを使用するメリットとは

エディタを使用する主なメリットは以下の通りです。

  • HTMLなどを書く際の補助機能
  • 色付けなどがされるので、見やすくなり編集しやすい
  • エディタによってはプレビュー機能がある

など。

楽天ショップやYahoo!ショップのページにオリジナル性を持たせる場合、HTMLやCSSというプログラミング言語は欠かせません。
メモ帳などでHTMLを編集することもできますが、編集内容によっては、活用しづらい場合があります。

エディタを活用することで、HTMLに色が付き見やすくなったり、タグの補助機能などもあるので、作業の効率化が図れます。

初心者におすすめの無料エディタ

今回は、HTMLにあまり馴染みが無い方向けに、無料のテキストエディタをピックアップしました。
お時間がある時にでも、試してみてください。

TeraPad

TeraPadで実際にHTMLファイルを開いたイメージ

TeraPadで実際にHTMLファイルを開いたイメージ

少し古いエディタにはなりますが、僕の環境(Window10)では普通に使えています。
シンプルなエディタで、動作が軽いのが特徴です。

Terapad

Brackets

Bracketsで実際にHTMLファイルを開いたイメージ

Bracketsで実際にHTMLファイルを開いたイメージ

Bracketsは、Adobeが提供しているテキストエディタです。
より直感的にHTMLなどをプレビュー画面を見ながら編集できます。

また、プレビュー画面の適当な箇所をクリックすると、その部分のHTMLなどを一発で探し当ててくれるので便利です。

Brackets

 

エディタを初めて使用される場合は、使い慣れるまで少し時間がかかるかもしれませんが、慣れてしまえば、HTMLの編集も簡単に行えるようになると思います。

 

楽天やYahoo!ショップでエディタを使ってHTMLを編集する流れ

楽天ショップやYahoo!ショップなどのデザインを作成する場合、基本的にそれぞれのサービスの仕様に沿った形でおこないます。

また、HTML等が使用できる場所や、使用できるHTMLなども限られているので、注意が必要です。

楽天ショップ/ヘッダー・フッター・レフトナビの例

例えば、楽天ショップのトップページ(PC)を、HTML等を使用し、RMSのみで作成する場合、主に管理画面の「デザイン設定のヘッダー・フッター・レフトナビのテンプレート設定」から行います。

楽天ショップ・ヘッダー・フッター・レフトナビのテンプレート設定

すでにHTMLなどが記述されている場合は、その内容をコピーし、エディタ等に貼り付けて編集を行います。

編集後は、エディタで編集した内容をコピーし、管理画面内の該当箇所へ貼り付ける形です。

Yahoo!ショップ/看板の例

例えば、Yahoo!ショップの看板エリア(PC)を編集する場合、管理画面の「看板設定」から行います。

Yahoo!ショップ・看板の編集

楽天同様に、すでにHTMLなどが記述されている場合は、その内容をコピーし、エディタ等に貼り付けて編集を行います。

編集後は、エディタで編集した内容をコピーし、管理画面内の該当箇所へ貼り付ける形です。

 

管理画面から直接編集をおこなわず、一度エディタを挟んで編集をおこなうイメージですね。

 

編集の流れ/まとめ

編集の主な流れは、以下の通りです。

  1. 編集を行いたいデザイン部分のHTMLが、どこに格納されているか確認
  2. 確認後、該当のHTMLをコピー
  3. コピーしたHTMLをテキストエディタ等に貼り付けて編集
  4. 編集後、エディタで編集した内容をコピー
  5. 管理画面内の該当箇所へ貼り付ける
  6. プレビューあるいは保存などをしてブラウザで確認

 

楽天GOLDやYahoo!のトリプルなど、サーバー領域を使用した制作の場合は、FTPソフトなどでダウンロードしたファイルを、エディタで開いて編集する必要があります。

 

ネットショップ無料
無料サービスまとめ

ネットショップ無料サービス

「ネットショップを無料で開業したい」
「初心者でも簡単に立ち上げられるおすすめの開業サービスってあるの?」
そんな方に向けて、ネットショップが無料で始められるサービスをピックアップしました。

運営者KPOINT
この記事が気に入ったら
いいね!しよう
最新情報をお届けします
HTML
スポンサーリンク
K Time
タイトルとURLをコピーしました