今回このブログで、固定ページを利用してトップページを作りました。ノマドのブログのサイトタイトルや、パンくずリストの「トップ」をクリックすると、最新記事の一覧ではなく、設定したトップページが表示されるようになっています。
はてなPro(有料版)の固定ページでトップページを作り、それをホームページとして設定すれば、はてなブログをブログではなくサイトのように見せることも可能です。
私が今回行った方法について、書いておきます(この方法は、はてな有料版であることが必須です)。
はてなブログをサイトのように見せる
はてなブログでは、トップページとして最新記事を全表示するか一覧表示するかを選択できます。でも、これっていかにも「ブログ」っぽいんですよね。別にブログなのでそれでもいいんですが、コンテンツが増えてくると、必ずしも最近記事が最も読んでもらいたい記事ではない場合もあります。
そこで、今回は固定ページでトップページを作り、自分のブログのホーム(トップ)として表示させることにしました。
私の行った方法
１．はてなブログProの固定ページでトップページを作る
はてなPro(有料版)を使用している人は、固定ページという機能を使うことができます。固定ページでは静的なページが作成できるので、これを利用してトップページを作ります。
管理画面の固定ページをクリックして、トップページを作ります。ページURLは「top」もしくは「home」とするとわかりやすいでしょう。
このトップページをどのように書くかはどの人次第です。ブログの記事をカテゴライズして表示したり、企業サイトのように作りこむことも可能です。また、はてなの固定記事は、編集画面の右側に表示される「編集オプション」から、ワンカラム＿サイドバーなし)指定もできるので、作り方の幅が広がりますね。
記事が書けたら「公開する」でアップします。
２．作ったトップページにリダイレクトさせる
トップページを書いて投稿しただけでは、ブログタイトルやパンくずリストの「トップ」をクリックしても、まだ元のトップページ(記事一覧もしくは最新記事全表示)に飛びます。
ここで、もとのブログURL(私のブログならhttps://nomado.hatenadiary.com)から、自分が作ったトップページ(https://nomado.hatenadiary.com/top)へ、リダイレクトをかけます。
リダイレクトの方法は、「はてなブログをカスタマイズして商用サイトの様に見せる 3版 - Weed.nagoya：便利ツールでネット活用」で紹介されている、以下のコードを使わせていただきました。
<script type="text/javascript"><!-- if(location.href === "http://www.weed.nagoya/") { location.href = "http://www.weed.nagoya/entry/home" } // --></script>
以上を、設定の「詳細設定」から、「headに要素を追加」部分へ書き込み保存します。「http://www.weed.nagoya/」の部分を自分のブログトップURLへ(私ならhttps://nomado.hatenadiary.com)、「http://www.weed.nagoya/entry/home」の部分をトップとして設定したい固定ページのURL(私の場合はhttps://nomado.hatenadiary.com/top)に置き換えます。
そうすると、ブログタイトルやパンくずリストの「トップ」をクリックすると、自分が作ったトップページにリダイレクトしてくれます。
３．スマホでの「記事一覧」を「ホームへ戻る」へ変更
次にスマホ表示では、記事下に「記事一覧」というバーが表示され、これをクリックすると元のトップページ＝最新記事一覧へと飛びます。これも、自分の作ったトップページに飛ばせたいので、「ホームへ戻る」ボタンを設定しました。
「記事一覧」を表示させないようにするには、以下のコードをデザイン→スマートフォン→ヘッダ→タイトル下で、以下のコードを書き込み保存します。
<style type="text/css">
.pager-archive {
display:none;
}
</style>
これで、スマホ表示の記事下に表示される「記事一覧」を削除できるはずです。そして、「ホームへ戻る」ボタンを表示したいので、デザイン→スマートフォン→記事→記事下に、以下のコードを書き込みます。
<div style="padding: 10px; border: solid #43a39f; border-width: 1px 0 1px 0;"><a href="http://ブログのURLもしくはトップページのURL" style="text-decoration: font-weight: bold; font-size: 18px;"><center><i class="blogicon-home"></i> ホームへ戻る</center></a></div>
「ブログのURLもしくはトップページのURL」の部分をご自分のブログURLに置き換えて使用してください。
線の色(#43a39f)や幅、文字サイズなどは、好みに調節してください。「ホームへ戻る」も「トップへ戻る」など編集してもいいと思います。<i class="blogicon-home"></i>は、はてなブログでそのまま使えるアイコンで、家のマークが表示されます。
私はこれと同じコードを、パソコン版のフッタにも挿入しています。パソコンで読んでいる人は、下にスクロールすると、「ホームへ戻る」バーが見えると思います。
４．最新記事一覧を表示させたい場合は？
以上で、はてなProの固定ページでトップページを作ってホームページ(サイト)のように作成する方法は完了なんですが、最新記事一覧への誘導もしたいという人もいるかと思います。
はてなブログの最新記事は、ブログURLのあとに「/archive」をつけたページに自動的に生成されているようです。ですので、これを使って、
<div style="padding: 10px; border: solid #43a39f; border-width: 1px 0 1px 0;"><a href="http://ブログのURL/archive" style="text-decoration: font-weight: bold; font-size: 18px;"><center><i class="blogicon-search"></i> 最新記事一覧</center></a></div>
このようにコードを作ることも可能かなと思います(実際には私は実装していません)。ちなみに、アイコンは虫眼鏡マークです。
参照：はてなで使えるアイコン
私の場合、スマホ表示では、最新記事一覧は、フッタの「サイトマップ(記事一覧)」のところにチラっとリンクをつけてみました。参考までにそのコードはこちら。
<p><a href="http://ブログURL/archive"><i class="blogicon-external"></i> 最新記事一覧</a></p>
以上のコードを、デザイン→スマートフォン→フッタ→ページャ下に挿入しています。
はてなのトップページを設定するほかの方法
はてなブログで任意の記事をトップページとして設定する方法は他にもあり、今までに複数のブロガーさんが記事に書いてくれています。
固定ページを使わず、通常の記事ページを未来投稿(9999年とか)として、アップロードし、設定でトップページを「全文表示」にするやり方です。この方法だとリダイレクトしなくて済みますが、トップページに日付が表示されたり(非表示にすることも可能)、注目記事に表示されるなどのデメリットがあります。
そもそも、トップページというのは静的なページを設定するほうが自然な気がしますので、せっかく機能追加された固定ページを使って作ってみました。
はてな固定ページでトップページを作成することのメリットとデメリット
はてなブログのトップページを自分で作ることで、ブログの読者を自分の好きな方向へ誘導しやすくなります。
あるブログやサイトを訪れた時、ホーム(トップ)ページを見る人って多いと思うんです。私もほぼ必ず、ホーム(トップ)ページと、サイトマップを見ます(サイトマップについては、次回以降記事にします)。
トップページを見て読みたい記事を探したり、そのサイトやブログの大まかな構成やコンテンツを把握したりします。
ところが、はてなブログでは、トップページに表示できるのが、最新記事一覧か記事全文表示かになるので、あまり自由度が高くないんですね。これが自分の好きなページに設定できれば、方法によってはアフィリエイトサイトのランディングページをトップに持ってくることも可能です(ただし、はてなブログでアフィリエイトをやりすぎると削除される危険もあります)。
考えられるデメリットとしては、リダイレクトをかけることによって、ブログ表示速度が若干落ちるかもしれないということです。
あと、上記のリダイレクトコードはjavascriptを利用していますが、私はその道の専門家ではないので、SEOとしてどのような影響があるのかは、正直分かりません。このブログも、つい昨日からリダイレクトさせているので、実際の影響も現在実験中という感じです。
そういうわけですので、ご自分のブログで試されるときには、自己責任でお願いしますね。
そもそも、ブログカスタマイズには最小限の手間しかかけたくないのが、本音です。
なので、ザクザクっとやりたいことだけ、一気にやってしまったので、多少雑な部分があるかもしれません。もし、何か問題があれば、コメントでご指摘ください。。。
