トップページをカード型レイアウト表示など実践した『 はてなブログ 』のカスタマイズまとめ☆その３

最近当ブログで行なった、カスタマイズをまとめてみました。カスタマイズのまとめ記事としては第三弾になります。

しばらくブログ更新をサボっている休んでいる間に、はてなブログでも便利な機能が増えていて、ついつい記事の更新よりも先にカスタマイズをしてしまいました(*´∀｀*)

そこで今回も、どこのサイトを参考にしたのかを分かりやすくするために、一覧にまとめることにしました。そうするとまた後で見直すことがあっても、調べ直す必要がないので安心です。

ちなみに、前回の第二弾の記事はこちらになります。
www.americalife.net

トップページを『 カード型レイアウト 』に表示

今まで「 続きを読む 」機能も使うことなく、記事全文を表示していました。でもはてなブログでも、トップページが「 一覧形式 」で表示できるようになった(はてなブログPro限定)ので、すぐに変更してみたのですが。。。標準のままだと何かパッとしない感じでイマイチ。

はてな公式ブログでの「 一覧形式 」表示の説明はこちらになります。
● ブログのトップページを「一覧形式」で表示できるようにしました（はてなブログPro） - はてなブログ開発ブログ

そこで少しでも見やすくてオシャレな感じにしたいと思い、探して見つけたのが『 カード型レイアウト 』の表示です。これだと画像も大きくて、縦型の二列に表示されるのでスッキリして見やすいです。

参考にしたのはこちらのサイトです。
● はてなブログのトップページ一覧表示機能を利用してカード型っぽいレイアウトにするカスタマイズ – つばさのーと

当ブログでの変更箇所

スマートフォン表示では、カード型レイアウトの非対応。

レスポンシブ対応のテーマのため、そのままだとスマートフォンでも同じように二列表示となり見づらくなるので、CSSに赤文字部分を追加しました。

このブログのテーマはカスタマイズがしやすい『 Spirea 』を使用しています。ブレークポイントは680pxとなっています。

@media (min-width: 768px){
.page-index .archive-entries {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;

＊ブレークポイントはここでは768pxにしていますが、テーマに合わせて適宜調整して下さい。

引用:はてなブログのトップページ一覧形式表示を使ってカード型レイアウトに - Hatena Blog Theme Custom

日付の表示場所を画像内の左上から、画像下の左へ変更。

どうしてそうなるのかはハッキリと分かりませんが、CSSコードの以下の箇所を削除したら変更されました。

.page-index .date{
position: absolute;
top: 0;
left: 0;
z-index: 10;
}

画像内に表示させたくなかったので、とりあえず試した結果こうなりました。

カテゴリーの表示場所を画像内の右上から、画像上の左へ変更。

日付と同じでよく分かりませんが、CSSコードの以下の箇所を削除したら変更されました。

.page-index .categories{
order: 4;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}

画像内に表示させたくなかったので、これで今のところは満足です。

トップページのサイドバーの『 最新記事一覧 』を非表示(記事ページには表示)

トップページをカード型レイアウトに変更したので、そのままだとサイドバーにも最新記事が表示され重複することになります。記事ページには表示させ、トップページにはどうにか非表示にできないかと、探したら非表示にする方法を見つけました。

参考にしたのはこちらのサイトです。
www.yellowpadblog.com

説明もわかり易くて簡単に変更できました。トップページを一覧表示にしているなら、これはオススメの設定です。

はてなブログ公式の記事下『 関連記事 』のカスタマイズ

はてなブログでもようやく記事下に、『 関連記事 』を表示できる機能ができました。今までは表示させるためには、カスタマイズをする必要がありました。でもこれからはそんなことをしなくても、簡単に表示ができるので助かります。

はてな公式ブログでの「 関連記事 」表示の説明はこちらになります。
● 記事下に「関連記事」を表示します - はてなブログ開発ブログ

そこでさっそく設定しましたが、標準だとシンプル過ぎるのでサイトのイメージに合うようにカスタマイズしてみました。

参考にしたのはこちらのサイトです。
design.syofuso.com

まとめ

いつもそうですが、カスタマイズはやり始めるともっとこうしたいああしたいと思いだして、どんどん止まらなくなってしまいます(о´∀`о)そして時間がかかる割りには、あまり変化がないような。。。

今回も頑張ったつもりでしたが、そんなんでも無かったみたいですヾ(´ε｀;)ゝ ふぅ。。。もっとサクサクっと出来るように、CSSとか理解できるように頑張ってみます。