1399728388 【はてなブログPC版のサイドバー空きスペースを有効活用したい】

現在左メインカラム(記事本文)と右サイドバーの2カラムデザインを採用、記事本文が長いとある程度下までスクロールすると右サイドバーはただの空きスペースとして表示される形となります。

[参考]
http://www.masaemon.jp/entry/2014/04/22/tokyo-mita-ramen-jiro-manual
↑中見出し2-3あたりから右サイドバーが空きスペースとなります。

そこで、右サイドバーが空きスペースとなるタイミングで表示を現在の2カラムから記事本文だけの1カラムにする見せ方をしたいと思うのですが、CSSやJavascriptの知識が乏しいレベルの者でも簡単・確実・安全に、何よりはてなブログ上でもきちんと実装できる術をご教示下さい。

【条件等】
・IEの古いバージョンとかは除き、主流ブラウザ(IE、Chrome、Firefox、Safari各最新版)やPC以外のデバイス(スマートフォン等)でも不具合等発生せずに問題なくブログ閲覧できる方法を希望します。
・実装したはてなブログのURLを回答に貼り付けて下さい。
・トップページは本実装の対象外。(※記事詳細ページのみ適用したいのです)

以上、何卒宜しくお願い申し上げます。

回答の条件
  • URL必須
  • 1人5回まで
  • 13歳以上
  • 登録:2014/05/10 22:26:28
  • 終了:2014/05/17 21:27:07
id:thyself2005

2カラムから1カラムに切り替わる際は、いきなりパッとなるのではなく、左カラムが右カラムに伸びる過程をアニメーション表示する形だと最高です。
たぶんJavascriptを使えば実装できそうな気はするのですが、はてなブログの使い勝手も考慮した最適解が導き出せないため質問してみました。
もしくは上記以外にステキな空きスペース活用法があれば知りたいです。
※ただしサイドバー内のコンテンツが追尾したりするのは好みません。

ベストアンサー

id:a-kuma3 No.3

a-kuma3回答回数4621ベストアンサー獲得回数19562014/05/11 17:08:21

ポイント200pt

ニュルっとアニメーションするわけではないですが、サイドバーの下に記事を流し込んでみる方法です。

(1) はてなブログのダッシュボードから「デザイン」をクリック
(2) 左の「カスタマイズ」をクリック
(3) 「サイドバー」をクリック
(4) 「モジュールを追加」をクリック
(5) 下から二番目の「</> HTML」をクリック
(6) タイトルは空のままで、内容のところに以下のコードを貼り付ける

<script>
$(function() {
    if (document.location.href.match(/\/entry\//) {
        var aside = $("aside#box2").detach();
        aside.insertBefore($("#main-inner article").eq(0));
        $("div#main").css("width", "auto");
        $(".entry-content h2").css("clear", "none");
        $(".entry-content h3").css("clear", "none");
        $(".entry-content h4").css("clear", "none");
        $(".entry-content h5").css("clear", "none");
        $(".ninja_onebutton").css("clear", "none");
        $(".ninja_onebutton").css("display", "none");   // 「忍者おまとめボタン」を無効化
    }
});
</script>

(7) 「適用」をクリック
(8) 「変更を保存する」をクリック

で、記事を確認してみてください。
使ってるテーマのスタイルに強く依存するので、正衛門さんのブログをローカルに落として確認しました。

f:id:a-kuma3:20140511165547p:image
サイドバーが切れているところです。
はまぞうの枠線が右に飛び出しているのが分かります。

f:id:a-kuma3:20140511165548p:image
もう少し、下の部分です。
長く書いた記事が、サイドバーの下まで伸びているのが分かると思います。


ただ、このまま使えるわけではなくて、雰囲気の確認だけです。
というのは、以下の制約があるからです。

  • 「忍者おまとめボタン」を見えなくしてあります
  • サイドバーに小見出しのアンダーラインとかが食い込んでる

「忍者おまとめボタン」がちょっと曲者で、そいつが流し込むスタイルが簡単に修正できません。
細かい話なんですが、スクリプトで作りこむ要素に対して、その疑似要素にスタイルを指定しています。
そのうちの一部のスタイルが本文を切ってしまうために、サイドバーの途中で本文がちょん切れて、サイドバーの下に移動してしまいます。
どんな感じになるかは、サイドバーに追加したコードのうち、最後の方の以下の行を削除すると分かります。

        $(".ninja_onebutton").css("display", "none");   // 「忍者おまとめボタン」を無効化

もし、提示した形で雰囲気があっている、ということであれば、「忍者おまとめボタン」を有効にしたまま、記事をサイドバーの下に流し込むやり方にチャレンジしてみます :-)




追記です。
ちょっと力技ですが、「忍者おまとめボタン」の対策をしたコードです。

<script>
$(function() {
    if (document.location.href.match(/\/entry\//)) {
        var aside = $("aside#box2").detach();
        aside.insertBefore($("#main-inner article").eq(0));
        $("div#main").css("width", "750px");
        $(".entry-content h2").css("clear", "none");
        $(".entry-content h3").css("clear", "none");
        $(".entry-content h4").css("clear", "none");
        $(".entry-content h5").css("clear", "none");
        $(".ninja_onebutton").css("clear", "left");
        $("aside#box2").css({
                "z-index": "200",
                "background-color": "white",
                "position": "relative"
                });
        var e = document.createElement("DIV");
        e.innerHTML = 
            "<style>\n" +
            ".ninja_onebutton:after {clear: none !important;}\n" +
            ".ninja_onebutton_output:after {clear: none !important;}\n" +
            ".ninja_onebutton:after {clear: left !important;}\n" +
            "</style>\n";
        document.body.appendChild(e);
    }
});
</script>

これを、追加したモジュールの内容に書いてみてください。

他8件のコメントを見る
id:a-kuma3

済みません、最後に書いたコードが間違ってました m(_ _)m

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
(function($) {

// ここからが、回答で書いたコード
$(function() {
    if (document.location.href.match(/\/entry\//)) {
        var aside = $("aside#box2").detach();
        aside.insertBefore($("#main-inner article").eq(0));
        $("div#main").css("width", "750px");	/* 新しい幅 */
        $(".entry-content h2").css("clear", "none");
        $(".entry-content h3").css("clear", "none");
        $(".entry-content h4").css("clear", "none");
        $(".entry-content h5").css("clear", "none");
        $(".ninja_onebutton").css("clear", "left");
        $("aside#box2").css({
                "z-index": "200",
                "background-color": "white",
                "position": "relative"
                });
        var e = document.createElement("DIV");
        e.innerHTML = 
            "<style>\n" +
            ".ninja_onebutton:after {clear: none !important;}\n" +
            ".ninja_onebutton_output:after {clear: none !important;}\n" +
            ".ninja_onebutton:after {clear: left !important;}\n" +
            "</style>\n";
        document.body.appendChild(e);
    }
});

})(jQuery);
</script>

if 文のかっこが一つ足りなかったのと、Aero では横幅の指定が auto では #main が広がってしまうので、幅を指定するようにしました。
デザイン CSS で main の幅をいじっているようであれば、コードで /* 新しい幅 */ とコメントしてある 750 を、元の #main の幅+ #box2 の幅の合計値にしてください。
#box2 の幅は、デザインCSS で変更していなければ、.hatena-module の width と margin で決まってます。
ぼくの場合は、510px + 240px = 750px です。

ぼくのはてなブログで、一時的に、テーマに Aero を使って、サイドバーを短くしてみました。
長い記事があんまりないんですが、こちらとかで雰囲気(最後の一行だけもぐりこむはず)が確認できます。
http://a-kuma3.hatenablog.com/entry/2014/04/23/232612

2014/05/14 12:50:26
id:thyself2005

回答ありがとうございます。無事確認できました!
自分の場合は下記のように編集したコードで試してみました。
角丸部分が直角に表示されてしまっているとことか細かいところは微調整が必要そうですが満足しております。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
(function($) {
$(function() {
    if (document.location.href.match(/\/entry\//)) {
        var aside = $("aside#box2").detach();
        aside.insertBefore($("#main-inner article").eq(0));
        $("div#main").css("width", "850px");
        $(".entry-content h2").css("clear", "none");
        $(".entry-content h3").css("clear", "none");
        $(".entry-content h4").css("clear", "none");
        $(".entry-content h5").css("clear", "none");
        $(".ninja_onebutton").css("clear", "left");
        $("aside#box2").css({
                "z-index": "200",
                "background-color": "#EEEEEE",
                "position": "relative"
                });
        var e = document.createElement("DIV");
        e.innerHTML = 
            "<style>\n" +
            ".ninja_onebutton:after {clear: none !important;}\n" +
            ".ninja_onebutton_output:after {clear: none !important;}\n" +
            ".ninja_onebutton:after {clear: left !important;}\n" +
            "</style>\n";
        document.body.appendChild(e);
    }
});

})(jQuery);
</script>
2014/05/15 00:30:54

その他の回答(3件)

id:snow0214 No.1

snow0214回答回数470ベストアンサー獲得回数1162014/05/11 07:34:17

CSSでできることではないですし、はてなはJavaScriptの使用を制約しているので、質問を満たすことはできません。

そこで、空白を埋める方法として、ブログパーツを使ってはどうでしょうか。

はてなダイアリーとはてなグループの日記に設置可能なブログパーツの一覧

http://hatenadiary.g.hatena.ne.jp/keyword/%E5%AF%BE%E5%BF%9C%E3%83%96%E3%83%AD%E3%82%B0%E3%83%91%E3%83%BC%E3%83%84%E4%B8%80%E8%A6%A7

id:thyself2005

回答ありがとうございます。
はてなブログの場合はJavascriptの使用制限はダイアリーほどない、むしろほぼ好きなように使用できますし、ヘッダやフッタの編集も可能なのですが、それでも今回ご提示いただいた方法がベストとされますでしょうか?

2014/05/11 08:08:38
id:snow0214

はい、そうです。

2014/05/11 08:29:07
id:bulldra No.2

池田仮名回答回数6ベストアンサー獲得回数12014/05/11 15:41:27

ポイント50pt

サイドバー表示が終わるまで下にスクロールしたら「おすすめ記事」を追尾させる
http://www.ikedakana.com/entry/2014/03/31/075948

要件からははずれてしまいますが、こういう形はいかがでしょうか。はてなブックマークなどでも採用されています。作ってみたものの評判が悪いので、現在自分のブログでは稼働させていませんが。

id:thyself2005

回答ありがとうございます。
他のブログとはちょっと違う表示の仕方がしてみたい、そんな中二病魂がありましてw
…でもなんだかんだで追尾型も捨てがたいとも考えているので参考にさせてください。

2014/05/12 23:23:47
id:a-kuma3 No.3

a-kuma3回答回数4621ベストアンサー獲得回数19562014/05/11 17:08:21ここでベストアンサー

ポイント200pt

ニュルっとアニメーションするわけではないですが、サイドバーの下に記事を流し込んでみる方法です。

(1) はてなブログのダッシュボードから「デザイン」をクリック
(2) 左の「カスタマイズ」をクリック
(3) 「サイドバー」をクリック
(4) 「モジュールを追加」をクリック
(5) 下から二番目の「</> HTML」をクリック
(6) タイトルは空のままで、内容のところに以下のコードを貼り付ける

<script>
$(function() {
    if (document.location.href.match(/\/entry\//) {
        var aside = $("aside#box2").detach();
        aside.insertBefore($("#main-inner article").eq(0));
        $("div#main").css("width", "auto");
        $(".entry-content h2").css("clear", "none");
        $(".entry-content h3").css("clear", "none");
        $(".entry-content h4").css("clear", "none");
        $(".entry-content h5").css("clear", "none");
        $(".ninja_onebutton").css("clear", "none");
        $(".ninja_onebutton").css("display", "none");   // 「忍者おまとめボタン」を無効化
    }
});
</script>

(7) 「適用」をクリック
(8) 「変更を保存する」をクリック

で、記事を確認してみてください。
使ってるテーマのスタイルに強く依存するので、正衛門さんのブログをローカルに落として確認しました。

f:id:a-kuma3:20140511165547p:image
サイドバーが切れているところです。
はまぞうの枠線が右に飛び出しているのが分かります。

f:id:a-kuma3:20140511165548p:image
もう少し、下の部分です。
長く書いた記事が、サイドバーの下まで伸びているのが分かると思います。


ただ、このまま使えるわけではなくて、雰囲気の確認だけです。
というのは、以下の制約があるからです。

  • 「忍者おまとめボタン」を見えなくしてあります
  • サイドバーに小見出しのアンダーラインとかが食い込んでる

「忍者おまとめボタン」がちょっと曲者で、そいつが流し込むスタイルが簡単に修正できません。
細かい話なんですが、スクリプトで作りこむ要素に対して、その疑似要素にスタイルを指定しています。
そのうちの一部のスタイルが本文を切ってしまうために、サイドバーの途中で本文がちょん切れて、サイドバーの下に移動してしまいます。
どんな感じになるかは、サイドバーに追加したコードのうち、最後の方の以下の行を削除すると分かります。

        $(".ninja_onebutton").css("display", "none");   // 「忍者おまとめボタン」を無効化

もし、提示した形で雰囲気があっている、ということであれば、「忍者おまとめボタン」を有効にしたまま、記事をサイドバーの下に流し込むやり方にチャレンジしてみます :-)




追記です。
ちょっと力技ですが、「忍者おまとめボタン」の対策をしたコードです。

<script>
$(function() {
    if (document.location.href.match(/\/entry\//)) {
        var aside = $("aside#box2").detach();
        aside.insertBefore($("#main-inner article").eq(0));
        $("div#main").css("width", "750px");
        $(".entry-content h2").css("clear", "none");
        $(".entry-content h3").css("clear", "none");
        $(".entry-content h4").css("clear", "none");
        $(".entry-content h5").css("clear", "none");
        $(".ninja_onebutton").css("clear", "left");
        $("aside#box2").css({
                "z-index": "200",
                "background-color": "white",
                "position": "relative"
                });
        var e = document.createElement("DIV");
        e.innerHTML = 
            "<style>\n" +
            ".ninja_onebutton:after {clear: none !important;}\n" +
            ".ninja_onebutton_output:after {clear: none !important;}\n" +
            ".ninja_onebutton:after {clear: left !important;}\n" +
            "</style>\n";
        document.body.appendChild(e);
    }
});
</script>

これを、追加したモジュールの内容に書いてみてください。

他8件のコメントを見る
id:a-kuma3

済みません、最後に書いたコードが間違ってました m(_ _)m

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
(function($) {

// ここからが、回答で書いたコード
$(function() {
    if (document.location.href.match(/\/entry\//)) {
        var aside = $("aside#box2").detach();
        aside.insertBefore($("#main-inner article").eq(0));
        $("div#main").css("width", "750px");	/* 新しい幅 */
        $(".entry-content h2").css("clear", "none");
        $(".entry-content h3").css("clear", "none");
        $(".entry-content h4").css("clear", "none");
        $(".entry-content h5").css("clear", "none");
        $(".ninja_onebutton").css("clear", "left");
        $("aside#box2").css({
                "z-index": "200",
                "background-color": "white",
                "position": "relative"
                });
        var e = document.createElement("DIV");
        e.innerHTML = 
            "<style>\n" +
            ".ninja_onebutton:after {clear: none !important;}\n" +
            ".ninja_onebutton_output:after {clear: none !important;}\n" +
            ".ninja_onebutton:after {clear: left !important;}\n" +
            "</style>\n";
        document.body.appendChild(e);
    }
});

})(jQuery);
</script>

if 文のかっこが一つ足りなかったのと、Aero では横幅の指定が auto では #main が広がってしまうので、幅を指定するようにしました。
デザイン CSS で main の幅をいじっているようであれば、コードで /* 新しい幅 */ とコメントしてある 750 を、元の #main の幅+ #box2 の幅の合計値にしてください。
#box2 の幅は、デザインCSS で変更していなければ、.hatena-module の width と margin で決まってます。
ぼくの場合は、510px + 240px = 750px です。

ぼくのはてなブログで、一時的に、テーマに Aero を使って、サイドバーを短くしてみました。
長い記事があんまりないんですが、こちらとかで雰囲気(最後の一行だけもぐりこむはず)が確認できます。
http://a-kuma3.hatenablog.com/entry/2014/04/23/232612

2014/05/14 12:50:26
id:thyself2005

回答ありがとうございます。無事確認できました!
自分の場合は下記のように編集したコードで試してみました。
角丸部分が直角に表示されてしまっているとことか細かいところは微調整が必要そうですが満足しております。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
(function($) {
$(function() {
    if (document.location.href.match(/\/entry\//)) {
        var aside = $("aside#box2").detach();
        aside.insertBefore($("#main-inner article").eq(0));
        $("div#main").css("width", "850px");
        $(".entry-content h2").css("clear", "none");
        $(".entry-content h3").css("clear", "none");
        $(".entry-content h4").css("clear", "none");
        $(".entry-content h5").css("clear", "none");
        $(".ninja_onebutton").css("clear", "left");
        $("aside#box2").css({
                "z-index": "200",
                "background-color": "#EEEEEE",
                "position": "relative"
                });
        var e = document.createElement("DIV");
        e.innerHTML = 
            "<style>\n" +
            ".ninja_onebutton:after {clear: none !important;}\n" +
            ".ninja_onebutton_output:after {clear: none !important;}\n" +
            ".ninja_onebutton:after {clear: left !important;}\n" +
            "</style>\n";
        document.body.appendChild(e);
    }
});

})(jQuery);
</script>
2014/05/15 00:30:54
id:manaten No.4

manaten回答回数2ベストアンサー獲得回数02014/05/11 19:06:34

ポイント150pt

要件と変わってしまいますが、「空きスペース活用法」として、サイドバーのスクロール速度をメインコンテンツと別にし、メインコンテンツがスクロールし終わるのと同時にサイドバーもスクロールし終わるようにする、というのはいかがでしょうか。

文章だとわかりづらいのでアニメGifを用意しました。
http://manaten.net/wp-content/uploads/2014/05/scroll.gif

以下のJavaScriptをヘッダなどHTMLが直接記述できる箇所に書けば動くと思います。

<script>
  $(function() {
    var $target = $('#box2');
    $target.css({position: 'relative'});
    var offsetTop = $target.offset().top;
    $(window).on('load scroll resize', function() {
      var scroll = $(window).scrollTop();
      var scrollHeight = $(document.body).height() - $(window).height();
      var boxScrollHeight = $target.parent().height() - $target.height();
      $target.css({ top: scroll * boxScrollHeight / scrollHeight});
    });
  });
</script>

参考までに、私のブログに適用するとこんな感じになります。
http://blog.manaten.net


追記
この方法について記事を書きましたので、よろしければ参考にしてください。
http://blog.manaten.net/entry/sidebar-scroll

他7件のコメントを見る
id:manaten

JavaScriptでスタイルを変更することでまとめられると思います。

$target.css({position: 'relative'});

の行を、

$target.css({position: 'relative', transition:'none'});

に変更すれば動くと思います。

コード全体は、

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
  $(function() {
    var $target = $('#box2');
    $target.css({position: 'relative', transition :'none'});
    var offsetTop = $target.offset().top;
    $(window).on('load scroll resize', function() {
      var scroll = $(window).scrollTop();
      var scrollHeight = $(document.body).height() - $(window).height();
      var boxScrollHeight = $target.parent().height() - $target.height();
      $target.css({ top: scroll * boxScrollHeight / scrollHeight});
    });
  });
</script>

になります。

一応そちらのブログで動作確認しましたが、問題があったら教えて下さい。

2014/05/14 11:31:07
id:thyself2005

回答ありがとうございます。無事確認できました!
自分の場合、ブログ記事がムダに長すぎるんですが、そこまで違和感のない表示のように思いました。
今後も共通CSSが変更になったりしたら都度都度改修が必要そうですが、フッタフィールドに貼り付けて更新するだけの簡便さはいいですねー。

2014/05/15 00:36:17
  • id:thyself2005
    ご回答いただいた皆様、ありがとうございました!
    1時間ほど早い形となりますが、id:a-kuma3さんをベストアンサーと終了しました。
    id:a-kuma3さんに関しては回答がこちらの希望に最も近かったことに加え、こちらからの追加確認に加えて他の方の回答までしっかりフォローする姿勢がベストアンサーどころかベストと判断した次第です。
    今後もCSSやJavaScript関連、というよりはてなブログの技術回りでこういった質問をさせていただくかもしれませんが、その際はどうぞヨロシクお願いいたします。
  • id:a-kuma3
    ベストアンサーをありがとうございました。
    「姿勢が...」とか、そんなのではなく、ただ楽しんでただけで :-)
    No.4 のパララックスエフェクトは、サイドバーの構成を知ってて見ている人にとっては、ある意味、最適解かも、と思ってみてました。
    コードも短くて応用も効きそうだし、勉強になります。

    こういうのが楽しいので、人力検索は止められません。
    また、どこぞで会ったときには、よろしく。

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません