シリウスのレイアウト枠の使い方

シリウスの管理画面

レイアウト枠の動画解説はこちら!

 

レイアウト枠では、一発操作で2っの枠を横並びに配置する事ができます。基本的な使用方法と応用を解説します。尚レイアウト枠はPCブラウザでは横並びですが、スマホ・アイフォンなど携帯端末では縦並びで表示させる事ができます。

 

左側のコンテンツ

右側のコンテンツ

 

レイアウトの使い方

 

シリウスのレイアウト枠の基本テキストのみを入れた場合の表示

このようにレイアウト枠をデフォルトで、挿入しますと、PCサイトでは左右に同じ幅の枠が自動的に作成できます。文章のみを記述しました。

パーセンテージを変更する事で、PCサイトでは左右の枠の幅の大きさを自由に調節できます。また枠の色、太さなども任意で設定可能です。

 

上記レイアウト枠の設定
左右の枠幅 同じ(50%)
列の間隔 10px
ボーダー(線の太さ) 2px
余 白 8px
線 色

 

レイアウト枠の中に画像を廻り込ませて表示させる場合

レイアウトの使い方

画像を左に、テキストを右にレイアウトしています。これが画像選択時の左廻り込みの指示です。[画像左選択]

レイアウトの使い方

レイアウト枠の右側になるこちらの表示は、画像の選択時に右廻り込みを指示しています。[画像右選択]

 

レイアウト枠の応用的な使い方

左右のレイアウト枠にそれぞれレイアウト枠を入れる

 

左側のコンテンツ

飛行機

飛行機の旅

 

[左側の左枠]

 

スマホ表示では上の段の上

ココの表示はレイアウト枠の左の中にもうひとつレイアウト枠を入れ、その枠の右に表示させているということです。

右側のコンテンツ

富士山

富士山の景色

 

[右側の左枠]

 

スマホ表示では下の段の上

ココの表示はレイアウト枠の右の中にもうひとつレイアウト枠を入れ、その枠の右に表示させているということです。

 

左側のコンテンツ

左側のコンテンツ

右側のコンテンツ

右側のコンテンツ

左側のコンテンツ

右側のコンテンツ