広告 AFFINGER

AFFINGER5【横並びのブログカードの高さを揃える方法】

2021年4月18日

AFFINGER5お知らせ

AFFINGER5でブログカードを横並びにしたときに、カードの高さを揃える方法の紹介です。

  • ブログカード
  • カードスタイル

それぞれの調整方法を紹介していきます。

 

こんな人のお役に立てる記事です。

小豆
小豆
AFFINGER5のブログカードのデザインがお気に入りでよく使う。
でも、横並びにしたときのカードの高さのズレがちょっと気になるんだよなぁ。

AFFINGER5【横並びにしたブログカードの高さを揃える】

ブログ内で、任意の記事に内部リンクをすることができるブログカード。

ブログカード サンプル

ブログカードサンプル

デザインもよく、AFFINGER5では人気の記事装飾ですよね。

TOPページにて、ブログカードを横並びに表示させているブログをよく見かけます。

小豆
小豆
そうそう!
まさに自分もそれなんだけど、カードの高さが合わないんだよなぁ。

 

実際の表示がこれ。

ブログカードの高さが揃わない

せっかくのブログカードデザインも、これでは魅力が半減してしまいますよね。

で、今回紹介する方法で設定を行った場合がコチラです。

ブログカードの高さを整列

大福
大福
やっぱり高さが揃っているのはいいね。
見た目の印象が全然違う。

ブログカードの高さを揃える方法

ブログカードの高さを揃える方法は、実はめちゃくちゃ簡単。

ただし「ブログカード」と「カードスタイル」とでは、方法が異なります。

両者をそれぞれ詳しく解説していきます。

 

ブログカードの高さを揃える

ブログカードの高さを揃える

ブログカードの高さ設定

pc_height="" に同じ高さを設定する

数値を「160~180」くらいで入力すると、うまく表示されることが多いです。

 

ブログカードの高さの指定が反映されるのは、PC(Tab)での閲覧時のみです。

スマホでの表示には対応していません。

小豆
小豆
そうなんだ・・。
ちょっと、がっかり。
でも、そもそも「横並び表示」はスマホ画面には不向きだからね。
大福
大福

縦長のスマホでの横並び表示は、とても見づらくなってしまうので、個人的にはおすすめしません。

というわけで、レイアウトの設定はPCとTabを選択すれば問題なしです。

 

カードスタイルの高さを揃える

カードスタイルの高さを揃える

 

横並びにしたカードスタイルの高さを揃えるには、以下の2つの手順が必要です。

手順

  1. アイキャッチ画像のサイズを揃える
  2. タイトルの長さを調整する

 

step
1
アイキャッチ画像のサイズを揃える

画像サイズを揃える

同じサイズのアイキャッチ画像を使用する

画像サイズの変更は、ペイントなどのソフトで簡単にできます。
ペイント 画像リサイズ 🔎

 

step
2
タイトルの長さを調整する

タイトルの文字数

行数が同じになるように、タイトルの長さを調整します。

タイトル文字数の調整

name=" "に、タイトルを入力

ここでタイトルを変更しても、表示上のタイトルが変更されるのみで、実際の記事タイトルには影響しません。

カードスタイルの高さが揃った

タイトルの長さを調整することで、カードの高さがピッタリと揃いました。

 

サムネイル画像設定

当ブログの「サムネイル画像の設定」を参考までに載せておきます。

サムネイル画像設定

WordPressメニュー → AFFINGER5管理 → デザイン → サムネイル画像設定

設定変更後は、忘れずにsaveをクリックします。
ブログ全体の設定が一括変更されるので、バックアップをとってからの変更をおすすめします。

カードスタイルの表示方法

小豆
小豆
高さを揃える方法はわかったけど、実は「カードスタイル」の表示方法がわからない。
「カードスタイル」の表示方法は、確かにちょっと複雑かもね。
大福
大福

というわけで、一連の流れを動画にしました。

 

カードスタイル設定

カードスタイル設定

動画内で行っていること

  1. 横並び表示を設定
  2. カードスタイルを選択
  3. 枠内にカードタグを挿入
  4. 最後にデフォルトのテキストを削除

 

まとめ:見栄えのいいブログカードを設置しよう

ブログカードを横並びで使用する際は、カードの高さにも気を配りたいですね。

細かいことですが、ブログの見た目が断然よくなるのでおすすめです。

 

  • 関連記事

 

AFFINGER利用者向けオリジナル特典の販売

\ AFFINGER6にも対応済み /

オリジナル特典バナー

AFFINGERをすでに利用しているユーザー向けの「カスタマイズ&役立つテクニック」集です。

目的に合わせて、以下の2つを用意しました。

  • AFFINGER5利用者向けカスタマイズ集 9選
  • AFFINGER利用者向けカスタマイズ&役立つテクニック 14選

 

2022年1月1日より期間限定で割引販売いたします。
・利用者向けカスタマイズ集 9選:2,980円 → 2,480円
・カスタマイズ&役立つテクニック 14選 4,980円 → 3,980円

 

特典詳細ページへ移動する

Sponsored Links

  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴5年目。
当ブログのアクセス数は月7万PVほど。
月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。
人懐っこい性格ですが、人見知りです。

-AFFINGER