ブログ

ブログ

2019.02.04

ホームページのレイアウト構造について

Rabbity-CMSを利用して作成したホームページは、サイトデザインの変更やレイアウトの変更といった知識がないと容易にできないことが誰でも簡単に行うことができます。
このようなことを可能にしているのがRabbity-CMSの「ブロックレイアウト」というレイアウト構造です。
ブロックレイアウト構造を知ればRabbity-CMSでのホームページ作成が上達し、作ることがもっと楽しくなるはずです。
本記事では、Rabbity-CMSの「ブロックレイアウト」について詳しく解説していきます。

ブロックレイアウト構造とは?

Rabbity-CMSでは、ホームページのヘッダーやフッターといった各スペースをブロック単位に分けて構成した「ブロックレイアウト」というレイアウト構造を用いてページを構成しています。
ブロックは下図のように区分けされていて、各ブロックに用意されたパーツ(メニューやブログのリストなど)を自由に配置することができます(メインコンテンツは除く)。

ブロック構造図

ブロックの大まかな区切りは上図のようになっていますが、使用しているサイトデザインによっては、使用できないブロックがあったり、ブロックのレイアウト位置が変わったりする場合があります(「RIGHT(ライト)」がSIDE(サイド)の下に配置されるなどします)。
サイトデザインを変更する場合は、ブロックの使用範囲や位置関係を必ず確認しましょう。

また、「メインコンテンツ」ブロックは、そのページのコンテンツ部分(フリーページの内容、ブログの記事部分、お問い合わせフォームなど)が自動的に入るため、「メインコンテンツ」ブロックのみパーツを配置することができませんのでご注意ください。

ブロックレイアウトの利点

Rabbity-CMSでは、このブロックの構成に合わせてサイトデザインテンプレートを作成しているため、パーツの入れ替えだけで簡単にサイトのデザインが変更できます。
一部のホームページ制作ツールでは、デザインテンプレートを変更すると内容も作り直さなければならないものがあるため、作り直しが発生しないRabbity-CMSならデザイン変更によるサイトのリニューアルなどが気軽に行えます。

レイアウトの確認方法

ホームページのレイアウト状況の確認は「ブロックレイアウト」機能を使用します(レイアウト変更もこの機能を使用しますがここでは割愛します)。
「ブロックレイアウト」機能は、コントロールパネルの[作成]から[ブロックレイアウト]をクリックすることで開くことができます。

[作成]から[ブロックレイアウト]を選択

ブロックレイアウトダイアログの見方

ブロックレイアウトダイアログの見方
番号

説明

1 各ブロックにレイアウトできるパーツのリストが表示されています。
2 現在そのページに適用されているレイアウトタイプやその変更を行うボタンなどが表示されています。
3 ブロック構成図が表示されています。

3のブロック構成図に現在のレイアウトの状況が表示されます。
各ブロックには、現在使用しているパーツが表示されています。パーツを変更する場合は1のパーツリストから該当するパーツを選んで配置します(詳細は「ブロックレイアウトの変更方法」をご覧ください)。
使用するサイトデザインによっては使用できないブロックがグレーアウト表示になります。

使用不可のブロック

サイトデザインによっては、使用不可ブロックが異なります。

異なるサイトデザインでの使用不可のブロック

ブロックのレイアウト位置の関係

サイトデザインによってはカラム数が異なるため、構成図とは異なる位置にブロックが表示される場合があります。
例えば1カラムのサイトデザインでは、上からHEADER→UPPER→メインコンテンツ→BOTTOM→SIDE→RIGHTのような順番でブロックが表示されます。

ブロックのレイアウト位置

パーツリスト

ブロックレイアウトに配置できるパーツについて簡単に紹介します。
※表示されるパーツや利用可能なパーツはプランやユーザー権限、使用しているテンプレートにより異なります。

サイト内検索

サイト内を検索する機能のパーツです。
サイト内検索パーツを使用するためには、「コンテンツリスト」でサイト内検索ページを作成する必要があります。

メニュー

「メニューグループ」で作成したメニューグループのパーツです。
パーツ名称の[ ]内にメニューグループ名が表示されます。

ブログ

ブログに関連するパーツです。
ブログページ内だけでなく、ホームページのトップページなどにも配置することができます。
パーツ名称の[ ]内にブログのタイトル名が表示されるので、ブログを複数作成している場合はこの表記を確認して配置してください。

ブログパーツリスト
パーツ名称 説明
B.暦アーカイブ[ブログタイトル] エントリー(記事)を月単位で分類したパーツです。
B.カテゴリリスト[ブログタイトル] エントリーをカテゴリ単位で分類したパーツです。
B.最新エントリー[ブログタイトル] 最新のエントリーを表示したパーツです。
B.カレンダー[ブログタイトル] エントリーをカレンダーで表示したパーツです。
B.ブログフィード[ブログタイトル] フィードとは、ブログがエントリーされた時にタイトルや内容を自動的に配信してくれるもので、その機能が用意されたパーツです。
B.ブログ内検索[ブログタイトル] 入力されたキーワードに応じてブログ内を検索するためのパーツです。
※入力されたキーワードの全角、半角、カタカナ、大文字、小文字の検索が行えます。

フリーパーツ

パーツを自由に作成できる[フリーパーツ作成]機能で作成したパーツです。
フリーパーツはいくつでも作成できるので既存パーツ以外でパーツ化したいものがある場合は[フリーパーツ作成]機能を利用して任意のパーツを作成し、「フリーパーツ」リストから選んで配置しましょう。

トピックス

トピックスに関連するパーツです。
パーツ名称の[ ]内にトピックスのタイトル名が表示されるので、トピックスを複数作成している場合はこの表記を確認して配置してください。

トピックスパーツリスト
パーツ名称 説明
T.最新エントリー[トピックスタイトル] 最新の記事を表示したパーツです。
T.暦アーカイブ[トピックスタイトル] 記事を年単位で分類したパーツです。

商品カタログ・ユーザー管理・ショッピングカート

オンラインショップモジュールに関連するパーツです。
ホームページ内にオンラインショップを作成した場合に使用しましょう。

スライダー

「スライダーモジュール」で設定したスライダー(スライドショー)を表示できるパーツです。

イベント

イベントで作成されたページの情報を掲載するためのパーツです。
パーツ名称の[ ]内にイベントのタイトル名が表示されるので、イベントを複数作成している場合はこの表記を確認して配置してください。

イベントパーツリスト
パーツ名称 説明
E.イベントカレンダー[イベントタイトル] イベントをカレンダーで表示したパーツです。
E.新着イベント[イベントタイトル] 最新のイベントを表示したパーツです。

営業カレンダー

「営業カレンダーモジュール」で設定した休業日を表示できるカレンダーのパーツです。

GoogleMaps

Google Mapを表示できるパーツです。「Google Mapsモジュール」で設定できます。

広告枠

「広告枠モジュール」で設定した広告を表示できるパーツです。

メールフォーム

メールフォームで作成されたページのメインコンテンツ部分を掲載するためのパーツです。
パーツ名称の[ ]内にメールフォームのタイトル名が表示されるので、メールフォームを複数作成している場合はこの表記を確認して配置してください。

アルバム

アルバムの一覧を表示するパーツです。
パーツ名称の[ ]内にアルバムのタイトル名が表示されるので、アルバムを複数作成している場合はこの表記を確認して配置してください。

RSSリーダー

他サイトのRSS形式の更新情報を受信し、表示することができるパーツです。
「RSSリーダーモジュール」でRSSリーダーの設定ができます。

twitter

Twitterのガジェット(ウィジェット)のパーツです。
「Twitter設定モジュール」で設定できます。

サイトマップ

サイト内検索ページを除くコンテンツリストの内容(名前と階層)がサイトマップとして表示されるパーツです。
サイトマップページが作成されている場合に設定することができます。

Instagram

登録したInstagramの写真やキャプショを表示することができるパーツです。
「Instagram設定モジュール」でInstagramの表示スタイル等を設定することができます。

YouTube

登録したYou Tube動画を表示することができるパーツです。
「YouTube動画モジュール」で設定できます。

モバイルQRコード

モバイルサイトのURLをQRコードで表示できるパーツです。

Rabbity-CMSに
関するお問い合わせ

TEL:048-421-8571
営業時間 9:00-17:00(土日祝除く)

お問い合わせフォーム