カメラと子供とおでかけ

栃木在住の二児のパパが日々の生活で気になっていることを分かりやすくまとめます

ブログ初心者向け!PC版はてなブログのトップページをカード型レイアウトにしてみた

こんにちは。まーとんです。

今回は、ブログ初心者の私がブログのトップページをカード型レイアウトにしてみたのでまとめてみます。カード型レイアウトにすることで、見やすくなるし情報量も増えるしでいいことだらけ!おススメです^^

 

 

トップページがこう変わります!

さて、今回のカスタマイズをすると、PC版はてなブログのトップページがこう変わります!

f:id:machapapa2929:20190616081612j:plain

無駄な空間がなくなるし、文字も画像も大きくなるし、いいことばかりですよね^^

 

トップページのレイアウト変更方法

さて、早速ですが、トップページのレイアウトを変えていきましょう!なお、今回の変更は『はてなブログPro』にしていることが前提ですのでご注意ください!

また、変更前にバックアップを取っておくのをお忘れなく!!うまくいかなかったときに元に戻れなくなってしまいますので…^^; 私も変更時にバックアップを忘れて絶望を味わった経験があります。。

※具体的には、デザイン>カスタマイズ>デザインCCSなり、フッタなりを選択し、枠内のコード全てをメモ帳なんかに貼り付けておけばOK!何かあったときには、メモ帳からコピーして再び貼り付ければ復元できます^^b

 

表示形式を選択する

まずは、①設定 > ②詳細設定 > ③トップページの表示形式(PC版) で一覧形式を選択します。

f:id:machapapa2929:20190616081605j:plain

 

デザインCCSにコードをコピペする

 続いて、①デザイン > ②カスタマイズ > ③デザインCCSを選択します。

f:id:machapapa2929:20190616083853p:plain


デザインCCS内に、以下のコードを追記します。…しっかりバックアップは済んでますか?確認してくださいね。エラーが起きても責任は負いかねますよ。

/* トップページカード型 */
@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;
}

.page-index .archive-entry {
  margin-bottom: 20px!important;
  padding-bottom: 20px;
  box-sizing: border-box;
  width: calc(50% - 20px);
}

.page-index .entry-thumb {
  float:none;
  display: block;
  width: 100%;
  height: 200px;
  background-position: center center;
  background-size: cover;
  border-radius: 8px;
}
.entry-thumb-link:hover {
  opacity:0.7;
}
}
.page-index .entry-description{
  display:none;
}
@media (min-width: 768px){
.page-index .archive-entry {
    position: relative;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
}
.page-index .entry-thumb-link {
    order: 1;
    height: 200px;
}
.page-index .archive-entry-header {
    order: 2;
}
.page-index .categories {
    order:3;
}
.page-index .archive-entry-body {
    order:4
}
}

これをコピペしてしまえばOK!!これは、あらかじめ、①本文の抜粋分を抜いてタイトルだけにする設定、②記事タイトルをサムネイル画像の下に配置する設定、にしてありますのでご了承を。

ここまではこちらの記事を参考にさせてもらいました!ありがとうございました^^

blog.minimal-green.com

 

サムネイル画像の見切れを解消する

私はここまでやったときに、サムネイル画像が見切れていたのが非常に気になりましたが、いかがでしょうか?もし気になる場合は以下の対策をやってみてください!

①デザイン > ②カスタマイズ > ③フッタを選択し、以下のコードを貼り付けてください!この操作のときも、フッタ枠内のバックアップは忘れずに!!こちらも責任は負いかねますよ。

<script>
(function(){
    if(document.body.classList.contains('page-index')){
        var elements = document.getElementsByClassName('entry-thumb');
        var re = /https%3A%2F%2F.+\.(jpg|jpeg|gif|png|bmp)/i;
        Array.prototype.forEach.call(elements, function(element) {
            var imageUri = re.exec(element.getAttribute('style'));
            if(imageUri !== null) element.style.backgroundImage = 'url(' + decodeURIComponent(imageUri[0]) + ')';
        });
    }
}());
</script>

これでうまいことサムネイル画像が収まったはずです!

ここの部分はこちらの記事を参考にさせてもらいました!ありがとうございます^^

www.imuza.com 

まとめ

今回は、はてなブログのトップページをカード型レイアウトにして、大幅に見やすくしてみました、というお話でした!文字も画像も大きくなって見やすくなるし、無駄な空間もなくなるしで、いいことずくしだったはず!ぜひチャレンジしてみてくださいね^^b 今度はスマホ版もチャレンジしてみたいと思います。うまくできたら紹介しますので、お楽しみに!

 

関連記事

他にもブログのカスタマイズ方法を紹介しているので、チャレンジしてみてください!

www.ma-tonblog.com

www.ma-tonblog.comwww.ma-tonblog.comwww.ma-tonblog.comwww.ma-tonblog.com