ディベロッパーツール「要素を検証」を使いこなす

ディベロッパーツール「検証」を使いこなして、CSSに慣れましょう。

自分でブログを作りこんでいくには、この要素を検証を使いこなす事が大事になってきます。

ブログカスタマイズは「検証」から!

Google Chromeブラウザなどで右クリックすると選べる「検証」は、そのページのソースをいち早く見るのに最適です。

「検証」を行うとディベロッパーツールが起動されます。

ページのその部分がどういったHTMLになっているのか？
そしてその部分にはどういったCSSで表現されているのか？
…というのがわかります。

また、
HTMLやCSSを一時的に変更し、プレビューする事が可能です。

あくまでプレビュー（テスト）ですので、
ブログをカスタマイズする場合は、まずディベロッパーツールでHTMLやCSSを編集して試してから変える
…というのが基本です。

ブログをカスタマイズする場合は、必ず「検証」を使いこなせるようにしましょう。

ディベロッパーツールを使いこなす

まずはディベロッパーツールを使って、実際のページを要素を検証して見ましょう。

ディベロッパーツールを使うには、Google Chromeブラウザがおすすめ。

ブラウザで右クリックを押すと「要素を検証」ってな項目が出てくるんで、それをクリック。

また、ショートカットキーのF12を押しても出てきます。

それでは動画での説明です↓

カスタマイズ後の注意として、HTML・CSSを変更した時は、必ず更新ボタンを押しましょう！

あれ？CSSが変わらない…って時は、更新ボタンで解消されます。
ブラウザの左上にある更新ボタンやF5ボタンを押さないと、変更されたCSSが更新されないので、カスタマイズ後は更新ボタンは押す癖をつけましょう。

他にもわからないカスタマイズ方法などあったら、まず検索してみましょう。

ワードプレスで背景色の変え方がわからなかったら
「ワードプレス　背景　変え方」で検索。
といった感じです。

「ワードプレス　背景　変え方」で検索

「要素　検証　使い方」で検索

要素を検証でHTML・CSSを再現

WEBページ上で良いHTMLのカスタマイズを見つけたら、それをパクる参考にするのが、上達の近道です。
コンテンツまるパクリはダメですが、技術はドンドン盗んで行くべきです。

「要素を検証」から、HTMLやCSSのソースを抜き取り、自分のブログで再現する事をやってみましょう。

動画で説明します↓

動画で行った作業は以下の通りです。

<table id="enalist"><tbody><tr>
<td colspan="3"><a href="/blog-entry-311.html">天井狙い目　SLOT LIST</a></td></tr>
<tr>
<td><a href="http://2-9densetsu.com/blog-entry-589.html/">あ 行</a></td>
<td><a href="http://2-9densetsu.com/blog-entry-590.html/">か 行</a></td>
<td><a href="http://2-9densetsu.com/blog-entry-591.html/">さ 行</a></td></tr>
<tr><td><a href="http://2-9densetsu.com/blog-entry-592.html/">た 行</a></td>
<td><a href="http://2-9densetsu.com/blog-entry-593.html/">な 行</a></td>
<td><a href="http://2-9densetsu.com/blog-entry-594.html/">は 行</a></td></tr>
<tr><td><a href="http://2-9densetsu.com/blog-entry-595.html/">ま 行</a></td>
<td colspan="2"><a href="http://2-9densetsu.com/blog-entry-596.html/">や・ら・わ 行</a></td>
</tr></tbody></table>

<style>
#enalist {
 font-size: 15px;
 font-weight: bold;
 background-color: #FFF;
 width: 205px;
}
#enalist td {
 text-align: center;
 border: 1px solid #333;
}
#enalist a {
 display: block;
 padding: 3px 5px;
 background-color: #FFF;
}
#enalist a:hover {
 color: #FFF;
 background: #5AF;
 list-style-type: none;
 text-decoration: none;
}
</style>

これをこのままブログにコピーすると、再現できるって事ですね。

ちなみに上記のものはまるまるコピーして、自由に使ってもらってもOKです。