ALICE+サポート タグ・デザイン掲示板 TOPページ タグ・デザイン掲示板 テンプレートが崩れてしまいます。 編集 キャンセル 削除 アク禁 アク禁解除 キャンセル 凍結 0 mm. SO-03K 小説ページのテンプレートが崩れてしまいます。 テンプレートサイト様からソースをコピーして、表紙画面に記載しました。画像部分は <img class="top" src="##IMAGE_DATA_3_URL##"> このように、タグを使用しています。 テンプレートサイト様では、一枚目の画像のように表示されていました。自サイトでは二枚目のように画像が大きくなり、見切れてしまいます。 どうしてもこのテンプレートを使いたいのですが、原因が分かりません。お分かりになる方、教えてください。よろしくお願いします。 1 11/14 03:43 返信 コメント投稿 検索 1 しち SOG03 >>0 CSSやHTMLを見てないので断言はできないですが…… たぶん、横幅(width)の指定がCSSでされてないのだと思われます。 【表紙画面編集】内で、画像部分を以下のように書き換えてみてください。 ━━━━━━━━━━ <img class="top" src="##IMAGE_DATA_3_URL##" style="max-width:100%"> ━━━━━━━━━━ 本当は全体をデザインしているCSSを直す……のが根本的な解決となるんですが、画像がこれ1つだけなら上記の方法(インラインスタイルシート)で局所的に指定したほうが、ちゃちゃっと終わるし分かりやすいかと。 なお書き足したのは「style="max-width:100%"」の部分で、これで「画像の最大横幅を、親要素の横幅と同じにする」という指定をしています。 思うにテンプレの配布元サイトさんではデフォルトCSSを有効にしていて(ALICE+のデフォルトCSSには全画像に対し「style="max-width:100%"」の指定があります)、 一方>>0 mm.さんはALICE+のデフォルトCSSを無効にされている(=「style="max-width:100%"」の指定がない状態)のだと思います。 この「style="max-width:100%"」有無のせいで、表示に差異が生まれている可能性が高いです。 上記をやっても配布元さん同様の表示にならないなら、別の理由……CSSを書く場所に誤りがあるとか、HTMLにミスがある(必要な記述を消してしまった、など)といったことが考えられます。 その場合、HTML・CSSを見ないことには問題箇所の特定は困難です。 **おまけ** 「他にも画像を使うから、根本的に解決したい!」というときはCSSのなるべく始めの行(1行目とか)にこう書きます。 ━━━━━━━━━━ img{max-width:100%;} ━━━━━━━━━━ 「max-width(最大横幅)」を使ってこう書くと、画像の横幅を親要素の横幅100%までに制限します。 「width(横幅)」でなく「max-width(最大横幅)」で指定するのは、前者だと親要素の横幅よりも小さな画像を使ったとき、親要素の横幅に合わせて画像が横に伸びてしまうからです。 一方「max-width(最大横幅)」であれば、指定の最大横幅未満の画像は、画像そのものの横幅で表示が可能……となります。 ちなみに親要素というのは>>0の例で言うと、画像を入れている「<div class="">〜</div>」または「<section class="">〜</section>」といったものです。 画像を入れている箱、みたいなものとご想像ください。 箱に入れる画像が箱より大きいとき、画像は箱を突き破って表示されます。それが>>0の状態です。 スタイルシートで「画像は、箱の幅に合わせて縮小しなさい」と指定してやると、箱から飛び出さずに済む……というわけです。 1 11/14 22:03 返信 1ページ中1ページ目 14111 view 残り書き込み 9987 件 人気スレ テンプレート通りの形にならない 2021年11月02日 00時11分 13 字下げをすると改行も一緒にしてしまう 2023年01月27日 22時36分 8 アンケートの投票ボタン 2020年12月27日 23時20分 4 position属性について。 2019年11月24日 13時46分 12 関連スレ 外部のテンプレートの使い方 2025年01月29日 14時06分 1 ユーザー助け合い掲示板 外部テンプレートの使用 2024年08月13日 11時33分 1 ユーザー助け合い掲示板 テンプレート通りの形にならない 2021年11月02日 00時11分 13 タグ・デザイン掲示板 掲示板TOPへ サイトTOPへ ALICE+サポート