AFFINGERのデザインをCSSを使ってよりお洒落にする方法一覧

こんにちは、kei（@KeiKei0815blog）です！

AFFINGERはCSSを使わなくても、デフォルトでお洒落なデザインパーツがすでに用意されています。

ただ、CSSを使うことで、よりお洒落なデザインにカスタマイズができます！そこで、本記事ではCSSを使ってAFFINGERをカスタマイズする方法を一覧にして紹介していきます。

CSSをコピーして貼り付けることで、簡単にカスタマイズできますので、ぜひ参考にしてみてください。

AFFINGER5公式ページ

AFFINGER5を無料でみる

それでは早速始めていきます。

AFFINGER CSSでデザインをよりお洒落にする方法一覧

AFFINGERでCSSを使ってカスタマイズする方法について紹介します。今回は以下です。

『カエレバ』『ヨメレバ』『トマレバ』のカスタマイズ
ブログカードに影をつける
ページネーションのデザイン
引用のデザイン
ページ下のタグリンクの背景色

※CSSを編集するので、事前にバックアップしておくことをオススメします。

関連

: 【便利！】UpdraftPlusプラグインを使ってバックアップする方法【2021年版】

続きを見る

その①：『カエレバ』『ヨメレバ』『トマレバ』のカスタマイズ

まずは、カエレバ・ヨメレバ・トマレバのカスタマイズ一覧です。

CSSを追加するだけで以下のようなお洒落なデザインが実装できちゃいます！

APPLE MacBook Air MQD32J/A Core i5 8,192.0MB 128.0GB

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

詳しくは以下記事で紹介していますので、参考にしてみてください。

関連

: 『カエレバ』『ヨメレバ』『トマレバ』でカッコよくカスタマイズ！【アフィンガー編】

続きを見る

その②：ブログカードに影をつける

ブログカードの後ろに、影をつける方法です。

周りに影をつけることでボタンが突き出てるようにみえ、オンマウスすると、ブログカードが押せるような感じにしてます。

『ブログカードを目立たせたいな〜』という方は参考にしてみてください。

関連

: 【お洒落！】AFFINGER5ブログカードのボックス周りに影をつける方法

続きを見る

その③：ページネーションのデザイン

AFFINGERには、トップとカテゴリートップのページ下に「ページネーション」がありますね。

このボタンをちょっとお洒落にカスタマイズする方法を、以下記事で紹介しています。

関連

: 【コピペだけ！】AFFINGERでページネーションのデザインをお洒落にする

続きを見る

その④：引用のデザイン

引用のデザインカスタマイズです。

以下のように、お洒落な引用デザインに変更できます。

ダミーテキストダミーテキストダミーテキスト

※ちなみに、AFFINGERでは、引用の背景色を変えるには、サイドバー「外観 → カスタマイズ → [＋]各テキストとhタグ（見出し） → 引用部分の背景色」からできます。

このお洒落なデザインにするには、サルワカさんのサイトで引用のCSSタグが用意されています。

コピーアンドペーストするだけで、お洒落な引用デザインが作成できちゃいますよ！ただ、少しだけ変える必要がありまして、CSSセレクターを「blockquote」→「.post blockquote」にしてあげます。

 変更前
blockquote {
position: relative;
padding: 10px 15px 10px 60px;
box-sizing: border-box;
font-style: italic;
background: #f5f5f5;
color: #777777;
border-left: 4px solid #9dd4ff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}
blockquote:before{
display: inline-block;
position: absolute;
top: 7px;
left: 0;
content: "“";
font-family: sans-serif;
color: #9dd4ff;
font-size: 90px;
line-height: 1;
}
blockquote p {
padding: 0;
margin: 7px 0;
line-height: 1.7;
}
blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}

 変更後
.post blockquote {
position: relative;
padding: 10px 15px 10px 60px;
box-sizing: border-box;
font-style: italic;
background: #f5f5f5;
color: #777777;
border-left: 4px solid #9dd4ff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}
.post blockquote:before{
display: inline-block;
position: absolute;
top: 7px;
left: 0;
content: "“";
font-family: sans-serif;
color: #9dd4ff;
font-size: 90px;
line-height: 1;
}
.post blockquote p {
padding: 0;
margin: 7px 0;
line-height: 1.7;
}
.post blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}

上記、赤文字箇所「blockquote」の前に「.post」をつければOKです。

その⑤：ページ下のタグリンクの背景色

ページ下のタグ管理の背景に色をつけるCSSです。（かなり細かいですが...）

ページ下のタグ管理の色を変えるには以下のCSSを貼ります。

 CSS
.tagst a {
padding: 0 10px;
background: #6a91c1;
color: #fff!important;
text-decoration: none;
margin: 0 2px;
font-size: .8rem;
line-height: 1.5rem; 
}