ブログ初心者でも「デベロッパーツール」で気になるサイトのCSSデザインが確認できる方法

ブログ初心者でも「デベロッパーツール」で気になるサイトのCSSが確認できる方法ママでも出来るブログ

こんにちは( ¨̮ )

実はWebデザインが出来るあいぽん(@bb_ai.pon)です。

あいぽん
あいぽん

このブログは、

無料テーマ《cocoon》を使用してます!

備わっている装飾の設定で十分かもしれませんが、

私はいろんなブロガーさんの気になる装飾をチェックして

CSSでデザインをカスタマイズしています。

  • このブログ真似したい!けど、どんなCSSを使ってる?
  • ブログを変更したいけどCSSの指示がわからない…

と悩んでいる初心者さんでも

実は…

気になるサイトのCSSを簡単に確認できる方法

があります!!

あいぽん
あいぽん

実際に私もこの方法で気になったサイトを見て、

カスタマイズしました。

CSSはわからないけど、

好きなブログの装飾をチェックしたい!

という人はこの方法を試してみて下さい。

※PCで作業確認した方が見やすいです。

そもそも『HTML』『CSS』って何?

そもそもHTMLとかCSSが何かわからない…という方へ。

簡単に言うと…

今見ているこのWEBページにある文字が『HTML』という言語で記載されています。

HTML』は…?

コンピューターが理解できる「印」を利用して、

人間にもコンピューターにも理解できる文章を作っています。

例えばこんな記号

<div><p>あああ</p></div>

画面上ではただの『あああ』と表示されるだけです。

HTMLの何の要素に対して、

どのような属性(色とか)を、

どう設定するのかを指定するものをCSSといいます。

ブログ初心者でも「デベロッパーツール」で気になるサイトのCSSが確認できる方法

この画像のようなCSSを指示すると

『あああ』が『あああ』に変わります。

コンピューターに指示できるプロパティはたくさんあるので、

よく使うものだけ覚えていれば十分だと思います。

この文字を 「色付けたいな」 「右側に配置したいな」

などなど…設定を指示するのがCSSということです。

スポンサーリンク

ブログ初心者でも「デベロッパーツール」で簡単に『CSS』を確認する方法

プラウザを「Firefox」か「Chrome」で作業することをオススメします。

ブログの「CSS」を確認する方法

まず気になる好きなサイトを開きます。

ここでは、私のこのブログを参考に説明します。

ブログ初心者でも「デベロッパーツール」で気になるサイトのCSSが確認できる方法

次に、気になる箇所を右クリックして

Firefoxの場合…『要素の調査』をクリックします。

ブログ初心者でも「デベロッパーツール」で気になるサイトのCSSが確認できる方法

Chromeの場合…『検証』をクリックします。

ブログ初心者でも「デベロッパーツール」で気になるサイトのCSSが確認できる方法

もしくは F12のキーをクリック

または

すると、画面下か右に難しそうな画面が出てきます。

ブログ初心者でも「デベロッパーツール」で気になるサイトのCSSが確認できる方法

これはデベロッパーツールといって、開発者向けのツールです。

ここにサイトのHTMLとCSSなどの情報が出てきます!

あいぽん
あいぽん

どんなプラグインを使用しているかもわかっちゃいます。コソッ

Firefoxの場合

左側の「インスペクター」がHTML右側の「ルール」が、選択した箇所のCSSです。

選択した箇所は青く表示されます。

ブログ初心者でも「デベロッパーツール」で気になるサイトのCSSが確認できる方法

Chromeの場合

左側の「Elements」がHTML右側の「Styles」が、選択した箇所のCSSです。

ブログ初心者でも「デベロッパーツール」で気になるサイトのCSSが確認できる方法

やっぱり違う箇所を調べたい!

っていう時は もう一度右クリックで「要素の調査」or「検証」をクリックするか、

左端にあるマークをクリックすると、気になる箇所が選択できます。

ブログ初心者でも「デベロッパーツール」で気になるサイトのCSSが確認できる方法

ここでは、投稿記事の部分を例にします。

まず、青く表示されている部分はどの<div></div>で囲まれているのかを確認します。

下図の場合は、<div id=”list”> </div>で囲まれている『class=”a-wrap”』になります。

ブログ初心者でも「デベロッパーツール」で気になるサイトのCSSが確認できる方法

ココを変更したい場合は

WordPressの「外観」→「テーマの編集」から《style.css》に以下の例のような指示を追加するとデザインを変更することができます。

(※子テーマを使用している場合は子テーマのstyle.cssに追加)

.list .a-wrap {

background-color: #fff; /*背景の色*/

border: 1.5px solid #61c0bf;  /*枠の線幅、線の種類、枠の色*/

box-shadow: 1px 3px 5px #ccc; /*影(右、下、ぼかしの範囲、影の色)*/

border-radius: 3px; /*枠を角丸にする*/ }

指示は「.a-wrap」だけでもいいですが、

他に同じ「.a-wrap」がある場合は全てにデザインが反映されます。

スポンサーリンク

モバイル画面のデザイン確認もできる!

あいぽん
あいぽん

最近のこのブログのアクセスは

80%以上が携帯からです。

パソコン画面で作業していても、

携帯のモバイル画面でのデザインが崩れていたら意味がありませんよね。

なので、私は携帯でどう見えるかもこの方法でチェックしています。

どうすればいいのかというと…

ブログ初心者でも「デベロッパーツール」で気になるサイトのCSSが確認できる方法

「レスポンシブデザインモード」という携帯のようなマークを押すと、

モバイル画面表示になります!

実際にボタンを押すとこのような画面になります。

ブログ初心者でも「デベロッパーツール」で気になるサイトのCSSが確認できる方法

このままでは、正しい表示ではないので

赤枠のところをクリックすると端末が選べます!

ブログ初心者でも「デベロッパーツール」で気になるサイトのCSSが確認できる方法

私は「Apple iPhone 6s」をクリックして確認しています。

実際にクリックするとこんな画面になります。

(モバイル画面と同じです。)

ブログ初心者でも「デベロッパーツール」で気になるサイトのCSSが確認できる方法
あいぽん
あいぽん

これで、いちいち携帯を開いて確認する必要なし!

スポンサーリンク

何のプラグインを使っているかもわかる?!

これはあまり必要ない情報かもしれませんが、

覗いてみると結構面白いです。(マニアック

あいぽん
あいぽん

ついでにどのテーマを使用しているのかもわかりますよ。

プラウザが「Firefox」の場合…

ブログ初心者でも「デベロッパーツール」で気になるサイトのCSSが確認できる方法

HTMLは「インスペクター」で見れましたが、

今度は『デバッカー』という項目をクリックするとサイトのソールファイルが覗けます。

「wp-content」フォルダ内の「plugins」が使用しているプラグインです。

また、「themes」は、使用しているテーマになります。

プラウザが「Chrome」の場合…

ブログ初心者でも「デベロッパーツール」で気になるサイトのCSSが確認できる方法

HTMLは「Elements」で見れましたが、

今度は『Sources』という項目をクリックするとサイトのソールファイルが覗けます!

スポンサーリンク

あいぽんの一言。

あいぽん
あいぽん

初心者だからこそ!

気になるサイトはこの『デベロッパーツール』

駆使すればとっても便利です。

CSSだけでは出来ないこともありますが…

気になる好きなサイトのCSSを真似っこしてみると勉強になります。

CSSで悩んでいる方は「デベロッパーツール」ぜひ使ってみてね!☺

コメント

タイトルとURLをコピーしました