はてなブログテーマの記事幅、サイドバー幅を変更したい(CSSのカスタマイズ)メモ

 

公式テーマの「afternoon」が好きで、よく使用しております。

しかし、記事とサイドバー間の空白幅が狭く感じてしまい、気になってしょうがない。

f:id:guren004:20180422134707j:plain

 

ここを広くしたい。

f:id:guren004:20180422140857j:plain

 

よって、見よう見まねでCSSをいじりました。

 

最終的には、

ダッシュボード>デザイン>カスタマイズ(工具のアイコン)>デザインCSS

を以下のCSSにしたのみです。

 

/* <system section="theme" selected="afternoon"> */
@import url("/css/theme/afternoon/afternoon.css");
/* </system> */

@media screen and (min-width: 1000px) {
#main {
width: 550px;
}
#box2 {
width: 200px;
}
}

 

(※皆さんみたいに格好良くコードを貼り付けたいのですが方法が分かりませぬ(泣)。GitHubとか使われているのでしょうか?)

 

 

こうなりました。

f:id:guren004:20180422140128j:plain

 

これぐらい広げられました。満足です!

f:id:guren004:20180422140946j:plain

 

 

 

今回、非常に参考にさせて頂いたサイトはこちらです。

【はてなブログ】 CSSカスタマイズ手法(自己流) - のんびり猫プログラマの日常

catprogram.hatenablog.com

 

FireFoxに「Web Developer」アドオンを入れて、出来るだけ色々と確認しました。メニューが英語だったので(上記記事のような日本語にする方法が分からない)、どれにチェック入れたかも画像保存。

・Display Div Dimensions
・Display Div Order
・Display Element Infomations
・Display id & Class Details

の4ヶ所。

f:id:guren004:20180422135203j:plain

 

 

まとめ:

本当は、全体的に右寄りになってしまったのでもう少し左寄せ(もしくは全体的に中央寄せ)したいのですが、上手く出来ませんでした。。。

Webも奥深いですねえ。