読者です 読者をやめる 読者になる 読者になる

maRkの

キャンペーンだとか、Chess.appについてのなにか

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

どうでもいい はてなブログ

Clipボタン

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

f:id:maRk:20160313185814j:plain

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>

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

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

f:id:maRk:20160313192853j:plain

広告を非表示にする