トップ > ブログ > はてなブログの記事一覧をカード型にカスタマイズする

はてなブログの記事一覧をカード型にカスタマイズする

ブログ

 

 

はてなブログの記事一覧をカード型にカスタマイズする

はてなブログの記事一覧をカード型にカスタマイズする

 

みなさんこんにちは、jです。

 

はてなブログの記事一覧をカード型にしたい！

 

こんな悩みを解消していきます。

 

本記事の内容

・はてなブログの記事一覧をカード型にカスタマイズ

・カード型にした時のアイキャッチ画像比率

・はてなブログのカスタマイズが手間な方におすすめのテーマ

 

本記事でははてなブログの記事一覧をカード型にカスタマイズする方法をまとめていきます。

 

標準の記事一覧でもいいんじゃないの？

確かに良いのですが、カード型にすると以下の効果が期待できます。

・サイトがシンプルでおしゃれになる

・タイトルが見やすくなる

・アイキャッチ画像が映える

・アイキャッチからの閲覧が増える

 

どうでしょう、導入するメリットが沢山ありますよね。

コピペで簡単にできますので、ぜひ参考にしてみてください！

 

< 今ならPro利用で独自ドメインを無料でゲット >

はてなブログProはこちら

 

 

参考にさせていただいた記事

今回カスタマイズするにあたって、フジグチさんの記事を参考にさせていただきました。

 

”楽しくデザインする”をコンセプトに発信しているフジグチさん。

掲載している記事はどれもシンプルでおしゃれなデザインサンプルばかり。

 

はてなブログのカスタマイズもいくつかあり、毎回本当に参考にさせていただいています。

 

サイトをカスタマイズしたい！

という方はぜひフジグチさんの記事を参考にしてみてください！

www.fuji-blo.com

 

【大前提】はてなブログProにグレードアップ

今回の記事ははてなブログProの方向けとなっています。

 

はてなブログProははてなブログの有料版。

 

はてなブログProにするメリットはあるの？

主に以下のメリットが挙げられます。

・独自ドメインが利用できる

・固定記事の作成が可能

・写真容量が300MB→3GBにUp

・ブログを最大10サイト作成できる

 

かなりメリットがあり、月額約600円から利用できます。

本ブログもはてなブログProを利用しています！

 

< 今ならPro利用で独自ドメインを無料でゲット >

はてなブログProはこちら

 

はてなブログの記事一覧をカード型にカスタマイズ

さっそくはてなブログの記事一覧をカード型にカスタマイズする方法をご紹介していきます。

 

コピペでほぼ完結し、早ければ3分ほどで完了します。

かんたんですので、一緒にカスタマイズしていきましょう！

 

表示形式を一覧形式に変更

まずは記事一覧の表示形式を一覧形式に変更します。

 

はてなブログの設定 → 詳細設定 → ブログ表示

部分に”トップページの表示形式”という項目があります。

 

・全文形式

・一覧形式

と２つありますので、”一覧形式”を選択しましょう。

 

下にスクロールして変更するボタン押してしっかり保存します。

 

cssをデザインに貼り付け

次にcssをデザインに貼り付けていきます。

 

今回使用するcssはこちらです。

/***  オーソドックスなカード型デザイン  ***/
.page-archive .archive-entries {
    display: flex;
    flex-wrap: wrap;
}

.page-archive .archive-entries .archive-entry {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 0 0 5px;
    margin-bottom: 1.5em;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 0;
    transition: .25s ease-in-out;
}

.page-archive .archive-entries .archive-entry:hover {
    transform: translateY(-4px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

@media (min-width: 481px) {
    .page-archive .archive-entries .archive-entry {
         width: calc(50% - 10px);
}
    .page-archive .archive-entries .archive-entry:nth-child(odd) {
        margin-right: 20px
    } 
}

.archive-entry-header {
    display: flex;
    flex-direction: column-reverse;
    order: 2;
    padding: 10px 16px 0;
    width: calc(100% - 32px);
}

.page-archive .archive-entries .entry-title {
    line-height: 1.5;
    font-size: 18px;
    margin: 0;
    padding: 0;
    font-weight: bold;
}

.page-archive .entry-title a {
    font-size: 18px;
}

.page-archive .archive-entries .entry-thumb-link {
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    width: 100%;
    height: auto;
}

.page-archive .entry-thumb {
    background-size: cover;
    background-position: 50%;
    border-radius: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.page-archive .archive-entries .categories {
    order: 3;
    margin: 0;
    padding: 0 16px;
}

.page-archive .entry-thumb::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.1);
    opacity: 0;
    transition: .25s ease-in-out;
}

.page-archive .archive-entries .archive-entry:hover .entry-thumb::before {
    opacity: 1;
}

.archive-entry-body {
    display: none;
}

 

上記cssをコピーして

はてなブログのデザイン → カスタマイズ → デザインcss

の中に貼り付けましょう。

 

もしレスポンシブデザインのテーマをご使用の方は同じく

はてなブログのデザイン → スマートフォン → 詳細設定

の”レスポンシブ”にチェックを入れましょう！

 

貼り付けとチェックが終わったら忘れず保存します。

 

記事一覧を確認する

これでカード型にカスタマイズできたはずです。

ブログのトップページを開いてみましょう。

 

はてなブログの記事一覧をカード型にカスタマイズ完成

上記写真のようにカード型になっていればカスタマイズ完了です！

 

え、なってない…

という方はもう一度方法を確認してみましょう。

 

また、中にはスマホ表示でカード型になっていない方もいらっしゃるかもしれません。

その場合は下記記事を参考にしてみてください。

 

 

< 今ならPro利用で独自ドメインを無料でゲット >

はてなブログProはこちら

 

【注意】アイキャッチ画像比率は16:9で作成する

記事一覧をカード型にしたことで１つ注意することがあります。

 

それはアイキャッチ画像比率を16:9で作成することです。

 

これまでアイキャッチ画像を16:9で作成してきた方は問題ありません。

しかし、中には撮影した写真を投稿して、そのままアイキャッチにしている方もいらっしゃるはずです。

 

カード型にするとアイキャッチ画像が目立つようになります。

そのため見切れたり反対に余白ができたりと不自然なアイキャッチが表示される可能性があります。

 

アイキャッチ画像の作成方法や適切なサイズの調べ方はこちらの記事でまとめています。

興味ある方は合わせて読んでみてください。

 

 

カスタマイズが面倒な方はCappuccinoがおすすめ

cssのカスタマイズは良く分からない…

という方へ。

 

はてなブログのテーマ「Cappuccino」がおすすめです。

 

実はこのCappuccino、今回参考にさせていただいたフジグチさんがリリースするテーマなんです。

 

標準である程度のカスタマイズがされており、使いやすさ抜群。

また、レスポンシブ対応でスマホ表示もデザインが崩れることはありません。

 

おしゃれさもあり、ブログ初心者にもおすすめできる今注目のテーマです。

 

テーマを悩んでいる方にもおすすめですよ！

 

＞＞ Cappuccinoを見てみる

 

はてなブログの記事一覧をカード型にカスタマイズ：まとめ

カード型にカスタマイズできたでしょうか？

 

ほぼコピペでできる、非常に簡単なカスタマイズでした。

フジグチさんには本当に感謝ですね！

 

本ブログでは他にもはてなブログのカスタイマイズをいくつかまとめています。

ぜひ参考にしてみてください。

 

以上、はてなブログの記事一覧をカード型にカスタマイズする方法でした！

おすすめ記事

www.j-lifestyle.work