ひとりごと

ひとりごと

アラフォー兼業主婦の独り言

無料版はてなブログのトップページを何とかして欲しいけど、どうにもならないから先輩の知恵をお借りした

無料版はてなブログのトップページを何とかして欲しいのです。

「有料にすればええやん。」

と言われそうですが、無料で使わせてもらっているさんがつです。

さて、この無料はてなのトップページですが、記事の一覧表示が出来ません。
どうしてもやりたい方は、トップページをアーカイブページに飛ばす方法しかありません。

qiita.com

で、続いてこれをやるとスマホで永遠にスクロールするジレンマが発生します。(50記事位スクロールが必要)そこで、

blog.wackwack.net

無料版でも出来る方法が載っておりましたよ。

はてなブログは、HTML、CSSの変更が別々に存在しますので少々手間ですが、その分誤って消すという事が無いので良いですね。

書き込み場所が良くわからないので、2つとも記載しております・・・。
他に良い方法があるとは思いますが・・・。

で、完成後の画像がこちらです。 

f:id:sangathu:20180930141756p:plain

はてなの広告が一番先頭に載っています。無料だから仕方ないですねぇ・・・)

実は何度かこの方式を採用していた時期も有るのですが、スマホ表示のサムネイルが大きくて敬遠していました。

一覧表示をしたのに、画像が大きすぎて、結局スクロール数が多いとか意味不明ですよね。

その代わりに、ヘッダーナビゲーションを追加して「記事の一覧を表示」の項目を作っていました。

 

ですが、グーグルクロームの「デベロッパーツール」からタグを見るという事を始めてから、薄らぼんやりCSSの変更が分かって来ました。

ですので、サムネイル画像・余白・文字を小さくして、コンパクトに表示が出来る様になったので採用です。

 

需要があるかどうかなのですが、スマホ表示のCSSを追加して、適当に変更したい場所を書き込んだものを貼っておきます。 

@media screen and (max-width: 768px){
.page-archive
.entry-thumb{
width: 80px;
height: 80px;
}
.page-archive
.categories a{
font-size: 14px;
}
.page-archive
.archive-entry {
margin-bottom: 6px;
padding-bottom: 6px;
}
.archive-entry-body
.entry-description{
font-size: 14px;
line-height: 1.7;
margin: 6px;
}
.entry-title{
font-size: 18px;
}
}

素人初心者なので不備があれば教えて下さい。
「.page-archive」の項目が重複しているので、他に方法がありそうです。

私が使っているテーマの設定なので、他で上手く行くかも不明です。

ただ、テーマの変更を行ってもCSSはある程度引き継ぎが出来るみたいですので、もしかしたら出来るかもです。

 

はてなブログの変更画面は文字が小さいので、何度も見るのが嫌になりましたので、この辺りで今日は終わります。

 

グーグルの回し者では無いのですが、無料で広告がないbloggerというプラットフォームがあります。
別サイト、「さんがつ日記」にてbloggerのテーマ「vaster2」で初心者のカスタマイズ記事も書いています。興味のある方は覗いて見て下さい。

nikki.sangathu.org

Vaster2のカスタム一覧|さんがつ日記

 

はてなでも、また気が向いたらカスタマイズ記事を書いてみたいです。