【Luxeritas】デベロッパーツールの使い方【Google Chrome】
ナツメグです
もうダサくしないカスタマイズ第9回。
他人の書いたコードなんか分かるか!
という訳で今回は
他人の書いたコードも分かってしまう
Google Chromeのデベロッパーツールの
使い方を解説します。
Luxeritas(ルクセリタス)の記事一覧の下線を
デベロッパーツールを使って消します。
っていうかこの下線いる!?
シンプルなデザインのLuxeritasから
さらに要素を引いて行くスタイル。
要素がなければダサくなりようが
ないんですよ。
人間も裸が一番魅力的。
おっぱいを見せ付けたいナツメグです。
【Luxeritas】デベロッパーツールの使い方
- Google Chromeを起動
- 検証でclassを調べる
- CSSをコピペしてスタイルシートに書き込む
- キャッシュの消去とハード再読み込み
Google Chromeを起動
Google Chromeを起動します。
Google Chromeの上の欄に
URLを入力します。
右上の縦の…マークをクリック。
その他のツール>デベロッパーツール。
デベロッパーツールの画面が表示されます。
消したいのはこのグレーの線です。
検証でclassを調べる
グレーの線を右クリックして
検証をクリック。
classやCSSの指示が表示されます。
classがgridだと分かります。
なので
下の方に表示されている
main div.grid:last-childをいじれば
グレーの線を消せそうです。
CSSをコピペしてスタイルシートに書き込む
スタイルシートに書き込みます。
#main div.grid:last-child{
margin-bottom: 20px;
border-bottom: none;
}
border-bottom:1px solid #ddd;を
border-bottom: none;に書き換えました。
キャッシュの消去とハード再読み込み
Google Chromeの左上の
丸い矢印を右クリック。
キャッシュの消去とハード再読み込みをクリック。
グレーの線が消えました。
ブログカスタマイズの記事を書いている人が
何で他人の書いたテーマのclassが分かるのかと言うと
Google Chromeの
デベロッパーツールを使っているからでした。
これで今度からは
ブログの記事の
コピペだけじゃなくて
自分でカスタマイズが出来ますね。
CSSで良く使う指示
margin
要素の外側の余白の指示。
margin: 10px;
要素の外側上下左右に10pxの余白が出来ます。
margin: 10px 0px;
要素の外側上下10px、左右0pxの余白。
margin: 10px 0px 10px;
要素の外側上10px、左右0px、下10pxの余白。
margin: 10px 0px 10px 0px;
要素の外側上10px、右0px、下10px、左0pxの余白。
margin-top: 10px;要素の外側上10pxの余白。
margin-bottom: 10px;要素の外側下10pxの余白。
margin-left: 10px;要素の外側左10pxの余白。
margin-right: 10px;要素の外側右10pxの余白。
padding
要素の内側の余白の指示。
padding: 10px;
要素の内側上下左右に10pxの余白が出来ます。
padding: 10px 0px;
要素の内側上下10px、左右0pxの余白。
padding 10px 0px 10px;
要素の内側上10px、左右0px、下10pxの余白。
padding: 10px 0px 10px 0px;
要素の内側上10px、右0px、下10px、左0pxの余白。
padding-top: 10px;要素の内側上10pxの余白。
padding-bottom: 10px;要素の内側下10pxの余白。
padding-left: 10px;要素の内側左10pxの余白。
padding-right: 10px;要素の内側右10pxの余白。
color
文字の色の指示。
color: #0099ff;と
表記します。
#0099ffは色のコード。
background
背景の色の指示。
background: #0099ff;と表記します。
border
線の表示の指示。
border: 1px solid #0099ff;と表記。
solidは1本の線を表示します。
他にはdouble、dashed、dotted、noneがあります。
double 2本線。
dashed 破線。
dotted 点線。
noneは線を非表示。
display
このブログのカスタマイズで
最も活躍する
display: none;は
要素を表示しないという指示。
難しい事は分かりませんが
デベロッパーツールで
CSSをコピペして数値をいじるだけで
カスタマイズが出来る場合が多いです。
試してみて下さい。
今回は以上です
もうダサくしないカスタマイズ
【Luxeritas】もうダサくしないカスタマイズ
【Luxeritas】サムネイルは正方形か長方形か!?
【Luxeritas】サムネイルを長方形に統一
【Luxeritas】メタ情報のカテゴリーのカスタマイズ
【Luxeritas】記事一覧カスタマイズ【カード型】
【Luxeritas】文字の色はどうしよう!?【文字リンク】
【Luxeritas】SNSシェアボタンを消します
【Luxeritas】ブログカードのカスタマイズ
【Luxeritas】ヘッダー下に画像リンク4つ並び【再利用ブロック】
【Luxeritas】カルーセルスライダーのカスタマイズ【JIN風】
【Luxeritas】メニュー(グローバルナビ)とフッターの色を揃える
【Luxeritas】ページネーションのカスタマイズ
【Luxeritas】ヘッダー上の帯メニューのカスタマイズ
【Luxeritas】記事内のカスタマイズ【Snow Monkey Editor】
【Luxeritas】目次のカスタマイズ
【Luxeritas】サイドバーカテゴリーのカスタマイズ【AFFINGER風】
【Luxeritas】サイドバーカテゴリーのカスタマイズ【JIN風】
【Luxeritas】サイドバープロフィールのカスタマイズ
【Luxeritas】カテゴリーと記事一覧にタイトルを付ける
【Luxeritas】パターン登録の使い方
【Luxeritas】新着記事のカスタマイズ
【Luxeritas】グローバルナビのメニューにアイコンを付ける