当サイトではアフィリエイトプログラムを利用してサービスを紹介しています。

AFFINGER6 ブログ運営

【超簡単】5分でAFFINGER6の引用ボックスのカスタマイズ方法を解説

AFFINGER6
悩んでいる人
AFFINGER6で引用ボックスのデザインを変えたいんだけど、HTMLやCSSコードが必要みたい。コードでデザインを変えたことがないので、誰でもわかるような解説をしてほしいな。

 

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

 

記事の内容

  • カスタマイズ方法5ステップ
  • うまく反映されない時の対処法
  • 最終奥義

 

プロフィール

プロフィール

よっしー(@yosshiblog

この記事を書いている僕はブログ歴1年3か月の高卒ブロガーです。1つ目の超特化ブログで月間1万PVを継続しています。

 

今回は、引用ボックスのカスタマイズ方法について解説します。

AFFINGER6に標準されている引用ボックスではなく、以下のコードを使った引用ボックスですので間違いが無いようにしてください。

 

引用ボックスのHTMLコード

<blockquote>
<p>ここに引用する文を書きます。</p>
<p>引用元</p>
</blockquote>

 

上記のコードを使うことで、以下のように表示されます。

引用ボックス

引用ボックス

 

HTMLコードと、CSSコードが出てきますが、反映されない時に対処法や注意点など詳しく解説します。

 

記事の後半には、どうしてもカスタマイズされない時の最終奥義を伝授しますので。最後までご覧ください。

AFFINGER6をさっそく導入したい方は、3ステップで分かりやすく解説をしているのでこちらの「AFFINGER6の導入方法」からご覧ください。

超分かりやすく解説をするので、頑張ってカスタマイズしていきましょう!
yosshi

 

HTMLコードやCSSコードを触りたくないという方は、最終奥義:背景の色を変えるだけからご覧ください。

アフィンガー引用ボックスのカスタマイズ方法5ステップ

アフィンガー引用ボックスのカスタマイズ方法5ステップ

 

アフィンガーの引用ボックスは、以下の手順でカスタマイズ出来ます。

  1. AddQuicktagの導入、HTMLコードの登録
  2. バックアップ
  3. サルカワさんのサイトから引用ボックス決め
  4. 自サイトの追加CSSに貼り付け
  5. 反映確認

順に解説をします。

 

ステップ①:AddQuicktagの導入、HTMLコードの登録

 

まずは、AddQuicktagというプラグインを導入していきましょう。

 

AddQuicktag

AddQuicktag

 

プラグイン追加から「AddQuicktag」で検索をして、ダウンロードと有効化をしてください。

 

有効化が完了したらAddQuicktagの設定画面を開いて、冒頭で紹介したHTMLコードをプラグインに保存していきます。

 

AddQuicktagの設定

AddQuicktagの設定

  1. ボタン名とラベル名に「引用ボックス」と入力
  2. 開始タグに<blockquote><p>ここに引用する文を書きます。</p><p>引用元</p>と貼り付ける
  3. 終了タグに</blockquote>と貼り付ける
  4. 一番右にチェックをすると、すべての欄にチェックが入る

 

上記のように入力が完了したら、「変更を保存」をクリック。

 

閲覧できませんと表示された場合

閲覧できませんと表示された場合

保存が出来ない場合

 

これはレンタルサーバーの「WAF」というセキュリティ対策が発動しているのが原因です。

 

ConoHa WINGへログインをして、以下のようにWAF設定を「OFF」にしてください。

 

WAF設定

WAF設定

  1. 設定したいサイトに切り替え(すでに切り替わっているのなら不要)
  2. サイト設計をクリック
  3. サイトセキュリティをクリック
  4. WAFをクリック
  5. WAFの利用設定を「OFF」にする

 

上記のように設定が完了したら、先ほどのAddQuicktag設定に戻って「変更を保存」をクリックしてみましょう。

 

保存が完了したら、すぐにWAFの利用設定を「ON」にしましょう。

ONにし忘れると、攻撃されるのでご注意を
yosshi

 

ステップ②:BackWPupでデータのバックアップ

BackWPup

 

BackWPupとは、WordPressのデータを定期的にバックアップしてくれるプラグインです。

 

定期的にバックアップしてくれる機能がありますが、以下のタイミングでバックアップする必要があります。

  • HTML、CSSコードを触る時
  • カスタマイズの前
  • WordPressのアップデート前

 

バックアップをしておかないと、データが消えた時瞬間0から作り直す羽目になります。

なので、必ずバックアップはしておきましょう。

 

BackWPupのバックアップ方法については、【BackWPup】WordPressのデータをバックアップする方法を徹底解説で詳しく解説をしているので、どうぞ。

上記事の「手順③:手動バックアップ」という所で解説をしているよ
yosshi

 

ステップ③:サルカワさんのサイトから引用ボックス決め

 

引用ボックスのデザインは、「サルカワさん」と言う方がある程度作ってくれているので、その中から選びます。

 

>>CSSで作る!魅力的な引用デザインのサンプル30(blockquote)

 

上記事は、CSSのコピペで使える引用ボックスデザインのサンプル30個が記載されているサイトです。ブログ初心者の方には難しいかもしれませんが、慣れれば自分でデザインをいじることが出来ます。

 

Font Awesomeを導入しておこう

Font Awesome

Font Awesome有効化

 

プラグインの新規追加から「Font Awesome」をインストールして有効化をしてください。

Font Awesomeを有効化するだけで使える引用ボックスが増えるので、すべてのデザインで比較したい方は導入をしておいてください。

 

こちらのプラグインは導入するだけで完了ですので、設定はしなくて大丈夫です。

 

30個の中から自分の好みのデザインを探したら、ボックスサンプルの下にCSSコードがあるのでコピーをしていきましょう。

 

CSSをコピー

CSSをコピー

 

コピーが完了したら、次のステップで貼り付けしていくよ~
yosshi

ステップ④:自サイトの追加CSSに貼り付け

 

先ほど登録したHTMLコードの引用ボックスを見ながら設定していきますので、投稿や固定記事何でもいいので引用ボックスを入力して更新させてください。

 

引用ボックスカスタマイズ

引用ボックスカスタマイズ

 

「外観」→「カスタマイズ」→「追加CSS」の順番に選択をして上記のようにCSS入力画面を表示させたら、先ほどコピーしたものをペーストしていきます。

 

CSSコードを追加していく

CSSコードを追加していく

.post blockquote {
position: relative;
padding: 5px 12px 5px 56px;
box-sizing: border-box;
font-style: italic;
color: #464646;
background: #f0f7ff;
}

.post blockquote:before{
display: inline-block;
position: absolute;
top: 50%;
left: 10px;
width: 36px;
height: 36px;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
content: "\f10d";
font-family: FontAwesome;
color: #FFF;
font-size: 20px;
line-height: 36px;
background: #a5d7ff;
border-radius: 50%;
font-weight: 900;
}

.post 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;
}

 

blockquoteの前に「.post」と入力していきましょう。

.postと入力していくと段々デザインが変わっていきますが、入力しただけではサルカワさんのデザイン通りにはなりません。

 

反映されていない

反映されていない

反映されていない

実際に確認してみると、、、

 

実際に記事を見に行ってみると、引用ボックスの中が白くなっていて反映されていませんね。

 

デザインが反映されない原因としては、AFFINGER6自体のデザインが優先的に表示されているからです。

対処法として、「!important」というコードを入力していきます。

 

1つ注意点があるんですが、「!important」のコードはAFFINGER6のデフォルトのデザインより優先してしまうため、自分でデザインを変えることが出来なくなってしまいます。

 

!importantとは簡単に言うと「最優先」という意味のコードです。

上記のコードを入力することで、Wordpressテーマの元々のデザイン関係なく優先されるようになります。

 

background: #f0f7ff;」というコードが2か所あるので探し出し、以下のように!importantを入力していきましょう。

!important

!important

完成形は、「background: #f0f7ff!important;」と言う風になります。

 

入力が完了したら、「公開」をクリック。

次のステップで反映されているかを確認しましょう。

 

ステップ⑤:反映確認

 

前のステップで設定が完了したら、実際に反映確認をしていきます。

 

サルカワさんのデザイン通りになっているかという点と、リンク先へ飛べるかを確認しましょう。

※良く照らし合わせてみるとデザインが違うということがあります。

 

引用ボックス

引用ボックス

 

また、カラーコードをいじれば自分の好みの色にカスタマイズすることが出来ます。

カラーコード一覧表」でお好みの色を探しながら、カスタマイズをしてみてくださいませ。

 

うまく反映されない時の対処法

うまく反映されない時の対処法

上手く反映されない時の対処法は、以下の通り。

  1. Font Awesomeを導入していない
  2. 文字が赤くなっている
  3. 前のコードを消している
  4. 全角スペースを使っている
  5. AFFINGER6のキャッシュ削除

順に解説をします。

 

対処法①:Font Awesomeを導入していない

Font Awesome

Font Awesome

 

先ほども解説しましたが、引用ボックスのデザインが上手く反映されないならFont Awesomeを導入したほうが早い可能性があります。

 

Font Awesomeを導入していないのに、Font Awesome用のCSSコードをコピペしていたり、その逆もあり得ます。

そうなったら、頭がパンクしてしまうのでまずはFont Awesomeを導入して原因を潰していきましょう。

 

Font Awesomeは導入するだけで、設定することは何もないよ!
yosshi

対処法②:文字が赤くなっている

 

CSSコードの文字が赤くなっていると、上手く反映されません。

CSSコードの文字が赤くなるということは「入力間違い」の可能性が高いです。

 

入力間違い

入力間違い

 

上記の場合、上のコードの最後にあるはずの「}」が抜けていましたね。

 

追加をしたら赤文字が無くなり、しっかりと反映されました。

 

余談:CSSは不用意にメモしない

 

CSSコードの役割を記録するため、追加CSS内にメモをするのが一般的です。

ですが、永遠と反映されない可能性があります。

 

CSSのメモはしない

CSSのメモはしない

 

/*-- 引用ボックス --*/」というコードのせいで、公開することが出来ません。

 

慣れていないうちは、メモ用のコードを入力するのはやめておきましょう。

スマホで写真を撮って書き込むのがオススメだよ!
yosshi

対処法③:全角スペースを使っている

 

blockquoteの前に「.post」と入れた時に、全角スペースになっている可能性があります。

 

半角か全角か

半角か全角か

 

間違えて全角スペースをしてしまっても、赤文字で異常と判断されません。

公開は出来るのになぜか反映されない状況になるので、真っ先に疑いましょう。

 

他にも全角スペースで入力してしまっていないか確認しよう!
yosshi

対処法④:AFFINGER6のキャッシュ削除

 

キャッシュが残ってしまって反映されていない可能性があります。

 

キャッシュとは、よく利用するデータはあらかじめWordpressに取得しておくことで、読み込み時間の短縮する機能です。

つまり、前のデータが残っているため、CSSコードが反映されないというわけですね。

 

※キャッシュの削除をする時は、必ずバックアップをしておきましょう。

 

キャッシュの削除

キャッシュの削除

 

WordPressの内で有効化されている最適化プラグインで最適化の設定をしていれば、上画像のようにキャッシュの削除を行えます。

必ずバックアップを取ってからキャッシュの削除をしておきましょう。

 

また、上記のようなプラグインはサイト表示速度を上げるために必須のものです。

 

まだ導入していないよと言う方は、こちらのAFFINGER6はサイト表示速度が遅い?【対策すれば問題なく使える】で詳しく解説をしているので、どうぞ。

サイト表示速度は、上位表示されるための重要な要因なのでしっかり対策をしよう!
yosshi

 

最終奥義:背景の色を変えるだけ

最終奥義:背景の色を変えるだけ

 

今まで解説したHTML、CSSコードを使ったカスタマイズが上手くいかない方や、コードに触れたくないという方は最終奥義があるので安心してください。

 

それは、ただ配色を変えるだけの設定です。

悩んでいる人
それを早く言ってよ

 

使用するボックスは、以下の通り。

 

引用風

引用風

 

引用風ボックスを設置したら、反映確認をしてみましょう。

 

反映確認

反映確認

 

デザインされていない引用風ボックスで、引用しているのかどうか分かりにくいですね。背景色を変えていきます。

 

「外観」→「カスタマイズ」→「見出しタグ(hx)/テキスト」→「引用部分の背景色」の順番に選択をしてください。

 

背景色の変更

背景色の変更

 

上画像のように背景色を変更していきましょう。

初心者ブロガー
一気に引用ボックスみたいになった!

 

先ほども紹介した「カラーコード一覧表」を参考にお好みの色を選択してください。

まとめ:引用ボックスもこだわって自分だけのブログへ

まとめ:引用ボックスもこだわって自分だけのブログへ

 

今回は「AFFINGER6の引用ボックスのカスタマイズ方法」について解説をしました。

AFFINGER6の引用ボックスはデフォルトでは何もデザインが無いので、自分なりにカスタマイズしていく必要があります。

 

私自身、カスタマイズをしようとしたときに本記事に載っている情報が中々見つからなくて苦労しましたが、躓くであろうことをすべてまとめたので誰でも簡単に設定することが出来ます。

もし反映されなかったりしたら、お気軽にお問い合わせください。

 

今回は、以上です。

関連記事【保存版】ズボラAFFINGER6使いのデザインやカスタマイズをすべて公開

関連記事初心者にお勧めな超特化ブログの解説【誰でも半年で収益化が可能】

  • この記事を書いた人

yosshi

ブラックなサイト運営を解説しています。
【経歴】高卒で大手企業に就職▶︎2サイト運営▶︎今のSEOで正攻法では戦えないと気づく▶︎中古ドメインとInstagram運用
インフルエンサーを信じるなっ
とにかく被リンク獲得せいっ
ブロガー界隈は闇が深いでっ

-AFFINGER6, ブログ運営