2022年1月時点で本ブログはWordPressに移管しました。
当時のカスタム記事になります。はてなブログユーザーは参考ください。
当ブログでははてなブログ時代、ブログテーマを「Minimalism」を使用していました。
シンプルなデザインで非常に見やすい構成となっています。
ブログの顔ともいうべきトップページ。
初期設定のシンプルバージョンもありですが、イラストやアイキャッチを重視している場合は少し物足りない感じもします。
トップページでイラストやアイキャッチを目立たせたい。
でもどうやって設定すればいいのかわからない。
設定が難しそう・・・
ブログの世界観や内容によってはこのように思う方も多いのではないでしょうか？
マサ☆ミカ確かにね〜。
このマサ☆ミカ様のかっこいいビジュアルも目立たせてこそっしょ！
マサ☆ミカだ・か・ら、このマサ☆ミカ様直伝のやり方を教えちゃうよ〜！
必殺！コピペ！！
コピペで簡単だから遠慮なく使ってい〜よ〜。
と言うことで備忘録もかねて、
今回は、『トップページ記事一覧をカード型（１列）に変更する方法について紹介します。
※ただしPC画面のみになるので注意ください
・トップページの記事一覧をカード型（１列）に変更する方法
→コピペだけで簡単に設置できます！
ちなみに、このキャラは「マサ☆ミカ」さんです。
はてなブログカスタマイズ【Before→After】
今回ご紹介するアレンジでBefore→Afterどうなるのかイメージになります。
Before
設定前のBeforeです。（当ブログより）
日付、タイトル、アイキャッチ、カテゴリ、説明文と全ての要素が入っていて、シンプルな構成です。
ただ、アイキャッチが小さく少し見切れています。
After
今回紹介する方法でアレンジするとこのようになります。
アイキャッチで設定しているイラストを前面に押し出していて、日付、タイトル、説明文の構成となっています。
カテゴリはアイキャッチ内に入っているので、文言としての表記はあえて削っています。
アイキャッチを前面にした内容にできました。
トップページ記事一覧をカード型(１列)に変更する方法
では具体的な設定方法について説明します。
以下の手順で設定しましょう。
設定方法
では具体的な設定方法になります。
コピペで簡単なので、３分もかからないと思います。
１、javascript設定
まずは以下のコードをコピーします。
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>
続いて、はてなブログの管理画面から、
デザイン＞カスタマイズ＞ヘッダ＞タイトル下にペーストしてください。
２、デザイン→デザイン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分もあれば設定完了！
色々なブログをみていると、カード型の２列は多くあるのですが１列はあまりなく、CSSをアレンジして本設定を作ってみました。
本ブログはイラストを重視しているので１列で表示をしたかったので、PCではイラスト・アイキャッチを目立つようにしました。
簡単に設定できるので、やってみてください！
マサ☆ミカじゃんじゃん使っちゃって〜。
ばいば〜い。よろしこ〜〜。
（参考）はてなブログアレンジ関連記事
コメント