画像について

182 views
  1. コメントする
  2. 記事検索
  3. 更新

0
ゆん iPhone 2019/05/11 16:11
画像アップローダーでアップした画像を小説ページで横並びになるように表示をさせるようにするにはどうすればいいでしょうか?
小サイズでアップロードしたものの、画像サイズが大きくて横並びになりません。解決方法があれば教えていただきたいです。よろしくお願いします。

残り998件書き込み可

2
しち Firefox 2019/05/14 00:07
>>0
画像の表示サイズはCSSで設定します。
色々やり方はありますが、現状のHTML・CSSが分からないので、一番手っ取り早いのはインラインで指定する方法でしょうか……。

>画像でリンクする+画像サイズをインラインで指定
<a href="/サイトID/novel/数字/"><img src="##IMAGE_DATA_数字_URL##" alt="リンク先の説明" style="width:30%; max-width:100px"></a>

*※リンク先のURLは、同サイト内での移動ならばhttps://……のところは省略して、『/サイトID/』からでOKです。
リンクタグ<a></a>の間に画像タグ<img>を入れるだけです。

>alt="リンク先の説明"
は、無くても画像表示とリンクはできます。
これは「画像が表示できないとき、代わりに表示するテキスト」です。リンクを貼りたいとのお話なので、画像が表示されなくても行き先が分かるようにした方が本当は良いです(alt="1話目"、alt="2話目"…みたいな感じに)。
こうしておくと画像が表示されなくてもテキストリンクとして alt の内容が表示されます。
表示されなくてもサイト閲覧に問題無い画像ならこの代替テキストを書かなくてもOKなんですが。

なお、
> width:30% …………親要素に対して30%の横幅で
> max-width:100px …横幅は最大でも100pxまでしか広げない
という意味です。

親要素が分からなければ、「ブラウザ幅に対して」と読み換えて大体OKです。
ざっくりまとめると「画像を親要素幅(≒ブラウザ幅)の3分の1の横幅にする。でも、画像は幅100pxより大きくしない」と指定します。
***●「横に3つ並べたい」ということなので、とりあえず30%にしました。あとは適度に増減してください。
***●100pxの部分も、使う画像の横幅に合わせて変更してください。(数値の決め方は後述)

なお画像幅の最大値を決めておくのは、閲覧者がどんなブラウザ幅でサイトを見るか分からないからです。
例えばPC・タブレットなど横幅の広い端末で閲覧したら、ブラウザ幅が1000pxとかもあり得ます。1000pxの30%は『300px』ですね。
これでもしも元画像の横幅が『100px』だったら?……100pxだったものを300pxに拡大するわけですから、画像が滲んで汚くなってしまいます。

***※ max-width:○○px の数値の決め方※
必ずこの最大横幅のサイズは、「元画像の横幅以下に」してください。
理由は上述の通り、元画像より大きなサイズで表示してしまわないようにするためです。

*** style="width:○○px"(%指定じゃなくpxで指定する&最大値指定無し)は駄目なのか?
駄目じゃないですが、閲覧者がどんなブラウザ幅で見てるか分からないので勧められないです。
スマホだけ見ても画面サイズは多様ですし……。%指定をするとブラウザ幅に合わせられるし、最大値指定もしておけば画像が広がりすぎてしまうのも避けられます。
もっとも、「どうしても画像を3つほど横並びにしたい!」というわけでなければ style="width:○○px" でもそう問題は無いです。
(※ただし画像がブラウザ幅より大きいと横スクロールします!※参考までに一般的なスマホの最小横幅は『320px』らしいです[2019年現在]。ぼちぼち考慮せずよくなりましたがガラケー幅は240pxくらい・スクロールバーの分を引いて200px前後が画像幅の推奨最大値だった気がします)

#画像一つ一つにstyle="width:30%; max-width:100px"…とか書くと編集画面が混み合ってイヤ!という場合は、
*【HEAD編集】で<style>間に or 【CSSファイル編集】に、

a img{
width:30%;
max-width:100px;
}

*と入れ、画像を貼りたいところには、
<a href="/サイトID/novel/数字/"><img src="##IMAGE_DATA_数字_URL##" alt="リンク先の説明"></a>

*と書く。
サイズ指定の考え方は始めに書いた方と同じです。
CSSでは、「<a>〜</a>の間にある<img>の横幅を……」と纏めて指定しています。これだとインラインでいちいち全ての画像に横幅指定をしなくて済みます。
1
ゆん iPhone 2019/05/11 16:16
>>0
補足として、画像は1つずつURLを付けて小説ページに飛ぶようにしたいのと、3つ程度横並びに貼れるようにしたいです。
1ページ中1ページ目

Back to Top