Vintage-code.(ヴィンテージ コード)

Vintage code.

(ヴィンテージ コード)

はてな無料ブログで、トップページに記事を一覧表示させる方法

 

こんにちは、神木剛(かみきごう)です。 

前回の続き...ということで、はてなブログでトップページに記事を一覧表示できないか探した所...ありました。 

 

はてなブログの記事一覧(アーカイブ)の表示件数を変更する方法(PC版) - ミニマム コラム

トップページに記事を一覧表示する方法と、表示数を変更する方法が書かれています。

 

私は、

  1. デザイン変更
  2. 一覧記事の変更
  3. トップページに設定

という流れで、code 紹介と併せて 進めて参りたいと思います。

 

 

アーカイブページ、デザインの変更

はてなブログでは、

自分のブログURL /archive」と検索すると、アーカイブ(記事一覧)画面が表れます。 まず、ご覧ください。


デザイン変更で、参考にさせて頂いたのは、

cqs4live.hateblo.jp

 

私は、以下のように設定しております。 

See the Pen アーカイブページのデザイン by Gou Kamiki (@vintage_code_01) on CodePen.

 

 

次に、記事一覧数を変更します。

 ここから冒頭で紹介させて頂いたブログ、ミニマム コラム さんを参考にして参ります。

 

デザイン > カスタマイズ > フッター にコードを貼り付けます。

私はコードの5行目の数字を7に変更し、トップページに表示される記事一覧の数を7に変更しています。

コードの中ほどにある「これ以前の記事を表示する」の記述を変更すればボタン名を変更できます。

  

枠線を消すカスタマイズも実装済みです。

ボタン・デザインをアレンジしています。 

See the Pen トップページの記事一覧数を変更する方法 by Gou Kamiki (@vintage_code_01) on CodePen.

 

 

最後に、トップページを記事一覧に設定します。

はてなブログの管理ページから、

設定 → 詳細設定 と進み、「headに要素を追加」欄に以下のコードを貼り付けます。

  1.  「設定」-「詳細設定」ー「headに要素を追加」に以下のソースを貼り付ける
  2. 赤字の部分を自分のURLに変更する
  3. 青字の部分を自分のブログタイトルに変更する
  4. 「変更する」ボタンを押すのを忘れずに(ページの一番下にあります)

  

code

<script type="text/javascript">

if( location.href == '自分のブログURL/'){

location.href='自分のブログURL/archive';

}

</script>

<noscript>

<p><a href="自分のブログURL/archive">ブログ名</a></p>

</noscript>

 

設定できた時の高揚感が、たまらないですよね 😄!

有志の方に感謝いたします。ありがとうございました!

 

 

f:id:vintage-code001:20191110175408p:plain

 

 

追記:記事一覧を変更すると

カテゴリーページが表示されないエラーが発生したので、コードを削除しました。

今後の課題...