picrewのスマホ用画面をCSSで魔改造してPC用に最適化する
picrew
https://scrapbox.io/files/6532bdd584959f001c629cba.png
↑これ、どうしてPC用に最適化されてないんでしょうね……。
既存のものをCSSでレスポンシブにしてしまえば、HTMLを書き換えないのでそこまで手間はかからないはず。
ということで、魔改造してPC用のCSSを作ってみました。
適用後はこんな感じ。
https://scrapbox.io/files/6532be524d80bd001c77d51f.png
ブラウザの拡大縮小すれば、全体のUIの大きさを変えられます。
200%に設定すれば……
https://scrapbox.io/files/6532bed3037cf2001cdd66b6.png
良い……!
魔改造する
CSSの適用方法はこちらと同じ。
code:style.css
.view_pc .play-Container_Imagemaker {
flex: none;
}
.imagemaker_canvas_wrapper {
max-height: 100%;
height: 100%!important;
flex: 1!important;
}
.imagemaker_control_wrapper {
width: 400px;
flex: none;
}
.play-Imagemaker {
flex-direction: row;
height: 100%!important;
}
下部のバーを非表示にしたい場合
PCの高さが狭い等で、エディター側に横長バナー(広告)を表示させたくない場合。※自己責任にて。
上のコードの一番最後 .play-Imagemaker {……} を削除して、以下に差し替え。
code:disable.css
.play-Imagemaker_Footer {
display: none;
}