ページTOPへ

SIRIUS 記事中に画像を横に二つか三つ並べて配置する方法

SIRIUS 記事中に画像を横に二つか三つ並べて配置する方法

 

 

SIRIUSでは、 記事中で横2列レイアウトの指定ができる機能が搭載されます。

 

 

これにより、下図のように、記事中で画像を横に二つか三つ並べることができます。

 

 

画像を横に二つ並べた例です


 

 

画像を横に三つ並べた例です

 


 


 

 

今回この配置する方法を説明したいと思います。

 

 

画像を横に二つ並べて配置する方法

 

 

操作画面のリボンバー ⇒ ボックス枠 ⇒ レイアウト枠をクリックします。

 

 

 

 

 

 

以下のようなコードが操作画面に表示されます

 

<div class="layout_l" style="width:49.5%;">
<!-- ★▽左列ここから▽★ -->
<!-- ★△左列ここまで△★ --></div>
<div class="layout_r" style="width:49.5%;">
<!-- ★▽右列ここから▽★ -->
<!-- ★△右列ここまで△★ --></div>
<br clear="all" />

 

記載方は

 

<!-- ★▽左(右)列ここから▽★ -->
ここに 画像やテキストを入れます

 

<!-- ★△左(右)列ここまで△★ -->

 

そうすると画像を横に二つ並べて配置できます。

 

 

画像を横に三つ並べて配置する方法

 

 

 

 

まず最初左33%と右67%で配置します。次に右の67%の中、さらに50%と50%で配置します。

 

 

そうすると、以下のようなコードになります。

 

 

<div class="layout_l" style="width:32%;">
<!-- ★▽左列ここから▽★ -->

 

<!-- ★△左列ここまで△★ --></div>
<div class="layout_r" style="width:66%;">
<!-- ★▽右列ここから▽★ --><div class="layout_l" style="width:49%;">
<!-- ★▽左列ここから▽★ -->
<!-- ★△左列ここまで△★ --></div>
<div class="layout_r" style="width:49%;">
<!-- ★▽右列ここから▽★ -->
<!-- ★△右列ここまで△★ --></div>
<br clear="all" />

 

<!-- ★△右列ここまで△★ --></div>
<br clear="all" />

 

 

記載方は二つ並べて配置する方法と同じです。

 

 

すると画像を横に三つ並べて配置できるようになります。やってみてね。

 

 

 

関連ページ

SIRIUSで記事中の画像編集が簡単!
SIRIUSでは記事の作成機能がとても簡単になっています。記事の作成機能について、詳しく解説していきます。
SIRIUS シリウスで画像にリンクを簡単に貼る方法
SIRIUS シリウスで画像にリンクを簡単に貼る方法、詳しく解説していきます。
SIRIUSシリウスで記事の「背景スタイル」を変更
SIRIUSでは記事の作成機能がとても簡単になっています。記事の作成機能について、詳しく解説していきます。
SIRIUS 画像付きボックス(枠)機能について
SIRIUSでは記事の作成機能がとても簡単になっています。記事の作成機能について、詳しく解説していきます。
SIRIUSのデザインモードでテーブルを作成方法
SIRIUSでは記事の作成機能がとても簡単になっています。記事の作成機能について、詳しく解説していきます。
SIRIUS(シリウス)のコンテンツ自動取得機能はどんな事が出来る?
SIRIUS(シリウス)のコンテンツ自動取得機能について、詳しく解説していきます。
SIRIUSの記事置換機能でアフィリエイトが簡単にできる
SIRIUSの記事置換機能について、詳しく解説していきます。
SIRIUSのモジュール機能 無限作成!
SIRIUSのモジュール機能について、詳しく解説していきます。
SIRIUSで独自の「カスタム文字装飾」を作ろう!
SIRIUSでは記事の作成機能がとても簡単になっています。記事の作成機能について、詳しく解説していきます。
SIRIUSの 口コミ形式の吹き出し機能
SIRIUSの 口コミ形式の吹き出し機能について、詳しく解説していきます。
SIRIUS 定型文挿入機能で、作業効率を上げよう!
SIRIUSでは記事の作成機能がとても簡単になっています。記事の作成機能について、詳しく解説していきます。
SIRIUS HTMLエスケープ機能でHTMLタグを簡単表示!
webでの作業説明などを行う際にHTMLタグを文字として表示したいとき、HTMLエスケープ機能を使います、そのHTMLエスケープ機能について、詳しく解説していきます。
SIRIUS 記事ページ上部や下部に広告を設置する方法
SIRIUS 記事ページ上部や下部に広告を設置する方法解説していきます。
SIRIUSで公開したくないページの設定方法
SIRIUSで公開したくないページの設定方法について説明します。
SIRIUSで1カラムページを作る方法
SIRIUSで1カラムページを作る方法を紹介します。


トップページ SIRIUS機能解説 SIRIUSのカスタマイズ お勧めレンタルサーバー ご購入特典案内