ホームページ作成の費用相場について
いくらくらいが適切なの？
「BASEってHTML編集できるの？」
デザインにこだわりたい方は、疑問に感じるのではないでしょうか。
BASEでは、有料テーマに限りHTML編集が可能です。「HTML編集App」を利用して編集すれば、自分好みのデザインに変更できます。
本記事では、
- BASEでHTMLを編集する方法
- HTML編集を行う際の注意点
について解説していきます。ぜひ最後まで読んで、実際にHTML編集を行ってみてください。
BASEでHTML編集はできるのか
BASEにはあらかじめテーマが準備されています。HTML編集を行う場合もテーマを選択した上で、それをベースにカスタマイズする流れとなります。
ただし、無料テーマでは編集機能は使えません。またHTML編集を行った場合、公式による標準テーマの新機能の追加や不具合の修正が行われる際、自動更新適応の対象外となります。
公式による機能追加や修正は随時行われています。都度、確認しつつショップメンテナンスが必要な点は把握しておきましよう。
①：無料テーマの場合
無料オフィシャルテーマのHTML編集はできません。無料テーマのカスタマイズを希望する場合は、「デザイン機能」を利用しましょう。編集の後、プレビュー画面で確認できます。なお、最新のショップデザイン機能を利用している場合、「ページ追加App」の使用も可能です。
HTMLの知識がなく不安な時は、上記で触れた機能で「どの程度好みのカスタマイズができるのか」を確認してみるのも良いでしょう。
②：有料テーマの場合
無料テーマで物足りない場合、好みの有料テーマが購入できます。有料テーマでは「ページ追加App」の使用はできませんがHTML編集が可能です。
編集用のアプリを利用し、購入済みのテーマを選択の上編集します。HTMLを利用した場合、画像や動画のサイズの指定やフォントの変更、ボタンサイズの変更などのバリエーション豊富なカスタマイズが可能です。
具体的な編集方法は後述します。元にしたテーマを再度選択すると、それまで行った編集が消えてしまう点には注意が必要です。
③：最初から自分でショップをデザインする場合
BASEでは全く白紙の状態で、ゼロからのオリジナルショップの作成はできません。
オリジナルショップを作成したい場合は、専用の編集アプリのインストールが必要です。そこに用意されている「サンプルテーマ」を元に編集できます。
BASEでHTML編集するなら「HTML編集App」をインストールしよう
HTML編集はパソコンを利用して行います。スマホでは利用できない点に注意しましょう。
編集アプリのインストールはBASEのサイトから行います。（「BASE Apps」＞「HTML編集」を選択）
編集アプリは無料です。
BASEでHTML編集する方法
HTML編集はアプリで行います。編集アプリを利用すると、HTML、CSS、JapaScriptを利用して、直接編集できます。
Web製作に関する専門知識がない場合、初めて見る文字の羅列に圧倒されるかもしれません。一方、少しでも知識がある場合は、以下の手順に沿ってコードを編集することで、オリジナルデザインのショップが作成できます。
ここでは、HTML編集の具体的な方法・手順をみていきましょう。
step1：編集画面を開く
ソースコードの並ぶ編集画面を開きます。開き方は以下のとおりです。
編集アプリインストール後、メニューの「デザイン編集」＞「HTML編集」を選択
step2：実際にコードを書く
実際にコードを記入していきます。BASEでは、1つのソースを用いショップ全体を構成します。ページごとの編集ではないことを押さえておきましょう。また、ヘッダー・本文内共に必須のコードがあるため、省略できない点に注意が必要です。
HTML更新の後、「プレビュー更新」を押すと更新内容が画面上で確認できます。公開前に、自分の期待した画面になっていることを確認しましょう。問題がないことを確認できた場合、「保存」ボタンを押すことで、公開中のショップデザインの変更が確定します。
補足：ユーザーがカスタマイズできるページ
BASEにおいて、基本のページは以下の6ページです。
基本ページ
- TOP：ショップのトップページ
- About：ショップの説明を表示
- 商品詳細：ここから商品購入しようとするとカートページに移る
- Contact：問い合わせページ
- プライバシーポリシー：プライバシーポリシーについて表示
- 特定商取引法に基づく表記：「特定商取引法に基づく表記」の登録内容を表示
そのうち、独自編集できるページは以下の3つです。
編集可能ページ
- TOP
- 商品詳細
- about
他に、別途専用アプリをダウンロードすることで追加できるページが4つあります。
追加編集可能ページ
- カテゴリー
- 検索結果
- ブログページ
- コミュニティページ
なお、カートページ以降の購入情報入力や購入完了ページに関しては、カスタマイズできません。
カスタマイズの注意点として、意図的にサーバーに負担をかける行為及び、必須タグの非表示は禁止されていることも押さえておきましょう。
BASEタグの使い方
一般的なHTMLタグとBASE独自のテンプレートタグを使用して編集可能です。全体的なページ構成を知りたい場合、専用アプリから確認できる「サンプルテーマ」のHTMLを開くことで確認できます。
BASEでは非表示を禁止されているタグがあるため、確認しておきましょう。
head内必須タグ
| {FaviconTag} | ファビコン（ホームアイコン）を表示 |
| {BackgroundTag} | 背景色、背景画像を表示 |
| {JQueryTag} | JQueryライブラリのタグ |
| {GoogleAnalyticsTag} | Google Analyticsのタグ |
なお、{GoogleAnalyticsTag}に、自分で用意したタグを貼ることは禁止されています。
body内必須タグ
| {LogoTag} | ロゴの画像やテキストを表示 |
| {ContactPageURL} | 「お問い合わせページ」のURL |
| {PrivacyPageURL} | 「プライバシーポリシーページ」のURL |
| {LawPageURL} | 「特商法ページ」のURL |
| {BASEMenuTag} | BASEメニューのタグ |
| {ContactContentsTag} | 「問い合わせページ」コンテンツタグ |
| {PrivacyContentsTag} | 「プライバシーポリシーページ」コンテンツタグ |
| {LawContentsTag} | 「特商法ページ」コンテンツタグ |
| {ItemAttentionTag} | 商品ページに表示される「注意文」タグ |
| {IllegalReportTag} | 商品ページに表示される「通報する」タグ |
BASEへのリンクとなる{BASEMenuTag}を非表示にするには、有料のアプリ「BASEロゴ非表示App」が必要です。CSSを利用して勝手に非表示にすることは禁止されています。
headには、検索エンジンやブラウザに対するサイトの情報を記述します。画面上には表示されませんが、SEO対策として大切な部分です。一方、bodyはユーザーに向けてコンテンツを記述する部分となります。
BASEでは必須タグ以外にも様々なタグが用意されています。すべてのタグは「BASE Template」ページで確認可能です。
ここでは、head部分で利用することの多いmetaタグ、デザインタグについてみていきましょう。
metaタグ
| {PageTitle} | ページタイトルをテキスト表示させる |
| {FaviconTag} | ファビコンを表示させる（必須タグ） |
| {CanonicalTag} | 検索エンジンに正規URLを伝えるタグ |
| {MetaItemInfoTag} | 商品詳細ページ用のメタタグ {block:ItemPage}と共に使用 |
| {MetaShopInfoTag} | ショップのメタタグ {block:NotItemPage}と共に使用 |
| {HeadLinkNextPrevTag} | クローラー向けに前ページ、次ページのlinkタグを 出力 {block:IndexPage}と共に使用 |
デザイン編集用ブロックタグ
| {block:TextColor} | テキスト設定の判別 |
| {block:LinkColor} | リンク設定の判別 |
| {block:NavColor} | ナビゲーション設定の判別 |
デザイン編集用変数タグ
| {BackgroundTag} | 背景色、または背景画像を反映するタグ |
| {TextColor} | 「テキスト」で設定したカラーコードを出力 |
| {LinkColor} | 「リンク」で設定したカラーコードを出力 |
| {NavColor} | 「ナビゲーション」で設定したカラーコードを出力 |
バックグラウンドタグ以外は、テンプレートソース内に無い場合、表示されません。
ショップページ全体で表示が必要となる、body内要素は以下3点です。
要素
- ショップロゴ
- BASEリンク、カートリンク
- ナビゲーション
BASEリンク、カートリンクについては必須タグ{BASEMenuTag}として紹介したため、省略します。
ショップロゴ
| {LogoTag} | ショップロゴ（必須タグ） |
| {IndexPageURL} | ショップトップページへのURL |
ナビゲーション
ナビゲーションには、メインナビゲーションと、サブナビゲーションの二種類があります。メインナビゲーションは以下項目へのリンクを指したもので、表示順に決まりはありません。
リンク項目
- トップページ
- Aboutページ
- お問い合わせページ
- カテゴリページ
- Blogページ
- コミュニティページ
このうちBlogページ、カテゴリページ、コミュニティページを利用するには別途アプリが必要です。
サブナビゲーションとは、この二つへのリンクを指します。
リンク項目
- プライバシーポリシー
- 特定商取引法に基づく表記
サブナビゲーションはフッター部分などに表記されることが多いですが、メインナビゲーションと一緒に表記することも可能です。なお、それぞれにローカライズテキストタグがあります。
| プライバシーポリシー | {lang:Privacy} |
| 特定商取引法に基づく表記 | {lang:Law} |
ナビゲーションとしてまとめて表示するタグはないため、各ページのブロックタグや変数タグを利用し、表示しましょう。
テーマをHTML編集する際のポイント
編集作業の時に、特に気を付けておきたい4つのポイントについて解説します。
ポイント①：編集前にはバックアップをしておく
BASEには、テーマに関する自動バックアップ機能は備わっていません。仮にバックアップがない状態で編集の不備などが起きた場合、元の状態に戻すことができません。あとで困ることのないように編集前には必ず自分でバックアップしておきましょう。
例えば、編集前ごとにエディターの内容を全てコピーしてメモ帳などに貼りつけ、日付が分かるように保存・管理しておくと安心です。
ポイント②：テンプレート変数について理解しておく
BASEの独自タグは波カッコ{}で囲まれており、これは「テンプレート変数」と呼びます。一般的なHTMLとは異なるため注意が必要です。
また、不用意に削除すると機能しなくなります。特によく理解できないうちは、不用意に削除しないように意識しましょう。
変数には「変数」と「ブロック変数」の2種類があります。2つの違いは以下のとおりです。
変数
- 変数：{AboutPageURL}など、配置するだけで変数の中身（この場合AboutページのURL）を出力するタグ
- ブロック変数：{block:××Page}など、ページごとの編集が行えるブロックタグ
変数はタグを記載するだけで指示の出力が可能です。一方、ブロック変数は{block:××Page}～{/block:××Page}のように利用します。
ポイント③：BASEの編集形態を理解しておく
BASEは、全てのページ編集を1つのエディターで行います。そのため、ページごとの編集について、ブロックタグを用います。
ブロックタグの利用方法は、以下のとおりです。
利用方法
- 特定ページのみに表示：{block:××Page}～{/block:××Page}
- 特定ページ以外に表示：{block:No××Page}～{/block:No××Page}
具体例として、トップページに関する編集を行いたい場合、以下のようになります。
具体例
- トップページのみに表示：{block:IndexPage}～{/block:IndexPage}
- トップページ以外の全てのページに表示：{block:NotIndexPage}～{/block:NoIndexPage}
それぞれのページを表すタグは以下の通りです。
| トップページ | IndexPage |
| カテゴリー | IndexPageCategory |
| 検索結果 | IndexPageSearch |
| 商品ページ | ItemPage |
| 問い合わせ | ContactPage |
| 特商法 | LawPage |
| プライバシーポリシー | PrivacyPage |
| ショップ紹介 | AboutPage |
| ブログページ | BlogPage |
| コミュニティページ | CommunityPage |
ポイント④：ファイルのアップロード方法を理解しておく
ファイルアップロード機能を利用すれば、画像やCSS、Javascriptといった外部ファイルを使用できます。利用方法は以下のとおりです。
「ファイルアップローダー」＞「ファイルを選択」＞「アップロードする」
ファイルをアップロードするとURLが発行されるため、HTMLに記述することで利用できます。
なお、ファイルの修正やURLの再確認はできません。そのような場合は、再度ファイルをアップロードし、URL再取得が必要となる点に注意が必要です。
なお、アップロードした外部ファイルを読み込む際、{UpdateTime}タグを使用するとキャッシュ対策できます。
HTML編集でBASEショップをカスタマイズしよう！
BASEでは、HTML編集を利用してオリジナルデザインのショップを作ることができます。特別なデザインをすることで、他店との差別化を図ることが可能です。
HTMLと聞くと、難しい専門知識が必要ではと身構えてしまう人もいるでしょう。しかし、多少の知識があれば、コピー＆ペーストのみでカスタマイズできるという魅力があります。興味のある方は、本記事を参考にオリジナルデザインのショップ作成に挑戦してみてください。その際は、事前のバックアップを忘れないよう注意が必要です。
また本当にオリジナルデザインで作りたい場合はWordPressなどでBASEと別にホームページを作り、BASEのカートのみを利用するというのも一つの手段です。WordPressやHTMLの知識に自信がない方はWeb制作会社に問い合わせをしてみるのもいいでしょう。
Share
