ブログ運営

AFFINGER5(アフィンガー)の引用部分のカスタマイズ方法

AFFINGER5の引用部分をカスタマイズしました。デフォルトでの引用部分は以下の状態で本当に見づらいわ、個性もないし(笑)。

AFFINGER5 | 標準の引用部分

AFFINGER5 | 標準の引用部分

引用部分の背景色はカスタマイズ機能で変更が可能です。WordPressのダッシュボードから、外観⇒カスタマイズ⇒[+]各テキストとh見出し⇒引用部分の背景色、とあるので好きな色に変更してください。

問題は引用符(マーク)なんですよ白色の。このホワイト引用マークは元々AFFINGER5テーマに仕込まれているイメージデータを使っているのでカスタマイズから色の変更は不可です。で、色を変えたいなら引用符のデータを変えてしまえ!という方法をご案内。

引用を使っている記事でブラウザF12(開発者ツール)を選択すると以下の通り。

AFFINGER5 | blockquoteのCSSコード

AFFINGER5 | blockquoteのCSSコード

右側の赤で囲った個所の下赤線部が引用マークの在り処を指しています(開発者ツールで左側に表示しているページのCSSコードを表示させています)。上のスクショでは途中までしか表示されていませんが//lifeprotocol.net/public_html/wp/wp-content/themes/affinger5/images/quote.pngとある。

このquote.pngファイルが標準で表示されるホワイト引用マークです。実際のサイズは25px*25pxと小さいので拡大したのが以下の状態、おぉ、確かにこいつだ。

AFFINGER5 | 標準の引用符イメージ・quote.png

AFFINGER5 | 標準の引用符イメージ・quote.png

ここでlifeprotocol.net/public_html/はこのサイトのドメイン名と設置してあるレンタルサーバxServerの仕様でこうなっているので注意して下さい、あなたのブログとは違います。/wp-content以降は同じ場所です。

あとはFTPツールを使ってこのquote.pngを別のデータに入れ替えるだけ。この時の注意点はサイズが25px*25px、ファイル名はquote、ファイル形式は透過データのpngであることの3点。

特に25px四方の中央から少し右寄りの位置に引用符がおいてあることが重要で、このマークの位置を大胆に変えてしまうと後でパディングやら見た目の調整に手間がかかります。また当然ながらファイル名間違えると読み込んでくれませんのでお間違えなきよう。

新しく作成した引用符 サイズは25*25px

新しく作成したquote.png サイズは25*25px

この方法でブログのイメージカラーにあった引用マークに変更した結果がこれ。

どうや!引用部分、見やすくなっただろう?

引用符のデータはフリー素材のものを利用しています。あと背景は上述の標準のカスタマイズ機能から変更しました。

これ以外にも「.post blockquote」のCSSを書き直す方法があります。ただこの場合でもAFFINGER5標準のイメージデータquote.pngを指定している限りは見づらい白色引用マークが登場しつづけるのでやるのであればコードごっそり変更してWEBアイコンを使うことになるかなぁ。

-ブログ運営
-,

Copyright© らいぷろ見聞録 , 2020 All Rights Reserved.