練習ページ/02 のバックアップ(No.4)

開発者ツールを使ったスクリーンショット Edit

F12を押すと開発者ツールが起動します。これを使って作業をしますが、開発者ツールの使い方を細かくは説明しません。(スキルがないので、できません。

  • 開発者ツールを起動して何か作業をする前には下記の画像のようにマウスでポイントした位置のHTMLを表示する機能をクリックして必ずONにしておいてください。
    毎回指定後にこの機能はOFFになります。(機能がOFFにならないと困るからです。)
    cap2.jpeg

このページでは下記画像のように説明文に画像が被っていてよく読み取れないときや、
5倍特効 などのアイコンを除去することができるのでその方法を説明します。

  • アイコンや画像が被っている。
    cap1.jpegcap1-1.jpg

キャラ画像が説明の文字に被っているのを修正する方法。 Edit

cap1-1.jpg
  • 2番目の「キャラ画像が説明の文字に被っているのを修正する方法」を説明します。
  • 1)開発者ツールを起動して、Select elementをクリックしてONにします。
    cap2.jpeg
  • 2)マウスカーソルを図のような位置に合わせて左クリックしてelementを確定させます。
    cap3.jpeg
  • 3)確定させると開発者ツールにグレーの帯ができているので帯に沿ってマウスポインターを移動します。
    cap4.jpeg
  • 4)帯の上の文字列 style="width;90px;float;" と書かれてるあたりをダブルクリックすると編集モードに変化するので、
    cap5.jpeg
  • 5)元の値 90を100とか110という具合に少しずつ数値を上げると説明文からキャラ画像が離れていきます。
    とりあえず何度か変更してみた結果90から110に書き換えてみました。
    cap5-1.jpeg
  • 6)数値を110に書き換えたらEnterキーを押して確定するとリアルタイムで表示が変化します。
    表示が正しくなければ違う数値を入れてみてください。
    今回はうまく説明文からキャラ画像が適切な距離で離れたのでOKとします。
    cap6.jpeg

キャラアイコンに表示されているエレメント「5倍特効」などの画像を除去する方法。 Edit

cap1-1.jpg
  • 1番目の「キャラアイコンに表示されているエレメント「5倍特効」などの画像を除去する方法」を説明します。
    この5倍特効という文字と画像は、まずキャラアイコンを表示した後で被せて合成表示されているので表示をOFFにすれば取り除くことができます。
  • 修正前の元画像です。ここから5倍特効という文字と画像を取り除きます。
    cap1.jpeg
  • 1)開発者ツールを起動して、Select elementをクリックしてONにします。
    cap2.jpeg
  • 2)画像のような位置でマウス左クリックでelementを指定します。
    cap7.jpeg
  • 3)「・・・」マークを左クリックします。
    cap8.jpeg
  • 4)「・・・」マークを左クリックするとメニューが出るので「Hide element」を選んで左クリックで決定します。
    cap9.jpeg
  • 5)この画像は再度「・・・」マークを左クリックしてチェックされているのを確認していますが、1回「Hide element」をクリックするだけで5倍特効という文字と画像は、消えますので再度の「・・・」マークのクリックは不要です。
    cap10.jpeg

2つの作業終了後に完成したSS(スクリーンショット) Edit

  • 修正前の元画像です。ここから5倍特効という文字と画像を取り除き、説明文に被ったキャラ画像の位置を修正します。
    cap1.jpeg
  • 修正後のSSです。
    &ref(): File not found: "354_LvMax.png" at page "シャノン(★5)";

最後に Edit

この開発者ツールは、いま現在PCに読み込まれたブラウザ上のHTMLに対して変更を加えて画面上の表示の「見た目」を変化させるだけであるので、
読み込まれたページやウィンドウを閉じて再読み込みすると表示は元に戻ります。
ゲームザーバー上の何か?を改変するものではありません。

  • わかりやすくするためにキャラ画像の位置が元は100で指定されていたものを敢えて90で指定しておいてから変更を加えて説明しています。
    実際にキャラ画像が説明文に被っているLvMax画像をチョコチョコよく見かけるので、この方法を使うことで修正したうえでスクリーンショットを撮影することが可能になります。

コメント Edit

コメントはありません。 Comments/練習ページ/02? 

コメント:
  URL B I U SIZE Black Maroon Green Olive Navy Purple Teal Gray Silver Red Lime Yellow Blue Fuchsia Aqua White

ホーム リロード   新規 下位ページ作成 コピー 編集 添付 一覧 最終更新 差分 バックアップ 検索   凍結 名前変更     最終更新のRSS