MILCPOT

将棋のことなど

MENU

【はてなブログ無料版導入2】ブログのテーマを決めよう。無料版でもカード型デザインに。

f:id:MILC:20200501165646p:plain



サクっとブログを開設したら、次はデザインテーマを選ぶことになると思います。

はてなブログでは、用意されたテーマを適用することにより、webの特別な知識を必要とすることなく、自分のブログを格好よくデザインすることができるようになっているんです。

こちらにかっこいいデザインテーマがたくさん用意されていますので見てみてください。

テーマ ストア - はてなブログ

 

 それらの中でも特に使ってみたいと思ったのが「カード型デザイン」のブログテーマです。このあたり。

blog.hatena.ne.jp

blog.hatena.ne.jp

blog.hatena.ne.jp

 

トップページにカードのように記事が配列されていて、非常に見やすくなっているため、いずれも非常に人気のテーマとなっています。

 

私はシンプルで使いやすそうなUnderShirtを使ってみることにしました。

 

 

しかし、ここで大きな問題が。

 

はてなブログ無料版だと、広告表示の関係でレイアウトが崩れてしまうため、カード型デザインのトップページが使えないようなんです。

 

これは困りました。

 

 なんとかする方法はないだろうか・・・と調べてみたところ、かなり裏技気味ですが、やり方を見つけました。

 

アーカイブページ(記事一覧ページ)を事実上のトップページにしてしまおうというやや強引な手法があるんです。

古い記事ですが、こちら参考にさせていただきました。

dokuwohaku.hateblo.jp

 

具体的には、「管理画面」の「設定」から、上のタブの「詳細設定」を選び、下のほうの「検索エンジン最適化」のところにある「headに要素を追加」のところに、

<script type="text/javascript">
if( location.href == 'https://milc.hatenablog.com/'){
location.href='https://milc.hatenablog.com/archive';
}
</script>
<noscript>
<p><a href="https://milc.hatenablog.com/archive">MILCPOT</a></p>
</noscript>

上のソースコードをコピーします。(URL部分3か所とブログタイトル部分は自分のものに変更してください。)

 

これでトップページを開くとアーカイブページ(/archive)に転送されるようになり、2列のカード型デザインで表示されるようになっているはずです。

 

やや裏技的な手法だけに、検索エンジンの評価が落ちるなどの弊害があるかもしれませんので、そのあたりを理解した上で利用してください。

 

(※追記)

スマホで見た時にも2列表示にするには、こちらが参考になります。

blog.rokuzeudon.com