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

やーまんぶろぐ

気が向いた時にだけ書くブログ

サイドバーが下に表示されるデザインテーマ(Material)のサイドバーを横に表示する方法

私はデザインテーマにMaterialを使ってます。このデザインテーマはサイドバーが下に表示されるタイプとなっています。
Material - テーマ ストア - はてなブログ

サイドバーを横に表示する方法を調べてたらはまったのでメモしておきます。

元にするブログテーマによっては、サイドバーのfloatをrightに指定するだけではダメなんですね。。

/*サイドバー幅*/
#box2 {
float: right;
width: 250px; 
}

2カラムにしてサイドバーを横に表示

横に表示する方法が中々見つからなかったんで、諦めて違うブログテーマにしようとテーマストアを見はじめました。
テーマ ストア - はてなブログ

何気なくテーマストアから自分の使っているMaterialのリンクを見てみると、「2カラムにする方法」があった!
f:id:yamano3201:20160423003015p:plain

あとは中身をコピペしたら2カラムになって、期待通りサイドバーが横に表示されました。
webgaku.hateblo.jp

おまけ

ついでに見出しの表示だけ変えておきました。

.entry-content h1, .entry-content h2, .entry-content h3 {
    font-weight: bold;
    margin: 1em 0 0.5em 0;
    padding: 3px 10px;
    border-left: solid 5px #454545;
    text-shadow: 1px 1px 1px #fff;
}

www.task-notes.com

最後に

希望のデザインが見つからない場合は、自分の選択したデザインテーマのリンクを見てみるのも良いかもしれませんね。

気が向いたら、また書きます。