こんにちは( ¨̮ )
在宅ワークでWebデザインをしているあいぽん(@bb_ai.pon)です。
![あいぽん](https://aipon.net/wp-content/uploads/2018/09/aiニコニコ顔.png)
このブログは、
無料テーマ《cocoon》を使用してます!
備わっている装飾の設定で十分かもしれませんが、
私はいろんなブロガーさんの気になる装飾をチェックして
CSSでデザインをカスタマイズしています。
- このブログ真似したい!けど、どんなCSSを使ってる?
- ブログを変更したいけどCSSの指示がわからない…
と悩んでいる初心者さんでも
実は…
気になるサイトのCSSを簡単に確認できる方法があります!!
![あいぽん](https://aipon.net/wp-content/uploads/2018/09/aiニコニコ顔.png)
実際に私もこの方法で気になったサイトを見て、
カスタマイズしました。
CSSはわからないけど、
好きなブログの装飾をチェックしたい!
という人はこの方法を試してみて下さい。
そもそも『HTML』『CSS』って何?
そもそもHTMLとかCSSが何かわからない…という方へ。
簡単に言うと…
今見ているこのWEBページにある文字が『HTML』という言語で記載されています。
『HTML』は…?
コンピューターが理解できる「印」を利用して、
人間にもコンピューターにも理解できる文章を作っています。
例えばこんな記号
<div><p>あああ</p></div>
画面上ではただの『あああ』と表示されるだけです。
HTMLの何の要素に対して、
どのような属性(色とか)を、
どう設定するのかを指定するものを『CSS』といいます。
![ブログ初心者でも「デベロッパーツール」でおしゃれサイトのCSSをコピペできる方法](https://aipon.net/wp-content/uploads/2018/05/13-300x223.png)
この画像のようなCSSを指示すると
『あああ』が『あああ』に変わります。
コンピューターに指示できるプロパティはたくさんあるので、
よく使うものだけ覚えていれば十分だと思います。
この文字を 「色付けたいな」 「右側に配置したいな」
などなど…設定を指示するのがCSSということです。
ブログ初心者でも「デベロッパーツール」で簡単に『CSS』を確認する方法
![](https://aipon.net/wp-content/uploads/2018/04/laptop-2557574_1920-1024x682.jpg)
ブログの「CSS」を確認する方法
まず気になる好きなサイトを開きます。
ここでは、私のこのブログを参考に説明します。
![ブログ初心者でも「デベロッパーツール」で気になるサイトのCSSが確認できる方法](https://aipon.net/wp-content/uploads/2018/05/CSS1-e1551290239634.png)
次に、気になる箇所を右クリックして
Firefoxの場合…『要素の調査』をクリックします。
![ブログ初心者でも「デベロッパーツール」でおしゃれサイトのCSSをコピペできる方法](https://aipon.net/wp-content/uploads/2018/05/CSS1-2-e1551290253516.png)
Chromeの場合…『検証』をクリックします。
![ブログ初心者でも「デベロッパーツール」でおしゃれサイトのCSSをコピペできる方法](https://aipon.net/wp-content/uploads/2018/05/CSS2-1-e1551290264286.png)
または
すると、画面下か右に難しそうな画面が出てきます。
![ブログ初心者でも「デベロッパーツール」でおしゃれサイトのCSSをコピペできる方法](https://aipon.net/wp-content/uploads/2018/05/CSS1-3-e1551290276453.png)
これは『デベロッパーツール』といって、開発者向けのツールです。
ここにサイトのHTMLとCSSなどの情報が出てきます!
![あいぽん](https://aipon.net/wp-content/uploads/2018/09/ai笑顔.png)
どんなプラグインを使用しているかもわかっちゃいます。コソッ
Firefoxの場合
左側の「インスペクター」がHTML。 右側の「ルール」が、選択した箇所のCSSです。
選択した箇所は青く表示されます。
![ブログ初心者でも「デベロッパーツール」でおしゃれサイトのCSSをコピペできる方法](https://aipon.net/wp-content/uploads/2018/05/CSS4-e1551290288327.png)
Chromeの場合
左側の「Elements」がHTML。 右側の「Styles」が、選択した箇所のCSSです。
![ブログ初心者でも「デベロッパーツール」でおしゃれサイトのCSSをコピペできる方法](https://aipon.net/wp-content/uploads/2018/05/CSS6-1-e1551290302489.png)
やっぱり違う箇所を調べたい!
っていう時は もう一度右クリックで「要素の調査」or「検証」をクリックするか、
左端にあるマークをクリックすると、気になる箇所が選択できます。
![ブログ初心者でも「デベロッパーツール」でおしゃれサイトのCSSをコピペできる方法](https://aipon.net/wp-content/uploads/2018/05/CSS5-e1551290313647.png)
ここでは、投稿記事の部分を例にします。
まず、青く表示されている部分はどの<div></div>で囲まれているのかを確認します。
下図の場合は、<div id=”list”> </div>で囲まれている『class=”a-wrap”』になります。
![ブログ初心者でも「デベロッパーツール」でおしゃれサイトのCSSをコピペできる方法](https://aipon.net/wp-content/uploads/2018/05/CSS7-1-e1551290324279.png)
ココを変更したい場合は
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」がある場合は全てにデザインが反映されます。
モバイル画面のデザイン確認もできる!
![](https://aipon.net/wp-content/uploads/2018/05/Yuu1726IMGL0044_TP_V4.jpg)
![あいぽん](https://aipon.net/wp-content/uploads/2018/09/ai驚き顔.png)
最近のこのブログのアクセスは
80%以上が携帯からです。
パソコン画面で作業していても、
携帯のモバイル画面でのデザインが崩れていたら意味がありませんよね。
なので、私は携帯でどう見えるかもこの方法でチェックしています。
どうすればいいのかというと…
![ブログ初心者でも「デベロッパーツール」でおしゃれサイトのCSSをコピペできる方法](https://aipon.net/wp-content/uploads/2018/05/CSS8-1-e1551290341261.png)
「レスポンシブデザインモード」という携帯のようなマークを押すと、
モバイル画面表示になります!
実際にボタンを押すとこのような画面になります。
![ブログ初心者でも「デベロッパーツール」でおしゃれサイトのCSSをコピペできる方法](https://aipon.net/wp-content/uploads/2018/05/CSS9-1-e1551290350470.png)
このままでは、正しい表示ではないので
赤枠のところをクリックすると端末が選べます!
![ブログ初心者でも「デベロッパーツール」でおしゃれサイトのCSSをコピペできる方法](https://aipon.net/wp-content/uploads/2018/05/CSS10.png)
私は「Apple iPhone 6s」をクリックして確認しています。
実際にクリックするとこんな画面になります。
(モバイル画面と同じです。)
![ブログ初心者でも「デベロッパーツール」でおしゃれサイトのCSSをコピペできる方法](https://aipon.net/wp-content/uploads/2018/05/CSS11-e1551290371383.png)
![あいぽん](https://aipon.net/wp-content/uploads/2018/09/aiニコニコ顔.png)
これで、いちいち携帯を開いて確認する必要なし!
何のプラグインを使っているかもわかる?!
これはあまり必要ない情報かもしれませんが、
覗いてみると結構面白いです。(マニアック
![あいぽん](https://aipon.net/wp-content/uploads/2018/09/ai驚き顔.png)
ついでにどのテーマを使用しているのかもわかりますよ。
プラウザが「Firefox」の場合…
![ブログ初心者でも「デベロッパーツール」でおしゃれサイトのCSSをコピペできる方法](https://aipon.net/wp-content/uploads/2018/05/CSS12-e1551290381641.png)
HTMLは「インスペクター」で見れましたが、
今度は『デバッカー』という項目をクリックするとサイトのソールファイルが覗けます。
「wp-content」フォルダ内の「plugins」が使用しているプラグインです。
また、「themes」は、使用しているテーマになります。
プラウザが「Chrome」の場合…
![ブログ初心者でも「デベロッパーツール」でおしゃれサイトのCSSをコピペできる方法](https://aipon.net/wp-content/uploads/2018/05/CSS13-e1551290390873.png)
HTMLは「Elements」で見れましたが、
今度は『Sources』という項目をクリックするとサイトのソールファイルが覗けます!
あいぽんの一言。
![あいぽん](https://aipon.net/wp-content/uploads/2018/09/aiニコニコ顔.png)
初心者だからこそ!
気になるサイトはこの『デベロッパーツール』を
駆使すればとっても便利です。
CSSだけでは出来ないこともありますが…
気になる好きなサイトのCSSを真似っこしてみると勉強になります。
CSSで悩んでいる方は「デベロッパーツール」をぜひ使ってみてね!☺
私は無料のテーマ「Cocoon」を使っていますが
いろんなブロガーさんの装飾をチェックしてカスタマイズしました!
よかったら真似してみてね!
![](https://aipon.net/wp-content/uploads/2021/02/Cocooダウンロード&インストール方法-160x90.jpg)
コメント