大人の発達障害者の挑戦日記

30代後半で成人発達障害者となった私の日記

はてなブログのサイドバーのモジュールを開閉式にしてみたのでソースを公開

こんにちは。エイキチです。

数日前からサイドバーのモジュールを開閉式にする実験をしていましたが、ある程度形になったので公開しようと思います。

※ 2018/12/22に記事を修正しました。

サイドバーについて感じていたこと

このブログは「はてなブログ」というサービスを使っています。テーマを選ぶことでレイアウトを変えたりできます。このブログでは2カラムレイアウトのテーマを利用しています。そのため、PC表示ではサイドバーが表示されます。

f:id:otona-hattatsushougai-challenge:20181222193212j:plain

サイドバーには「はてなブログ」が用意してあるモジュールを追加することができます。ひとつのモジュールはタイトルと本文で構成されています。

f:id:otona-hattatsushougai-challenge:20181222193210j:plain

PC表示ではサイドバーは記事の横に表示され、モジュールがそこに表示れます。スマートフォンではサイドバーは記事下に表示されるので、下にモジュールが並ぶことになります。いったん下の方にスクロールするとモジュールばかりの画面表示になるわけです。

f:id:otona-hattatsushougai-challenge:20181222193208j:plain

そこでモジュールを開閉式に出来ないか、ここ数日間考えてました。

そんなときに、以下の記事を見つけました。(私の記事に言及してくれたので見つけることが出来ました。)

上記で目次を開閉式にするというプログラムが公開されています。なんとなく参考になりました。CSSのdisplayプロパティを利用している個所が特に参考になりました。その後、試行錯誤を重ね、やっとサイドバーの開閉式が形になってきました。以下のように、「表示」「非表示」のラベルを付けて、モジュール本文を折りたたむことが出来ました。

f:id:otona-hattatsushougai-challenge:20181222193206j:plain f:id:otona-hattatsushougai-challenge:20181222193203j:plain

せっかくなので、公開することにします。興味ある方はぜひ使ってみてください。

コピペ用ソース

以下はJavaScriptのソースです。フッタに追加してください。

<script>
document.addEventListener("DOMContentLoaded", function() {
    // 括弧の設定
    var openBraket  = "[";
    var closeBraket = "]";

    // ラベルの設定
    var labels = ["表示", "非表示"];

    $targetModules = $(".hatena-module").not(".hatena-module-related-entries");

    // 表示・非表示ラベル追加
    var spanEl = openBraket + "<span class='labelOfOpenClose'>" + labels[1] + "</span>" + closeBraket;
    $targetModules.find(".hatena-module-title").each(function(i, o){
        $(o).append(spanEl);
    });
    
    // 開閉定義
    $(".labelOfOpenClose").click(function(e){
        var $this = $(this);
        var $target = $this.parents(".hatena-module").find(".hatena-module-body");

        if ($target.css("display") === "none") {
            $this.text(labels[1]);
        } else {
            $this.text(labels[0]);
        }

        $target.slideToggle(500);
    });

    // 画面サイズが小さい場合は閉じておく
    if (window.innerWidth <= 640) {
        $(".labelOfOpenClose").click();
    }
}, false);
</script>

以下はスタイルシートのソースです。使わなくても動作しますが、使ってみたい場合、デザインCSSに末尾に貼り付けてください。

「表示」、「非表示」にマウスポインタが重なったときに指のマークにするというのと、オレンジ色にするということをしています。貼り付けなくてもJavaScriptは動作するので好みに応じて使ってみてください。

.labelOfOpenClose:hover {
    cursor: pointer;
    color: orange;
}

colorの値を変えるなどしても良いと思います。

カスタマイズ例

開閉のラベル

JavaScriptソースの最初で「括弧の設定」というコメントを入れておきました。

   ・
    ・
    ・
    // 括弧の設定
    var openBraket  = "[";
    var closeBraket = "]";
    ・
    ・
    ・

上記の部分でラベルの両脇の括弧を設定しています。好みに合わせて変えてみてください。例えば両方★にすれば、「プロフィール ★非表示★」という表示になります。

上記のソースのちょっとしたにあるのが、「表示」、「非表示」の文字列設定です。

   ・
    ・
    ・
    // ラベルの設定
    var labels = ["表示", "非表示"];
    ・
    ・
    ・

この部分も好みに応じて変えてみてください。例えば「開く」「閉じる」とか「表示する」「隠す」などです。

スマートフォンでの初期表示

最後の3行はスマートフォンの表示の時に、初期表示としてサイドバー全部を閉じておくようにする処理です。

   ・
    ・
    ・
    // 画面サイズが小さい場合は閉じておく
    if (window.innerWidth <= 640) {
        $(".labelOfOpenClose").click();
    }
    ・
    ・
    ・

スマートフォンの初期表示でもサイドバーを表示の状態にしたい場合は、上記を削除してください。

サイドバーの関連記事について

私のブログの場合、関連記事のモジュールは記事下に表示しています。この関連記事は開閉式の対象にしていません。ソースでは、以下の箇所で対象から除いています。

   $targetModules = $(".hatena-module").not(".hatena-module-related-entries");

このままだと、サイドバーに関連記事のモジュールも処理の対象外になります。もし、サイドバーの関連記事を開閉式にしたい場合、以下のように変えてください。

   $targetModules = $(".hatena-module");

上記に変更することで、サイドバーの関連記事モジュールも開閉式になります。

最後に一言

プログラミングは期待通り動くと嬉しいです。