【はてなブログカスタマイズ】PC版トップページのデザインを変更！一覧性を上げつつ見た目もおしゃれにしてみました！#1

はてなブログに限りませんが、多くのブログのトップページは書かれてある記事が本文も含めてひたすら表示されていくスタイルなので、なんだか微妙だなとずっと思っていました。

「続きを見るボタン」で省略することもできますが「記事詳細ページと見た目ほとんど変わらない...」というのがどうしても気になっていたのでいっそのことPC版のトップページをはてなブログとは思えないぐらいカスタマイズしてみちゃおうかなと！

トップページを変更するやり方は大きく2つ

「はてなブログ　トップページカスタマイズ」で検索すると結構いろいろ記事が出てくると思いますが、要約すると大きく2つのやり方がヒットします。

JSでトップページを開いたら記事一覧ページへ転送する（「/archive」のURLへ飛ばす）
トップページのCSSを変更する（.page-indexを使う）

カスタマイズ性が高いのはもちろんCSSなんですが、JSで「/archive」へ飛ばす方法はコードをコピペするだけなので簡単お手軽です。

ほんのちょっとCSSを変更するのもそこそこ知識が必要なので、このへんのWebの知識が詳しくない人はJSをコピペするやり方でお手軽カスタマイズするのでもよさそうですね。

JSで記事一覧へ転送する方法

「管理画面」>「設定」>「詳細設定」>「検索エンジン最適化」>「headに要素を追加」に以下のコードを追加すると、トップページを開くと記事一覧へ転送できます。

<script type="text/javascript">
    // 開いているページがトップページだったら
    if( location.href == 'http://www.cocococococococococococo.com/'){
        // 記事一覧（/archive）へ転送する
        location.href='http://www.cocococococococococococo.com/archive';
    }
</script>
<noscript>
　<p><a href="http://www.cocococococococococococo.com/archive">ねこのここねこ、ししのここじし
</noscript>