【AFFINGER（アフィンガー）】記事一覧をカスタマイズ！おしゃれに、かっこよく、かわいくデザインする方法

アフィンガー（AFINGER）のトップページなどに「記事一覧」を設置することは多いですが、記事一覧もかわいく（かっこよく）デザインしたいものです。AFFINGER の標準機能でもアイキャッチを大きくしたりなど、ある程度のデザインはできますが、もっと変えていきたいときもあります。

ポイント

本記事では、

「記事一覧」をかわいくデザインする方法を解説します。

記事一覧もデザインしちゃいましょう！

＼AFFINGER でオシャレサイトを作る方法はこちらをクリックしてください／

1 記事一覧をかわいくデザインした例
2 記事一覧のカスタマイズ方法
3 まとめ：記事一覧をかっこよく（かわいく）デザインする方法

記事一覧をかわいくデザインした例

Point.

記事一覧
デザイン例

記事一覧をかわいくデザインしたサンプル（例）です、動画でご紹介しています。

再生してご覧くださいませ。

記事一覧のアイコンやフォントを大きくして見やすくするとともに、マウスオーバーで記事一覧の記事部分を背景色を変えて少し浮き上がらせています。

実際のカスタマイズ方法を紹介します。

記事一覧のカスタマイズ方法

Point.

記事一覧
カスタマイズ方法

■ サムネイル画像を大きくかわいくする

サムネイル設定

サムネイル画像をかわいくします。大きく表示することでアフィンガー感を無くし、ユーザーにかわいく見せる雰囲気を出します。

WordPress の管理画面から「AFFINGER 管理」→「全体設定」を選択します。

「正方形にする」をチェックする
「サムネイル画像をポラロイド風にする」をチェックする
「セロテープをつける」をチェックする
「PC（960pc以上）のサムネイル画像を大きくする」をチェックする
「サムネイル画像をさらに大きく」をチェックする

■ カテゴリーアイコンを表示

カテゴリー表示

記事一覧にカテゴリーアイコンを表示します。

WordPress の管理画面から「AFFINGER 管理」→「投稿・固定記事」を選択します。

「記事一覧・関連記事一覧などにカテゴリを表示する」をチェックする
「記事一覧のカテゴリを下に表示」をチェックする

■ 記事一覧のタイトル文字を大きくする

タイトル大きく

タイトル文字を大きく見せることで、かわいさを増します。CSSで変更します。

WordPress の管理画面から「AFFINGER 管理」→「全体設定」を選択します。

「スマホ（～599px）閲覧時」の記事一覧のサイズを 18 にする
「タブレット（959px～600px）閲覧時」の記事一覧のサイズを 18 にする
「PC（960px以上）閲覧時」の記事一覧のサイズを 36 にする
「PC（960px以上）閲覧時」の記事一覧の行間を 48 にする

■ 浮き出る演出

浮き出る演出

マウスオーバーで記事一覧の背景色が変わり、浮き出る演出です。一気に華やかになりますね。

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

追加CSSにコードを追記する

追記するコードは以下です。

/* 記事一覧カスタマイズ */
article .kanren dl {
  transition: all 0.3s ease;
  padding : 20px;
}

article .kanren dl:hover  {
  background-color: #FEECD2;
  transform: translateY(-10px);
  border-radius : 20px;
}

メインエリア（サイドバーを除く）にするため「article」の「kanren」を対象としています
「kanren」が記事一覧のクラスです
「dl」が一つ一つの記事の固まりとなり、各々装飾しています
背景色を変えたい場合は「#FEECD2」を任意の色に変えてください

■ カテゴリーアイコンをかわいく

アイコン変える

カテゴリーアイコンを丸くかわいい感じに変えます。アフィンガーの設定と、CSSで対応します。

「WordPress」の管理画面から、「外観」→「カスタマイズ」→「見出しタグ（hx） / テキスト」→「カテゴリ」を選択します。

「背景色」を設定する（白を推奨）
「文字色」を設定する（黒を推奨）
「角を丸くする」をチェックする

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

追加CSSにコードを追記する

追記するコードは以下です。

/* カテゴリアイコン */
span.catname {
  border : 1px solid #ffab57;
  font-size : 14px !important;
}

/* 説明とカテゴリアイコンの間をあける */
article .kanren dl .st-excerpt {
  margin-bottom : 10px;
}