IDOL×IDOL STORY! 感想レビュー
ナツメグチャンネル
Luxeritas カスタマイズ サムネイル 05
【Luxeritas】記事一覧カスタマイズ【カード型】 サムネイル
【Luxeritas】ヘッダー下に画像リンク4つ並び【再利用ブロック】 サムネイル 02

【Luxeritas】デベロッパーツールの使い方【Google Chrome】

2024/06/13Luxeritas

【Luxeritas】デベロッパーツールの使い方【Google Chrome】 サムネイル 02
ナツメグチャンネル

もうダサくしないカスタマイズ第9回。

他人ひとの書いたコードなんか分かるか!

という訳で今回は
他人の書いたコードも分かってしまう
Google Chromeのデベロッパーツールの
使い方を解説します。

Luxeritas(ルクセリタス)の記事一覧の下線を
デベロッパーツールを使って消します。

記事一覧 下線
ナツメグチャンネル

っていうかこの下線いる!?

シンプルなデザインのLuxeritasから
さらに要素を引いて行くスタイル。

要素がなければダサくなりようが
ないんですよ。

人間も裸が一番魅力的。

おっぱいを見せ付けたいナツメグです。

【Luxeritas】デベロッパーツールの使い方

作業の手順
  • Google Chromeを起動
  • 検証でclassを調べる
  • CSSをコピペしてスタイルシートに書き込む
  • キャッシュの消去とハード再読み込み

Google Chromeを起動

Google Chromeを起動します。

Google Chromeの上の欄に
URLを入力します。

上の欄
ナツメグチャンネル

https://channel.nutmeg-room.com/

URLを入力
ナツメグチャンネル

右上の縦の…マークをクリック。

その他のツール
ナツメグチャンネル

その他のツール>デベロッパーツール。

デベロッパーツール
ナツメグチャンネル

デベロッパーツールの画面が表示されます。

デベロッパーツール 画面
ナツメグチャンネル

消したいのはこのグレーの線です。

グレーの線
ナツメグチャンネル

検証でclassを調べる

グレーの線を右クリックして
検証をクリック。

検証
ナツメグチャンネル

classやCSSの指示が表示されます。

class
ナツメグチャンネル

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;に書き換えました。

キャッシュの消去とハード再読み込み

キャッシュの消去とハード再読み込み 02
ナツメグチャンネル

Google Chromeの左上の
丸い矢印を右クリック。

キャッシュの消去とハード再読み込みをクリック。

グレーの線が消えた 02
ナツメグチャンネル

グレーの線が消えました。

ブログカスタマイズの記事を書いている人が
何で他人の書いたテーマのclassが分かるのかと言うと
Google Chromeの
デベロッパーツールを使っているからでした。

これで今度からは
ブログの記事の
コピペだけじゃなくて
自分でカスタマイズが出来ますね。

CSSで良く使う指示

margin

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
ナツメグチャンネル

要素の内側の余白の指示。

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