展開後のlaymicビューワーに他要素が被さる場合の対処方法スポンサーリンク2020.01.24laymicビューワーの汎用サイト向け導入説明記事straw_man以外のサイトに対して、laymicビューワーを導入するための説明をしていきます。laymicではLaymicとLaymicApplicator、二つのAPIを用意しているのですが、この記事では主にLaymicApplicator側の導入説明を行います。href="https://cdn.jsdelivr.net/npm/@dettalant/laymic@2.2.2/dist/laymic.min.css">以下のコードを</body>の直上行あたりにコピペすれば導入完了です。})</script>漫画ビューワーの登録サンプル上記コードを導入した場合、LaymicApplicatorは.laymic_templateというクラス名を持つ要素を読み取り、それらから漫画ビューワー用情報を自動生成します。そのためには、ページ内の<body>から</body>の間の任意箇所に、以下のようなコードを挿入してください。ここをクリックでビューワー展開</button>data-viewer-idとdata-forの値が不一致である場合は、ビューワー展開イベントが正常に紐付けされない点にはご注意を。976,})といった記述がありました。ここでのpageWidthとpageHeightに対しては、あなたが公開しようと考えている漫画の画像サイズを指定する必要があります。pageWidthには漫画1ページの横幅解像度を、pageHeightには漫画1ページの縦幅解像度を入力するようにしてください。表示する画像と解像度指定値が食い違っている場合、高確率で表示崩れが発生します。「この話だけ別解像度を指定したい」といった状況であるなら、.laymic_template側に以下のような設定値を加える必要があります。実際の記述サンプルはこんな感じ。--></div>.laymic_template側に設定値が記述されている場合は、その値が優先されるようになっています。参考リンクlaymic使用の上でさらなる情報をお求めの場合は、手前味噌ではありますが以下記事を参考にしてください。この記事はFC2テンプレート向けの解説記事ですが、内部的にはこの記事でも説明したLaymicApplicatorを用いているので、非FC2ユーザーの方でもほぼほぼ参考に出来るというわけですね。設置するサイトによっては、「展開後laymicビューワー上に他要素が覆いかぶさって邪魔になる」場合が発生するかもしれません。いった状況では以下コードを参考に、邪魔になっている要素より大きなz-index数値を入力するようにすると良いでしょう。2147483647といった我の強い指定がなされている場合は、この方法では解決できません。その場合は邪魔になっている要素側をなんとかできないか、別の方策を探すことをオススメいたします。