正衛門回答ポイント 400ptウォッチ 1

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

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

• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• a-kuma32014/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) 「変更を保存する」をクリック
  
  で、記事を確認してみてください。
  使ってるテーマのスタイルに強く依存するので、正衛門さんのブログをローカルに落として確認しました。
  
  
  サイドバーが切れているところです。
  はまぞうの枠線が右に飛び出しているのが分かります。
  
  
  もう少し、下の部分です。
  長く書いた記事が、サイドバーの下まで伸びているのが分かると思います。
  
  
  ただ、このまま使えるわけではなくて、雰囲気の確認だけです。
  というのは、以下の制約があるからです。

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

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

          $(".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>
  

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

  スター

  • 

    10件のコメントを見る

  • 正衛門 2014/05/12 23:43:10

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

    スター

  • a-kuma3 2014/05/13 13:09:10

    そう言えば、はてなブログがパフォーマンス改善をやってて、jQuery の実装の読み込み位置をずいぶんとページの後の方に移動させてたのが、動かない原因だと思います。
    追加のコードを、こんなふうにしても見た目が変わらないでしょうか？

    <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 の回答のスクリプトが動かないのも、同じ原因だと思います。

    スター

  • 正衛門 2014/05/14 00:26:21

    回答ありがとうございます。
    上記コードと、試しに忍者おまとめボタンなし版に調整を加えた下記コードで試してみましたが、依然変化が見られませんでした。
    一応ブラウザのキャッシュをクリア、スーパーリロードを経た上でChrome最新版で確認したのですが、他のブラウザで見たりした方がよいでしょうか？
    

    <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 2014/05/14 00:34:33

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

    スター

  • a-kuma3 2014/05/14 00:36:05

    ・トップページは本実装の対象外。（※記事詳細ページのみ適用したいのです）

    ということだったので、個別の記事でしか効かないようにしてますけど、その辺ではない？

    スター

  • 正衛門 2014/05/14 09:29:27

    回答ありがとうございます。
    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.

    スター

  • 正衛門 2014/05/14 09:31:24

    後半4行って分かりづらいですね。
    正確には、「Uncaught SecurityError～」から始まる2行で「×」、「Attr.specified～」と「event.returnValue～」から始まる2行で「！」が表示されております。

    スター

  • a-kuma3 2014/05/14 10:00:37

    Chrome最新版上で右クリック→要素を検証→Consoleで表示された内容をコピペしますね。
    後半4行で「×」または「！」の警告が表示されております。

    js?version=... の部分は、Hatena.Diary モジュールのコードだし、
    Uncaught SecurityError ～ は、sessionStorage を使ってるところのエラーだから、追加したコードには関係なさそう。
    event.returnValue ～ も追加したコードじゃないですね。
    
    きっと、これらのエラーは、回答で書いたコードを追加しなくても出てると思います。
    
    
    うーん...

    スター

  • a-kuma3 2014/05/14 12:50:26

    済みません、最後に書いたコードが間違ってました　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/15 00:30:54

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

    <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/10 22:51:41

  2カラムから1カラムに切り替わる際は、いきなりパッとなるのではなく、左カラムが右カラムに伸びる過程をアニメーション表示する形だと最高です。

  たぶんJavascriptを使えば実装できそうな気はするのですが、はてなブログの使い勝手も考慮した最適解が導き出せないため質問してみました。

  もしくは上記以外にステキな空きスペース活用法があれば知りたいです。

  ※ただしサイドバー内のコンテンツが追尾したりするのは好みません。

snow02142014/05/11 07:34:17

0pt

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

スター

• 

  2件のコメントを見る

• 正衛門 2014/05/11 08:08:38

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

  スター

• snow0214 2014/05/11 08:29:07

  はい、そうです。

  スター

池田仮名2014/05/11 15:41:27

満足50pt

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

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

スター

• 

  1件のコメントを見る

• 正衛門 2014/05/12 23:23:47

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

  スター

manaten2014/05/11 19:06:34

満足150pt

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

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

スター

• 

  9件のコメントを見る

• 正衛門 2014/05/12 23:53:50

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

  スター

• manaten 2014/05/12 23:58:47

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

  スター

• a-kuma3 2014/05/13 13:12:32

  はてなブログが使ってるjQuery の実装を読み込んでいる位置が、ページのほぼ最後なんです。
  多分、$ が未定義とかエラーが出てるんじゃないかと思います。

  スター

• manaten 2014/05/13 14:32:24

  なるほどー、自分のブログでは頭でGoogleがホスティングしているjQueryを読み込んでいたので気づきませんでした・・・ありがとうございます。
  
  回答のスクリプトを記述する前に、

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  

  でjQueryを読み込んであげれば動作すると思います。

  スター

• 正衛門 2014/05/14 00:17:06

  回答ありがとうございます。
  下記コードを管理画面のフッタフィールドに貼り付けて更新したところ実装を確認できました！
  追尾型っぽいけど単なる追尾じゃなく追っかけてくるようなアクションが面白いですねー。
  

  <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 2014/05/14 00:35:16

  動いたようでよかったです。
  
  追っかけてくるアクション？で気になったのですが、私が最初に動作確認してからcssが変更されてるらしく、#box2(サイドバー)にtransitionがふられており、そのため追尾時にアニメーションしているようです。
  
  もしアニメーションが気になるようでしたら、cssの161行目付近で#box2にふられている、

    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
  

  を外すと、最初にアニメGIFで例示した動きになると思います。

  スター

• 正衛門 2014/05/14 09:33:49

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

  スター

• manaten 2014/05/14 11:31:07

  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/15 00:36:17

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

  スター
• その他の回答を読む

この質問へのコメント

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

質問の情報

登録日時

2014-05-10 22:26:28

終了日時

2014-05-17 21:27:07

回答条件

回答にURL必須 1人5回まで

この質問のカテゴリ

• インターネット
• ウェブ制作

この質問に含まれるキーワード

人気の質問

• いれらぶやっている方に質問です♪ 月額制だと１ヶ月払わなかったら垢は消えてしまうのですか？？ おともち…こはく1日前
• 小６です。 給食委員会の放送で、残飯を減らすためにやっていることを放送で話してみたいなことを先生から…匿名質問者1日前
• 経験者の方や詳しい方にお聞きしたいです。 親が亡くなった後に親と一緒に暮らしていた親族が遺産隠しや他…tomo2024tomo1123日前
• この太ももってそんなに女の子の太ももに見えますか？ この前クラスの女子に「あんた本当に…匿名質問者1日前
• この肌って色白な方ですか？匿名質問者2日前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ