bunoshi

転職と働き方を考えるブログ

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

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

ブログを運営していると、トップページを固定ページにしたいことがありますよね。

この記事でははてなブログでトップページを固定で作る方法について説明しています。

投稿日を未来にする

トップページですから、記事を更新するたびに後ろに移動されちゃ困りますよね。

なのでトップページとして固定する記事の日付を、未来の日付にします。

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

編集オプションの投稿日時をこれを9999年にします。

9999年じゃなくても、ありえない年数であればOKです。

そして気分でカスタムURLを変えます。

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

またトップページなので、記事を作成するときに続きを読むは設定しません

トップページの記事数を1にする

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

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

これでブログの1ページ目を固定ページにすることができました。

ですがまだ邪魔なものが残っています。

それは「日付」や「記事タイトル」などです。

これも邪魔ですよね。

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

なので邪魔なものをひとつずつ消していきます。

日付や記事タイトル、ページ送り等の消し方

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

上の画像の番号と、次のコードの番号が一致しています。

コードを記入する場所は、記事作成画面の「HTML編集」です。


<style type="text/css">
<!--
①.entry-date { display:none }
②.entry-title { display:none }
③.entry-header { display:none }
④.entry-footer-section { display:none }
⑤.hatena-star-container { display:none }
⑥.entry-footer { display:none }
⑦.social-buttons { display:none }
⑧.comment-box { display:none }
⑨.pager { display:none }
-->
</style>


コピーして使う場合は数字を消してください。

記事作成画面のHTML編集画面でCSSを書き込む場合は、「<style type="text/css">」と「</style>」で囲みます。

ちなみに・・・③と⑥と⑨を使って消すと次のようになります。

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

だいぶすっきりしますよね。

あとは記事作成で、好きなようにデザインすればトップページが完成します。

CSSに書かない理由

はてなブログは<style type="text/css">を使うことで、HTML編集にCSSを書き込むことができます。

記事単体に書いたCSSは、その記事にしか反映されません。

トップページを作る方法として、「.page-index」と「display: none;」を使い、Indexページだけ日付などを消す方法があります。

ただしこの場合はIndexページを表示しないと、CSSが反映されません。

つまり・・・

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

トップページ(Indexページ)では、左のように表示されても、記事ページでは右のように表示されてしまいます。

万が一記事ページで見られたら、格好悪いですよね。

なので記事作成ページのHTML編集画面で、記事に直接CSSを書き込んでいます。

最新記事・アーカイブから一番上を消す

最新記事やアーカイブにトップページが表示されているのは、おかしいですよね。

なのでCSSに次のコードを書き込んで消します。


/* 最新記事の一番上を消す */

.recent-entries-item:first-child {
display: none;
}

/* アーカイブの一番上を消す */
.archive-module-year:first-child {
display: none;
}


ここでもひとつ注意してほしいことがあります。

はてなブログでは最新記事を、カテゴリを指定して表示させることができます。

が、最新記事の一番上を消すと、カテゴリを指定した場合でも一番上が消えます(笑)

複数のカテゴリで最新記事一覧を設定すると、全ての一番上が消えてしまいます。

さて、どうしたものか・・・。

最後に

あとは自由にトップページを作るだけです。

記事一覧の消し方は、また時間があったら考えます。

トップページ以外にカテゴリを設定して、カテゴリ指定で最新記事を表示するしかないのかなぁ。

 

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


免責事項 お問い合わせ

Presented by bunoshi