人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

【はてなブログ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を回答に貼り付けて下さい。
・トップページは本実装の対象外。(※記事詳細ページのみ適用したいのです)

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

1399728388
●拡大する

●質問者: 正衛門
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

質問者から

もしくは上記以外にステキな空きスペース活用法があれば知りたいです。
※ただしサイドバー内のコンテンツが追尾したりするのは好みません。


1 ● snow0214
●0ポイント

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


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

snow0214さんのコメント
はい、そうです。

2 ● 池田仮名
●50ポイント

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

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


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

3 ● a-kuma3
●200ポイント ベストアンサー

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

(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>

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


正衛門さんのコメント
回答ありがとうございます。 わざわざローカルに落としてまで対応していただき嬉しいです。 CSSやデザインテーマが同じ設定の非公開ブログにて追記コード(モジュール)で試してみたのですが、特に変化が見られませんでした。何か気をつける点とかありますでしょうか? ※追記される前のコードでも試しましたが同様に特に変化が見られませんでした。

a-kuma3さんのコメント
そう言えば、はてなブログが[http://staff.hatenablog.com/entry/2013/10/24/155959:title=パフォーマンス改善をやってて]、jQuery の実装の読み込み位置をずいぶんとページの後の方に移動させてたのが、動かない原因だと思います。 追加のコードを、こんなふうにしても見た目が変わらないでしょうか? >|html| <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", "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", "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> ||< No.4 の回答のスクリプトが動かないのも、同じ原因だと思います。

正衛門さんのコメント
回答ありがとうございます。 上記コードと、試しに忍者おまとめボタンなし版に調整を加えた下記コードで試してみましたが、依然変化が見られませんでした。 一応ブラウザのキャッシュをクリア、スーパーリロードを経た上でChrome最新版で確認したのですが、他のブラウザで見たりした方がよいでしょうか? >|javascript| <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", "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"); } }); })(jQuery); </script> ||<

a-kuma3さんのコメント
ぼくが確認してたのは Firefox で、コメントを見て IE10 でも確認したんですけど、サイドバーの下に記事が流れ込んでます(コメントで書いた、忍者おまとめボタンを活かす方)。 Chrome でも動きそうなんだけどなあ... コンソールに、何かエラーとか出てたりしますか? >Chrome

a-kuma3さんのコメント
>> ・トップページは本実装の対象外。(※記事詳細ページのみ適用したいのです) << ということだったので、個別の記事でしか効かないようにしてますけど、その辺ではない?

正衛門さんのコメント
回答ありがとうございます。 Chrome最新版上で右クリック→要素を検証→Consoleで表示された内容をコピペしますね。 後半4行で「×」または「!」の警告が表示されております。 >> media query expression: (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) follow_button.1400006231.html:1 Pages["Admin"]["*"] js?version=c1eda670bd1e5bcc7e847e961d1a5bc1:6667 Pages["Admin"]["*"] done js?version=c1eda670bd1e5bcc7e847e961d1a5bc1:6671 Pages["Admin"]["globalheader"] js?version=c1eda670bd1e5bcc7e847e961d1a5bc1:6675 Pages["Admin"]["globalheader"] done js?version=c1eda670bd1e5bcc7e847e961d1a5bc1:6679 Array[3] js?version=c1eda670bd1e5bcc7e847e961d1a5bc1:6047 Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) Uncaught SecurityError: Failed to read the 'sessionStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag. AutoPatchWork.js:837 Array[2] js?version=c1eda670bd1e5bcc7e847e961d1a5bc1:6612 Attr.specified is deprecated. Its value is always true. Uncaught SecurityError: Failed to read the 'sessionStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag. AutoPatchWork.js:837 event.returnValue is deprecated. Please use the standard event.preventDefault() instead. <<

正衛門さんのコメント
後半4行って分かりづらいですね。 正確には、「Uncaught SecurityError?」から始まる2行で「×」、「Attr.specified?」と「event.returnValue?」から始まる2行で「!」が表示されております。

a-kuma3さんのコメント
>> Chrome最新版上で右クリック→要素を検証→Consoleで表示された内容をコピペしますね。 後半4行で「×」または「!」の警告が表示されております。 << js?version=... の部分は、Hatena.Diary モジュールのコードだし、 Uncaught SecurityError ? は、sessionStorage を使ってるところのエラーだから、追加したコードには関係なさそう。 event.returnValue ? も追加したコードじゃないですね。 きっと、これらのエラーは、回答で書いたコードを追加しなくても出てると思います。 うーん...

a-kuma3さんのコメント
済みません、最後に書いたコードが間違ってました <tt>m(_ _)m</tt> >|html| <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

正衛門さんのコメント
回答ありがとうございます。無事確認できました! 自分の場合は下記のように編集したコードで試してみました。 角丸部分が直角に表示されてしまっているとことか細かいところは微調整が必要そうですが満足しております。 >|javascript| <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> ||<

4 ● manaten
●150ポイント

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

文章だとわかりづらいのでアニメ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


正衛門さんのコメント
回答ありがとうございます。 CSSやデザインテーマが同じ設定の非公開ブログにてヘッダとフッタにコピペして試してみたのですが、特に変化が見られませんでした。何か気をつける点とかありますでしょうか?

manatenさんのコメント
はてなブログのデザイン設定より、スクリーンショットの箇所に貼り付ければ動作すると思います。 [http://manaten.net/wp-content/uploads/2014/05/header.png:image] ただし、スクリプトの性質上、メインのコンテントが十分長くないと効果は感じられないと思います。 コンテントがサイドバーより十分長くても(2倍程度)、何も変化が現れないようでしたらお知らせください。

a-kuma3さんのコメント
はてなブログが使ってる[http://hatenablog.com/js?version=123b0090a1e2a6141af3c43167b12b03:title=jQuery の実装]を読み込んでいる位置が、ページのほぼ最後なんです。 多分、$ が未定義とかエラーが出てるんじゃないかと思います。

manatenさんのコメント
なるほどー、自分のブログでは頭でGoogleがホスティングしているjQueryを読み込んでいたので気づきませんでした・・・ありがとうございます。 回答のスクリプトを記述する前に、 >|html| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> ||< でjQueryを読み込んであげれば動作すると思います。

正衛門さんのコメント
回答ありがとうございます。 下記コードを管理画面のフッタフィールドに貼り付けて更新したところ実装を確認できました! 追尾型っぽいけど単なる追尾じゃなく追っかけてくるようなアクションが面白いですねー。 >|javascript| <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'}); 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> ||<

manatenさんのコメント
動いたようでよかったです。 追っかけてくるアクション?で気になったのですが、私が最初に動作確認してからcssが変更されてるらしく、#box2(サイドバー)にtransitionがふられており、そのため追尾時にアニメーションしているようです。 もしアニメーションが気になるようでしたら、cssの161行目付近で#box2にふられている、 >|css| -moz-transition: all 1s ease; -webkit-transition: all 1s ease; ||< を外すと、最初にアニメGIFで例示した動きになると思います。

正衛門さんのコメント
回答ありがとうございます。CSSが変更されていたんですねー。 ちなみにご指摘いただいたCSS(http://www.masaemon.jp/css/theme/aero2/aero2.css)なんですが、デザインテーマ「Aero」共通のもので、私が直接編集することができません。 この場合、一部CSSを無効化したりする必要があるんですが、デザインCSSフィールドに追記したりせず、できれば今回ご提示いただいたコード上でまとめて記載できたりすると簡潔でありがたいのですが難しいでしょうか?

manatenさんのコメント
JavaScriptでスタイルを変更することでまとめられると思います。 >|javascript| $target.css({position: 'relative'}); ||< の行を、 >|javascript| $target.css({position: 'relative', transition:'none'}); ||< に変更すれば動くと思います。 コード全体は、 >|javascript| <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が変更になったりしたら都度都度改修が必要そうですが、フッタフィールドに貼り付けて更新するだけの簡便さはいいですねー。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ