はてなブログの公式テーマSmoothのサイドバーのアイキャッチ画像を右側にしてみた

↑こんな感じになります↑

レスポンシブデザインに対応しているはてなブログのデフォルトの公式テーマ「Smooth」のサイドバーのアイキャッチ画像を右側に表示してみました。

システム側のblog.cssでアイキャッチ画像をfloat:left;で、左側に寄せているので、float: right;に書き換えて、marginを調整するだけです。

floatを使ってますがシステム側のblog.cssで回り込みの解除(clear fix)はやってくれるので、CSSの記述はこれで良しとします。

自分用の備忘録としてCSSのソースコードを残しておく。

使う方はお好きなのをデザイン→カスタマイズ→デザインCSSに以下のコードをコピペでどうぞ

最新記事のアイキャッチ画像を右側に表示する


/* 最新記事のアイキャッチ画像を右側に表示するCSSコード */

#box2 .recent-entries li .urllist-image {
    float: right;
    margin: 0 0 .7em .7em
}

人気記事のアイキャッチ画像を右側に表示する


/* 人気記事のアイキャッチ画像を右側に表示するCSSコード */

#box2 .entries-access-ranking li .urllist-image {
    float: right;
    margin: 0 0 .7em .7em
}

最新記事と人気記事のアイキャッチ画像を両方とも右側に表示する


/* 最新記事と人気記事のアイキャッチ画像を両方とも右側に表示するCSSコード */

#box2 .urllist-with-thumbnails li .urllist-image {
    float: right;
    margin: 0 0 .7em .7em
}

公式テーマ「Smooth」

Askthewind’s diary