contents_006

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

50代 男性

この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。

30代 女性

 

contents_006a

吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

50代 男性

この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。

30代 女性

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

40代 男性

contents_006b

吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

50代 男性

この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。

30代 女性

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

40代 男性

CSSでノートの罫線を表現したブロックパターン

 
ノートの罫線に合わせて文字を配置するレイアウトをCSSで表現したパターン。
カラムに対して設定しているので、段数の増減に対応します。
ノートの紙の色(カラムの背景色)と罫線の色はCSSの項目から簡単に変更できます。
文字サイズや行間(罫線間の寸法)なども数値を変更すれば対応可能ですが、font-size、
background-size、line-heightの調整が必要になります。
 
短めの文章でお客様の声を並べるような時に使えそうなパターンです。
 

contents_006a

用紙の色(background-color)を薄い黄色に変更したパターン。用紙の影を少し小さ苦なるように変更しています。
 

contents_006b

用紙の色(background-color)を白にして、罫線を薄いグレーにしたパターン。罫線が用紙の幅いっぱいにならないようにカラムに対してborderで太い線を設定しています。
 
 
下記サイトを参考にしてBiNDのブロックエディタのCSSタブで変更できるようにしてみました。
参考)CSSのgradientを使ってノートみたいな罫線を描く
http://www.02320.net/tech/ruled-line-by-css-gradient/