サポート
- 皆様からお寄せいただいたご質問とその回答です
文章と写真のレイアウト再現用CSSについて
CSSの編集が可能なブログサービスなどに追加すると、プチの日記・ギャラリーページなどに備わっている「写真と文章の配置」のレイアウトを再現できるCSS(スタイルシート)です。
例:はてなブログ
»
» レイアウト再現用CSSファイルをダウンロード
@charset "UTF-8"; /* petit-layout: ver.20190218 */ .petit-paragraph { display: flex; flex-wrap: wrap; } .petit-paragraph ~ .petit-paragraph { margin-top: 40px; } .petit-images__item img { display: block; max-width: 100%; } .petit-images__item img + p:not(.petit-images__caption) { display: none; } .petit-images__caption { margin: 10px 0 0; text-align: center; } .petit-text { white-space: pre-wrap; } [data-layout="1"] .petit-images, [data-layout="1"] .petit-text { width: 100%; } [data-layout="1"] .petit-text { margin-top: 10px; } [data-layout="2"] .petit-images, [data-layout="2"] .petit-text { width: 100%; } [data-layout="2"] .petit-images { order: 2; margin-top: 20px; } [data-layout="2"] .petit-text { order: 1; } [data-layout="3"] { flex-wrap: nowrap; } [data-layout="3"] .petit-images { flex: 0 0 auto; } [data-layout="3"] .petit-text { flex: 1 1 auto; margin-left: 20px; } [data-layout="4"] { flex-wrap: nowrap; } [data-layout="4"] .petit-images { order: 2; flex: 0 0 auto; margin-left: 20px; } [data-layout="4"] .petit-text { order: 1; flex: 1 1 auto; } [data-layout="5"] .petit-text { display: none; } [data-layout="6"] .petit-images { display: none; } [data-images-layout="1"][data-images-width="1"] { width: 150px; } [data-images-layout="1"][data-images-width="2"] { width: 300px; } [data-images-layout="1"][data-images-width="3"] { width: 450px; } [data-images-layout="1"][data-images-width="4"] { /* 設定されている横幅 */ width: 200px; } [data-images-layout="1"][data-images-width="5"] { width: auto; } [data-images-layout="1"][data-images-width="6"] { width: auto; } [data-images-layout="1"] .petit-images__item ~ .petit-images__item { margin-top: 20px; } [data-images-layout="2"][data-images-align="1"] { display: flex; justify-content: flex-start; } [data-images-layout="2"][data-images-align="2"] { display: flex; justify-content: center; } [data-images-layout="2"][data-images-align="3"] { display: flex; justify-content: flex-end; } [data-images-layout="2"][data-images-width="1"] .petit-images__item { width: 150px; } [data-images-layout="2"][data-images-width="2"] .petit-images__item { width: 300px; } [data-images-layout="2"][data-images-width="3"] .petit-images__item { width: 450px; } [data-images-layout="2"][data-images-width="4"] .petit-images__item { /* 設定されている横幅 */ width: 200px; } [data-images-layout="2"][data-images-width="5"] .petit-images__item { width: auto; } [data-images-layout="2"][data-images-width="6"] .petit-images__item { width: auto; } [data-images-layout="2"] .petit-images__item ~ .petit-images__item { margin-left: 20px; } [data-layout="1"] [data-images-layout="1"][data-images-align="1"], [data-layout="2"] [data-images-layout="1"][data-images-align="1"], [data-layout="5"] [data-images-layout="1"][data-images-align="1"] { margin: 0 auto 0 0; } [data-layout="1"] [data-images-layout="1"][data-images-align="2"], [data-layout="2"] [data-images-layout="1"][data-images-align="2"], [data-layout="5"] [data-images-layout="1"][data-images-align="2"] { margin: 0 auto; } [data-layout="1"] [data-images-layout="1"][data-images-align="3"], [data-layout="2"] [data-images-layout="1"][data-images-align="3"], [data-layout="5"] [data-images-layout="1"][data-images-align="3"] { margin: 0 0 0 auto; } [data-layout="1"] [data-images-layout="2"], [data-layout="2"] [data-images-layout="2"], [data-layout="5"] [data-images-layout="2"] { width: 100%; } [data-text-align="1"] { text-align: left; } [data-text-align="2"] { text-align: center; } [data-text-align="3"] { text-align: right; }