デベロッパーツールとはなんぞや？
注：画像はベロベロバー
グーグルクロームの検証機能のことでクロームを使ってる方なら右クリックから検証ですぐ使えます
わけの分からない英語や記号が羅列されていて即閉じたくなる人もいるでしょうが少し待ってください
最初から全部を理解する必要はなく、既存の数字を変えるだけもで自分のブログの気になってる幅など変更できる便利アイテムなんです
といっても「しらんがな」で終わりそうですが、ブログをやる人なら知っておいて損はないです
現状全く分からない人でも少しやれば分かるはず
デベロッパーツールは簡単に説明するとサイトのコードをチェックする事が可能で、そこでコード書き換えれば今見ているページの見た目を変えたりできるもの
他人のサイトでもツール上で操作をすればデザイン等が変えれます。いい所があればそのコードを真似したりもできる訳です
実際管理画面から触らなくても色を変えたり場所を変えたりテストできるんですよね
当然ツール上での表示なのでページを再読み込みすれば元通りになります
プログラミングが全く分からないって人でも少し理解しておくと自分のブログを調整する時にとても役に立つのでお勧めです。動画をみればどんな感じか分かりやすいと思います
プログラミングって言葉に拒否反応でちゃうって人はこちら
初級プログラミングは簡単。例えるなら間違え探しと波動拳
「検証」が反応しなかった時にやった事
今まで画面を右クリックして「検証」を押してもデベロッパーツールが起動しなかったんですよね
無理に使う必要もないかと思ってしばらく放置してたんですが、かなり便利という事なので気になって調べてみることに。そこで出てきたものをやってみると起動するようになりました
ユーザ名→AppData→Local→Google→Chome→User Data→Default→ Local Storageにある
chrome-devtools_devtools_0.localstorage
chrome-devtools_devtools_0.localstorage-journal
の２つを削除しろと書いてありました
同じのは無かったんですがchrome-extensionからはじまるファイルが2枚あったんで消したら改善し、デベロッパーツールが起動できるようになりました
検証機能でテストできるようになったんで試しにテーマJINのプロフィールを大きめに変更。
画像が大きくなったせいで文字が隠れてしまったんでmargin（余白）追加して合せてみました
パッと見なにを変えたか分からなくなるんで/* */を使ってコメント表示にしてます（間に文字を入れるとコードとして扱われないでメモみたいに使える）
/*プロフィール画像*/
.my-profile .my-profile-thumb {
width: 180px;
height: 180px;
border-radius: 50%;
}
.my-profile .myname {
margin-top:70px;
}
.my-profile .myjob {
margin-top:70px;
}
動画でありましたがデベロッパーで位置とか細かい指定をする時10pxとか書いてる所に合せて上下キーを押せば微調整が出来るみたいですね。これはかなり便利そう！
ページを再読み込みすれば編集したものはリセットされるんでテスト的に色々試せます
必要なものはコピーして自分のサイトに貼り付けるって感じです
今いろんなサイトをみて知識を増やしてる訳ですが見たもので
「これは覚えておこう」みたいなのが出てきたときメモしておいて後で自分なりに要約してブログで発信っていうのをやってます
アウトプットするのがいいみたいなんで意識してやってる感じです
他のサイトを見てコードがどうなってるんだろうとチェックでき自分のサイトに活かせるので使ってない方がいたら是非やってみる事をおすすめします！
