はてなブログ（無料版）のトップページを記事一覧形式にするまで。お世話になったブログ様。
子供3人5人家族の家計管理（と雑記）ブログを運営している”ぷろまね”です。
今回は「水曜日のモラトリアム」です。はてなブログ無料版のトップページを記事一覧にするまでを書いていきます。
いつもお世話になっております。ぷろまねです。今日は「○○曜日のモラトリアム」です。
本カテゴリは「ぷろまねさん家の家計簿ブログ」のテーマとはちょっと離れた、テーマの記事を中心にしています。よろしくお願いします。
テーマ説明はコチラから
トップページを記事一覧形式にしたい
ぷろまねは、はてなブログの無料版をつかっているのですが、
こちらトップページが全文形式の表示に限定されていまして、
長文の記事があったりすると、その前の記事を見ようとした場合、
スクロールが大変・・
ということがありました。。
なので、これまでは、記事の途中に「続きを読む」を挟み、
ある程度、見た目もすっきりして良くなったと思っていましたが、、
その後、記事数が増えていくにつれ、段々と トップページの表示が重くなっていく。。
という、状況になってきました。
ぷ：( ﾟДﾟ)うーん、これ以上は無料版では仕方無いのかな・・
と思っていたのですが、、
ある日、読者登録させて頂いています方のブログを見ていく中で、
トップページを記事一覧形式にする方法と言うのを、紹介されているのを
ぷ：( ﾟДﾟ)見つけてもうた・・
というわけで、さっそくやらせて頂きました。
その結果、
無事、トップページを記事一覧形式（本当はトップページにアクセスしたとき自動的に記事一覧ページに移動する）にすることができました。
マルグリさん、やり方ご紹介くださり有難うございました！！
トップページを記事一覧形式にする
・・・で、
確かにトップページを記事一覧することはできたんですけども、、
何というか・・・
ぷ：( ﾟДﾟ)思ってたんと違う・・
ことがありました。。
スマホ側の記事一覧表示が・・見にくい
えー、ぷろまね。あまりデザイン自体はこだわりがなく、
ぷ：( ﾟДﾟ)読みやすさを重視。
しているので、
Minimalismのデザインテーマを選択しています。
で、無事、PC側の表示が記事一覧形式になったので、
ぷ：( ﾟДﾟ)さてさて、スマホの表示はどうなってますかねー。
と覗いたら・・
ぷ：( ﾟДﾟ)ん・・・！！
ぷ：( ﾟДﾟ)見づら！！
な状態だと、思っちゃいました。
主に、以下
が、どーしても、、
ぷ：( ﾟДﾟ)受け入れられん。。
という訳で、何とかしようと思ったわけで、先人のブロガー様の知恵をお借りすることにしました。。
ぷ：( ﾟДﾟ)すごい人がいるものです。。
それでは、順にご紹介します。
１．記事一覧アイキャッチ画像が小さいの対策
記事一覧に表示されるアイキャッチの画像が小さい件、
なぜ、そうなるのかと、調べ調べしましたところ、
こちらの方のブログにその理由が書かれておりました。
※LOGzeudon with はてなブログ様
どうやら、記事一覧のアイキャッチの適切な画像枠は500 × 500 px らしく、
選択した画像の縦、横の比が異なる場合は、長辺を500pxとして縦横比で入れ込まれるらしいです。
ぷろまね、アイキャッチに使っている画像は 630 × 1200 のため、記事一覧に表示される画像のサイズが 630 ： 1200 ≒ 1 ： 2 の状態で組み込まれていることが分かりました。
ぷ：( ﾟДﾟ)マジかいな・・
ということは、この状況を改善する為には、
これまでぷろまねがアイキャッチとして使っていた 630 × 1200 の画像とは別に、
500 × 500 のアイキャッチ専用の画像を
ぷ：( ﾟДﾟ)準備して、新たにアイキャッチ画像に設定する必要がある
ということですよね。
なので、↓の正方形アイキャッチを作って、この記事のアイキャッチ設定としました。
結果はこの記事の最後に載せますね。
２．記事一覧タイトルの文字が小さい、目立たない
Minimalismはもともと、スマホに表示される記事の文字サイズは15と小さいので、
これについては、17にして大きめ表示をしています。
ただ、ぷろまね、やったのは、記事内の文字サイズだけで、
それだけでは、記事一覧のタイトルのサイズは変わらないんですよね。。
ですけど、こちらの方のブログに
記事一覧の文字サイズを変更するCSSコードが書かれていましたので、
そのままコピペ対応することにしました。
文字サイズを大きく 且つ 太字 にしたいと思います。
結果はこの記事の最後に載せますね。
３．記事一覧にあるタグが邪魔なので消したい
これもですね、、
なんだか、配置がずれていて、邪魔でしかないですので、、
消します。
この対応は、こちらのブログ様のお知恵を拝借することにしました
※ DJモぺのねこまんま 様
トップページのタグを消すCSSコードが書かれていましたので、
そのままコピペ対応することにしました。
こちら記事の最後に、結果を出したいと思います。
他にもいろいろ文字サイズを変えたい
基本的に上記3点を対応できれば、ぷろまねとしては満足なので、やってませんが、
他にも、いろんな場所の文字サイズを変更することが出来るみたいです。
参考しましたブログを載せて頂きます。
（カテゴリーと注目記事のフォント）
で、どうなったか？
じゃあ、上記対応した結果、スマホのトップページの記事一覧表示はこうなりました。
ぷ：( ﾟДﾟ)先人たちの知恵って素晴らしいですね。
でも、アイキャッチのサイズ。。
ぷ：( ﾟДﾟ)残りの記事全部更新しなくちゃならないってこと？？
次の記事で150記事目なんですけど・・・
ぷ：( ﾟДﾟ)オワタ・・けど、
読者様の為に頑張りマス。。
というわけで、
また、見やすいやり方ありましたら、ご紹介します。
以上です。
記事一覧へのリンク
◇他の”○○曜日のモラトリアムの記事”はこちら
【○○曜日のモラトリアム】 記事一覧
◇”雑記帳”を適当に流し読みされたい方はこちらから、作成順に入っています
【雑記】記事一覧
まとめページへ
◇まとめページはこちらから m(_ _)mﾍﾟｺﾘ
【ぷろまねさん家の家計簿ブログ】 まとめページ
↓よかったらクリック頂けると記事作成の励みになります。
にほんブログ村
読者登録してもらえたら嬉しいです。
