my bookshelf

parts

ホームページのデザインを崩さず、ほぼコピー&ペーストで作品展示用デザインを取り入れられるデザインCSS。

同人誌やサイト内作品の展示に。

設置方法

  1. <head>~</head>の間で「my-bookshelf.css」を読み込みんでください
    href内のパスは環境に合わせて変更してください 不安な場合は、http://から始まる絶対パスで指定してください)
<link rel="stylesheet" href="my-bookshelf/my-bookshelf.css">
  1. ドキュメント(2ページ目にあります)に沿って、HTMLファイル内にタグを記述してください

サイトのデザインに合わせて設定する

このデザインでは以下のカスタムプロパティを変更することでデザインの変更が可能です。

カスタムプロパティ概要初期値
--ebs-gap頒布物間の間隔30px
--ebs-inner-gap画像・テキスト間の間隔15px
--ebs-new-bg-colornewマーク・背景色#b2c3dd
--ebs-new-text-colornewマーク・テキスト色#fff
--ebs-border-widthebs-borderの線幅2px
--ebs-border-colorebs-borderの線色#b2c3dd
--ebs-border-radiusebs-borderの角丸サイズ10px
--ebs-border-inner-spaceebs-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
    新着マーク追加

ドキュメント

次のページにドキュメントをご用意しています。

タイトルとURLをコピーしました