Blank File

LinuxとかPythonとかVimとか、趣味でいじる感じで

はてなブログのサイドバーにtwitterのつぶやきを表示する(幅調整ver.)

Twitterを始めたので、ついでにサイドバーにつぶやきを表示するようにしました。 その際、Twitterのつぶやきを「はてなブログ」のサイドバーに設置する方法 - おしい県でWebに携わって働く人のブログを参考にさせていただきました。画像を使って非常にわかりやすく解説されていたので、そのままの手順であっさりと表示できました。

とりあえず表示

表示は出来ましたが、今のテンプレートだとサイドバーの幅が狭いようで、「ツイート」の文字と「フォローする」ボタンが重なって残念な感じになってしまいました。

f:id:h-miyako:20141001233129p:plain

twitterウィジェットの方に手を出すのは無謀感あふれる雰囲気だったので、ブログのCSSの方をいじって対応しました。

とりあえず修正

修正後がこちら

f:id:h-miyako:20141001233141p:plain

とりあえず文字の重なりは修正できました。

このブログのCSS以前書いたような感じにしています。 前回いじった時に無駄に頑張った図を作っていたおかげで、 #box2#box2-inner あたりの幅を広げればサイドバーの幅が広がりそうなことはすぐわかりました。 (まさかあの記事の図が役に立つ日が来るとは・・・)

ということで、#box2#box2-innerwidthを180pxから200pxに広げました。 ホント単純にサイドバーを広くただけなので左右のバランスが悪くなってしまいましたが、とりあえずつぶやきはそれなりに表示できたので今回はこのくらいで。

左右のバランス調整は後でやるかもしれません。 その時は#container#container-inner#contentwidthを20pxずつ広げる感じでしょうか。 それだと雑すぎて微妙なことになりそう・・・

最新のCSSgithubリポジトリmiyakogi/HatenaCSSに置きました。 直接リンクはこちら。 参考になれば。