AFFINGER

AFFINGER5で引用ボックスをカスタマイズする方法【超簡単】

2021年2月5日

ライオンのアイコンとAFFINGER5

悩む学生
AFFINGER55の引用ボックスをカスタマイズしたい、もっとおしゃれにしたいな。

 

今回はこんな悩みを解決します。

 

本記事の内容

  • 引用ボックスのデザインの仕方
  • 引用ボックスの使い方

 

AFFINGER55のデフォルトの引用ボックスのデザインってお世辞にもおしゃれとは言えないですよね。ぼくもどうすればおしゃれになるのか分からず困りました。

 

ですが、実は簡単にこのようにカスタマイズできます。

AFFINGER5の引用ボックスカスタマイズの例

 

カスタマイズできれば、ブログがおしゃれになって読者が離脱しにくくなるのでおススメです。

 

記事はサクッと読めますので最後まで見てください。

 

AFFINGER55で引用ボックスのデザインを変える手順

女性が作業する図

引用ボックスのデザイン変更は次の手順でおこないます。

 

とても簡単ですよ。

引用ボックスの変更手順

  1. デザインを探す
  2. CSSをコピペする
  3. AFFINGER5用にCSSを変更する
  4. 反映されてないときはデザイン部分もチェックする

 

まずはお気に入りのデザインを探しましょう。

 

当サイトの引用ボックスはサルワカさんの引用ボックスカスタマイズ集から発見しました。サルワカさんのデザイン集で気に入ったのがあれば、CSSをコピーしましょう。

 

そのままAFFINGER5の外観に行き、カスタマイズ追加CSSをクリック。先ほどコピーしたCSSを張りつけます。

affinger5引用ボックスのCSS

このとき、念のためバックアップを取っておくことをおすすめします。

 

しかし、このままではAFFINGER5の場合きちんと反映されません。
そのため以下のようにすべてのblockquoteの前に.postを追加してください。

AFFINGER5引用ボックスのCSS調整用

 

終わったら、実際に引用ボックスがカスタマイズされているか確認してみましょう。

 

とくになにもなければこれで終了です。

 

まれに反映されてないときがありますが、そのときは同じくカスタマイズから各テキストとhタグ(見出し)引用部分の背景色で微調整してみてください。

 

引用ボックスをもう少しデザインしたいときは、先ほどコピーしたCSSのbackgroundやcolorのあとのカラーコードをこちらのサイトを参考にして変更してみてください。

 

paddingやpositionといった部分は素人の人がむやみにいじくるのはおススメしません。

 

参考までに当サイトのCSSを載せておきます。(コピペOKです)

 CSS
.post blockquote {
position: relative;
padding: 5px 15px 5px 55px;
box-sizing: border-box;
font-style: italic;
color: #464646;
background: #f5f5f5;
}
.post blockquote:before{
display: inline-block;
position: absolute;
top: 0;
left: 8px;
width: 38px;
height: 30px;
text-align: center;
content: "\f10d";
font-family: FontAwesome;
color: #FFF;
font-size: 18px;
line-height: 30px;
background: #b94047;
font-weight: 900;
}
.post blockquote:after{
content: '';
position: absolute;
left: 8px;
top: 30px;
height: 0;
width: 0;
border-left: 19px solid #b94047;
border-right: 19px solid #b94047;
border-bottom: 10px solid transparent;
}
.quote23 blockquote p {
position: relative;
padding: 0;
margin: 10px 0;
z-index: 3;
line-height: 1.7;
}
.post blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}

 

引用ボックスの使うときの注意点

注意を促す人の図

当たり前ですが引用ボックスは正しく使いましょう。

 

他人の記事をパクったものをそのままのせると、ペナルティを受けSEO的にもマイナスになるので注意してください。

 

引用ボックスを使うときは以下のことを記載しましょう。

  • 引用した文章
  • 引用元の明示

 

引用元の明示については以下のことを書けばOKです。

 

  • ネットなどからの引用なら 「出典:サイトURL」
  • 書籍などの引用なら 「著者名 書籍名 ページ数」

 

正しく引用ボックスを使って、他人に記事をパクられたなどと言われトラブルになってしまうのを防ぎましょう。

 

 AFFINGER5の引用ボックスをカスタマイズしておしゃれにしよう

おしゃれな3人の男性の図

今回は引用ボックスのカスタマイズについて紹介しました。

 

AFFINGER5は設定が多く、始めのうちはなかなか辛い部分もあると思います。

 

しかし、デザインをカスタマイズすることで、差別化にもなり読者にとっても居心地のいいサイトに仕上がります。

 

大変ですが、1つずつ自分の気に入るように細かな部分をデザインしてみてください。

 

今回は以上です。ありがとうございました。

関連記事【AFFNGER5のレビュー】メリットとデメリットを使用者が解説

-AFFINGER

Copyright © Lytton Blog