【無料】はてなブログProでなくてもできる!記事一覧をトップに表示する方法

【無料】はてなブログProでなくてもできる!記事一覧をトップに表示する方法

この記事は”はてなブログ非Proのブロガーでも記事一覧をトップに表示する方法”について書いてあります。 この記事は約5分ほどで読み終えることができます。今回ははてなProに登録せずに記事一覧をトップに表示したい人向けの記事となっております。

1. はてなProでできること

はてなProでできること

はてなブログの記事を見ていくと著者名に”Pro”と書いてあるユーザーがいますよね。彼らははてなブログProを使用しているユーザーということになります。当初はてなブログを立ち上げるうえで、はてなブログProを導入するか著者は結構悩みました。なぜならはてなブログProになると独自のドメインを使用することができる、広告が表示されなくなる様々な拡張機能が使えるようになるからです。中でもブログ自体のデザインを調整できる機能が非常に魅力的でした。

例えば、ブログの記事一覧をトップに表示できることです。これははてなブログProのユーザーであれば使用することができます(ダッシュボードの設定から詳細設定より変更することができます)。

はてなブログProで表示一覧編集

しかし、今回ははてなブログProのブロガーでも表示形式を一覧形式にする方法について書いていきます。私も一覧形式に変更してみたのですが、やはり見た目がすっきりしています。こうすればより多くの記事に読者が目が通りやすくなりますね(画像を見てもらえばわかる通り、著者もはてなブログPro会員ではありません)。

はてなブログ一覧表示

  • 記事を一覧表示で使用したい
  • スタイリッシュなブログスタイルを使用したい

2. 記事一覧をトップに表示させる方法

1.ダッシュボード>設定>詳細設定>ヘッドに要素を追加を開く

基本的にブログ自体のデザイン調整はCCSや検索エンジンの最適化に必要なコードを導入することで変更可能です。今回はヘッドに要素を追加の部分に記事一覧をトップにするコードを入力します。

はてなブログでヘッドに要素を追加

2.headに要素を追加の部分に以下のコードを導入(コピペ可能)

次に先ほど示した箇所に以下のコードを入力してください(コードはジュッキー様の記事を参考にさせていただきました)。

<script type="text/javascript">
if( location.href == 'https://amazon-roba.hatenablog.com/'){
location.href='https://amazon-roba.hatenablog.com/archive';
}
</script>
<noscript>
<p><a href="https://amazon-roba.hatenablog.com/archive">Life of Donkey</a></p>
</noscript>

赤文字の部分には自身のブログサイトのURLを入力してください。

そして青文字は自身のブログ名を入力してください。

これで、設定を保存すれば完了となります。

 

(以下のブログを参考にさせていただきました。)

corksample.hatenablog.com

終わりに

今回ははてなブログで記事一覧をトップに表示する方法について書かせていただきました。ブログをデザインする際に大変重宝したので、是非皆様にも参考にしていただければと思います。しかし記事一覧表示にすると、”ブログは見られずにスターだけつけられてしまう”デメリットもあるので、デザイン性を取るか、ブログの発信力を取るかTPOでお願いできればと思います。

他にもgoogleマップをブログに埋め込む方法・著作権フリー画像ウェブサイト3選についても書きました!ぜひぜひチェックしてください。

amazon-roba.hatenablog.com

amazon-roba.hatenablog.com

 

最後まで見ていただきありがとうございました。