どうもスーです。みなさんWebブラウザって何を利用していますか？Chrome、IE、Firefox,Safari等色々ありますよね。僕が使用していたWebブラウザはFirefoxだったのですがChromeへと変更しました。
Webブラウザを切り替えただけで同じブログでも見え方が全然違ったので正直驚きました。Chromeへ変えてから見えた世界とそれに伴った改善を今週の振り返りと一緒にやっていこうと思います。
なぜChromeへ変更したか？
まずなぜWebブラウザをFirefoxからChromeへと変更したのかというと拡張機能を色々と使いたいと思ったからです。結構前から思っていまして便利な拡張機能があるにも関わらずFirefoxだから使えない・・・良くて試作のものしか利用できないという場面が多々ありました。そこで思い切って変更することを決意しました。
便利な拡張機能（主にはてなブログに関係あるもの）
アドセンス広告自己クリック防止
chrome.google.com 広告自己クリックを防いだり、収益を確認出来るもの。
アナリティクスに自分のアクセスをカウントしない
chrome.google.com アナリティクスに自己アクセスをカウントさせないようにするもの。
貼り付けた画像のタイトルを編集する
chrome.google.com 画像にタイトルを付けれるためSEO対策に便利なもの。
見たまま編集で書く際に便利なもの
chrome.google.com 見たまま編集を行う際に選択箇所にh2タグの挿入、幅寄せ、背景色をグレーでつけるなど豊富な機能が多数。
はてなブックマーク
chrome.google.com 見ているページのはてブの確認などを行えたりはてブがすぐに付けれたりはてなブックマークを頻繁に利用する方には便利なもの。
はてなからのお知らせ
chrome.google.com はてなの各サービスからのお知らせ通知を受け取るもの。
などなど色々ありますね。便利なものが使える環境にしたかったのでWebブラウザの切り替えを行いました。
スポンサーリンク
Chromeに切り替えたらブログに変化が起こった
いざChromeへ切り替えて自分のブログを見てみると結構デザインが変わっていました。今までは違和感がなかったはずなのに気になる箇所が数点見つかりました。
サイドバーのプロフィールを変更
まず目に入ったのがサイドバーにあるプロフィールです。こちらのスクリーンショットがFirefoxから見たサイドバーのプロフィールです。全く問題ないように思います。
ただ、Chromeに切り替えてから見たサイドバーにあるプロフィールです。カスタマイズ関連は何も手を付けておりません。ただWebブラウザをChromeに変更しただけです。行間が広がりイマイチな見た目になってしまいました。ここで初めてブラウザが変わると行間が変わるということに気づきました。
とりあえずどちらも違和感を無くしたかったためサイドバーのプロフィールに改行タグを加えてみることにしました。
まずはFirefoxから見てみるとまずまずの見栄えといった感じです。個人的には改善前のほうが見やすく感じてしまいます。ただ文字のバランスで見ると良くなったようにも感じます。プロフィール画像の大きさと文字のバランスが噛み合っていないのでしょうか。
次にChromeを見るとこちらもガタついていた改善前と比べるとマシにはなったかなという印象です。やはり行間がぜんぜん違うのが気になるところですね。
どちらもバランスは取れていますがプロフィールは応急処置といったところです。プロフィールは今後も改善する余地あるなというのが今回の収穫ですかね。プロフィール画像とヘッダー画像をそろそろ変更したいなーとか思っていたり。。
フォローボタンを変更
フォローボタンにも変化が起こりました。サイドバーと記事下にそれぞれ設置してあるのですがFirefoxから見ると特に不自然なところが見当たりませんでした。ところがChromeに切り替えたところ何故か「はてな」だけがデカい。
気になってしょうがなかったのでどちらも変更することにしました。
サイドバーはこちらの記事を参考にして設置しました。
結構ブログを見て回るとよく見かけるボタンで動きがある面白いフォローボタンですね。
記事下も同じものにしようと思いましたがなぜか設置不可能だったためゴトーさんの作ったフォローボタンを参考にして設置しました。
入力フォームで簡単にフォローボタンを作成できるためとても親切です。
・ちょっとだけいじった箇所デザインCSS
.custom-sns-follow-button a{
width: 75%;
}
ブログデザインの関係でオリジナルのものより少しサイズを小さくしております。.custom-sns-follow-button .title {
font-weight:bold;
}
あとフォローするのところを太文字にしました。.custom-sns-follow-button .titleに上記の記述を追加しました。
最終的にこのようなデザインになりました。自分で確認したのはSafari、Firefox、Chromeですがどのブラウザから見ても同じように見えたので気になった箇所は無事に修正できました。
過去記事をh3→h2に変更する
Webブラウザとは全く関係ないですが過去記事を見ていたらh3タグのものが結構あったためh2タグに変更しようと思いました。上記のアドオンにある見たまま編集の拡張機能を使用しても行うことができますがMilkさん方式で自動で書き換えてくれるようにしました。コードを貼るだけで良いのは非常に助かりますね。
最後に
今週の振り返りは以上となります。とりあえずWebブラウザをChromeに切り替えてやることはやったし上々でしょうかね。色々なブラウザから見ると新たな発見があるかもしれませんというお話でした。多分はてなブログを書くならChromeが一番便利なWebブラウザだと思います。
興味のある方はいろんなブラウザで見てみてください。