2015年

11月

20日

スクロールする文章枠を作る方法

ご利用規約などでよく見かけるスクロール枠の作り方

カラムなどに文章を入れる場合、長くなってしまうとレイアウトがちょっとねぇ・・・というような場合にもご利用いただけると思います。

スクロール枠付の文章

■スクロールする文章枠の特徴


Jimdoでこの枠を利用する場合、内容の編集が、通常の文章と同じように編集できるというのがとても楽チンでよいです。

この枠は、作るのがとても簡単ですし、背景などに色をつけることも出来ます

また、文章内に、リストなどを作ることも簡単に出来ます。

コピペで簡単に設置できます

  • コピペで簡単に設置が可能
  • 普通の文章と同じように編集が可能
  • リスト表示なども見た目編集がそのまま出来る


■長文になっても高さが変わらない

ピクセル単位で高さを調整できるので、横に画像などが置いてある場合でも高さをそろえることが出来ます

とは言ってもスクロールしながら見る文章って実はあまりじっくりみられないんですけどねぇ。。。

設置方法

まず、この下のHTMLを文章のHTMLを編集にそのまま貼り付けてみてください!
その後は通常の文章と同じように枠付きのままで編集が可能になります。

※Jimdoの特性上、設定解除ボタンを押すと、レイアウトが崩れてしまいますので、その時には、文章をすべて入力した後で、両脇に下記HTMLの赤文字の部分で囲ってください。

HTML

<div id="scroll" style="height: 200px; overflow: auto; padding: 16px; border: 1px solid #ccc; background: #fffff7; border-radius: 6px;">

<p><strong>スクロールする文章枠の特徴</strong></p>

<p>Jimdoでこの枠を利用する場合、内容の編集が、通常の文章と同じように編集できるというのがとても楽チンでよいです。</p>

<p>この枠は、作るのがとても簡単ですし、背景などに色をつけることも出来ます。</p>

<p>また、文章内に、リストなどを作ることも簡単に出来ます。</p>

<p>コピペで簡単に設置できます。</p>

<ul>

<li>コピペで簡単に設置が可能</li>

<li>普通の文章と同じように編集が可能</li>

<li>リスト表示なども見た目編集がそのまま出来る</li>
</ul>

</div>

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422