Bambi's BLOG @ hatena

ブログ運営 カスタマイズ テーマ制作 アフィリエイト いろいろ (ずぼらでも頑張るブログ)

サイドバーの固定(CSSのみ)@はてなブログテーマ「Palette(パレット)」

はてなブログのテーマ「Palette(パレット)」では、サイドバーが固定できます!

カスタマイズが簡単で色々なデザインができる、はてなブログのテーマ「Palette(パレット)」はこちらからダウンロードできます。
↓↓
Palette (パレット) - テーマ ストア


テーマ「Palette(パレット)」では、スマホ以外の場合は、↓のように2カラム(2列)の表示になります。
f:id:zuboraca:20180624165130j:plain

しかし記事部分が長いとスクロールしていくうちに右側の部分が無くなってしまって、記事部分だけが表示された状態になってしまいます。
こんな感じ。
f:id:zuboraca:20180624165216j:plain
これだと右側のスペースが勿体ない。

なので、サイドバーの最後の項目を固定して、記事をスクロールしてもサイドバーはそのまま留まるように設定をします。
(IEでは、固定表示はされないようなので、その点のみご了承ください)

コードは自分のものではないので、ここへの掲載は控えます。

こちらの記事から
↓↓(かなりいつも参考にさせて頂いているブログです)
CSSだけでサイドバーを固定/追従/解除する方法が超簡単!しかも軽くて滑らか! - オークニズム

★コピペでOK!CSSでサイドバーの固定方法★
の項目にあるコードをそのまま→{}デザインCSSにコピペします♪♪


また、最後に表示する項目は、サイドバーの表示順を変更して選ぶことができます。
サイドバーの表示順はデザイン→カスタマイズ→サイドバーで項目をドラッグしながら変えます。

たとえば最後に固定表示する項目を「注目記事」にして、サイトの回遊率を上げたり、ポリシー違反にならなければ「広告」を設定して、広告がサイドに留まるようにすることもできます(^-^)