テキストが回り込む形で画像を表示させたい。

はじめに

こちらのページでは,テキストが画像を回り込む形で表示させる方法をご説明させていただきます。
画像を回り込み表示で表示させると,パソコンから見たときにはこのように表示されます。

スマートフォンで見た場合には,このように表示されます。
今回は,スマートフォンでは記事を回り込ませず,テキストの最後に表示されるようにしています。

使用しているコード

この表示には,以下のコードを使用しています。

 

<div class="clearfix">
<p class="spNone" style="float: right;margin-left: 20px; margin-bottom: 10px; width: 250px;">

<img src="https://www.kokoro.style/manual/media/00000012342.jpg" /></p>

 

<p class="pcNone" style="text-align:center;">

<img src="https://www.kokoro.style/manual/media/00000012342.jpg" style="width: 90%;" />

</p>
</div>

1 記事を作成する

まずは心スタイルにログインし,文章を入れたい記事を作ってください。 
記事の作り方についてはこちらをご覧ください。

作成したページに記事を追加したい。(「標準」ページ)

2 コードをコピーする⑴

まずは,以下のコードをそのままコピーしてください。

こちらは,パソコンで見たときの画像を表示させるためのコードです。

 

<div class="clearfix">
<p class="spNone" style="float: right;margin-left: 20px; margin-bottom: 10px; width: 250px;"><img src="ここに画像URLを入れてください" /></p>

3 コードを貼り付ける

先ほど作成した記事を開き,「ソース」をクリックしてください。

クリックするとこのような画面に切り替わります。

万が一切り替わらない場合には,一度ブラウザの更新ボタンをクリックして,操作をやり直してください。

コードを貼り付けてください。

コードは回り込ませたいテキストの前に貼り付けるようにしてください。

ここでは,例として

<h3 class="ckH3">見出し1</h3>

の直後に貼り付けています。

<h3 class="ckH3">見出し1</h3>は,心スタイルの機能でhタグをつけたときに表示されます。

4 コードをコピーする⑵

続いて,以下のコードをコピーしてください。
これはスマートフォンで見たときの画像を表示させるためのものです。


<p class="pcNone" style="text-align:center;"><img src="ここに画像URLを入れてください" style="width: 90%;" /></p>
</div>

5 コードを貼り付ける

同じようにソース画面に貼り付けてください。
ここでは,テキストの一番下に貼り付けています。

6 画像URLを入れる

タグの中の「ここに画像URLを入れてください」を消し、代わりに掲載したい画像のURLを入れてください。
画像URLは「画像・リンク等管理」や,記事下部の「画像設定(PC)」や「画像設定(SP)」をクリックすることでご覧いただけます。
「画像・リンク等管理」を開く場合は一度記事を保存してから閉じてください。

赤枠の部分が画像URLです。
コピーして、タグに貼り付けてください。

 

【貼り付け前】

<h3 class="ckH3">見出し1</h3>

<div class="clearfix">
<p class="spNone" style="float: right;margin-left: 20px; margin-bottom: 10px; width: 250px;">

<img src="ここに画像URLを入れてください" /></p>

<p> サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>

<p class="pcNone" style="text-align:center;">

<img src="ここに画像URLを入れてください" style="width: 90%;" /></p>
</div>

 

【貼り付け後】

<h3 class="ckH3">見出し1</h3>

<div class="clearfix">
<p class="spNone" style="float: right;margin-left: 20px; margin-bottom: 10px; width: 250px;">

<img src="https://www.kokoro.style/manual/media/00000012342.jpg" /></p>

<p> サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>

<p class="pcNone" style="text-align:center;">

<img src="https://www.kokoro.style/manual/media/00000012342.jpg" style="width: 90%;" /></p>
</div>

画像が表示されました。

7 見せ方の調整

数値などを変えることで見せ方を変えることができます。

 

<h3 class="ckH3">見出し1</h3>

<div class="clearfix">
<p class="spNone" style="float: right;margin-left: 20px; margin-bottom: 10px; width: 250px;">

<img src="ここに画像URLを入れてください" /></p>

<p> サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>

<p class="pcNone" style="text-align:center;">

<img src="ここに画像URLを入れてください" style="width: 90%;" /></p>
</div>

 

  rightとleftを入れ替えることにより,画像とテキストの左右を入れ替えることができます。

 

  ここの数値を変えることで,画像の下の部分と文章の間を広げたり狭めたりすることができます。

 

  ここの数値を変えることで,画像の表示サイズを変えることができます。

使用マニュアル
(目次)

使用マニュアルトップ

所在地

〒453-0015
愛知県名古屋市中村区
椿町14-13
ウエストポイント7F

052-485-7623

お問合せ

PageTop