concrete5の操作マニュアル

画像に文章を回り込ませる

画像に文章を回り込ませる

難易度:★★☆☆☆

バージョン: ver5.6.1 ver5.6.2 


概要

concrete5の記事ブロックで、画像に文章を回り込ませる方法を説明します。

 

内容

まず、編集したいページヘ移動、編集モードにします。

ログイン方法は、「ログイン方法」を参照してください。

ページ編集方法は、「ページ編集方法」を参照してください。

ブロックの追加・編集方法は、「ブロックの操作」を参照してください。

 

操作説明-画像に文章を回り込ませる 

まず文章を入力してください。
回り込ませたい文章の先頭にカーソルを合わせてください。

"画像を追加"をクリックしてください。

 

 

操作説明-画像に文章を回り込ませる

画像選択ダイアログが表示されます。
挿入したい画像をクリックしてください。 

 

 

操作説明-画像に文章を回り込ませる

表示されたメニューから、"選択"をクリックしてください。

 

 

操作説明-画像に文章を回り込ませる

画像が挿入されました。

 

 

操作説明-画像に文章を回り込ませる

画像をクリックしてください。

記事ブロックのツールバーから"画像の挿入/編集"ボタンをクリックしてください。

 

 

操作説明-画像に文章を回り込ませる

画像の挿入/編集ダイアログが表示されます。

"表示"タブをクリックしてください。

配置から"左寄せ"、または"右寄せ"を選択してください。

"更新"ボタンをクリックしてください。

今回は"左寄せ"を選択します。

 

 

操作説明-画像に文章を回り込ませる

画像の右に文字が回り込みました。

このままだと画像と文章が隙間なく表示されます。
必要に合わせて画像と文章の隙間を設定します。 

 

 

操作説明-画像に文章を回り込ませる

画像をクリックしてください。

"画像の挿入/編集"ボタンをクリックしてください。

 

 

操作説明-画像に文章を回り込ませる

画像の挿入/編集ダイアログが表示されます。

"表示"タブをクリックしてください。

"上下余白"、"左右余白"を入力してください。

今回は左右余白を20pxで設定します。

 

 

操作説明-画像に文章を回り込ませる

必要に合わせて設定を変更します。

スタイルから"margin-left: **px;"を削除してください。

今回は画像の右だけに隙間を設定します。

隙間の設定は以下のとおりになります。必要なものだけが残るように設定してください。
上の隙間:"margin-top"
下の隙間:"margin-bottom"
右の隙間:"margin-right"
左の隙間:"margin-left" 

 

 

操作説明-画像に文章を回り込ませる

画像と文章の間に空間ができました。

 

 

操作説明-画像に文章を回り込ませる

画像を右に回り込ませることもできます。

 


関連項目

ページ
TOPへ