自分で更新できるホームページをつくりませんか?|・専用ソフト不要! ・運用コストダウン! ・スマホサイトも自動生成
自分で更新できるホームページをつくりませんか?
お問い合わせ

Jimdoの内の文章を枠でわかりやすくする-1

以下のように、文章にメリハリをつけるための枠を作る方法を説明します。

 

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。

 

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。

 

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。

 

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。

 

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。

 

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。

 

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。

 

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。

 

■ステップ1

「文章」を選択すると、以下のような画面が出てきますので、

文章を入力してから右上の「HTML」のボタンをクリックしてください。

■ステップ2

以下のように、1行ごとに<p>と</p>で囲まれています。

 

<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>

<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>

<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>

 

これを、枠で囲いたい部分全体を<p>と</p>で囲うように修正します。

改行するところは<br />とします。

 

修正後

<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。<br /> ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。<br /> ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>

■ステップ3

一番左の <p> を以下のタグに書き換えてください。

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。

<p style="margin: 0 10px 0; padding-left: 10px; border-left: solid 5px #F90;">

 

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。

<p style="margin: 0 10px 0; padding-left: 10px; border-left: solid 5px #F00;">

 

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。

<p style="margin: 0 10px 0; padding-left: 10px; border-left: solid 5px #000;">

 

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。

<p style="margin: 0 10px 0; padding-left: 10px; border-left: solid 5px #006;">

 

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。

<p style="margin: 0 10px 0; padding-left: 10px; border-left: solid 5px #999;">

 

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。

<p style="margin: 0 10px 0; padding-left: 10px; border-left: solid 5px #F06;">

 

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。

<p style="margin: 0 10px 0; padding-left: 10px; border-left: solid 5px #06C;">

 

ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。

<p style="margin: 0 10px 0; padding-left: 10px; border-left: solid 5px #090;">