写真と文章があるBLOCK
HOME
↑
リンクも設置できます。
|
-
このスライドショーはBLOCKコンテンツ型です。div要素などのBLOCKコンテンツを混在させて使用できます。BLOCKは中身をHTMLで自由に編集できます。
-
BLOCK全面に写真を表示したい場合はBLOCK要素の背景にしてください。その際スタイルシートを、background-image:url('写真のURL');、background-repeat:no-repeat;、background-position:center;、background-size:cover;(またはcontain;)などとしてください。
|
データにdiv要素を使用すると中身をHTMLで自由に編集でき、内側にこの様なdiv要素を作って文章やリンクや画像やバナーなどを入れる事もできます。背景画像のスタイルをbackground-size:contain;にして写真が枠内に収まるように表示しています。
これはa要素の背景写真を利用したバナーデータです。クリックで指定したページが開きます。レスポンシブデザインへの対応では、アスペクト比維持型(写真中心の場合便利)としても高さ維持型(文章が多い場合はみ出しを防ぐ)としても使用できます。背景画像のスタイルをbackground-size:cover;にして写真を枠全体に表示しています。
これはdiv要素の背景写真を利用したBLOCKデータです。この様に文章などのコンテンツを差し込む事ができます。
スタイルシートを、background-image:url('写真のURL');background-repeat:no-repeat;background-position:center;background-size:~;などとしてください。
このデータの背景画像のbackground-size:contain;にして写真が枠内に収まるように表示しています。
定型カード型のデータ
ここにカードのコメントを書いてください。カードの中身はHTMLで装飾可能です。このサンプルでは「写真」「題名」「コメント」の3要素で作っていますが、自由にデザインを変更できます。ただし、スマホで表示したときにコンテンツがはみ出さない様に注意してください。
データにdiv要素を使用すると中身をHTMLで自由に編集でき、内側にこの様なdiv要素を作って文章やリンクや画像やバナーなどを入れる事もできます。データはクラス名koboDataです。背景画像のスタイルをbackground-size:cover;にして写真を枠全体に表示しています。
これはa要素の背景写真を利用したバナーデータです。背景画像のスタイルをbackground-size:cotain;にして写真を枠内に収めて表示しています。サムネイルもimg要素ではなくdiv要素の背景として表示します。クラス名galのDIV要素の中の、クラス名thumbのDIV要素の背景に、サムネイル用の画像を設定してください。画像の形状やサイズは自由です。
データにdiv要素を使用すると中身をHTMLで自由に編集でき、内側にこの様なdiv要素を作って文章やリンクや画像やバナーなどを入れる事もできます。データはクラス名koboDataです。背景画像のスタイルをbackground-size:contain;にして写真を枠内に収めて表示しています。
これはdiv要素の背景写真を利用したBLOCKデータです。
このデータの背景画像のbackground-sizeはcontain。
スタイルborder:20px solid #eed;とbox-sizing:border-box;で背景と同色の枠を作っています。
データにdiv要素を使用すると中身をHTMLで自由に編集でき、内側にこの様なdiv要素を作って文章やリンクや画像やバナーなどを入れる事もできます。データはクラス名koboDataです。背景画像のスタイルをbackground-size:cover;にして写真を枠全体に表示しています。
定型カード型のデータ
ここにカードのコメントを書いてください。カードの中身はHTMLで装飾可能です。このサンプルでは「写真」「題名」「コメント」の3要素で作っていますが、自由にデザインを変更できます。ただし、スマホで表示したときにコンテンツがはみ出さない様に注意してください。