スキのコメント返信

>九宮さん(ご質問いただいた背景表示方法の回答)2018041614:07

お待たせいたしました!
ご質問いただいた内容について、下記に回答させていただきます。

まず、小説機能だけに適用させるCSSについてですが、小説機能専用にマイテーマを別に作成する形がオススメです。
(その場合、他の機能と小説とで共通のCSSをご利用いただく際は、どちらのマイテーマも編集する必要がございます)

続いて、ご希望を叶えるCSSについてです。
こちらでより簡単な方法での対処法を検討させていただきました。

なお、サイトの状況などを確認させていただきましたところ、CSSが複雑に入力されていたため、
もしかするとそちらとの兼ね合いなどで上手く動かない可能性があることを予めご了承ください。

ナビゲーションタイプを変更してもいい場合

ご希望がサイト全体ではなく小説のみということですので、他のページでの表示がご希望の形には添えない可能性がございますが、一番簡単で崩れにくい方法のためご紹介いたします。

こちらは、ナビゲーションメニューの領域に背景を表示させる方法になります。

1.ナビゲーションタイプをオーバーレイタイプ、またはプルダウンタイプに変更する

2.マイテーマのCSS編集に下記を入力する
.navi_1,
nav.navi_1 {
background-image: url(★背景画像のURL);
background-repeat: no-repeat;
background-size: 100%;/* 一部の端末用の指定 */
background-size: cover;
}


※「★背景画像のURL」は、独自タグですと[#mi=数字:url#]といった形式で入力してください

どんなサイズの画像でも表示でき、また崩れることはほぼないと思われます。

※上記はオーバーレイタイプの例になります。
プルダウンタイプの場合は
「.navi_1,nav.navi_1」の部分を
「.navi_3,nav.navi_3」と書き換えてください。

スライドタイプのナビゲーションがいい場合

マイテーマのCSS編集に下記を入力してください。
.wrapper {
padding-top: 60px;
background-image: url(★背景画像のURL);
background-position: top center;
background-repeat: no-repeat;
}


上記のCSSでは、ページ全体の上部に60pxの余白をあけて、
60px × 2000pxの画像を上部固定で背景画像に指定することができます。
そのため、画像は縦60px固定 × 横2000px以上で作成する必要があります。

なお、ページの幅によって背景画像が拡縮されると、≡アイコンの縦幅と背景画像のサイズが合わなくなるため、
画像を等倍で表示させる必要があり、画像の左右はページの幅によっては切り取られます。

こうした制限も多く、上級者向けのCSSであることから、
こちらのCSSの細かなカスタマイズに関してや、他のCSSとの兼ね合いなどによって上手く動かないといった問題につきまして、サポートさせていただくのが難しい場合がございます。

運営部といたしましても、出来る限りご相談には乗らせていただきたいと考えておりますが、ご利用の際は自己責任で編集などをお願い致します。

また何かございましたら、お気軽にお問い合わせください!

2018/04/15 10:32