ネットショップ作成サービス「おちゃのこネット」でテンプレートを使いつつ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を工夫すれば、見た目を整えることは可能です。
「どうしてもここをもうちょっとだけ変えたい！」というときは、この方法を試してみてください。
飯田市でホームページ制作・広告運用をサポート｜デザインスタジオiR
牧内理恵
まきうちりえ
飯田市在住、広告制作歴20年以上。これまで200名以上のクライアント様と向き合い、100件以上のサイト制作を手掛けてきたデザイナー兼エンジニアの牧内理恵です。御社の強みを引き出し、業績アップに繋がるWebサイト・ネットショップ・販促ツールをご提案します。拠点とする長野県内はもちろん、全国各地からのご依頼にも柔軟に対応しております。
「相談してよかった」と言っていただける、飯田下伊那地域のパートナーとして。
長野県飯田市を拠点に、ホームページ制作やECサイト構築、Web運用のトラブル解決を承っています。20年以上のキャリアで培った「伝わるデザイン」と「確かな技術」で、御社の業績アップを支えます。飯田・下伊那エリアはもちろん、全国からのオンライン相談も大歓迎です。
「ホームページを作りたい」「ホームページをリニューアルしたい」といったご依頼もお気軽にお声がけください。
※強引な勧誘は一切ありませんので、安心してお悩みをお聞かせください。
