zero-point-five

ブログ運営・イラスト・オリジナルキャラクターを作成して情報発信してます!

【はてなブログ】トップページ記事一覧をカード型(1列)に変更する方法

【はてなブログ】トップページ記事一覧をカード型(1列)に変更する方法

当ブログではブログテーマを「Minimalism」を使用しています。

シンプルなデザインで非常に見やすい構成となっています。

 

ブログの顔ともいうべきトップページ。

初期設定のシンプルバージョンもありですが、イラストやアイキャッチを重視している場合は少し物足りない感じもします。

トップページでイラストやアイキャッチを目立たせたい。
でもどうやって設定すればいいのかわからない
設定が難しそう・・・

ブログの世界観や内容によってはこのように思う方も多いのではないでしょうか?

確かにね〜。
このマサ☆ミカ様のかっこいいビジュアルも目立たせてこそっしょ!

だ・か・ら、このマサ☆ミカ様直伝のやり方を教えちゃうよ〜!
必殺!コピペ!!
コピペで簡単だから遠慮なく使ってい〜よ〜。 

と言うことで備忘録もかねて、

今回は、『トップページ記事一覧をカード型(1列)に変更する方法について紹介します。

※ただしPC画面のみになるので注意ください

 

この記事でわかること!

・トップページの記事一覧をカード型(1列)に変更する方法
 →コピペだけで簡単に設置できます!

ちなみに、このキャラは「マサ☆ミカ」さんです。

誰?というのはこちらの記事で。 

www.zero-point-five.com

 

はてなブログカスタマイズ【Before→After】

はてなブログカスタマイズ【Before→After】

今回ご紹介するアレンジでBefore→Afterどうなるのかイメージになります。

 

Before

設定前のBeforeです。(当ブログより)

before

 

日付、タイトル、アイキャッチ、カテゴリ、説明文と全ての要素が入っていて、シンプルな構成です。

ただ、アイキャッチが小さく少し見切れています。

 

After

今回紹介する方法でアレンジするとこのようになります。

After

 

アイキャッチで設定しているイラストを前面に押し出していて、日付、タイトル、説明文の構成となっています。

カテゴリはアイキャッチ内に入っているので、文言としての表記はあえて削っています。

アイキャッチを前面にした内容にできました。

  

トップページ記事一覧をカード型(1列)に変更する方法

はてなブログカスタマイズ【表示・非表示設定方法】

では具体的な設定方法について説明します。

以下の手順で設定しましょう。

  

設定方法

では具体的な設定方法になります。 

コピペで簡単なので、3分もかからないと思います。

 

1、javascript設定

まずは以下のコードをコピーします。

<script>
document.addEventListener('DOMContentLoaded', function(){
$(function() {
$(window).bind("load", function(){
if(!(document.URL.match("/archive"))) {
$(".entry-thumb-link").each(function() {
var thumb_link = this;
var xhr = new XMLHttpRequest();
xhr.open('GET', thumb_link.href, true);
xhr.onload = function(e) {
if (e.target.status <= 200) {
var d_ = e.target.response;
var eye_catch = $('meta[property="og:image"]', d_)[0].content;
thumb_link.style.backgroundImage = 'url(' + eye_catch + ')';
}
};
xhr.responseType = 'document';
xhr.send(null);
});
}
});
});
});
</script>

続いて、はてなブログの管理画面から、

デザイン>カスタマイズ>ヘッダ>タイトル下にペーストしてください。

 

2、デザイン→デザインCSSにコードコピペ

次にデザインCSSにコードをコピペします。

 

以下のコードをコピーします。

/* PCのみトップページカード型 */
@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-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{
background :#ffffff; /*カードの背景*/
width: 100%; /*横幅(1カラム)*/
padding-top:450px; /*アイキャッチの分+10pxあける*/
padding-left:7px; /*左に間隔*/
padding-right:7px; /*右に間隔*/
padding-bottom:10px; /*下に間隔*/
position: relative;
box-shadow: 1px 1px 4px #cccccc;
transition: .3s;
border-radius: 4px;
}

/*アイキャッチのサムネイル*/
.page-index .entry-thumb{
display: none;
}
.page-index .entry-thumb-link{
display: block;
width: 100%; /*アイキャッチの横幅*/
height: 440px; /*アイキャッチの縦幅*/
background-position: center center;
background-size: contain;/* 表示域に画像が全て収まるように自動で拡大縮小させる */
background-repeat: no-repeat;/* 余白部分に繰り返し画像を表示させない */
position: absolute;
top: 0;
left: 0;
border-radius: 4px 4px 0 0;
}
/*日付*/
.page-index .date{
padding-top:2px; /*上に間隔*/
padding-left:7px; /*左に間隔*/
}
/*カテゴリ*/
.page-index .categories {
display : none;
}
}
/* PCのみトップページカード型完 */

続いて、はてなブログの管理画面から、

管理画面→デザイン→デザインCSSにペーストしてください。

コード内にコードの役割を記載してあるので、好みでアレンジ可能です。

 

以上で設定は完了です!

 

まとめ

まとめ

以下まとめになります。

・トップページ記事一覧をカード型(1列)にできるの?
 →簡単に変更できます
・設定は難しいの?
 →コピペだけなので、1分もあれば設定完了!

色々なブログをみていると、カード型の2列は多くあるのですが1列はあまりなく、CSSをアレンジして本設定を作ってみました。

本ブログはイラストを重視しているので1列で表示をしたかったので、PCではイラスト・アイキャッチを目立つようにしました。

簡単に設定できるので、やってみてください!

じゃんじゃん使っちゃって〜。
ばいば〜い。よろしこ〜〜。

(参考)はてなブログアレンジ関連記事  

www.zero-point-five.com

www.zero-point-five.com

www.zero-point-five.com

www.zero-point-five.com

www.zero-point-five.com

www.zero-point-five.com

www.zero-point-five.com

www.zero-point-five.com

www.zero-point-five.com

www.zero-point-five.com