はてなブログの始め方使い方~超簡単作成カスタマイズ初心者マニュアルガイド

5分で終了!無料版はてなブログのトップページをカスタマイズ

はてなブログではトップページに、投稿した記事が全文表示されてしまいます。

この記事を一覧表示にする機能は有料版でしか用意されていません。

そこで無料版では、通常の方法とはちがうやり方で一覧表示形式にします。

はてなブログのトップページのカスタマイズ

まず、「ダッシュボ-ド(管理画面)」から「設定」をクリックします。

さらにその画面で「詳細設定」タブを選択。

その中のかなり下の方にある「検索エンジン最適化」の項目に移動してください。

設定でHTMLコードをコピペする(はてなブログ無料版)

さらにその中の下部に位置する「headに要素を追加」の入力枠に、以下のHTMLコードをコピー&ペーストします。

 

<script type="text/javascript">
if( location.href == 'https://***/'){
location.href='https://***/archive';
}
</script>
<noscript>
<p><a href="https://***/archive">ブログタイトル</a></p>
</noscript>

 

赤い部分は、「あなたのブログのURL」に

青い部分は、「あなたのブログのタイトル」に

それぞれ変更してください。

以上でトップページが記事の全文表示形式から一覧表示形式に変更されます。 

この方法は有名ですが、たまにうまくできないと耳にすることがあります。

エラーの一番の原因はスペルミスが多いので、どこか間違っていないかよく確認してください。

それでもうまくいかない場合はコピー元のHTMLコードが間違っている可能性があります。

単純なスペルミスからHTMLコードが古すぎる場合など。

 別のコピー元を探してください。たくさんのサイトで紹介されています。

ちなみにこのブログのHTMLコードは2020年7月の時点で成功したモノです。

 

注意!(スマホのトップページ)

ちなみに変更されるのはPC版のトップページだけです。

スマホのトップページは、このままでは必ず変更されるわけではありません。

スマホで変更を反映させるには、「ダッシュボード」の「デザイン」を確認してみてください。

スマホページのカスタマイズ

「デザイン」の中のスマホ型のアイコン(スマートフォン)を選択。

その中の「詳細設定」の一番上で「レスポンシブデザイン」の前のボックスにチェックが入っている必要があります。

入っていれば、スマホでも反映されます。確認してみてください。

ちなみに「レスポンシブデザイン」のボックスにチェックを入れるには、あらかじめ選んでいるブログの「デザインテーマ」がレスポンシブル可能なテーマになっている必要があります。

↓ おすすめ