こんな悩みを解決します。
記事の内容
- カスタマイズ方法5ステップ
- うまく反映されない時の対処法
- 最終奥義
プロフィール
よっしー（@yosshiblog）
この記事を書いている僕はブログ歴１年３か月の高卒ブロガーです。1つ目の超特化ブログで月間1万ＰＶを継続しています。
今回は、引用ボックスのカスタマイズ方法について解説します。
AFFINGER6に標準されている引用ボックスではなく、以下のコードを使った引用ボックスですので間違いが無いようにしてください。
引用ボックスのHTMLコード
<blockquote>
<p>ここに引用する文を書きます。</p>
<p>引用元</p>
</blockquote>
上記のコードを使うことで、以下のように表示されます。
引用ボックス
HTMLコードと、CSSコードが出てきますが、反映されない時に対処法や注意点など詳しく解説します。
記事の後半には、どうしてもカスタマイズされない時の最終奥義を伝授しますので。最後までご覧ください。
AFFINGER6をさっそく導入したい方は、３ステップで分かりやすく解説をしているのでこちらの「AFFINGER6の導入方法」からご覧ください。
HTMLコードやCSSコードを触りたくないという方は、最終奥義：背景の色を変えるだけからご覧ください。
アフィンガー引用ボックスのカスタマイズ方法5ステップ
アフィンガーの引用ボックスは、以下の手順でカスタマイズ出来ます。
- AddQuicktagの導入、HTMLコードの登録
- バックアップ
- サルカワさんのサイトから引用ボックス決め
- 自サイトの追加CSSに貼り付け
- 反映確認
順に解説をします。
ステップ①：AddQuicktagの導入、HTMLコードの登録
まずは、AddQuicktagというプラグインを導入していきましょう。
AddQuicktag
プラグイン追加から「AddQuicktag」で検索をして、ダウンロードと有効化をしてください。
有効化が完了したらAddQuicktagの設定画面を開いて、冒頭で紹介したHTMLコードをプラグインに保存していきます。
AddQuicktagの設定
- ボタン名とラベル名に「引用ボックス」と入力
- 開始タグに<blockquote><p>ここに引用する文を書きます。</p><p>引用元</p>と貼り付ける
- 終了タグに</blockquote>と貼り付ける
- 一番右にチェックをすると、すべての欄にチェックが入る
上記のように入力が完了したら、「変更を保存」をクリック。
閲覧できませんと表示された場合
保存が出来ない場合
これはレンタルサーバーの「WAF」というセキュリティ対策が発動しているのが原因です。
ConoHa WINGへログインをして、以下のようにWAF設定を「OFF」にしてください。
WAF設定
- 設定したいサイトに切り替え（すでに切り替わっているのなら不要）
- サイト設計をクリック
- サイトセキュリティをクリック
- WAFをクリック
- WAFの利用設定を「OFF」にする
上記のように設定が完了したら、先ほどのAddQuicktag設定に戻って「変更を保存」をクリックしてみましょう。
保存が完了したら、すぐにWAFの利用設定を「ON」にしましょう。
ステップ②：BackWPupでデータのバックアップ
BackWPupとは、WordPressのデータを定期的にバックアップしてくれるプラグインです。
定期的にバックアップしてくれる機能がありますが、以下のタイミングでバックアップする必要があります。
- HTML、CSSコードを触る時
- カスタマイズの前
- WordPressのアップデート前
バックアップをしておかないと、データが消えた時瞬間0から作り直す羽目になります。
なので、必ずバックアップはしておきましょう。
BackWPupのバックアップ方法については、【BackWPup】WordPressのデータをバックアップする方法を徹底解説で詳しく解説をしているので、どうぞ。
ステップ③：サルカワさんのサイトから引用ボックス決め
引用ボックスのデザインは、「サルカワさん」と言う方がある程度作ってくれているので、その中から選びます。
>>CSSで作る！魅力的な引用デザインのサンプル30（blockquote）
上記事は、CSSのコピペで使える引用ボックスデザインのサンプル30個が記載されているサイトです。ブログ初心者の方には難しいかもしれませんが、慣れれば自分でデザインをいじることが出来ます。
Font Awesomeを導入しておこう
Font Awesome有効化
プラグインの新規追加から「Font Awesome」をインストールして有効化をしてください。
Font Awesomeを有効化するだけで使える引用ボックスが増えるので、すべてのデザインで比較したい方は導入をしておいてください。
こちらのプラグインは導入するだけで完了ですので、設定はしなくて大丈夫です。
30個の中から自分の好みのデザインを探したら、ボックスサンプルの下にCSSコードがあるのでコピーをしていきましょう。
CSSをコピー
ステップ④：自サイトの追加CSSに貼り付け
先ほど登録したHTMLコードの引用ボックスを見ながら設定していきますので、投稿や固定記事何でもいいので引用ボックスを入力して更新させてください。
引用ボックスカスタマイズ
「外観」→「カスタマイズ」→「追加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」というコードを入力していきます。
１つ注意点があるんですが、「!important」のコードはAFFINGER6のデフォルトのデザインより優先してしまうため、自分でデザインを変えることが出来なくなってしまいます。
!importantとは簡単に言うと「最優先」という意味のコードです。
上記のコードを入力することで、Wordpressテーマの元々のデザイン関係なく優先されるようになります。
「background: #f0f7ff;」というコードが2か所あるので探し出し、以下のように!importantを入力していきましょう。
!important
完成形は、「background: #f0f7ff!important;」と言う風になります。
入力が完了したら、「公開」をクリック。
次のステップで反映されているかを確認しましょう。
ステップ⑤：反映確認
前のステップで設定が完了したら、実際に反映確認をしていきます。
サルカワさんのデザイン通りになっているかという点と、リンク先へ飛べるかを確認しましょう。
※良く照らし合わせてみるとデザインが違うということがあります。
引用ボックス
また、カラーコードをいじれば自分の好みの色にカスタマイズすることが出来ます。
「カラーコード一覧表」でお好みの色を探しながら、カスタマイズをしてみてくださいませ。
うまく反映されない時の対処法
上手く反映されない時の対処法は、以下の通り。
- Font Awesomeを導入していない
- 文字が赤くなっている
- 前のコードを消している
- 全角スペースを使っている
- AFFINGER６のキャッシュ削除
順に解説をします。
対処法①：Font Awesomeを導入していない
Font Awesome
先ほども解説しましたが、引用ボックスのデザインが上手く反映されないならFont Awesomeを導入したほうが早い可能性があります。
Font Awesomeを導入していないのに、Font Awesome用のCSSコードをコピペしていたり、その逆もあり得ます。
そうなったら、頭がパンクしてしまうのでまずはFont Awesomeを導入して原因を潰していきましょう。
対処法②：文字が赤くなっている
CSSコードの文字が赤くなっていると、上手く反映されません。
CSSコードの文字が赤くなるということは「入力間違い」の可能性が高いです。
入力間違い
上記の場合、上のコードの最後にあるはずの「}」が抜けていましたね。
追加をしたら赤文字が無くなり、しっかりと反映されました。
余談：CSSは不用意にメモしない
CSSコードの役割を記録するため、追加CSS内にメモをするのが一般的です。
ですが、永遠と反映されない可能性があります。
CSSのメモはしない
「/*-- 引用ボックス --*/」というコードのせいで、公開することが出来ません。
慣れていないうちは、メモ用のコードを入力するのはやめておきましょう。
対処法③：全角スペースを使っている
blockquoteの前に「.post」と入れた時に、全角スペースになっている可能性があります。
半角か全角か
間違えて全角スペースをしてしまっても、赤文字で異常と判断されません。
公開は出来るのになぜか反映されない状況になるので、真っ先に疑いましょう。
対処法④：AFFINGER６のキャッシュ削除
キャッシュが残ってしまって反映されていない可能性があります。
キャッシュとは、よく利用するデータはあらかじめWordpressに取得しておくことで、読み込み時間の短縮する機能です。
つまり、前のデータが残っているため、CSSコードが反映されないというわけですね。
※キャッシュの削除をする時は、必ずバックアップをしておきましょう。
キャッシュの削除
WordPressの内で有効化されている最適化プラグインで最適化の設定をしていれば、上画像のようにキャッシュの削除を行えます。
必ずバックアップを取ってからキャッシュの削除をしておきましょう。
また、上記のようなプラグインはサイト表示速度を上げるために必須のものです。
まだ導入していないよと言う方は、こちらのAFFINGER6はサイト表示速度が遅い？【対策すれば問題なく使える】で詳しく解説をしているので、どうぞ。
最終奥義：背景の色を変えるだけ
今まで解説したHTML、CSSコードを使ったカスタマイズが上手くいかない方や、コードに触れたくないという方は最終奥義があるので安心してください。
それは、ただ配色を変えるだけの設定です。
使用するボックスは、以下の通り。
引用風
引用風ボックスを設置したら、反映確認をしてみましょう。
反映確認
デザインされていない引用風ボックスで、引用しているのかどうか分かりにくいですね。背景色を変えていきます。
「外観」→「カスタマイズ」→「見出しタグ（hx）/テキスト」→「引用部分の背景色」の順番に選択をしてください。
背景色の変更
上画像のように背景色を変更していきましょう。
先ほども紹介した「カラーコード一覧表」を参考にお好みの色を選択してください。
まとめ：引用ボックスもこだわって自分だけのブログへ
今回は「AFFINGER6の引用ボックスのカスタマイズ方法」について解説をしました。
AFFINGER6の引用ボックスはデフォルトでは何もデザインが無いので、自分なりにカスタマイズしていく必要があります。
私自身、カスタマイズをしようとしたときに本記事に載っている情報が中々見つからなくて苦労しましたが、躓くであろうことをすべてまとめたので誰でも簡単に設定することが出来ます。
もし反映されなかったりしたら、お気軽にお問い合わせください。
今回は、以上です。
