はてB!PinterestFeedlyBASE初心者向けのテーマカスタマイズ入門編。BASEはHead要素も含めてカスタマイズできるため、大変自由度が高いのが特徴。頑張れば完全オリジナルのお店を作ることもできます。この記事ではBASEのテーマカスタマイズの始め方と、どんなことができるかをまとめてみました。BASEのテーマカスタマイズの始め方テーマカスタマイズは以前は有料アプリの購入が必要でしたが、現在は無料で提供されています。BASEのテーマをカスタマイズするには「HTML編集APP」が必要です。管理画面メニューの「Apps」からインストールしておきましょう。BASEのテーマデザインページからHTML編集HTML編集アプリをインストールしたら、管理画面メニューの「デザイン」をクリックし、デザインページへ移動します。このページでは背景カラーの変更などデフォルトで用意されているものの他に、ロゴの作成やテーマごとに用意されているオプションの設定ができます。HTML編集を行うには「HTMLを編集する」をクリックしてコードを表示し、HTMLやCSSのカスタマイズを行います。BASEのテンプレートタグ(独自タグ)についてBASEではHTMLとCSSだけでなく、テンプレート(独自)タグを使って商品一覧や各ページのリンクを表示することができます。Githubにドキュメントがあるので、テーマのカスタマイズをする際は確認しておきましょう。TemplateドキュメントBASEの独自タグの使い方まとめドキュメントで必須と書かれているタグは必ず使用する必要がありますが、それ以外はなくても問題ありません。BASEでカスタマイズできるページについて次にBASEのHTML編集でカスタマイズできるページについてまとめておきます。HTMLも含めて編集できるページBASEのページは7ページありますが、HTMLも含めて編集できるのは次の3ページだけ。ショップについてのページの表示トップページのみ、カテゴリページと検索結果ページが含まれ、それぞれコンテンツの出し分けが可能です。カテゴリページのみパンくずリストを表示したり、トップページのみスライドショーを表示することができます。-->{/block:IndexPageSearch}CSSのみ編集可能なページ次のCSSのみ編集可能なページは、HTMLも含めて動的に出力されるため、こちらでカスタマイズすることができません。基本的には動的出力ですが、次の例のように追加でコンテンツを表示することも可能です。{ContactContentsTag}{/block:ContactPage}まとめBASEはTumblrとよく似ているため、Tumblrのカスタマイズをやったことがあるならそれほど苦労せずできると思います。ありますが、こちらはHead要素のカスタムができない(タグの追加は可能)のでBASEほどの自由度はありません。WebデザイナーフリーランスWebデザイナー。レスポンシブサイトの作成、Wordpress、EC-CUBEやカラーミー、BASEなどのネットショップのデザイン・構築を担当。EC-CUBE4プラグイン「UICube」開発者。このブログでは初心者がつまずきやすいポイントや、制作で得た知識をわかりやすく解説します。2018Web制作のことでお困りですか?・急に案件が増えて手伝ってくれる人を探している・担当していたデザイナーがやめてしまった・新しくホームページを作りたいこのようなことでお困りでしたら、お気軽にご相談ください。デザインからコーディング、WordpressなどのCMSの構築まで対応させていただきます。homupedia.com。