|
練習ページ/02 の変更点
TITLE:LvMaxステータスのSSを撮る際の裏技的方法（開発者ツール経由）By TSH #contents * 開発者ツールを使ったスクリーンショット [#n55bf372] F12を押すと開発者ツールが起動します。これを使って作業をしますが、開発者ツールの使い方を細かくは説明しません。（''スキルがないので、できません。''） - 開発者ツールを起動して何か作業をする前には下記の画像のようにマウスでポイントした位置のHTMLを表示する機能をクリックして必ずONにしておいてください。 毎回指定後にこの機能はOFFになります。（機能がOFFにならないと困るからです。） |&ref(./cap2.jpeg,nolink,80%);| このページでは下記画像のように説明文に画像が被っていてよく読み取れないときや、 ５倍特効 などのアイコンを除去することができるのでその方法を説明します。 - ''アイコンや画像が被っている。'' |&ref(./cap1.jpeg,nolink,80%);|&ref(./cap1-1.jpg,nolink,80%);| ** キャラ画像が説明の文字に被っているのを修正する方法。 [#afc9db3e] |&ref(./cap1-1.jpg,nolink,80%);| -2番目の「キャラ画像が説明の文字に被っているのを修正する方法」を説明します。 -1）開発者ツールを起動して、Select elementをクリックしてONにします。 |&ref(./cap2.jpeg,nolink,80%);| -2）マウスカーソルを図のような位置に合わせて左クリックしてelementを確定させます。 |&ref(./cap3.jpeg,nolink,80%);| -3）確定させると開発者ツールにグレーの帯ができているので帯に沿ってマウスポインターを移動します。 |&ref(./cap4.jpeg,nolink,80%);| -4）帯の上の文字列 style="width;90px;float;" と書かれてるあたりをダブルクリックすると編集モードに変化するので、 |&ref(./cap5.jpeg,nolink,80%);| -5）元の値 90を100とか110という具合に少しずつ数値を上げると説明文からキャラ画像が離れていきます。&br;とりあえず何度か変更してみた結果90から110に書き換えてみました。 |&ref(./cap5-1.jpeg,nolink,80%);| -6）数値を110に書き換えたらEnterキーを押して確定するとリアルタイムで表示が変化します。&br;表示が正しくなければ違う数値を入れてみてください。&br;今回はうまく説明文からキャラ画像が適切な距離で離れたのでOKとします。 |&ref(./cap6.jpeg,nolink,80%);| ** キャラアイコンに表示されているエレメント「５倍特効」などの画像を除去する方法。 [#j2eb3ea3] |&ref(./cap1-1.jpg,nolink,80%);| -1番目の「キャラアイコンに表示されているエレメント「５倍特効」などの画像を除去する方法」を説明します。 この''5倍特効という文字と画像''は、まずキャラアイコンを表示した後で被せて合成表示されているので表示をOFFにすれば取り除くことができます。 -修正前の元画像です。ここから''5倍特効という文字と画像''を取り除きます。 &ref(./cap1.jpeg,nolink,80%); -1）開発者ツールを起動して、Select elementをクリックしてONにします。 |&ref(./cap2.jpeg,nolink,80%);| -2）画像のような位置でマウス左クリックでelementを指定します。 &ref(./cap7.jpeg,nolink,80%); -3）「・・・」マークを左クリックします。 &ref(./cap8.jpeg,nolink,80%); -4）「・・・」マークを左クリックするとメニューが出るので「Hide element」を選んで左クリックで決定します。 &ref(./cap9.jpeg,nolink,80%); -5）この画像は再度「・・・」マークを左クリックしてチェックされているのを確認していますが、1回「Hide element」をクリックするだけで''5倍特効という文字と画像''は、消えますので再度の「・・・」マークのクリックは不要です。 &ref(./cap10.jpeg,nolink,80%); ** 2つの作業終了後に完成したSS（スクリーンショット） [#n5528b14] -修正前の元画像です。ここから''5倍特効という文字と画像''を取り除き、説明文に被ったキャラ画像の位置を修正します。 &ref(./cap1.jpeg,nolink,80%); -修正後のSSです。 |&ref(シャノン(★5)/354_LvMax.png,nolink,);| |&ref(シャノン(ユーロファイター)/354_LvMax.png,nolink,);| *最後に [#af4b4b59] この開発者ツールは、いま現在PCに読み込まれたブラウザ上のHTMLに対して変更を加えて画面上の表示の「''見た目''」を変化させるだけであるので、 読み込まれたページやウィンドウを閉じて再読み込みすると表示は元に戻ります。 ゲームザーバー上の何か？を改変するものではありません。 - わかりやすくするためにキャラ画像の位置が元は100で指定されていたものを敢えて90で指定しておいてから変更を加えて説明しています。 実際にキャラ画像が説明文に被っているLvMax画像をチョコチョコよく見かけるので、この方法を使うことで修正したうえでスクリーンショットを撮影することが可能になります。 *コメント[#comment] #pcomment(,10,reply,noname,nomove); |
