基本的なレイアウトながら質問と回答にアイコンをつけて、さらにtext-indetで改行された時に読みやすくなるようにしました。【faq_001のバリエーション】

 
質問と回答をそのまま並べてレイアウト。そのままでは(dafault)では質問と回答の区別がわかりにくく、一見して質問内容がわかりにくく感じます。
このブロックデザインでは、質問のカテゴリーを大見出し、質問を小見出し、回答を本文としています。
CSS(もしくはDRESS)で小見出しに色を設定するなどで見やすくはなるかと思いますが、QとAのアイコンをつけて余白を調整することで見やすくしています。
さらに、レスポンシブデザインの場合は、スマホでは改行されて表示されることが多くなりますので、改行時にアイコンが本文と一緒にならないようにtext-indentを指定しました。
このブロックのCSSタブで調整できますので、アイコンを変更した時などの寸法変更にも対応します。


Q
吾輩は猫である。名前はまだ無い吾輩は猫である?

A
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

Q
吾輩は猫である。名前はまだ無い?

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

Q
吾輩は猫である。名前はまだ無い?

A
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

  • アイコン(Q)の変更…SiGN上で画像として作っていますで色も文字も変更可能です。
  • 質問・回答の組み合わせ数は制限なし
  • 質問・回答の文字色、背景色の変更
  • 質問・回答の行高さ、文字サイズの変更
  • 質問ごとの区切り線は"区切り線"を配置しています。区切り線の色・太さなどはサイトのメインとなるDRESSで設定されているという前提でfaq_006では指定していません。

Tablet View

SP View