表示調整
閉じる
挿絵表示切替ボタン
▼配色
▼行間
▼文字サイズ
▼メニューバー
×閉じる

ブックマークに追加しました

設定
0/400
設定を保存しました
エラーが発生しました
※文字以内
ブックマークを解除しました。

エラーが発生しました。

エラーの原因がわからない場合はヘルプセンターをご確認ください。

ブックマーク機能を使うにはログインしてください。
Gifアニメーションdeあそびあそばせ  作者: とあるあそび人
5/12

誘導尋問

背景の仕様



(*´Д`)さーて今日もなろうの仕様をみていくぞい。



ということで今回は背景の仕様ですね。




前回背景の入れ方は説明しました。覚えてますかね?


レイアウト設定で背景に使用するURLを入力するんでしたよね。


こんな感じ。



挿絵(By みてみん)


挿絵(By みてみん)




ではでは、今回は入力するとどんなふうに表示されるか確認してみましょう。



このURLを使いました。



"https://22980.mitemin.net/userpageimage/viewimagebig/icode/i404060/"




この話の背景に入れてもいいのですが、読みにくくなるので次の話に背景を入れています。後で確認してみてください。


背景として使用したのはこの画像です。

200×157で作ってみました。



挿絵(By みてみん)




さて、この画像を背景として使うとどのように表示されるのでしょうか。ということで画像をキャプチャしたものがあるのでご覧ください。(PCでの画面です)




挿絵(By みてみん)




なんだ、これは元画像と異なるぞ。



はい、実は背景画像は一つの画像を拡大するのではなく、その大きさで画面に貼り付けていく設定になっています。


わざと画像サイズを小さくしたのでこんな風に何度も繰り返されています。タイルみたいに画像が並んでいるのを想像してみてください。


なお始点はブラウザ画面の端になっています。なのでブラウザの画面を小さくするとこんな感じ。


挿絵(By みてみん)




なので、背景画像を使用する場合は画像サイズに気を付けましょう。

画像は繰り返されることを理解しておいてくださいね。




あと、ちなみに背景画像は縮小されません。


本文であれば自動で580×580以内に収まるようになってましたが、背景はそうなっていません。



横700pxの画像を背景にすると、こんな感じになります。


挿絵(By みてみん)

横幅700の画像を背景に設定。

"https://22980.mitemin.net/userpageimage/viewimagebig/icode/i404066/"



挿絵(By みてみん)





挿絵(By みてみん)

縦幅700の画像を背景に設定。

"https://22980.mitemin.net/userpageimage/viewimagebig/icode/i404066/"



挿絵(By みてみん)






こんな感じで背景を設定することができるのですが、実は編集画面やプレビューでは背景は反映されません!


これは背景を設定した話のプレビュー画面ですが、背景は読み込まれないで表示されます。


挿絵(By みてみん)



背景を設定するのはいいのですが、実は投稿後の実際のページでしか背景は確認できません……


これを回避するためには実験用の話を非公開設定で作っておくというのがありますね。私も一つだけそういう作品を用意して、きちんと表示されるか確認して投稿しています。



どのように確認するかはちょっと工夫が必要ですね。




はい、ということで今回は背景についてでした。


次のページは背景込みにしているので、どんな表示になるか試してみてね。


ということで次回はようやく背景込みのGifアニメの説明に入りますよ!


評価をするにはログインしてください。
この作品をシェア
Twitter LINEで送る
ブックマークに追加
ブックマーク機能を使うにはログインしてください。
a
チラッ (゜-| ̄
ヘ(・_|
ジ~ (・_・|
コソコソ(( ̄_|
コッチニオイデ"ヘ( ̄ー|
― 新着の感想 ―
このエピソードに感想はまだ書かれていません。
感想一覧
+注意+

特に記載なき場合、掲載されている作品はすべてフィクションであり実在の人物・団体等とは一切関係ありません。
特に記載なき場合、掲載されている作品の著作権は作者にあります(一部作品除く)。
作者以外の方による作品の引用を超える無断転載は禁止しており、行った場合、著作権法の違反となります。

この作品はリンクフリーです。ご自由にリンク(紹介)してください。
この作品はスマートフォン対応です。スマートフォンかパソコンかを自動で判別し、適切なページを表示します。

↑ページトップへ