Blogger 動的ビューSidebarの左ナビゲーション幅を調整しました。

このブログ「サイゴンのうさぎ」は、動的ビューのSidebarテンプレートを使わせていただいております。動的ビューSidebarは、ブログポストが左端のナビゲーションに追加されていく仕組みですが、この幅が狭いとタイトルの頭、数文字分しか表示されません。そこで、左ナビゲーション幅を調整してみました。参考にさせていただいたのが、下記のブログ様です。

Southern Speakers

http://www.southernspeakers.net/2012/04/adjust-sidebar-width-in-blogger-dynamic.html

その設定方法です。「テンプレート」→「カスタマイズ」→「アドバンス」→「CSSを追加」

.sidebar #sidebar{
width: 250px !important;
}
.sidebar #content{
margin-left: 250px;
}

「カスタムCSSを追加」にCSSコードを追加します。「ブログに適用」で、CSSの内容が反映されます。

デフォルトの設定幅です。

 widthとmargin-left 250pxの幅です。

widthとmargin-left 275pxの幅です。あまり、幅を広げると本文の記述スペースが少なくなり、読みにくくなります。

しばらく、250px幅で掲載させていただきます。よろしくお願いいたします。Bloggerの動的ビューは、簡単にそこそこ見栄えの良いブログができるのですが、カスタマイズ性が乏しいので、使っているブロガーさんも少ないです。それでも、このSidebar表示は、GmailやGoogle ドライブとインターフェースが似ているので、私的には気に入っています。