AFFINGER6でトップページで使えるカードタイプを作る方法【HTML・CSSサンプルあり】

2021年11月27日

当サイトはアフィリエイト広告を利用しています。

疑問

AFFINGER6の通常版でカードタイプを作りたい。

AFFINGER6の通常版ではカードタイプが使えません（EX版や専用テーマJETの場合のみ利用可能）。

トップページをカスタマイズする時に、カードタイプを使えたらいいのにと思うことがあります。

そこで、AFFINGER6で簡易カードタイプが作れるHTMLとCSSを紹介します。

カードタイプのフォーマット

カードタイプを表示できれば、トップページの表示をオリジナルに変更できたりします。

WordPressのコード（PHP）をいじらなくてもHTMLとCSSで表示できます。

この記事で紹介するCSSとHTMLを使います。

  • カードタイプCSS
  • カードタイプHTML

カードタイプCSS

下記のCSSを追加CSSにコピペするか、子テーマで使っているCSSに書きます。

/* card-style */
.card-style-post {
position:relative;
margin-bottom:20px;
border:1px solid #ddd;
box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.1);
}
.card-style-post-image {
z-index:900;
margin:5px;
position:relative;
margin-bottom:5px;
height:130px;
overflow:hidden;
}
.card-style-post-image a img {
display:block;
height:130px;
width:100%;
object-fit: cover;
transition: all 0.3s ease;
}
.card-style-post-image a img:hover {
opacity: 0.5;
}
.card-style-post .card-style-post-category {
z-index:1000;
position:absolute;
top:5px;
left:5px;
background-color: #059de8;
padding:0px 6px;
color:#fff;
font-size:0.7em !important;
}
.card-style-post .card-style-post-category a {
text-decoration: none;
color:#fff;
}

.card-style-post-date {
padding:0 6px;
position:absolute;
bottom:0;
right:0;
color:#ccc;
font-size:0.7em !important;
}
.card-style-post-date i {
padding-right:3px;
}
.card-style-post-title {
margin:10px 15px !important;
font-weight: bold;
line-height: 25px !important;
}
.card-style-post-title a {
color:#333;
font-size:16px !important;
text-decoration: none;
}
.card-style-post-title a:hover {
opacity: 0.5;
}
.card-style-post-text {
margin:0 15px 10px 15px !important;
color:#777;
font-size:0.9em !important;
line-height: 25px !important;
}

カードタイプHTML

次にカード用のHTMLです。

<div class="clearfix responbox50">

  <h2>タイトル</h2>

  <div class="lbox">
    <!--1-->
    <div class="card-style-post">
      <p class="card-style-post-category"><span>カテゴリー</span></p>
      <div class="card-style-post-image">
        <a href="xxxxxxx"><img src="xxxxxxx"></a>
        <p class="card-style-post-date"><i class="st-fa st-svg-refresh"></i>2021/11/11</p>
      </div>
      <div class="card-style-post-content">
        <p class="card-style-post-title"><a href="xxxxxxx">記事タイトルその1</a></p>
        <p class="card-style-post-text">記事の内容その1</p>
      </div>
    </div>
  </div>

  <div class="rbox">
    <!--2-->
    <div class="card-style-post">
      <p class="card-style-post-category"><span>カテゴリー</span></p>
      <div class="card-style-post-image">
        <a href="xxxxxxx"><img src="xxxxxxx"></a>
        <p class="card-style-post-date"><i class="st-fa st-svg-refresh"></i>2021/11/11</p>
      </div>
      <div class="card-style-post-content">
        <p class="card-style-post-title"><a href="xxxxxxx">記事タイトルその2</a></p>
        <p class="card-style-post-text">記事の内容その2</p>
      </div>
    </div>
  </div>
</div>

必要な部分を全て書き込むと、下記のようなイメージになります。

【AFFINGER6でカードタイプを自作】全ての項目を表示させた時のイメージ

カテゴリー（左上）、更新日（右下）、文章の抜粋をはぶくと、もっとシンプルな表示にできます。

//上記のHTMLから下記の行を削除する
<p class="card-style-post-category"><span>カテゴリー</span></p>
<p class="card-style-post-date"><i class="st-fa st-svg-refresh"></i>2021/11/11</p>
<p class="card-style-post-text">記事の内容その2</p>

3項目を削除した時の表示イメージは下記のようになります。

【AFFINGER6でカードタイプを自作】シンプルに表示させた時のイメージ

このサイトのトップページでもシンプル版を使っています。
つながり
つながり

画像を指定する時のポイント

上記のHTMLでは、imgタグのsrcの指定も必要になっています。

画像は、サイズが小さい方がページの読み込み速度がアップします。

今回のカードタイプ表示であれば、画像サイズは300ｘ188あれば十分で、ワードプレスが自動で書き出した画像が使えます。

そのサイズの画像URLを探す時に便利なのが、ブラウザのデベロッパーツールです。

Chromeであれば、URLを知りたい画像の上で右クリックして、メニューから「検証」をクリックします。

画面を右クリックして、メニューから検証をクリックして、Chromeのデベロッパー画面を表示させる

画像URLがいろいろ表示されている中から、URLの末尾に「300x188」が付いているURLを探して、それをimgタグのsrcに指定します。

こうすることで、大きい画像の読み込みを防ぐことができます。

デベロッパー画面で300x188の画像サイズのURLを探す

【まとめ】AFFINGER6でカードタイプを作る方法

カードタイプの表示は、AFFINGER6の通常版では使えないので、HTMLとCSSで自作する必要があります。

紹介したCSSとHTMLを使うと、カードタイプを作成できます。

CSSが分かるなら、自分の好みに合わせて変更してください。

今回紹介した方法は、テキスト部分は手作業で修正が必要なので、トップページなど、限定したところで使うためのものです。

カテゴリー一覧などをカードタイプにしたい場合は、ワードプレス自体の修正が必要になります。

-AFFINGER6
-,