laymic v1用雛形cssコード保管
========================

まず以下コードをテンプレートcssの自由記述領域あたりにコピペ。

/* laymicページ表示用雛形cssここから */
.laymic_page_wrapper {
  /* 原稿画像のアスペクト比をここに入力 */
  --page-aspect-height: 488;
  --page-aspect-width: 345;
  /* 2p表示時の表示横幅 */
  --slide-width: calc(50vw - var(--viewer-padding));
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
  max-height: calc(var(--slide-width) * var(--page-aspect-height) / var(--page-aspect-width));
  color: #fafafa;
  justify-content: center;
  align-items: center;
}

.laymic_isVertView .laymic_page_wrapper,
.laymic_isSingleSlide .laymic_page_wrapper {
  --slide-width: calc(100% - var(--viewer-padding) * 2);
}

/* リンクカラー変更 */
.laymic_page_wrapper a {
  color: #fafafa;
}

.laymic_page_wrapper br {
  display: none;
}

.laymic_page_wrapper span {
  margin: .5rem 0;
}

/* 白背景とするやつ */
.bg_white {
  background: #fff;
  color: #333;
}

.bg_white a {
  color: #333;
}

/* 横長要素複数を想定したラッパー */
.laymic_page_landscapes,
/* 縦長要素複数を想定したラッパー */
.laymic_page_portraits {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 入れ子要素ごとの区切り余白 */
  margin: 1rem 0;
}

.laymic_page_landscapes {
  flex-flow: column nowrap;
}

.laymic_page_landscapes:first-of-type {
  justify-content: flex-end;
}

.laymic_page_landscapes:last-of-type {
  justify-content: flex-start;
}

.laymic_page_landscapes:only-of-type {
  justify-content: center;
}

.laymic_page_portraits:first-of-type {
  align-items: flex-end;
}

.laymic_page_portraits:last-of-type {
  align-items: flex-start;
}

.laymic_page_portraits:only-of-type {
  align-items: center;
}
/* laymicページ表示用雛形cssここまで */

 

さらに、コピペしたcssコードにある`.laymic_page_wrapper`部分の下記変数を、貴方の原稿サイズに応じた適切な値に書き換える必要が有ります。

* `--page-aspect-height`: 原稿解像度アスペクト比の縦数値
* `--page-aspect-width`: 原稿解像度アスペクト比の横数値

 

[アスペクト比計算ツール](https://aspect.arc-one.jp/)などを用いて、原稿画像のアスペクト比を計算・入力してください。