おちゃのこネットでHTML5テンプレートを使いながらCSSを追加する方法

ネットショップ作成サービス「おちゃのこネット」でテンプレートを使いつつCSSデザインをカスタマイズする方法です。

今回は、テンプレートを利用しつつ部分的にCSSを追加するにはどうしたらよいか、実際に試して分かったことをシェアします。

テンプレートとCSS編集の関係

おちゃのこネットには複数のテンプレートが用意されていますが、その中でも「HTML編集対応」のテンプレートのみしかCSSを自由に編集することができません。
現在主流の【[HTML5テンプレート] レスポンシブデザイン】は、HTML編集対応ではないものが多くなっています。

そのため、CSSカスタマイズをするには以下の2つの方法に限られます。

スタイルシート編集とカスタムパーツの利用について

おちゃのこネットの管理画面には以下のメニューがあります。

  • テンプレート
  • テンプレート選択
  • スタイルシート編集(※編集できないテンプレートあり)
  • カスタムパーツ(※クリックできないケースあり)

ただし、テンプレートの種類によっては「スタイルシート編集」や「カスタムパーツ」がグレーアウトされており、
クリックできない(=編集できない)ことがあります。
この場合、テンプレート側が編集を許可していない仕様になっているため、CSS追加の選択肢が限られます。

結論:自由記入欄にCSSを直接書く

編集メニューが使えないテンプレートでも、商品説明欄やフリースペースに直接CSSを記述する方法があります。
たとえば、以下のように <style> タグを使ってCSSを記述することができます。

<style>
.custom-box {
background-color: #faf4f3;
padding: 20px;
border-radius: 10px;
}
</style>

<div class="custom-box">
ここに装飾したい内容を書きます。
</div>

注意点

  • あまり複雑なスタイルは崩れることがあるので、見た目を確認しながら調整しましょう。
  • <style> タグを多用すると読み込みが遅くなったり、他のデザインに影響を与える場合があります。
  • JavaScriptは基本的に使えないため、CSSの範囲内で調整を。

まとめ

おちゃのこネットのテンプレートは便利な反面、自由度はそこまで高くありません。
しかし、商品説明欄やフリースペースを使ってCSSを工夫すれば、見た目を整えることは可能です。
「どうしてもここをもうちょっとだけ変えたい!」というときは、この方法を試してみてください。

Home
つくる
特長
無料相談
公式LINE
問合せ