ブログのサイドバーに色々置いておくとサイドバーが長くなりがちで、自分の書くブログ記事は短いことも多く、そうするとメイン部分とサイドバーのバランスが少々悪くなります。

そこで何かうまくバランスをとる方法はないかと考え、試しに記事の長さに応じてサイドバーのコンテンツの一部を記事下へ移動させてみることにしました。

やり方は簡単で、

• 動的に移動させたいサイドバーのコンテンツ部分に id をつける。
• 記事部分の要素に id をつける。
• 移動先にしたい要素に id をつける。
• 以下のような JavaScript をページの末尾で実行する。

// サンプルコード
<script>
(function() {
    // 動的に移動させたいサイドバーのコンテンツ
    var side = document.getElementById('side_flow_contents');
    // 記事部分の要素
    var entries = document.getElementById('entries');
    // 移動先の要素
    var dest = document.getElementById('destination');

    // 記事部分の高さが 3000 px 未満だったら
    if (entries.offsetHeight < 3000) {
        // サイドバーのコンテンツを、移動先の要素の子要素にする
        dest.appendChild(side);
    }
})();
</script>

といった感じ。記事部分に直接移動させたいなら destination 要素は不要になります。記事部分の高さの閾値はいくつか試して決めてみるといいでしょう。

このブログではサイドバーにある「おすすめカテゴリー」を移動させてみました。

例えば「Macを使って漢字を綺麗なアスキーアートに変換してみた」の記事ではサイドバーにありますが、長さが短いこの記事や「「詳解Swift」を購入しました」などでは記事下に移動してるのが分かると思います。

あとはもう少しデザインを整えておきたいところです。

• 
• ツイートで共有

著者について

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity や 電車遅延なう、梅酒.in、 #グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など