サイト作成ソフトシリウスで画像を扱う基本的な方法

シリウスの管理画面

画像の扱い方動画解説はこちら!

 

ピクチャフォルダやデスクトップ上の[ご自身の画像]をシリウスに取り入れる場合、下記をボタンをよく利用します。まずサイト作成画面で画像を配置したい場所にカーソルを置き、画像のアイコンをクリックして下さい。[画像の取り込み]

 

レイアウトの使い方

 

枠と画像の表示のパターン

画像の横に文章を並べる配置は一番よく使われる画像の表示方法ですが、この設定は画像を取り込んだ直後に指示できます。

 

画像を右に回り込ませた例↓

角丸灰色ボックス付き

レイアウトの使い方

動画で解説させて頂いている通り、ココの表示は画像が右で、テキストが左に配置するように指示しています。この事を画像の右廻り込みと呼びます。

 

管理画面から画像を外部から取り込んだ直後の表示では、管理画面でその画像のHTMLソースがエディッター上で青色反転になっています。

 

そのまま[ボックス]のエディットで、枠の指示なども同時にしてしまいます。

 

そうする事でこのような「画像廻り込み、枠付きテキスト表示の操作」は10秒程度で完了し、初心者さんでもスピーディにきれいなホームページの作成が可能です。

 

複数枚の画像を一度に取り込み枠で囲う

下の表示は4枚の画像を一回の作業で取り込み、センターに表示させ、枠で囲ってみました。シリウスではこのような表示を、一回の作業で可能にしています。

 

枠付き、画像2行で2段表示、センター寄せ、が一発で指示可能!

レイアウトの使い方 レイアウトの使い方

レイアウトの使い方 レイアウトの使い方

 

携帯端末では

基本的にスマホなどの携帯端末で画像を廻り込ませた場合は、縦に表示されるように設定されていますので、画像の大きさを色々変えて試して見ましょう!この場合画像の大きさが携帯端末のブラウザの大きさを超えた場合は画像が自動で縮小されます。

 

携帯端末でも画像を横並びで表示したい場合は画像選択をした画面で、[サイズ指定方法][横幅で固定(%)]を選択し、画像サイズを[横100%]にします。

 

次に「画像を横並べ」コマンドで「横並びにする」を指定します。

 

こうする事で自動でテーブル枠が挿入され、画像はブラウザの大きさと、画像の枚数に対するパーセンテージで自動調整されます。

 

シリウス画像の取り込み

 

シリウス シリウス

 

上記画像の生成タグ

<table style="width:100%" class="borderless">
<tr>
<td style="width:50%;text-align:center;">
<img src="<% pageDepth %>img/11.png" style="width:100%;" alt="シリウス" />
</td>
<td style="width:50%;text-align:center;">
<img src="<% pageDepth %>img/22.jpg" style="width:100%;" alt="シリウス" />
</td>
</tr>
</table>

 

画像2枚を横並びで表示させるため、各ブラウザの50%枠<td>〜</td>の中に、この枠に対して100%の割合で画像を表示させるという意味です。

 

つまり画像が3枚になっても、画像のサイズは常に100%だという事です。

シリウス シリウス シリウス

 

画像4枚では枠が25%になり、その25%の中の100%が画像の横幅って事になります。パーセントで画像サイズを指示する事でこのように綺麗に画像表示をさせているのです。

シリウス シリウス シリウス シリウス

 

もちろんこの横並べ機能はPCサイトでも反映されます。そして次にこのテーブル枠をさらに[ボックス]で囲むと次のような表示になります。ボックスの分だけ全体の横幅が小さくなりますが、これもパーセントで指示しているため表示が崩れる事はありません。

シリウス画像の取り込み シリウス画像の取り込み シリウス画像の取り込み シリウス画像の取り込み