![ブログ](../../../../images/blog/blog011/rabbity-cms_blog_011-main.jpg)
2019.02.18
サイトデザイン(テンプレート)の変更方法
最終更新日:2020.08.25
Rabbity-CMSではデザイン豊富なサイトテンプレートを多数用意しており、テンプレートを使うだけで初心者でも簡単にWEBサイトのクオリティを高めることができます。
サイトテンプレートは簡単に変更することができるため、気軽にWEBサイトのデザインを変更することができます。
本記事では、サイトテンプレートの変更によるサイトデザインの変更方法について解説していきます。
サイトデザインとは?サイトテンプレートの利点とは?
サイトデザインとは、そのWEBサイトの大枠のデザインを表すものです。
先進的、やわらかいなどといったイメージや、キーカラー、キーレイアウトなどの様々な要素を組み合わせてひとつのサイトデザインを構成し、サイト全体の統一感を生み出します。
上記からもわかるようにサイトデザインを一から検討することは、熟練のデザイナーであってもかなりの時間と労力を要しますし、Webやデザインの知識に疎い方にとっては非常にハードルの高い取り組みとなります。
そのようなWeb初心者の方でもサイトデザインを検討できるようにしたものがサイトテンプレートです。
大枠が固まっているサイトテンプレートから作りたいサイトのイメージにあったテンプレートを選択することでWeb初心者の方でも統一感のあるサイトを作成することができます。
Rabbity-CMSではデザイン豊富なサイトテンプレートを多数用意していますので、気軽にサイトデザインを検討・変更することができます。
サイトデザインの変更方法
1.コントロールパネルの[作成]タブを選択し、[デザイン]→[サイトデザインを変える]をクリックします。
![[作成]→[デザイン]→[サイトデザインを変える]を選択](../../../../images/blog/blog011/rabbity-cms_blog_011-01.jpg)
2.「サイトデザインダイアログ」が表示され、変更可能なサイトテンプレートが表示されます。
変更可能なサイトテンプレートを[Myデザイン]タブに最大5点までインストールしておくことができます。
5点インストールされた状態で新たにテンプレートをインストールしたい場合は、インストール済みのテンプレートを削除してください(詳細は「インストールしたサイトテンプレートの削除方法」をご覧ください)。
![サイトデザインダイアログ](../../../../images/blog/blog011/rabbity-cms_blog_011-02.jpg)
3.サイトテンプレートを追加する場合は、[インストール]タブをクリックします。
![インストールタブをクリック](../../../../images/blog/blog011/rabbity-cms_blog_011-03.jpg)
4.テンプレートの一覧が表示されたら、上部のタブから任意のタブを選択します。
初回は「新着/人気」タブの一覧が表示されるので、お好みに合わせて「レスポンシブ」「1カラム」「2カラム」「3カラム」「すべて」からタブを選択し一覧を表示させてください。
![サイトテンプレートの一覧が表示される](../../../../images/blog/blog011/rabbity-cms_blog_011-04.jpg)
また、「新着/人気」以外のタブを選択すると、並び順やテーマカラーを選択してソートできる機能が表示されるのでテンプレートを絞りたい場合に有効活用してください。
![テンプレートのソート機能](../../../../images/blog/blog011/rabbity-cms_blog_011-05.jpg)
5.一覧からお好みのテンプレートを選択し、サムネイル下部の[追加]ボタンを押します。
![任意のサイトテンプレートを選択して追加ボタンをクリック](../../../../images/blog/blog011/rabbity-cms_blog_011-06.jpg)
6.[Myデザイン]にインストールしたテンプレートが表示されるので、タイトル上のラジオボタンにチェックを入れ[OK]ボタンを押します。
![追加されたサイトテンプレートにチェックを入れる](../../../../images/blog/blog011/rabbity-cms_blog_011-07.jpg)
7.テンプレートが適用され、サイトデザインが変更されます。
![サイトテンプレートが適用されデザインが変更される](../../../../images/blog/blog011/rabbity-cms_blog_011-08.jpg)
※カラム数の異なるデザインのサイトテンプレートに変更した場合などサイトデザインの変更によって、パーツやブロックが表示されなくなる場合があります。その場合は「ブロックレイアウト」機能を利用してパーツのレイアウトを変更してください。
インストールしたサイトテンプレートの削除方法
変更可能なサイトテンプレートは、[Myデザイン]タブに最大5点までインストールしておくことができますが、5点インストールされた状態で新たにテンプレートをインストールしたい場合は、インストール済みのテンプレートを削除する必要があります。
1.[Myデザイン]タブから削除したいテンプレートの[削除]ボタン(
)をクリックします。
![サイトテンプレートの削除ボタンをクリック](../../../../images/blog/blog011/rabbity-cms_blog_011-09.jpg)
2.表示されたダイアログの[OK]ボタンを押すとテンプレートが削除されます。
![テンプレート削除ダイアログ](../../../../images/blog/blog011/rabbity-cms_blog_011-10.jpg)
![インストールされたテンプレートが削除される](../../../../images/blog/blog011/rabbity-cms_blog_011-11.jpg)
コンテンツごとにデザインを変更する方法
適用しているサイトデザインによっては、複数のテンプレート(大枠のデザインは変わらない)が用意されている場合があり、コンテンツ単位でテンプレートを変更することができます。
テンプレートの変更はコンテンツリストに表示されるコンテンツのみとなります。トピックス記事やブログエントリー、カタログの商品ページなどには設定できませんのでご注意ください。
1.テンプレートを変更したいページを開いた状態で、[作成]タブの[デザイン]→[ページデザインを変える]をクリックします。
![[作成]→[デザイン]→[ページデザインを変える]を選択](../../../../images/blog/blog011/rabbity-cms_blog_011-12.jpg)
2.「ページデザインダイアログ」が表示されるので、リストから適用させたいテンプレートを選択します。
初期状態や何も設定しない場合は「指定なし」となり、デフォルトのテンプレートが設定されています。
![ページデザインダイアログ](../../../../images/blog/blog011/rabbity-cms_blog_011-13.jpg)
3.[OK]ボタンを押すと、ページデザインが変更されます。
![テンプレートを選択して[OK]ボタンをクリック](../../../../images/blog/blog011/rabbity-cms_blog_011-14.jpg)
![ページのデザインが変更される](../../../../images/blog/blog011/rabbity-cms_blog_011-15.jpg)
ページデザインを変更したら「ブロックレイアウト」機能を利用してパーツのレイアウトを変更しましょう。