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

丸ニッキ

小林丸々の日記用ブログ

はてなブログのトップページを「完全に一覧画面」に変更してみた

ブログ改造

はてなブログのトップページは、一覧ページとしての視認性に欠けます。
と、個人的には思っています。

それで、以前CSSを触ったのですが、別の方法を思いついたので変更してみました。

↓以前やったこと
kbysoo.hatenablog.com

今回、思いついたアイデア

はてなブログには、モジュールという名称でブログ・パーツが用意されています。
help.hatenablog.com

この中に、最新記事リストを表示するためモジュールがあります。

……最新記事リスト、

ブログのトップページに表示すべきリストって「これだな」と気付きました。

「じゃあ、これをメインカラムに表示すればいいか」という安直な考えが、今回のアイデアです。

完成図

トップページとその他のページで、モジュールの位置を変更するイメージです。

↓トップページでは最新記事がメインカラムに表示されます。
f:id:kbysoo:20160311224717p:plain

↓他のページでは最新記事がサブカラムに表示されます。(ただのデフォルト挙動)
f:id:kbysoo:20160311224810p:plain

やることの概要

はてなの仕様上、モジュールはサイドバーにしか追加できません。

(厳密に言うと、HTMLの書ける場所なら追加できるので、どうにかできるのかもしれませんが…)

仕方ないので、jQueryの力技(物理)でサイドバーから引っこ抜いて、メインカラムにぶち込むことにしました。

注意点とデメリット

  • jQueryを使うので画面の表示が遅くなります。(私はそんな気にならないレベルと思っていますが、わかりません)
  • モジュールに載る件数分しか記事が表示されません。「続きを読む」で次の数件を表示するということができません。
  • はてなが公式に提供している使い方ではないですし、SEOなどに良くないのかもしれません。(わかりません)

責任を取れませんので、自己解決出来そうもない方はやらないで下さい。すみません。

jQueryでモジュールを移動する

最新記事リストのモジュールは、hatena-module-recent-entriesクラスです。
これをトップページのメインカラム(main-inner)の中に移動します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $(function(){
        $(".hatena-module-recent-entries").prependTo(".page-index #main-inner");
    });
</script>

このコードはサイドバーに最新記事リストがある状態でないと動きません。「移動」しているだけで、新たにモジュールを作成している訳ではありません。

↓コードはここに書く(ヘッダかフッタかどちらかに書く)
f:id:kbysoo:20160311225428p:plain

CSSで不要になった記事を非表示

jQueryを書いて、メインカラムに最新記事リストが表示されるようになった筈なので、最初っからある記事は非表示にします。

それと「続きを読む」も動作しないので非表示にします。

.page-index .entry, .page-index .pager {
    display: none;
}

↓コードはここに入れる。(デザインCSS)
f:id:kbysoo:20151127212504p:plain

まとめ

前のよりシンプルになって、気に入りました。
ただちょっとスカスカ感があるので、もうちょっと見た目よくして行きたいです。

広告を非表示にする