ブログ始めたけどみんなと同じデザインイヤだと思ってカスタマイズしようと思ったけど元々の設定が分からないんだけどと悩んでる方、これがあれば一発であなたのサイトが丸裸になります。
Google Chrome限定ですが「CSSViewer」という拡張機能を導入するだけで幸せになれます。
Google Chrome拡張機能「CSSViewer」の導入
まずはこちらにアクセスしましょう。
ページにアクセスして右上にある”CHROMEに追加”をクリックするだけで導入できます。
ブラウザにこのアイコンが追加されたと思います。
これで完了です。
Google Chrome拡張機能「CSSViewer」の使い方
使い方はめっちゃ簡単です。
CSSの設定を確認したいページにアクセスし「CSSViewer」のアイコンをクリックするだけです。
あとは任意の場所にカーソルを合わせましょう。
するとこんな感じになります。
すごいっすねー
全部見えちゃいますね。
これであなたのサイトの設定が今どんな感じなのか簡単に分かるようになりましたね。
気になるあのサイトも丸裸に！サイトカスタマイズの参考に
もちろんどんなページでも使えるのでサイトカスタマイズの参考にもってこいですよね。
パクるんじゃなくてリスペクトしてるからこそのオマージュです。
私が昔から愛してやまない男子ハックを丸裸にしちゃいましょう。
ほらこの通り簡単だよ！
参考：バック・トゥ・ザ・フューチャーに登場したNIKEの自動で靴紐を締める「NIKE MAG」2016年にオークション型式で販売 | 男子ハック
丸裸にした上でH2タグのデザインいいなーって思ったらそのままオマージュ（セケンハパクリトイウコトバニキビシイノデ）しましょう。
早速いただきました。カッコイイデザインありがとーございます。
ちなみに男子ハックのH2タグのCSSは以下の通りです。
.article h2 {
font-size: 19.2px;
font-weight: bold;
color: #333333;
background-color: #FFFFFF;
border-bottom: 1px dotted #999999;
border-left: 8px solid #999999;
margin: 10px 0px;
padding: 10px 20px;
}こんな感じでサイトを丸裸にしていきサイトカスタマイズの参考にしましょう。
さいごにひとこと
またカスタマイズが捗るツールを発見してしまいました。
イジリだしたらキリがないんですけどあれやってる時ってめっちゃワクワクする。
[kanren]
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)
