はてなブログのトップページをWordPressの固定フロントページっぽくし、ホームページとして活用する方法

Twitterでちょろっと書いたのですが、はてなブログでもWordPressの固定フロントページっぽくビジネスサイト風のトップページを作ることができます。これではてなブログをビジネスサイトやホームページのように活用することができます。
まずはDEMOページをご覧ください。（PC向け）

[:contents]

DEMOページ

※このカスタマイズはdisplay:noneを多用しているため、SEOの観点からはあまりおすすめはできません。どうしてもはてなブログから移転したくなくてはてなブログでホームページが作りたい方向けです。出来れば普通にWordPressでやりましょうｗ
seopack.jp

別のやり方を書きました。
blog.minimal-green.com

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

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

まず「管理画面→設定→詳細設定」からトップページの記事数（PC版）を1記事にします。
トップページ固定用の記事のカスタムURLをentry/homeとなるようにします。

このカスタマイズのポイントはトップページ用のデザインためのCSSをstyleタグで囲って直接記事内に書くことです。こうすることでトップページにのみ適用させたいCSSをデザインCSSに書かずに済みます。.page-indexをつけてデザインCSSに書くと個別記事ページやアーカイブページなどの他のページでも読み込むことになり無駄に重くなります。

トップページのデザインを作るには、普通にサイトを作るときのように記事内にHTMLを書いていくだけです。
※ちなみに↑の黒板のCSSは以前記事にしています。
design.syofuso.com

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

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

<style>

/* サイドバー・日付・コメントを消す */

#box2,

.entry-header,

.entry-footer {

    display: none;

}

/* テーマによって調整 */

#content {

    width: 100%;

}

#main {

    max-width: 1200px;

    width: 100%;

    float: none;

    margin: 60px auto 30px;

}

/* 以下トップページ用のデザイン向けのCSSを書く */

</style>

#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">

これでトップページ用の記事をアーカイブページから消すことが出来ました。

サイドバーの最新記事や月間アーカイブからも9999年の記事は消えましたね。

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

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

トップページ用の記事内の最新記事一覧を表示したい場所に以下の記述をします。

<div id="recentArticle"></div>

<script>

var timer = setInterval(function() {

if (typeof jQuery != 'undefined') {

$("#recentArticle").html($(".hatena-module-recent-entries").html());

clearInterval(timer);

}

}, 1000)

</script>

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

トップページの記事へのページャー（次へ）を消す

最新記事（ほんとは2番め）の個別記事にはトップページ用の記事へのページャーが表示されてしまいます。これを消すには
はてなブログのトップページを固定して企業サイト風にする方法 - IMUZA.com
この記事の「ページャーのトップページへのリンクを消す」をご参照下さい。

はてなブログのビジネス活用や企業のオウンドメディアに

はてなブログには企業向けにオウンドメディア構築サービス「はてなブログMedia」というサービスがあります。「それどこ」や「SUUMOタウン」「みんなのごはん」など人気メディアで活用されています。
とても自由度の高い良いサービスですが、お値段も相応でしょうし、個人事業主や自営業の方にはちょっと厳しいかもしれません。
そういうとき、はてなブログで手軽にビジネスサイトが構築できれば、ビジネスサイトやオウンドメディアを始めるきっかけに良いのではと思います。

まとめ

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

カスタマイズサービスの宣伝

やっぱりよくわからない、自分でやるのは面倒くさいという方は有料のカスタマイズサービスもやっていますのでご依頼いただければ幸いです。

トップページの固定フロントページ化のお見積目安は10,000円～18,000円（トップページカスタマイズのみの場合）となります。