ブロガーも使える便利な開発ツール!更新前のカスタマイズ・スマホ表示・コードの確認も出来ちゃいます。

開発ツール
おかぴーおかぴー

こんにちは、WEBデザイナーのおかぴーです!

プロフィールはこちら。ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^

 

今回の記事は、「開発ツール」についてです。

 

ん??

 

・・・えーと、すごい難しそうな話っぽく聞こえますが、大丈夫です(笑)。

ブロガーにとってもカスタマイズする時に便利なツールで、文字だけでなく動画で実際に手を動かしながら解説するので、きっと便利に使いこなせるようになるはずです!

 

で、個人的にWordPressを使う中では、

  1. 更新前にブラウザ上でカスタマイズしたいコードを仮に書いて見え方をチェックする
  2. パソコンでスマホ表示された場合のレイアウトをチェックする
  3. CSSやHTMLコードの中身を確認する

の3つの確認で使う機会が多いのかなぁと感じています。

あなたのカスタマイズのお役に立てること間違いなし!

 

目次

使い方動画

こちらに3つの使い方を動画にまとめました。

↓↓↓

 

更新前にカスタマイズした場合の見え方をチェックできる

軽く色の見え方をチェックしたい時や、フォントサイズを確認したい時、

・追加CSSに書いて更新→チェック。

・それでも決まらない場合は、再度更新→チェックの繰り返し。

と、更新しながらチェックしていくのは面倒だったりします。

 

そこで、このブラウザ上で変更したイメージを確認してからそのコードを更新すれば一回の作業で済みます。

 

スマホ表示の確認

最近はGoogleでも、スマホの見え方が重要視されるようになってきたので、スマホ表示の確認は欠かせません。

とは言っても、毎回スマホでチェックするのも大変ですよね。

そんな時に、この機能を使うとパソコンで操作しながら簡単に確認が出来てしまいます^^!

 

CSSやHTMLのコードが何か確認する

ピンポイントで、変えたい箇所のCSSのクラス名を確認できます。

カスタマイズする時にうまく反映できない時は、きちんとCSSが指定できていないことが多いので、この開発ツールのカーソルを合わせて確認しておくことで、カスタマイズが楽になります。

 

まとめ

まとめ

開発ツールは他にも多くの機能が備わっていますが、最低限使えるようになりたい機能は上の3つです。

使いこなして、ブログ作成の時短ができるようになるといいですね^^!

他の機能も時間があれば記事にしていきたいと思いますので、また機会があれば〜

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次