はてなブログのデザイン「Minimalism」で、トップページの記事一覧をカード型の表示にする方法
はてなブログ「Minimalism」のトップページをカード型表示にする方法
はてなブログのデザイン「Minimalism」を使用しているこのブログ。
今回は、記事一覧が表示されるトップページを、カード型に表示されるようにしようと思い、ググって実践してみました。
はてなブログ「Minimalism」のトップページについて
Minimalismというデザインをインストールした直後のトップページは、最新記事の記事一覧ページになっていまして。
記事のアイキャッチ画像とタイトル、冒頭の文章の３つがセットで一記事文の枠が表示されていて、それが最新の記事から順に数記事分、下へと表示されている状態。
この表示形式を、上の画像のように、一記事がカードっぽい形で表示されるようにしたくて、色々ググってみて、やっとコピペだけで変更できたものに行き当たったので、それをご紹介します。
注意事項
今回のカスタマイズでは、PC・タブレットのトップページのみがカード型表示になる設定です。
スマホでは、一覧表示のままになりますが、この方が見やすくてよいみたいです。
事前の設定
このカスタマイズ方法は、有料の「はてなブログPro」に入ってないとできないようなので、ご注意を。
トップページの記事一覧をカード型表示に変える方法
今回、参考にさせていただいたサイトはこちらです。↓
【はてなブログカスタマイズ 】トップページ一覧形式をカード型にしてスタイリッシュに！ - こわいものみたさ
では、具体的な手順です！
カラーコードを準備
まず、背景色として使いたい色のカラーコード（＃から始まる6桁の英数字）を調べておきます。
カラーコードはこちらから調べられます。↓
使いたい色のカラーコードをメモ帳にコピペしておきます。
トップページの表示形式を変更
ブログの管理画面の設定→詳細設定→トップページの表示形式→「一覧形式」に変更します。
ちなみに、その下にある「記事数」もお好みの数に変更しておくとよいです。
カード型表示だと横に2記事分表示されるので、偶数の数にしておくのがベター。
最後に、一番下にある「変更する」をクリック。
カード型表示に変えるCSSコードをコピペ
次に、カード型表示にするためのCSSコードをメモ帳にまず書き込みます。
書き込むコードは、上記の参考サイトに掲載されていたCSSコードをまるっとコピーさせていただきました。
この参考サイトに、カスタマイズ内容も書いてくれてます。
今回私がカスタマイズしたのは、アイキャッチ画像の上に表示されるカテゴリの背景色のみ。
コードの中にある「/* カテゴリラベル色(archive) */」の部分です。
「background: #ffc0cb」というところの＃以下を、最初に調べておいたカラーコード6桁に置き換えます。
CSSコードを貼り付ける
編集したコードをコピーして、 はてなブログの編集画面にある、
デザイン→工具マーク→｛｝デザインCSS まで進み、コードを1番下に貼り付けます。
最後に、上部にある「変更を保存する」をクリックして完了です！
これを忘れると変更されませんので、ご注意を。(^^;)
私はCSSが全くわからないので、このトップページをカード型表示にする設定が一発でちゃんと設定できなくて、何度かググって探していったのですが。
今回、参考にさせて頂いたこちらのサイトのおかげで、
【はてなブログカスタマイズ 】トップページ一覧形式をカード型にしてスタイリッシュに！ - こわいものみたさ
悩むことなく、コピペだけで、きちんとカスタマイズできました。(´ｰ｀)
ありがとうございます♡
kayoko＠おうちcafe
はてなブログのデザインテーマ「Minimalism」のインストールからカスタマイズまでの実践集 ↓
