ホームページのデザインを崩さず、ほぼコピー&ペーストで作品展示用デザインを取り入れられるデザインCSS。
同人誌やサイト内作品の展示に。
設置方法
<head>~</head>の間で「my-bookshelf.css」を読み込みんでください
（href内のパスは環境に合わせて変更してください 不安な場合は、http://から始まる絶対パスで指定してください）
<link rel="stylesheet" href="my-bookshelf/my-bookshelf.css">- ドキュメント（2ページ目にあります）に沿って、HTMLファイル内にタグを記述してください
サイトのデザインに合わせて設定する
このデザインでは以下のカスタムプロパティを変更することでデザインの変更が可能です。
| カスタムプロパティ | 概要 | 初期値 |
|---|---|---|
--ebs-gap | 頒布物間の間隔 | 30px |
--ebs-inner-gap | 画像・テキスト間の間隔 | |
--ebs-new-bg-color | newマーク・背景色 | #b2c3dd |
--ebs-new-text-color | newマーク・テキスト色 | #fff |
--ebs-border-width | ebs-borderの線幅 | 2px |
--ebs-border-color | ebs-borderの線色 | #b2c3dd |
--ebs-border-radius | ebs-borderの角丸サイズ | 10px |
--ebs-border-inner-space | ebs-borderの内側余白 | 10px |
--ebs-text-border-color | 装飾・下線（色） | #7d9edb |
--ebs-text-border-width | 装飾・下線（幅） | 2px |
--ebs-text-em-bg-color | 装飾・強調テキスト背景色 | #f1c3d7 |
--ebs-link-btn-text-color | 装飾・ボタン風リンク（テキスト色） | #fff |
--ebs-link-btn-bg-color | 装飾・ボタン風リンク（背景色） | #7d9edb |
--ebs-link-btn-radius | 装飾・ボタン風リンク（角丸サイズ） | 10px |
更新履歴
- 2020.12.14公開・配布開始
- 2021.10.20色設定にカスタムプロパティを使用
- 2022.12.22仕様変更
- 各クラスの接頭語「
bs」を「ebs」に変更 - カスタムプロパティの設定項目を追加
- 「角丸設定クラス」「枠内余白設定クラス」「ボタン風リンク（角丸）」廃止
- 各クラスの接頭語「
- 2023.01.17新着マーク追加
- 2023.03.01コード修正
- 画像最大幅が設定されていない環境で画像サイズ設定クラスが効かない問題の修正
ドキュメント
次のページにドキュメントをご用意しています。
