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

bunoshi

働き方を考えるブログ

はてなブログでトップページを作る方法

雑記

作る必要があるかどうかは置いておいて。

f:id:ranmaru-24mensou:20160228181736p:plain

雑多ブログを続けてきて思ったんです。

このブログ、転職関連の記事からしか成果が出ない! & ビジネス関連の記事ばっかり読まれてる! ブログのキーワードも転職になっていますし、当然と言えば当然。

となると、サイトのような見た目に変更して、トップページからカテゴリ分けしたリンクを貼ったほうが記事を読んでもらいやすくなるのかな?

ブログタイトルは「bunoshi」のままにして、「30代の転職を応援するブログ」にサブタイトルをつけて誘導するのが良いかもしれない。

なんてことを考えていると作りたくなるわけです。固定されたトップページを!

はてなブログだと、固定ページの作成は普通にやると出来ません。なので疑似的に作る方法を考えました。

 

投稿日を未来にする

トップページですから、記事を更新するたびに後ろに移動されちゃ困ります。そしてブログの暗黙のルールは、新規ページが一番前に来ること。それならトップページの日付を未来にしてしまえば良い!

ありがたいことに、はてなブログでは投稿日時を変えることができます。日付を入力する場所は、編集オプションの投稿日時。これを9999年にします。そして気分でカスタムURLを変えます。

f:id:ranmaru-24mensou:20160228172437p:plain

 

これで新しい記事を追加しても、9999年を超えない限りはトップページが変わることはありません。

注意点が1つ。

続きを読むは設定しない事。トップページですから。

 

表示する記事数を1にする

ダッシュボードの設定からトップページの記事数を1に変えます。

f:id:ranmaru-24mensou:20160228174339p:plain

 

これでブログの1ページ目を固定ページにすることができました。でも、もうひとつ邪魔ものが残っています。

それは・・・。

f:id:ranmaru-24mensou:20160228174657p:plain

 

この次のページへってやつ。これがあるとせっかくのトップページも台無しなんですよね。とは言え下手に消すとすべてのページから消えてしまう厄介なやつです。

 

TOPページだけ次のページへを消す

「次のページへ」を消すには記事を書く画面のHTMLの編集を選び、その中に

次のソースを書きます。

<style type="text/css">

<!--
.pager { display:none }
-->

</style>

/*
Responsive: yes
*/

こうすると、ソースを書きこんだページだけ「次のページへ」が表示されなくなります。はてなブログってページごとにCSSが書けるんですよね。意外な高機能。

ちなみに、赤字部分<!-- -->は<style>で書き込むと勝手に出てきます。

 

後はレスポンシブ対応のテーマを選ぶだけ!

最後の最後で詰めが甘いな。スマホ表示はどういじって良いのか分かりませんでした。なのでレスポンシブ対応のテーマを選んでください!

そうすれば、トップページが出来ますぜ 笑

こんなかんじ。

f:id:ranmaru-24mensou:20160228180442p:plain

 

日付がダサいから消す

表示される日付が9999年とかダサいですよね。これもHTMLの中に次のソースを書き込めば消えます。

<style type="text/css">

.date {

display:none

}

</style>

日付が消えるととっぽページっぽくなりますよ。

 

最後に

トップページを作ろうと思った理由は、スマホでの導線を作りたいからです。おすすめ記事は結構読まれるんですけどね。他への導線がなかなか上手く作れずにいるんですよ。

カテゴリ別に分けても良いんですが、やっぱり投稿日で記事が並びますよね。それだとお勧めしたい記事を読んでもらうことができない。それに、ユーザーがカテゴリに飛んでくれるとも限らないんですよね。

それなら、トップページとカテゴリページをそれぞれ作って、お勧めできる記事だけリンクを貼るようにするべきかなと。カテゴリページは別に後ろに流れてもリンクを貼れば良いんですが、トップページだけはそうもいきませんから。

何とかして固定でトップページを作りたいと考えたらこの形になりました。

後はリンクをどうつなぐかですが、ページ上にカテゴリごとのリンクを作ろうかなと思っています。もちろんトップページだけはリンクが表示されないようにしないといけませんけどね。

このやり方は次の機会に紹介します。

 

※CSSを変える時はバックアップを取ってからにしてください。万が一何かあったとしても、管理人は一切の責任を負いません。


転職30代の転職派遣から正社員ニート・フリーターから正社員働き方コラム転職サイト転職エージェント雑記ブログ運営
免責事項

Presented by bunoshi