ブログの表示が遅くなっている理由をChromeの「要素の検証」機能で調査しました。

ねこぎじです。

このところ、ブログのカスタマイズ途中にて余計なHTML編集をやらかしたようでヾ(゚д゚;)スマソ

表示がとても遅くなっていました。

原因はHTMLの構文が一部おかしくなっていたことです。

その理由の調査に役だってくれたのがChromeの「要素の検証」でした。

このブログは3つのカラムとよばれる段落の様な構成分けがなされています。本文とメニューやリンク、コメントなどの3つのパートに別れています。

この3つのカラムのうち、メインカラムである文章の表示が完了後、その他のカラムの表示が遅くなっていましたが、このTOOLのお陰で調査~修正が完了しました。

ではどのような手順だったのか簡単に(^O^)/

ブログの画面上で、マウスの右ボタンをクリック → メニューの中に「要素を検証(N)」をクリックします。

すると下記の画面が表示されます。

上半分が通常のブログの画面、下半分がそのブログのHTML等の要素を表示となっています。

要素の検証

ではどのように確認していくかと言いますと(≧∇≦)

各HTML要素(DIVの行等)をクリックすると、該当するブログの要素が薄水色で囲まれるのです。

HTMLの選択02

要素が色で囲まれて02

この操作を行うことで、たとえば任意のコード(アフリエイトのコード等)をどこに挿入するかが理解出来るようになります。

合わせて、各ブロック単位である DIV~ /DIV単位の要素を確認することにより間違いを発見する一助にもなってくれます。

それからこのブログにZENBACKという追加したいブログパーツがありましたが、ねこぎじにはどこにZENBACKのコードを挿入すればよいか理解出来ていません。

そこでこの「要素を検証」TOOLで確認し、実装が出来る様になったのです。

なお、どのようなブログパーツかはご存知と思いますが下記を参照ください。
→ ~ZENBACKブログより~
zenbackはブログパーツです。ブログの記事の下や横に、

その記事をソーシャルなどにポストするボタン(Twitter、はてブ、mixiチェック、Evernote、Facebook)
その記事に関係する自分のブログ記事
その記事に関係する他のzenbackユーザーのブログ記事(関連リンク)
その記事についての最新のTwitterのつぶやき
その記事についてのはてなブックマーク

以上を追加してくれるパーツです。

それでは本日ここまでと致します。

皆様のお仕事が捗りますようにお祈りしています。
ではでは。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です