現在左メインカラム(記事本文)と右サイドバーの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を回答に貼り付けて下さい。
・トップページは本実装の対象外。(※記事詳細ページのみ適用したいのです)
以上、何卒宜しくお願い申し上げます。
2カラムから1カラムに切り替わる際は、いきなりパッとなるのではなく、左カラムが右カラムに伸びる過程をアニメーション表示する形だと最高です。
たぶんJavascriptを使えば実装できそうな気はするのですが、はてなブログの使い勝手も考慮した最適解が導き出せないため質問してみました。
もしくは上記以外にステキな空きスペース活用法があれば知りたいです。
※ただしサイドバー内のコンテンツが追尾したりするのは好みません。
ニュルっとアニメーションするわけではないですが、サイドバーの下に記事を流し込んでみる方法です。
(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) 「変更を保存する」をクリック
で、記事を確認してみてください。
使ってるテーマのスタイルに強く依存するので、正衛門さんのブログをローカルに落として確認しました。
サイドバーが切れているところです。
はまぞうの枠線が右に飛び出しているのが分かります。
もう少し、下の部分です。
長く書いた記事が、サイドバーの下まで伸びているのが分かると思います。
ただ、このまま使えるわけではなくて、雰囲気の確認だけです。
というのは、以下の制約があるからです。
「忍者おまとめボタン」がちょっと曲者で、そいつが流し込むスタイルが簡単に修正できません。
細かい話なんですが、スクリプトで作りこむ要素に対して、その疑似要素にスタイルを指定しています。
そのうちの一部のスタイルが本文を切ってしまうために、サイドバーの途中で本文がちょん切れて、サイドバーの下に移動してしまいます。
どんな感じになるかは、サイドバーに追加したコードのうち、最後の方の以下の行を削除すると分かります。
$(".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>
これを、追加したモジュールの内容に書いてみてください。
CSSでできることではないですし、はてなはJavaScriptの使用を制約しているので、質問を満たすことはできません。
そこで、空白を埋める方法として、ブログパーツを使ってはどうでしょうか。
回答ありがとうございます。
はてなブログの場合はJavascriptの使用制限はダイアリーほどない、むしろほぼ好きなように使用できますし、ヘッダやフッタの編集も可能なのですが、それでも今回ご提示いただいた方法がベストとされますでしょうか?
はい、そうです。
サイドバー表示が終わるまで下にスクロールしたら「おすすめ記事」を追尾させる
http://www.ikedakana.com/entry/2014/03/31/075948
要件からははずれてしまいますが、こういう形はいかがでしょうか。はてなブックマークなどでも採用されています。作ってみたものの評判が悪いので、現在自分のブログでは稼働させていませんが。
回答ありがとうございます。
他のブログとはちょっと違う表示の仕方がしてみたい、そんな中二病魂がありましてw
…でもなんだかんだで追尾型も捨てがたいとも考えているので参考にさせてください。
ニュルっとアニメーションするわけではないですが、サイドバーの下に記事を流し込んでみる方法です。
(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) 「変更を保存する」をクリック
で、記事を確認してみてください。
使ってるテーマのスタイルに強く依存するので、正衛門さんのブログをローカルに落として確認しました。
サイドバーが切れているところです。
はまぞうの枠線が右に飛び出しているのが分かります。
もう少し、下の部分です。
長く書いた記事が、サイドバーの下まで伸びているのが分かると思います。
ただ、このまま使えるわけではなくて、雰囲気の確認だけです。
というのは、以下の制約があるからです。
「忍者おまとめボタン」がちょっと曲者で、そいつが流し込むスタイルが簡単に修正できません。
細かい話なんですが、スクリプトで作りこむ要素に対して、その疑似要素にスタイルを指定しています。
そのうちの一部のスタイルが本文を切ってしまうために、サイドバーの途中で本文がちょん切れて、サイドバーの下に移動してしまいます。
どんな感じになるかは、サイドバーに追加したコードのうち、最後の方の以下の行を削除すると分かります。
$(".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>
これを、追加したモジュールの内容に書いてみてください。
済みません、最後に書いたコードが間違ってました 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
回答ありがとうございます。無事確認できました!
自分の場合は下記のように編集したコードで試してみました。
角丸部分が直角に表示されてしまっているとことか細かいところは微調整が必要そうですが満足しております。
<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>
要件と変わってしまいますが、「空きスペース活用法」として、サイドバーのスクロール速度をメインコンテンツと別にし、メインコンテンツがスクロールし終わるのと同時にサイドバーもスクロールし終わるようにする、というのはいかがでしょうか。
文章だとわかりづらいのでアニメ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
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>
になります。
一応そちらのブログで動作確認しましたが、問題があったら教えて下さい。
回答ありがとうございます。無事確認できました!
自分の場合、ブログ記事がムダに長すぎるんですが、そこまで違和感のない表示のように思いました。
今後も共通CSSが変更になったりしたら都度都度改修が必要そうですが、フッタフィールドに貼り付けて更新するだけの簡便さはいいですねー。
済みません、最後に書いたコードが間違ってました m(_ _)m
if 文のかっこが一つ足りなかったのと、Aero では横幅の指定が auto では #main が広がってしまうので、幅を指定するようにしました。
2014/05/14 12:50:26デザイン 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/15 00:30:54自分の場合は下記のように編集したコードで試してみました。
角丸部分が直角に表示されてしまっているとことか細かいところは微調整が必要そうですが満足しております。