(cache) はてなブログのトップページをWordPressの固定フロントページっぽくする方法

Twitterでちょろっと書いたのですが、はてなブログでもWordPressの固定フロントページっぽくビジネスサイト風ののトップページを作ることができます。
まずはDEMOページをご覧ください。（PC向け）
DEMOページ
f:id:syofuso:20170430231711p:plain

トップページ用の記事を作る

ポイント
①日付を9999年にする、1ページ1記事にする
②固定記事のカスタムURLをhomeにする
③記事内にHTML/CSS全部直接書く
④デザインCSSでサイドバーとアーカイブページのトップページへのリンクを消す（できればページャーも）

まず「管理画面→設定→詳細設定」からトップページの記事数（PC版）を1記事にします。このカスタマイズのポイントはトップページ用の記事のデザインためにCSSをstyleタグで囲って直接記事内に書くことです。こうすることでトップページにのみ適用させたいCSSをデザインCSSに書かずに済みます。デザインCSSに書くと個別記事ページやアーカイブページなどの他のページでも読み込むことになり無駄に重くなります。
トップページのデザインを作るには記事内に普通のサイトを作るときのようにHTMLを書いていくだけです。

トップページからサイドバー・日付などを消してシングルカラムにする

サイドバーを消す必要は無いのですが、サイドバーを消したほうがより”ビジネスサイト風”になりますね。
以下のようにstyleタグで囲ってトップページ用の記事内に書きます。

<style>
/* サイドバー・日付・コメントを消す */
#box2,
.entry-header,
.entry-footer {
display: none;
}
/* テーマによって調整 */
#content {
	width: 100%;
}
#main {
max-width: 1200px;
width: 100%;
float: none;
margin: 60px auto 30px;
}

#content や#mainの幅はテーマによって調整が必要となります。

サイドバーの最新記事やアーカイブページページからトップページを消す

トップページ用の記事は普通の記事と同じなのでサイドバーの最新記事やアーカイブページに表示されます。問題ないと問題ないですが、最新記事にずっと固定ページが出て来るのは不自然なので消してしまいましょう。
このアイデアは主にid:ausnichtsさんの以下の記事を参考にしています。
www.imuza.com

以下のCSSをデザインCSSに記述します。

/* 月間アーカイブから9999年を消す */
.archive-module-year[data-year="9999"] {
    display: none;
}
/* アーカイブページから特定の記事を消す */
.archive-entry[data-uuid="10328749687241678111"] {
    display: none;
}
/* 最新記事の一番目の要素を消す */
.recent-entries-item:first-child {
    display: none;
}

data-uuidの数字をアーカイブページのソースから調べます。9999年のトップページ用の記事のところに以下のような記述があるので数字をメモして上記のCSSに入れます。

<section class="archive-entry autopagerize_page_element" data-uuid="10328749687241678111">

これでトップページ用の記事をアーカイブページから消すことが出来ました。
f:id:syofuso:20170430232915p:plain
サイドバーの最新記事や月間アーカイブからも9999年の記事は消えましたね。
f:id:syofuso:20170430232057p:plain

最新記事をトップページに表示する方法

トップページに最新記事一覧がないと、やはりブログとしては困りますね。RSSを読む込むなどの方法もあるのかもしれませんが、ここでは単に「サイドバーの最新記事」を記事内移動させるscriptを置くだけです。
サイドバーの関連記事を記事下に移動させるのと同じです。
記事内に最新記事一覧を表示したい場所に以下の記述をします。

<div id="recentArticle"></div>
</div>
<script>
var timer = setInterval(function() {
if (typeof jQuery != 'undefined') {
$("#recentArticle").html($(".hatena-module-recent-entries").html());
clearInterval(timer);
}
}, 1000)
</script>

後は3カラムで横並びになるようCSSを書きます。ここはテーマやトップページのデザインによって調整してみて下さい。

まとめ

ここまで書いてなんですが、こんな面倒なことをするならWordPressでやれとも自分で思いますｗでもはてなブログでずっとブログ書いてて離れたくない！というはてな愛の強い方には良いかもしれません。
ちなみにDEMOページのテーマは最近テーマストアに投稿されたid:codomisu さんの『Codomisu Flat』をインストールして使っています。
hitsuzi.hatenablog.com
フラットデザインでオシャレなテーマですので是非是非。スライダーの付け方も詳しく書いてくださっています。