ちょろげ日記

日々のちょろっとしたことを

はてなブログのサイドバーの幅を広げたい

初めてのブログなのでとりあえず記事を書け!ということで、やっと10記事。

で、始める時に決めていたことがあります。

ちょっとずつブログの見た目をカスタマイズしていくこと。
多少はお勉強もということで備忘録として記事にすること。
10記事ごとに1修正。

ただ、根本的な問題として!実装能力がないに等しいので身の丈にあったささやかな修正をしていきます…今回目についたのがこれ。

f:id:tyoro_ge:20140330024308p:plain


公式の「最新記事モジュール」を入れてウキウキしていたんですが、タイトルが無駄に長いと見た目がよろしくない。さぁ広げよう。

idを確認する

あーだこーだ調べると[ダッシュボード]-[ブログ名]-[デザイン]-[カスタマイズ]-[デザインCSS]で当該箇所のidに対して幅指定をすればよいようです。

当該箇所ってどこでしょか?こんな時はChromeデベロッパーツールなんかが役に立つそうです。

f:id:tyoro_ge:20140330023513j:plain

ブログを開いてデベロッパーツールを立ち上げる

f:id:tyoro_ge:20140330023615j:plain

ズズズーっと探すと、サイドバーがアクティブになる箇所を発見。
サイドバーのidは「box2」のようです。

と、調べた後でとても参考になる記事を発見。今後はこちらを参考にします。

はてなブログのidとかclassとか - kyabana's blog

幅を指定する

あとは、幅を指定して保存するだけです。

[ダッシュボード]-[ブログ名]-[デザイン]-[カスタマイズ]-[デザインCSS]で、以下を追記。

#box2 {
width: 230px;
}

とりあえず230pxにしておきました。適当の極みです。

f:id:tyoro_ge:20140330031908j:plain

シャッキリポン!!

f:id:tyoro_ge:20140330030438p:plain

というわけで、身の丈にあったささやかな修正が完了。