WordPressでブログを作成し、テーマを反映させたまでは良いけど、
ブログのデザインを今後どのようにオリジナルのデザインへと変えていくか、
迷ってしまうことはありませんか？
そう、あるんですよ！
そんな時は、まず色々なWebページを巡回し、自分の好きなデザインを見つけよう。
そして、ディベロッパーツールの登場です。
私が使用しているブラウザ（FireFox）の場合
好きなデザインのWebページ（パクりたいデザインのあるWebページ）にて、
①右クリック
②[要素を調査]をクリック。または、「Q」キーを叩く。
（※①、②の代わりに「F12」キーを叩いてもOK。）
これで、ディベロッパーツールが起動する。
③ディベロッパーツールの最も左上にある「四角にマウスポインタ」みたいなマークをクリックす る。（マークは少し水色っぽくなる。もう一度クリックすると戻る。）Webページの各要素を選択 できるようになるため、パクリたいところをクリックする。すると、そこのHTMLと、それに関連 するCSSが見れる。つまりパクれる！
④自分の子テーマにて、それを元にCSSを改変する。
（ちなみに、ディベロッパーツールは、HTMLやCSSを書きかえる事ができるようになっていて、即時反映させることができる。ただし、あくまでもプレビューのため、Webページを更新（再読込）すると元のWebページに戻る。これが結構重要なテクニックだと、個人的に思う。）
終わり
コメント