はてなブログトップページ（自分の）で記事一覧を折り畳みして別コンテンツを差し込む

何言ってるか不明なんだけど、サイトのトップページぽくする系のカスタマイズです。
固定ページを持たないはてなブログでは、サイトトップを作る決定打があまりないですが、こんなやり方もというので。

Firefox のスラッチパッドで以下をトップページを開いて実行してみます。

($=> {
  const isTop = $('html').data('page') == 'index' ? 1 : 0;
  const MAIN_INNER = $('#main-inner');
 
  if (isTop) {
    $('#main:first-child').prepend('<article id="topageContent">{{CONTENT}}</article>');
    MAIN_INNER.css('display', 'none');
    const ShowHide = $('<a/>').text("表示 / 非表示").on('click', (e)=> {
    e.preventDefault();
    MAIN_INNER.toggle();
  })
  .attr({
    'id': 'mainToggle',
    'href': '#',
  })
  .css({
    border: '1px solid',
    borderRadius: '3px',
    padding: '.1em',
  });
    $('#main').prepend(ShowHide);
  }
  return;  
})(jQuery);

これで上記のような表示ができれば、実装させることができます。

jQueryはなんらかの形で読めるようにしておき、以下のようなのをフッターあたりに貼ります。（そのまま貼っただけでは運用としては使えません）
{{CONTENT}} の部分にトップページに必要な内容を入れれば（$.get()でもってくるとか）、常にトップページに何か表示させることができるかと。

<script>
  $(function(){
    var isTop = $('html').data('page') == 'index' ? true : false;
    var MAIN_INNER = $('#main-inner');
 
  if (isTop) {
    $('#main:first-child').prepend('<article id="topageContent">{{CONTENT}}</article>');
    MAIN_INNER.css('display', 'none');

  var ShowHide = $('<a/>').text("表示 / 非表示").on('click', (e)=> {
    e.preventDefault();
    MAIN_INNER.toggle();
  })
  .attr({
    'id': 'mainToggle',
    'href': '#',
  })
  .css({
    border: '1px solid',
    borderRadius: '3px',
    padding: '.1em',
  });
    $('#main').prepend(ShowHide);
  }
   return;
});
</script>

ただし、これだけでは問題があります。
無料ユーザーの場合の広告表示がスクリプト実行によって表示できない形になるため、広告ユニットをさらに追加して常時表示になるようにしておかないといけません。

これは、やっつけで対策してみたのだけど、ちょっと見た目は良くないかも

追記： 2018/04/18

トップページに任意の記事を固定できる機能が追加されました。
記事の管理画面の記事タイトルより、固定したい記事にチェックを入れて、横にある、編集のボタンを押すと、メニュー内の、「トップページの先頭に表示する」をクリックすることで設定できます。
staff.hatenablog.com/entry/2018/04/18/143000