ブログ初心者向け:ブラウザ検証ツールは便利!

昨日書いた記事を今日、よくよく見てみたら
URL取り消し線

あれ?この取り消し線はなんだろう?

検証

編集画面を見てみる。

取り消し線を編集画面で確認

テキストモードを見てみる

取り消し線の箇所の違い確認

html見慣れないと「?」になるかもしれませんが、URL以外のところを見比べると同じです。

ブラウザの検証ツールで見てみる

ぱっと見違いがわかりません。
ブラウザの検証ツールで見てみましょう。
今回Chromeを使います。
Chromeで問題のWebページを開き右クリック。
「検証」をクリックします。

検証ツール

  1. 右上にあるポインタを押します。
  2. 気になる箇所をクリックします。
  3. 右側のhtml画面でその箇所の色が反転します。

※多少配置に違いあるかもしれません。
html画面の方は、上部は「Elements」下部は「Styles」を選択してください。

今回2か所同じようなURLのリンクがあるので、2か所を見比べてみます。
検証ツール_違い発見

何が書かれているかはとりあえずいいので、URL以外の違いは?
取り消し線がある方は「class=”broken_link“」と書かれています。

違い発見!

しかも、「broken_link」だなんて関連ありそうですね!
再度右上にあるポインタをクリックし、問題箇所をクリック。
(うまく画面から選択できなかったら、ポインタを選びなおしてみてください)
右下にある「Styles」ウィンドウから「class=”broken_link”」を探します。

class_broken_link

ありました。
「text-decoration: line-through」
text-decorationは文字の装飾、line-throughは取り消し線です。

自分では設定していないこの「text-decoration: line-through」の仕業だったようですね。

今回の原因はプラグイン

Broken Link Checkerというプラグインがリンク切れに取り消し線を付けてくれたようです。
もしかすると最初から「WordPress 取り消し線 URL」などとググれば答えは分かるかもしれませんが、自分で検証することで内部の作りを覚えていくので、その後の不具合対応のスピードと応用力が格段に上がっていくと思います。

投稿者プロフィール

つるむらさき
つるむらさき
WordPress、マーケティングを勉強中の事務員&Web担当の保育園児ママです。

SNSやブログで知り合った方とも
情報共有できたり楽しくコミュニケーション取れたりできればうれしいです!!
サーバーはエックスサーバーが速くてお勧めです



アイキャッチ画像
最新情報をチェックしよう!