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

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

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

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

 

<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>

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

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

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

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

 

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

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

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

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

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

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

ここでは，例として

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

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

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

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

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

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

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

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

 

【貼り付け前】

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

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

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

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

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

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

 

【貼り付け後】

<h3 class="ckH3">見出し１</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>

画像が表示されました。

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

 

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

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

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

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

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

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

 

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

 

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

 

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