読者です 読者をやめる 読者になる 読者になる

人生戦略ノート

Enjoy the Life

「Chromeデベロッパーツールでエラーの改善とBlogデザインの反省点」


スポンサーリンク

Chromeデベロッパーツールでエラー処理とブログデザインの反省

ブログデザインをするに当たって今や検索をすればかなりヒットします。
自分のブログのデザインに使いたいと思えるものがあれば、すぐにコピペで導入していきます。自分がしたいと思っている事を内容+はてなブログと検索すると分かりやすいサイトがいくつもヒットします。
これを参考にいろいろデザインを試してきましたが、デザインのコードがどんどん溜まっていき、何が何だか分からない状況とミスをしてF12ボタンを押した時にデペロッパーツールが出てきて、エラーが表示されていました。
エラーを処理するのとデザインで使ったコピペの残骸ばかりで反省した事をまとめました。

デペロッパーツールを確認しながらエラーの消去

私がメインで使っているのはGoogleのChromeでF12ボタンを押すとでデペロッパーツールが出てきます。
過去にBLOGGERで無料テンプレをダウンロードし、いじる時にどのIDを使われているかを調べる時に使っていました。使っていた時はエラーなど見たことがなかったのですが、ふとした時に見るとエラーと警告があったので、あるよりない方が良いという事で処理する事にしました。

エラー場所の発見方法

Chromeデベロッパーツールでエラーの改善とBlogデザインの反省点 コンソールから赤文字を調べていくとエラーを吐き出す場所に辿り着きます。このコンソールやソースが記載されいてる所を動かすことが出来るのを後で知りました。
そこでいろいろ見ているとどうやらパンくずリストのエラーとアマゾンのパブリッシャースタジオの2つがエラーとなりました。アマゾンの方はとりあえず使っていないので外すとしてパンくずリストをどするうかを考えました。

パンくずリストのエラーの改善

パンくずリストを作成し、良い感じになったと思います。少し気に入らないのが2つの親カテゴリを設置すると横に記載されず、縦に2つ表示されるのが嫌だったので親カテゴリは1つだけしか使いませんでした。
そこから月日がたちF12ボタンを押すとエラーが出ていました。別に気にせずに良いかなと思ったのですが、気になりだすと止まらないのでとりあえず改善してみる事にしました。
http://bulldra.hatenablog.com/entry/category-breadcrumb-update

こちらのイケダハヤトさんの太陽がまぶしかったからのパンくずリストを使用しています。

bulldra.hatenablog.com

1<!-- パンくずリスト CopyRight http://bulldra.http://bulldra.hatenablog.com -->
2<script src="">https://www.google.com/jsapi">
3<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
4<script src="http://bulldra.github.io/breadcrumb.js" charset="utf-8"></script>
5<script type="text/javascript">
6</script>
7
8<script type="text/javascript">
9google.setOnLoadCallback(categoryHierarchyModule);
10</script>
11<!-- パンくずリストおわり -->

本来7にある

google.set0nloadCallbach(categryHierarchyModule);</script>

削除しました。削除する事によってどうなったかの変化したかは全く分からないというレベル。いかに自分が素人で分からずに使っているかを痛感しています。
削除しちゃダメな場合や検索に影響がある場合は即戻そうと思っています。

警告の改善

エラーに次にWarnigという表示がありました。Warningとは「警告」という意味があったのでこちらもしっかり処理しておきました。
エラーと警告を無くすことによってどうなるかは分かりませんが、とりあえずクリーンに出来たと自己満足。

エラーは他のページに行くといろいろ出てきているので早い事を改善していきたいです。

コピペばかりで無駄なコードが大量に乱雑

コピペばかりでいらないコードがわんさかありました。必要なくなれば消すなり、使うなら使うなりに工夫して置いておかないと訳が分からない状態でした。
同じIDの要素が3つあったり、これを整理するのに凄い時間がかかりました。まだまだあるので年末までにはコードの大掃除をしたいと思います。

何のコードか全く分からない時の対策

素人なので、表示されないコードの書き方を知っているのですが、性格上めんどくさがりなので記載していませんでした。

/*反映する内容を記載する*/

上記のパンくずリストの際も使っていますが、をしっかり書いてどう反映しているのかをしっかり記載していきたいと思います。覚えている物や見て分かる物は記載しませんが、見ても全く訳の分からない物はしっかり調べて記載していこうと思うので、たいした物はないですが、年内に終わらせようと思います。

Chromeデベロッパーツールでエラーの改善とBlogデザインの反省点まとめ

いろいろコピペをしていると何の目的でCSSに記載しているのか分からない物が多数ありました。これでしっかりやらない自分がバカなのですが、家でも同じ状況になっていると気が付きました。
引越しの際、何のコンセントか分からない物や使い道のない物までかなり量が今でも家にあります。まさかCSSの中身と家の中身の起きている出来事が同じだとは思いもしませんでした。早急に家とCSS内部を整理整頓と処分をしていきます。

www.amazon.co.jp