長いテキストを省スペースで表示させるCSSです
今回は、長文をコンパクトに表示させるCSSを紹介します。
CSSの「overflow」プロパティを活用し、「ある一定のサイズをはみ出た場合」の表示について設定を行います。
とーっても長い文章も、このコードを使えばコンパクトにおさめることができます。
だから
↓
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
ー
こんなに長いテキストでも大丈夫！です！
ソースの設置方法
標準レイアウト・スペシャルレイアウトに設置する方法
Jimdoにログイン後、管理メニュー（右側に表示されるアイコン一覧）から「設定（歯車のアイコン）」をクリック後、メニューから「ヘッダー部分を編集」をクリックし、下記ソースを貼り付けてください。
コピー＆ペーストする際は、コピー後、一度「メモ帳」に貼り付けてから作業すると「余計なコード」が表示されずにうまく貼り付けることができます（以下コードです）
※2013年6月28日追記
ソースを設置した箇所が少しへこんだ（エンボス風）様に見える様コードを追加しました。
＜追加ソース＞
border: 1px solid #ccc;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
不要な場合は上記ソースを削除してください。
/* 長文をコンパクトに表示
（Jimdoの「ヘッダ」部分に追記用）
----------------------------------------------- */
<style type="text/css">
.scroll
{
background-color: #ffffff;
overflow: auto;
height: 300px;
margin: 10px;
padding: 20px;
border: 1px solid #ccc;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
</style>
独自レイアウトに設置する方法
Jimdoにログイン後、管理メニュー（右側に表示されるアイコン一覧）から「設定（歯車のアイコン）」をクリック後、メニューから「レイアウト」をクリックし、「独自レイアウト」内「CSS」に下記ソースを貼り付けてください。
コピー＆ペーストする際は、コピー後、一度「メモ帳」に貼り付けてから作業すると「余計なコード」が表示されずにうまく貼り付けることができます（以下コードです）。
/* 長文をコンパクトに表示
----------------------------------------------- */
.scroll
{
background-color: #ffffff;
overflow: auto;
height: 300px;
margin: 10px;
padding: 20px;
border: 1px solid #ccc;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
＜コードについての補足＞
background-color
スクロール表示される箇所の背景色の設定です。通常の背景と同じ色で表示したい場合は、削除しても問題ありません。
overflow
この部分が、スクロール表示の設定になります、
下記の「height」で記載された値（ピクセル数）を文字量が超えた場合、どのような表示を行うかを指定します。
overflow: visible;
はみ出して表示されます。ブラウザによっては、表示される箇所が内容に合わせて拡張されます
overflow: scroll;
入りきらない内容はスクロールして見られるようになります。
overflow: hidden;
はみ出た部分は表示されません。
overflow: auto;
ブラウザに依存します（一般的にはスクロール表示になります）。
height
この部分で「どれだけの値を超えると『overflow』の処理を行うか」を指定します。
お使いのサイトにあわせて変更してください。
margin・padding
スクロール表示させる「枠（ボックス）」と「テキスト」の配置を指定します。
通常のテキストと同じ場合は、削除しても問題ありません。
「文章」部分への反映方法
「新項目を追加」で表示される一覧から「文章」を選択し、テキストを入力します（多い場合は途中まででもOK）
次に「文章」入力画面のメニュー一覧から「HTMLソースの編集」を選択します。
「HTMLソースの編集」ボタンを押すと、HTMLソースを直接編集する事が出来る画面が表示されます。
そこで、文章が記載されている部分の先頭に表示されている<p>の前に
<div class="scroll">
と記載します。
また、文章の一番最後に表示されている</p>の後に
</div>
と記載します。
記載したら「更新」ボタンを押します
指定したソースが反映されると、文章編集画面が上記の様な表示になります。
「保存」を押して、文章を保存します。
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
文章がスクロール表示される様になりました。
補足
設置するソースの「.scroll」部分は、「.roll」等変更が出来ます。
ただし、必ず文章部分へ反映させる際は、同じ名称で記載する様にしましょう。
例）.roll で設置した場合は<div class="roll">
応用すると様々な表現が出来る様になりますので、ご活用ください。
設置対応行います（有償での対応になります）
上記の説明でも分からない！という方向けに、標準レイアウトに限り設置対応を行います。
一律○円！としたい所ですが、他ソース等の設置状況によりうまく動作しない場合は調査・修正の必要がありますので、サイト拝見した上で金額を提示させて頂きます。
※お支払（お振込）を確認した上で対応致します。
※独自レイアウトへの設置も可能ですが、他ソース等の設置状況によりうまく動作しない場合がございますので、調査・修正費用を含めた金額は高額になります。ご了承頂ける場合は、下記フォームのメッセージ欄に「独自レイアウトへの設置」を明記頂きご連絡ください。
サイトを確認の上、別途金額をご連絡致します。
コメントをお書きください