はてな無料ブログで、トップページに記事を一覧表示させる方法
こんにちは、神木剛(かみきごう)です。
前回の続き...ということで、はてなブログでトップページに記事を一覧表示できないか探した所...ありました。
はてなブログの記事一覧(アーカイブ)の表示件数を変更する方法(PC版) - ミニマム コラム
トップページに記事を一覧表示する方法と、表示数を変更する方法が書かれています。
私は、
- デザイン変更
- 一覧記事数の変更
- トップページに設定
という流れで、code 紹介と併せて 進めて参りたいと思います。
アーカイブページ、デザインの変更
はてなブログでは、
「自分のブログURL /archive」と検索すると、アーカイブ(記事一覧)画面が表れます。 まず、ご覧ください。
デザイン変更で、参考にさせて頂いたのは、
私は、以下のように設定しております。
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に要素を追加」欄に以下のコードを貼り付けます。
- 「設定」-「詳細設定」ー「headに要素を追加」に以下のソースを貼り付ける
- 赤字の部分を自分のURLに変更する
- 青字の部分を自分のブログタイトルに変更する
- 「変更する」ボタンを押すのを忘れずに(ページの一番下にあります)
<script type="text/javascript">
if( location.href == '自分のブログURL/'){
location.href='自分のブログURL/archive';
}
</script>
<noscript>
<p><a href="自分のブログURL/archive">ブログ名</a></p>
</noscript>
設定できた時の高揚感が、たまらないですよね 😄!
有志の方に感謝いたします。ありがとうございました!
追記:記事一覧数を変更すると
カテゴリーページが表示されないエラーが発生したので、コードを削除しました。
今後の課題...