読者です 読者をやめる 読者になる 読者になる

ブログテーマのCSSをいじってレイアウトを変えたい時に

雑記

Firefoxとかのブラウザについている「Web開発ツール」を利用すると、
そのページのCSSとか、JavaScriptのコードが見れたりします。
Chromeにもついてたと思う。きょうび、どのブラウザにもあると思いますがIEやEdgeはわかりません。

f:id:messi325:20160104005740p:plain

Firefoxで上記画面を出したい場合、Ctrl + Shift + Kを押すと表示される。
もしくはメニューバーの ツール > Web開発 > Webコンソール からも表示できる。
表示されたらまず「インスペクタ」タブを選択する。

f:id:messi325:20160104010942p:plain
コンソール左上にある、四角にマウスカーソルが当たってるようなアイコンをクリックすると、
Webページ上の要素をマウスで選択することで、該当するHTMLの部分がわかる。

例えば記事の幅変えたいなーというときは、記事の部分をポイントし、幅を設定している値を探す。

幅は大抵 "width" という英単語が使われるので、そこを貴方が思い描く最適な幅に設定してあげると、
おそらくいい感じになると思います。

貴方にセンスがなくていい感じにならなかった場合でも、私を恨まないでほしい。

文字色なら "font-color"、高さなら "height" だろう。


弊ブログ(公式テーマのAeroを使用)に関しては、
全体の幅を "container"id、 記事部分の幅を "main"class で決定しているようです。
classとidの呼称の仕方が合っているかどうかは知らない。


10年ぐらい前に少しホームページを作りたくてHTMLやCSSを触った程度なので、
正直Web界隈の知識はほとんどないです。

HTMLやCSSがようわからんという方はご自身で調べてください。